Hub / System / Templates
07 — Templates

Page Templates.

와이어프레임에서 구현까지 — 6가지 페이지 골격을 복사하여 즉시 시작합니다.

Dashboard Explorer Landing List / Table Detail Form
01

Dashboard

사이드바 + KPI 레일 + 카드 그리드로 구성된 관리 대시보드 레이아웃입니다.
02

Explorer

검색 + 필터 사이드바와 상세 패널로 구성된 탐색기 레이아웃입니다.
03

Landing

히어로 + 마퀴 + 콘텐츠 섹션 + CTA 배너로 구성된 랜딩 페이지입니다.
04

List / Table

필터 바 + 정렬 가능한 데이터그리드로 구성된 목록 페이지입니다.
05

Detail

브레드크럼 + 이미지/정보 2단 + 관련 항목 그리드의 상세 페이지입니다.
06

Form

필드 라벨 + 유효성 검사 + 제출 CTA가 포함된 입력 폼 페이지입니다.
TEMPLATE 01

Dashboard

사이드바 네비게이션, KPI 레일, 카드 그리드를 포함하는 관리 대시보드 골격입니다. Dealer ERP의 업무홈 구조를 기반으로 합니다.

와이어프레임
NAV
Item
Active
Item
HEADER
KPI
KPI
KPI
KPI
Card
Card
Card
HTML 스니펫
<div class="ch-sidebar-layout">
  <aside class="ch-sidebar-layout__sidebar">
    <div style="padding:var(--space-5)">
      <div style="font-family:var(--mono);...">NAVIGATION</div>
      <div class="ch-sidebar-nav__item is-active">Dashboard</div>
      <div class="ch-sidebar-nav__item">Section 2</div>
    </div>
  </aside>
  <main class="ch-sidebar-layout__main">
    <div class="ch-section-header">DASHBOARD TITLE</div>
    <div class="ch-kpi-rail ch-mt-4">
      <div class="ch-kpi-rail__item">
        <div class="ch-kpi-rail__value">0</div>
        <div class="ch-kpi-rail__label">METRIC 1</div>
      </div>
      <!-- ... repeat for 2, 3, 4 -->
    </div>
    <div class="ch-grid ch-grid--auto ch-mt-6">
      <div class="ch-card">Card 1</div>
      <div class="ch-card">Card 2</div>
      <div class="ch-card">Card 3</div>
    </div>
  </main>
</div>
사용 토큰
Token / ClassValueDescription
--sidebar-width260px사이드바 너비
.ch-sidebar-layoutgrid: sidebar + main사이드바 레이아웃 컨테이너
.ch-kpi-rail4-col gridKPI 지표 레일
.ch-grid--autoauto-fill, minmax(280px,1fr)자동 카드 그리드
--charcoal#1A1A1A헤더 배경
--space-524px사이드바 내부 패딩
반응형 가이드
360px

사이드바 숨김 (햄버거 토글). KPI 레일 2x2 그리드. 카드 1열 스택.

768px

사이드바 축소 (아이콘만). KPI 레일 4열 유지. 카드 2열 그리드.

1024px

풀 사이드바 260px 표시. KPI 레일 4열. 카드 3열 이상 auto-fill.

TEMPLATE 02

Explorer

검색과 필터가 있는 사이드바 + 상세 패널(탭 포함)로 구성된 탐색기 레이아웃입니다. Artists DB 페이지의 구조를 기반으로 합니다.

와이어프레임
Search
FILTERS
Filter 1
Filter 2
LIST
Item 1
Item 2
Item 3
Tab 1 Tab 2 Tab 3
Detail Title
Field: Value
Field: Value
Field: Value
Field: Value
HTML 스니펫
<div class="ch-sidebar-layout">
  <aside class="ch-sidebar-layout__sidebar">
    <div style="padding:var(--space-4)">
      <input class="ch-input ch-input--sm" placeholder="Search...">
      <div>FILTERS</div>
      <button class="ch-btn ch-btn--ghost ch-btn--sm">Filter 1</button>
      <div>RESULTS</div>
      <div class="ch-list">
        <div class="ch-list__item is-active">Item 1</div>
        <div class="ch-list__item">Item 2</div>
      </div>
    </div>
  </aside>
  <main class="ch-sidebar-layout__main">
    <div class="ch-tabs">
      <button class="ch-tab is-active">Overview</button>
      <button class="ch-tab">Details</button>
    </div>
    <h1>Detail Title</h1>
    <div class="ch-grid ch-grid--2">
      <div class="ch-card">Info Block 1</div>
      <div class="ch-card">Info Block 2</div>
    </div>
  </main>
</div>
사용 토큰
Token / ClassValueDescription
--sidebar-width260px사이드바 너비
.ch-tabs / .ch-tabflex row상세 패널 탭 네비게이션
.ch-list__itempadding + hover사이드바 목록 항목
.ch-input--smheight: 32px검색 입력 필드 (소형)
.ch-grid--22-col grid상세 영역 2열 그리드
반응형 가이드
360px

사이드바 오버레이 드로어로 전환. 상세 패널 전체 너비 표시. 탭 가로 스크롤.

768px

사이드바 200px 축소. 상세 패널 탭 유지. 그리드 1열로 스택.

1024px

풀 사이드바 260px. 상세 패널 2열 그리드. 모든 탭 표시.

TEMPLATE 03

Landing

히어로 영역(100vh) + 마퀴 + 콘텐츠 섹션 + CTA 배너로 이루어진 프로모션/랜딩 페이지 골격입니다.

와이어프레임
Hero Title
Subtitle description
CTA
MARQUEE TICKER
SECTION TITLE
Feature
Feature
Feature
CTA BANNER
Action
HTML 스니펫
<div class="ch-hero-layout">
  <div class="ch-container--narrow" style="text-align:center">
    <h1 style="font-family:var(--serif);font-size:clamp(36px,6vw,64px);
        font-weight:700;color:var(--charcoal)">Page Title</h1>
    <p class="ch-text-muted ch-text-lg">Subtitle</p>
    <a class="ch-btn ch-btn--primary">Get Started</a>
  </div>
</div>
<div class="ch-marquee">
  <div class="ch-marquee__track">Ticker content...</div>
</div>
<div class="ch-section">
  <div class="ch-container">
    <div class="ch-grid ch-grid--3">
      <div class="ch-card">Feature 1</div>
      <div class="ch-card">Feature 2</div>
      <div class="ch-card">Feature 3</div>
    </div>
  </div>
</div>
<div class="ch-cta-banner">
  <h2>Ready to start?</h2>
  <a class="ch-btn ch-btn--primary">Action</a>
</div>
사용 토큰
Token / ClassValueDescription
--serifLibre Baskerville히어로 타이틀 폰트
.ch-hero-layoutmin-height: 100vh, flex center풀스크린 히어로 래퍼
.ch-container--narrowmax-width: 680px좁은 콘텐츠 컨테이너
.ch-sectionpadding: 120px 0풀 섹션 래퍼
.ch-grid--33-col grid3열 피처 그리드
.ch-cta-bannerdark bg, centeredCTA 배너 섹션
반응형 가이드
360px

히어로 타이틀 clamp(36px). 피처 그리드 1열 스택. CTA 버튼 전체 너비.

768px

히어로 중간 크기. 피처 그리드 2열. 마퀴 속도 유지.

1024px

히어로 타이틀 최대 64px. 피처 그리드 3열. 풀 레이아웃 표시.

TEMPLATE 04

List / Table

필터 바 + 정렬 가능한 데이터그리드로 구성된 목록 페이지입니다. 거래 내역, 작가 목록 등 대량 데이터 표시에 적합합니다.

와이어프레임
LIST TITLE
Search
Filter 1 Filter 2 Filter 3
Column 1
Column 2
Column 3
Status
Data
Value
Value
Active
Data
Value
Value
Pending
Data
Value
Value
Active
HTML 스니펫
<div class="ch-container">
  <div class="ch-section-header">LIST TITLE</div>
  <div class="ch-flex ch-flex--between ch-mt-4">
    <div class="ch-flex ch-flex--gap-sm">
      <button class="ch-btn ch-btn--ghost ch-btn--sm">Filter 1</button>
      <button class="ch-btn ch-btn--ghost ch-btn--sm">Filter 2</button>
    </div>
    <input class="ch-input ch-input--sm" placeholder="Search...">
  </div>
  <table class="ch-datagrid ch-mt-4">
    <thead><tr>
      <th>Column 1</th><th>Column 2</th><th>Status</th>
    </tr></thead>
    <tbody><tr>
      <td>Data</td>
      <td class="mono">Value</td>
      <td><span class="ch-badge ch-badge--green">Active</span></td>
    </tr></tbody>
  </table>
</div>
사용 토큰
Token / ClassValueDescription
.ch-datagridfull-width table데이터그리드 테이블
--datagrid-header-bgvar(--alpha-4)테이블 헤더 배경
--datagrid-row-hovervar(--alpha-4)행 호버 배경
.ch-btn--ghosttransparent bg필터 버튼 스타일
.ch-badge--greensuccess colors상태 배지
.ch-flex--betweenjustify: space-between필터 바 레이아웃
반응형 가이드
360px

테이블 가로 스크롤. 필터 바 세로 스택. 검색 입력 전체 너비.

768px

테이블 주요 열 표시, 보조 열 숨김. 필터 바 가로 유지.

1024px

모든 열 표시. 필터 + 검색 한 줄 배치. 행 호버 효과 활성화.

TEMPLATE 05

Detail

브레드크럼 + 헤더 + 이미지/정보 2단 레이아웃 + 관련 항목 그리드로 구성된 상세 페이지입니다.

와이어프레임
Home / Category / Detail
IMAGE
4:3
Item Title
Description text goes here with details about the item.
Primary Secondary
RELATED ITEMS
Related
Related
Related
HTML 스니펫
<div class="ch-container">
  <nav style="font-family:var(--mono);font-size:var(--text-2xs);
       color:var(--text-muted);text-transform:uppercase;
       letter-spacing:0.08em;margin-bottom:var(--space-6)">
    Home / Category / <span style="color:var(--text);
    font-weight:600">Detail</span>
  </nav>
  <div class="ch-grid ch-grid--2">
    <div>
      <div style="aspect-ratio:4/3;background:var(--alpha-4)"></div>
    </div>
    <div class="ch-stack">
      <h1 style="font-size:var(--text-2xl);font-weight:700;
          color:var(--charcoal)">Item Title</h1>
      <p class="ch-text-muted">Description text</p>
      <div class="ch-flex ch-flex--gap-sm">
        <button class="ch-btn ch-btn--primary">Primary</button>
        <button class="ch-btn ch-btn--ghost">Secondary</button>
      </div>
    </div>
  </div>
  <div class="ch-section-header ch-mt-8">RELATED ITEMS</div>
  <div class="ch-grid ch-grid--3 ch-mt-4">
    <div class="ch-card">Related 1</div>
    <div class="ch-card">Related 2</div>
    <div class="ch-card">Related 3</div>
  </div>
</div>
사용 토큰
Token / ClassValueDescription
.ch-grid--22-col grid이미지 + 정보 2단 레이아웃
.ch-stackflex-direction: column; gap수직 스택 정보 영역
--text-2xlclamp(24px,3vw,32px)상세 타이틀 크기
.ch-btn--primaryred-brand bg주요 액션 버튼
.ch-grid--33-col grid관련 항목 그리드
--monoTASA Orbiter브레드크럼 폰트
반응형 가이드
360px

이미지/정보 1열 스택. 관련 항목 1열. 버튼 전체 너비.

768px

이미지/정보 2단 유지. 관련 항목 2열. 브레드크럼 축약.

1024px

풀 2단 레이아웃. 관련 항목 3열. 모든 요소 표시.

TEMPLATE 06

Form

필드 라벨, 유효성 검사, 제출 CTA가 포함된 입력 폼 페이지입니다. 좁은 컨테이너로 집중도를 높입니다.

와이어프레임
Form Title
Field Label
Placeholder text
Field Label
Placeholder text
Description
Textarea
Cancel Submit
HTML 스니펫
<div class="ch-container ch-container--narrow">
  <h1 style="font-size:var(--text-xl);font-weight:700;
      color:var(--charcoal);margin-bottom:var(--space-8)">
    Form Title
  </h1>
  <div class="ch-card">
    <div class="ch-field">
      <label class="ch-label">Field Label</label>
      <input class="ch-input" placeholder="Enter value">
    </div>
    <div class="ch-field">
      <label class="ch-label">Field Label</label>
      <input class="ch-input" placeholder="Enter value">
    </div>
    <div class="ch-field">
      <label class="ch-label">Description</label>
      <textarea class="ch-input"
        style="height:120px;resize:vertical"
        placeholder="Enter description"></textarea>
    </div>
    <div class="ch-flex"
         style="justify-content:flex-end;margin-top:var(--space-6)">
      <button class="ch-btn ch-btn--ghost">Cancel</button>
      <button class="ch-btn ch-btn--primary">Submit</button>
    </div>
  </div>
</div>
사용 토큰
Token / ClassValueDescription
.ch-container--narrowmax-width: 680px좁은 폼 컨테이너
.ch-fieldmargin-bottom: var(--space-5)폼 필드 래퍼
.ch-labelmono, uppercase, 11px필드 라벨
.ch-inputheight: var(--size-md-height)텍스트 입력 필드
.ch-btn--primaryred-brand bg제출 버튼
.ch-cardbg-card, border, padding폼 카드 래퍼
반응형 가이드
360px

컨테이너 전체 너비. 버튼 전체 너비 스택. 패딩 축소.

768px

최대 너비 제한 활성화. 버튼 우측 정렬 유지.

1024px

680px 중앙 정렬. 풀 패딩 및 여백 적용.