Product
Design.

Grid

• Desktop: 12-column, 24px gutter
• Tablet: 8-column, 16px gutter
• Mobile: 4-column, 16px gutter

Max Content Width

1920px viewport 기준 콘텐츠 영역 비율. 파선이 max-width 경계, 양옆 어두운 영역이 side padding.

Spacing Scale

9-tier scale. var(--space-*) 토큰으로 모든 간격 통일.

Responsive Behavior

4 breakpoint. Display 타이포는 단계 축소하면서 음수 트래킹 비례 유지.

Surface Hierarchy

spec 토큰 상세는 Brand §02 Color 참조. 제품 UI에서 자주 쓰이는 표면 토큰:

Shadows

--shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
--shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
--shadow-md: 0 12px 32px rgba(0,0,0,0.5);
--shadow-lg: 0 24px 60px rgba(0,0,0,0.6);

Radius Scale

8-tier scale. var(--radius-xs/sm/md/lg/xl/xxl/pill/full) 토큰 사용.

Elevation

4 레벨 — flat / charcoal / light-edge / selected ring (focus-visible).

Usage Rules

• 색만으로 의미 전달 금지 · 아이콘 또는 텍스트 보조 필수 (색맹 사용자 고려)
• 전체 면적의 5% 이하 · 의미 색이 화면을 압도하면 안 됨
• 같은 상태에 같은 색 · Success가 어떤 화면에선 파랑이면 안 됨

05a · Atoms (기본 요소)

가장 작은 UI 단위. 더 쪼갤 수 없는 빌딩 블록. spec 토큰을 직접 사용.

Atom 데모

const silo = await createSILO({
  name: 'paperclip',
  builder: 'hyungwoon',
});

05b · Molecules (결합)

Atoms의 단순 결합. 단일 기능 단위.

Molecule 데모

curl -X POST https://api.nmwc.ai/silo \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name":"paperclip"}'

05c · Organisms

큰 빌딩 블록. 두 가지로 나뉜다 — 일반(generic)은 공통 UI 패턴(header bar, sidebar, data table 등), NMWC 특화는 SILO·HQ 같은 NMWC 도메인 전용 organism.

일반 · Generic

Molecules + Atoms의 복합 구조. 페이지의 큰 섹션.

Organism 데모 (기존 구현된 항목)

Toast

Modal (confirm · destructive)

Max width: 480 (sm) / 640 (md) / 800 (lg). Backdrop: rgba(0,0,0,0.6) + blur(8px). 진입 애니메이션: scale(0.96) + fade-in 250ms.

Tabs

현재 페이지의 상단 탭이 NMWC의 표준 탭 스타일입니다. Underline + accent 색 active.

Buttons

5 canonical variants + pricing-tab toggle group + ghost/danger.

Cards

Surface lift hierarchy — pricing-card / pricing-card.featured / template-card.

Forms

text-input + textarea. focus는 elevation level 3 블루 링.

Sidebar navigation

Pricing table (4-tier compare)

FAQ accordion

Feature grid (3-up)

CTA section (inverse band)

Newsletter signup

404 page (mock)

Cookie banner

Hero section (spotlight)

Dialog (alert / confirm / prompt)

Data table (sort · filter · pagination)

Activity feed (timeline)

Comment thread (nested)

Loading (page-level)

NMWC 특화

NMWC가 "AI Builder Colectivo + HQ + SILO" 구조이므로 다음 organism은 NMWC 도메인 우선 정의.

NMWC organism 데모 (mockup)

SILO grid (3-up)

Builder profile card

HQ command center

Onboarding stepper (3-step)

HQ Support panel

Economic sharing dashboard (50:50)

SILO Nominee transition card

Code reference (HTML snippets)

주요 organism의 최소 구현 패턴. spec 클래스(.btn-*, .pricing-card, .spot-*, .text-input)과 spec 토큰(var(--canvas/--surface-1/--ink/...))만 사용. 인라인 style은 레이아웃 조정용만.

<!-- variants -->
<button class="btn-primary">Build now</button>
<button class="btn-secondary">See SILO</button>
<button class="btn-translucent">Learn more</button>
<button class="btn-ghost">Cancel</button>
<button class="btn-danger">Delete SILO</button>
<button class="btn-icon-circular" aria-label="Continue">→</button>

<!-- size modifiers · apply alongside variant -->
<button class="btn-primary btn-sm">Stack</button>
<button class="btn-primary btn-lg">Get started for free</button>

<!-- disabled -->
<button class="btn-primary" disabled>Saving…</button>

<div class="form-field">
  <label for="silo-name">
    SILO 이름 <span style="color: var(--semantic-error)">*</span>
  </label>
  <input id="silo-name" type="text" class="text-input"
         placeholder="예: DANDO commerce" required>
  <p class="helper">한 줄로 설명 가능한 소규모 이름이 좋습니다.</p>
  <p class="error" hidden>이름을 입력해주세요.</p>
</div>

<div role="dialog" aria-modal="true" aria-labelledby="m-title" class="modal">
  <div class="modal-backdrop"></div>
  <div class="modal-card">
    <h2 id="m-title" class="t-headline">Delete this SILO?</h2>
    <p class="t-body-sm t-ink-muted">이 작업은 되돌릴 수 없습니다.</p>
    <div class="modal-actions">
      <button class="btn-secondary">Cancel</button>
      <button class="btn-danger">Delete</button>
    </div>
  </div>
</div>

<div role="status" aria-live="polite" class="toast">
  <span class="toast-dot" style="background: var(--semantic-success)"></span>
  SILO에 한 줄 더 쌓았어요.
</div>

<article class="silo-card">
  <header class="silo-card-header">
    <span class="silo-mark spot-violet" aria-hidden="true">...</span>
    <div class="silo-meta">
      <h3 class="t-body-lg">DANDO</h3>
      <p class="t-caption t-ink-muted">Commerce · 성빈</p>
    </div>
    <span class="badge badge-success">• Active</span>
  </header>
  <dl class="silo-stats">
    <div><dt>Stacks (7d)</dt><dd>14</dd></div>
    <div><dt>Members</dt><dd>3</dd></div>
    <div><dt>MRR</dt><dd>$2.4k</dd></div>
  </dl>
  <footer class="silo-card-footer">
    <time datetime="2026-05-17T16:00">2시간 전</time>
    <a href="/silos/dando">열기 →</a>
  </footer>
</article>

<section class="daily-prompt">
  <header class="t-caption t-ink-muted">오늘 한 줄</header>
  <textarea class="text-input" rows="2"
            placeholder="오늘 SILO에 더한 것…"></textarea>
  <footer class="daily-prompt-footer">
    <p class="t-caption t-ink-muted">
      어제: "AI ToV 정리 — 4개 명의에서 3개로…"
    </p>
    <button class="btn-primary btn-sm">Stack</button>
  </footer>
</section>

<div class="ai-indicator ai-active">
  <span class="pulse-dot" aria-hidden="true"></span>
  <span>AI active</span>
  <span class="t-caption t-ink-muted">작업 중</span>
</div>

<div class="ai-indicator ai-honest">
  <span class="dot warning"></span>
  <span>확실하지 않아요</span>
  <span class="t-caption t-ink-muted">honest</span>
</div>

<article class="pricing-card featured">
  <header>
    <span class="t-caption t-ink-muted">Pro</span>
    <span class="badge">POPULAR</span>
  </header>
  <p class="t-display-md">$15</p>
  <p class="t-caption t-ink-muted">매월</p>
  <button class="btn-primary">Build SILO</button>
  <ul>
    <li>3 SILOs</li>
    <li>3 members</li>
    <li>AI 무제한</li>
  </ul>
</article>

05d · Templates (레이아웃)

페이지의 골격 — 콘텐츠가 들어가는 wireframe.

Template wireframes

각 템플릿의 골격 mockup (mini frame). 실제 구현 시 컴포넌트(Atoms/Molecules/Organisms)로 조립.

05e · Pages (실제 인스턴스)

현 NMWC Brand System 사이트의 페이지들. NMWC 제품(SILO 운영 도구) 본체 Pages는 별도 repo에서 위 Dashboard / SILO single page / HQ overview 템플릿으로 구성.

05f · Asset Inventory

빌더가 SILO를 운영하면서 필요한 자산 카탈로그. 아이콘 카탈로그는 §06 Iconography, 차트·뱃지·스켈레톤·히트맵은 §07 Data Visualization 참조. 로고·브랜드 자산은 Brand §07 참조.

Illustrations (mono 라인 + accent 강조)

시스템 파일: .assets-source/illustrations/{empty-*, error-*}.svg

Motion

Marketing

Documentation

Standard Set

npm install lucide-react

import { ChevronRight, Settings, User, Plus } from 'lucide-react';
<ChevronRight size={20} strokeWidth={1.5} />

Size Standards

동일 아이콘(Settings)이 컨텍스트에 따라 어떤 크기로 살아나는지. stroke-width는 모든 크기에서 1.5 고정.

Custom Icons · NMWC Set

Lucide 표준 셋 외에 NMWC 시스템 고유 아이콘 6종. 24×24 그리드, currentColor. 권장 사용 크기는 위 Size Standards 참조.

시스템 파일: .assets-source/icons/{silo-stack,builder,ai-collab,build-action,hq,silo-single}.svg

Chart Colors

실제 라인 차트에 4색을 적용한 예시. Primary는 주 트렌드, Secondary는 무관 라인, Accent는 강조, Comparison은 비교 기준 (대시 라인).

Chart Types

5개 차트 타입 — 데이터 유형에 맞춰 선택. NMWC White가 주 라인, Accent Blue는 강조·fill에 적용. Gridline은 hairline-soft + 점선.

Guidelines

• Grid lines는 --line 색, opacity 0.5
• Tooltip은 --elevated background
• X/Y axis label은 --muted, 11-12px
• Animation: 단순 entrance만, 무한 반복 금지

Asset Catalog

제품 UI에 바로 쓰는 데이터 시각화 자산 — 상태 뱃지 · 로딩 스켈레톤 · 활동 히트맵. 차트 프리셋(line/bar/area/funnel/sparkline)은 위 Chart Types 참조. 구현 권장 — Recharts · D3.

Color Contrast

• Body text: 4.5:1 이상 (WCAG AA)
• Large text (18px+ 또는 14px+ bold): 3:1 이상
• UI components & focus indicators: 3:1 이상

Keyboard Navigation

• 모든 interactive 요소는 Tab으로 접근 가능
• Focus ring 항상 visible — spec :focus-visible이 var(--elev-3) (1px + 4px blue ring)을 자동 부여. 페이지에서 별도 outline 정의 금지
• Esc로 모달·드롭다운 닫기
• Enter/Space로 버튼 활성화

Screen Readers

• 모든 아이콘 버튼에 aria-label
• 이미지는 alt (장식용은 alt="")
• 상태 변화는 aria-live로 announce
• 구조는 semantic HTML (<nav>, <main>, <article>)

Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Color Blindness

• 색만으로 의미 전달 금지 · 아이콘/텍스트 보조
• 차트는 패턴(점선·줄무늬) 또는 라벨 추가
• Status는 색 + 아이콘 + 텍스트 3중 표시