30 components

Components컴포넌트

No React. Each item is one set of gn- classes plus one block of markup, liftable with the copy button.React를 만들지 않는다. 각 항목은 gn- 클래스 한 벌과 복붙용 마크업 하나로 끝나고, 복사 버튼으로 그대로 가져갈 수 있다.

core코어

1313종

forms폼

88종

feedback · nav · deck피드백 · 내비 · 덱

1010종

heights높이

32 · 38 · 44

Button .gn-btn · -brand · -ghost · -danger · -sm/-lg/-block

<button class="gn-btn gn-btn-brand">Deploy</button>
<button class="gn-btn">Cancel</button>
<button class="gn-btn gn-btn-ghost">More</button>
<button class="gn-btn gn-btn-danger">Delete</button>
<button class="gn-btn" disabled>Disabled</button><button class="gn-btn gn-btn-brand">배포</button>
<button class="gn-btn">취소</button>
<button class="gn-btn gn-btn-ghost">더 보기</button>
<button class="gn-btn gn-btn-danger">삭제</button>
<button class="gn-btn" disabled>비활성</button>

IconButton · Icon .gn-iconbtn · .gn-icon · aria-label required.gn-iconbtn · .gn-icon · aria-label 필수

<button class="gn-iconbtn" aria-label="Next">
  <span class="gn-icon">&#8594;</span>
</button>

<button class="gn-iconbtn" aria-label="Run" aria-pressed="true">
  <span class="gn-icon">&#10095;</span>
</button><button class="gn-iconbtn" aria-label="Next다음">
  <span class="gn-icon">&#8594;</span>
</button>

<button class="gn-iconbtn" aria-label="Run실행" aria-pressed="true">
  <span class="gn-icon">&#10095;</span>
</button>

Card .gn-card + -head/-title/-desc/-body/-foot/-sep · -interactive · -accent

Pilo

A tool for running several agents from one terminal터미널에서 여러 에이전트를 지휘하는 도구

On hover only the border turns accent. The card does not lift.호버하면 테두리만 accent로 바뀐다. 카드는 뜨지 않는다.

in-318 · running

Unify token names토큰 이름 통일

<div class="gn-card gn-card-interactive">
  <div class="gn-card-head">
    <div class="gn-card-title">Pilo</div>
    <div class="gn-card-desc">One-line description</div>
  </div>
  <div class="gn-card-body">Body.</div>
  <div class="gn-card-foot">
    <button class="gn-btn gn-btn-sm gn-btn-brand">Run</button>
  </div>
</div><div class="gn-card gn-card-interactive">
  <div class="gn-card-head">
    <div class="gn-card-title">Pilo</div>
    <div class="gn-card-desc">한 줄 설명</div>
  </div>
  <div class="gn-card-body">본문.</div>
  <div class="gn-card-foot">
    <button class="gn-btn gn-btn-sm gn-btn-brand">실행</button>
  </div>
</div>

Badge · Tag .gn-badge -brand/-success/-warning/-danger/-info · -dot · .gn-tag

pilo done running failed info queued React Design System×

<span class="gn-badge gn-badge-brand">pilo</span>
<span class="gn-badge gn-badge-warning gn-badge-dot">running</span>

<span class="gn-tag" aria-selected="true">
  Design System<span class="gn-tag-x">&#215;</span>
</span>

Table .gn-table · -num (right aligned, tabular) · -empty.gn-table · -num(우측 정렬 · tabular) · -empty

id	task	state	elapsed
in-317	Fix HWPX line breakHWPX 줄바꿈 수정	done	3m 29s
in-318	Unify token names토큰 이름 통일	running	1m 04s
in-319	Port the deck template덱 템플릿 이식	queued	—

<table class="gn-table">
  <thead><tr>
    <th>id</th><th>task</th>
    <th class="gn-table-num">elapsed</th>
  </tr></thead>
  <tbody><tr>
    <td>in-317</td><td>Fix HWPX line break</td>
    <td class="gn-table-num">3m 29s</td>
  </tr></tbody>
</table><table class="gn-table">
  <thead><tr>
    <th>id</th><th>task</th>
    <th class="gn-table-num">elapsed</th>
  </tr></thead>
  <tbody><tr>
    <td>in-317</td><td>HWPX 줄바꿈 수정</td>
    <td class="gn-table-num">3m 29s</td>
  </tr></tbody>
</table>

Divider · Figure .gn-divider · -tight · -label · .gn-figure · -slot · -cap

screenshot 16:9

Console screen, 2026.콘솔 화면, 2026.

<hr class="gn-divider" />
<div class="gn-divider-label"><span>or</span></div>

<figure class="gn-figure">
  <div class="gn-figure-slot">screenshot 16:9</div>
  <figcaption class="gn-figure-cap">Caption.</figcaption>
</figure><hr class="gn-divider" />
<div class="gn-divider-label"><span>or</span></div>

<figure class="gn-figure">
  <div class="gn-figure-slot">screenshot 16:9</div>
  <figcaption class="gn-figure-cap">캡션.</figcaption>
</figure>

Field · Input · Textarea · Select .gn-field · -label/-req/-hint/-error · .gn-input · aria-invalid

Email이메일 * The address I should reply to.회신 받을 주소. Email — error이메일 — 오류 The domain is missing.도메인이 빠졌습니다. Command명령

<label class="gn-field">
  <span class="gn-field-label">
    Email <span class="gn-field-req">*</span>
  </span>
  <input class="gn-input" type="email"
         placeholder="you@example.com" />
  <span class="gn-field-hint">The address I should reply to.</span>
</label>

<input class="gn-input" value="you@" aria-invalid="true" />
<span class="gn-field-error">The domain is missing.</span>

<textarea class="gn-textarea"></textarea>
<select class="gn-select"><option>…</option></select><label class="gn-field">
  <span class="gn-field-label">
    이메일 <span class="gn-field-req">*</span>
  </span>
  <input class="gn-input" type="email"
         placeholder="you@example.com" />
  <span class="gn-field-hint">회신 받을 주소.</span>
</label>

<input class="gn-input" value="you@" aria-invalid="true" />
<span class="gn-field-error">도메인이 빠졌습니다.</span>

<textarea class="gn-textarea"></textarea>
<select class="gn-select"><option>…</option></select>

Checkbox · Radio · Switch · Segmented .gn-check · .gn-switch · .gn-seg — a label wrapping a hidden input.gn-check · .gn-switch · .gn-seg — 실제 input을 감춘 라벨

✓Notify after deploy배포 후 알림 ✓Retry on failure실패 시 재시도 dark light Autosave자동 저장

<label class="gn-check">
  <input type="checkbox" checked />
  <span class="gn-check-box">&#10003;</span>Notify after deploy
</label>

<label class="gn-switch">
  <input type="checkbox" checked />
  <span class="gn-switch-track">
    <span class="gn-switch-knob"></span>
  </span>Autosave
</label>

<div class="gn-seg gn-seg-sm" role="tablist">
  <button class="gn-seg-opt" role="tab" aria-selected="true">All</button>
  <button class="gn-seg-opt" role="tab">Work</button>
</div><label class="gn-check">
  <input type="checkbox" checked />
  <span class="gn-check-box">&#10003;</span>배포 후 알림
</label>

<label class="gn-switch">
  <input type="checkbox" checked />
  <span class="gn-switch-track">
    <span class="gn-switch-knob"></span>
  </span>자동 저장
</label>

<div class="gn-seg gn-seg-sm" role="tablist">
  <button class="gn-seg-opt" role="tab" aria-selected="true">전체</button>
  <button class="gn-seg-opt" role="tab">작업</button>
</div>

feedback · navigation · deck

Feedback, navigation, deck피드백 · 내비 · 덱

One notification at a time; position is shown by form. The deck frame scales with a container query.알림은 한 번에 하나, 위치는 형태로 표시한다. 덱 프레임은 컨테이너 쿼리로 크기를 따라간다.

Dialog · AlertDialog .gn-overlay · .gn-dialog + -head/-title/-desc/-foot · -danger

Delete this project?이 프로젝트를 삭제할까요?

This cannot be undone. 12 files go with it.되돌릴 수 없습니다. 파일 12개가 함께 지워집니다.

<div class="gn-overlay" role="dialog" aria-modal="true">
  <div class="gn-dialog gn-dialog-danger">
    <div class="gn-dialog-head"><div>
      <div class="gn-dialog-title">Delete?</div>
      <div class="gn-dialog-desc">This cannot be undone.</div>
    </div></div>
    <div class="gn-dialog-foot">
      <button class="gn-btn gn-btn-sm">Cancel</button>
      <button class="gn-btn gn-btn-sm gn-btn-danger">Delete</button>
    </div>
  </div>
</div><div class="gn-overlay" role="dialog" aria-modal="true">
  <div class="gn-dialog gn-dialog-danger">
    <div class="gn-dialog-head"><div>
      <div class="gn-dialog-title">삭제할까요?</div>
      <div class="gn-dialog-desc">되돌릴 수 없습니다.</div>
    </div></div>
    <div class="gn-dialog-foot">
      <button class="gn-btn gn-btn-sm">취소</button>
      <button class="gn-btn gn-btn-sm gn-btn-danger">삭제</button>
    </div>
  </div>
</div>

Toaster · Tooltip .gn-toaster · .gn-toast -success/-danger/-info · .gn-tip-wrap + .gn-tip

✓

Deployed배포 완료

e96ecaf · 12s

Deploy failed배포 실패

Check the log.로그를 확인하세요.

← appears after 400ms← 400ms 후 등장

<div class="gn-toaster" role="status" aria-live="polite">
  <div class="gn-toast gn-toast-success">
    <span class="gn-toast-icon">&#10003;</span>
    <div>
      <div class="gn-toast-title">Deployed</div>
      <div class="gn-toast-desc">e96ecaf · 12s</div>
    </div>
  </div>
</div>

<span class="gn-tip-wrap">
  <button class="gn-iconbtn" aria-label="Open">❯</button>
  <span class="gn-tip" role="tooltip">Open with ⌘K</span>
</span><div class="gn-toaster" role="status" aria-live="polite">
  <div class="gn-toast gn-toast-success">
    <span class="gn-toast-icon">&#10003;</span>
    <div>
      <div class="gn-toast-title">배포 완료</div>
      <div class="gn-toast-desc">e96ecaf · 12s</div>
    </div>
  </div>
</div>

<span class="gn-tip-wrap">
  <button class="gn-iconbtn" aria-label="Open열기">❯</button>
  <span class="gn-tip" role="tooltip">⌘K 로 열기</span>
</span>

TopBar · SideNav · Tabs · Breadcrumb current position: 2px accent underline (horizontal) or 3px left bar (vertical)현재 위치는 accent 밑줄 2px(가로) / 좌측 바 3px(세로)

home/projects/pilo

These four are the whole app shell. Sidebar fixed at 268px, top bar 54px.이 넷이 앱 셸의 전부다. 사이드바 고정폭 268px, 상단 54px.

<div class="gn-topbar gn-topbar-sticky">…</div>

<nav class="gn-sidenav">
  <div class="gn-sidenav-group">workspace</div>
  <div class="gn-sidenav-item" aria-current="page">runs
    <span class="gn-sidenav-meta">4</span>
  </div>
</nav>

<div class="gn-tabs" role="tablist">
  <button class="gn-tab" role="tab" aria-selected="true">Overview</button>
</div>
<div class="gn-crumbs"><span>home</span><span>/</span><span>pilo</span></div><div class="gn-topbar gn-topbar-sticky">…</div>

<nav class="gn-sidenav">
  <div class="gn-sidenav-group">workspace</div>
  <div class="gn-sidenav-item" aria-current="page">runs
    <span class="gn-sidenav-meta">4</span>
  </div>
</nav>

<div class="gn-tabs" role="tablist">
  <button class="gn-tab" role="tab" aria-selected="true">개요</button>
</div>
<div class="gn-crumbs"><span>home</span><span>/</span><span>pilo</span></div>

StatusChip · SlideFrame .gn-chip -done/-now/-near/-mid/-far · -running/-failed/-queued · .gn-chip-dot

done running failed queued

2026.09.02 · garamnoh

Terminal-based터미널 기반
Design System디자인 시스템

One token set, day and night토큰 하나로 낮과 밤을

Section 02

Token structure토큰 구조

<span class="gn-chip gn-chip-running">running</span>

<div class="deck-scope">
  <div class="gn-slide">
    <div class="gn-slide-label">2026.09.02</div>
    <div class="gn-slide-title">Terminal-based system</div>
    <div class="gn-slide-body">One-line subtitle</div>
    <div class="gn-slide-num">01</div>
  </div>
  <div class="gn-slide gn-slide-field">…</div>
</div>

<!-- size follows the container (cqw) --><span class="gn-chip gn-chip-running">running</span>

<div class="deck-scope">
  <div class="gn-slide">
    <div class="gn-slide-label">2026.09.02</div>
    <div class="gn-slide-title">터미널 기반 시스템</div>
    <div class="gn-slide-body">부제 한 줄</div>
    <div class="gn-slide-num">01</div>
  </div>
  <div class="gn-slide gn-slide-field">…</div>
</div>

<!-- 크기는 컨테이너를 따라간다 (cqw) -->

Snippets스니펫

Every block above has a copy button. The same markup lives in위 모든 블록에 복사 버튼이 있다. 같은 마크업이 garamnoh-system/components/snippets/에 있다.