---
version: "alpha"
name: "AI 바이브 코딩 — Week 2 Guide"
description: "Week 2 인터랙티브 발표자료의 디자인 토큰. google-labs-code/design.md 표준 alpha 준수."
colors:
  primary: "#007AFF"
  secondary: "#CF6B4F"
  text: "#111827"
  text-muted: "#374151"
  text-subtle: "#6b7280"
  text-faint: "#9ca3af"
  background: "#FFFFFF"
  surface: "#f5f5f7"
  border: "#e5e5ea"
  accent-soft: "rgba(0,122,255,0.07)"
  accent-medium: "rgba(0,122,255,0.18)"
  accent-strong: "rgba(0,122,255,0.30)"
typography:
  h1:
    fontFamily: "Noto Sans KR, Inter"
    fontSize: 4.5rem
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.04em
  h2:
    fontFamily: "Noto Sans KR, Inter"
    fontSize: 2.6rem
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.04em
  body:
    fontFamily: "Noto Sans KR, Inter"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.7
  caption:
    fontFamily: "Noto Sans KR, Inter"
    fontSize: 0.7rem
    fontWeight: 700
    letterSpacing: 0.2em
  mono:
    fontFamily: "JetBrains Mono"
    fontSize: 0.85rem
rounded:
  sm: 6px
  md: 11px
  lg: 14px
  pill: 40px
spacing:
  xs: 6px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 52px
  xxl: 76px
elevation:
  sm: "0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)"
  md: "0 8px 32px rgba(0,0,0,0.16)"
components:
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
    textColor: "{colors.text}"
  card-accent:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
    textColor: "{colors.text}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "#FFFFFF"
  pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-muted}"
    rounded: "{rounded.pill}"
    padding: "{spacing.sm}"
---

## Overview

미니멀 키노트 톤. 장식 최소화, 데이터·메시지 우선.
좌측 단축 레일 + 하단 네비. 슬라이드는 단일 메시지 원칙(한 슬라이드 한 핵심).
3 테마(기본·다크·임원) 라이브 토글로 같은 콘텐츠를 다른 분위기로 즉시 전환.

## Colors

- **primary** — 액센트 1색만 사용. 진행바·강조 카드 테두리·CTA·링크.
  본문에는 절대 사용하지 않는다(가독성·접근성 이유).
- **secondary** — Claude C-mark 오렌지. 보조 강조(예: 차이점, 경고).
- **text 계층** — `text` (제목·본문) → `text-muted` (보조 본문) → `text-subtle` (캡션) → `text-faint` (메타데이터).
- **surface vs background** — surface는 카드 안의 카드, 코드 블록 배경 등 한 단계 들어간 영역에만.
- **accent-soft/medium/strong** — primary의 알파 변형. 카드 배경 강조에만.

WCAG AA 대비:
- text on background = 15.8:1 ✓
- primary on background = 4.7:1 ✓ (큰 글자만)
- text-subtle on background = 4.8:1 ✓

## Typography

본문 한국어 우선이라 Noto Sans KR을 첫 family로. Inter는 라틴 fallback.
모노는 JetBrains Mono — 코드 블록·토큰 ID·진행 카운터.

스케일은 4단(h1·h2·body·caption)으로 제한. 사이 단계가 필요하면 spacing으로 해결.

## Layout

8px 그리드. 모든 spacing 토큰은 8의 배수에 가깝게 정렬.
슬라이드 패딩: `{spacing.xl} {spacing.xxl} {spacing.xxl} 104px` (좌측 레일 폭 보정).
카드 사이 간격은 `{spacing.md}` 고정. grid `gap`도 동일 토큰 사용.

## Elevation & Depth

평면 디자인 기조. 그림자는 카드와 하단 네비에만.
- `{elevation.sm}` — 일반 카드의 떠 있는 느낌
- `{elevation.md}` — 하단 네비 컨테이너(검은 알약)

블러나 글래스모피즘은 사용하지 않음(임원 테마와 충돌).

## Shapes

라운드 사용 패턴:
- `{rounded.sm}` — 작은 라벨, 슬롯 태그
- `{rounded.md}` — 코드 블록, 입력
- `{rounded.lg}` — 모든 카드 기본
- `{rounded.pill}` — 알약형 버튼·하단 배너·브레드크럼

각진 직사각형(rounded 0)은 진행바에만.

## Components

`button-primary`, `card`, `card-accent`, `pill` 4개가 핵심.
변형 상태(hover/active)는 별도 컴포넌트로 정의(`button-primary-hover`).

테마 전환 시 컴포넌트 정의는 그대로, 참조한 토큰값만 바뀌어 자동 재테마링.

## Do's and Don'ts

✓ **Do**
- 색·간격은 `{colors.primary}` 같은 토큰 참조로만
- 새 컴포넌트는 기존 토큰을 조합해 정의
- 자연어 변경 요청: "DESIGN.md의 primary를 보라색으로" → 30장 동시 변경
- 다크/임원 테마는 같은 토큰 키, 다른 값으로 오버라이드

✗ **Don't**
- 인라인 hex(`#xxxxxx`) 직접 입력 — 토큰 참조 필수
- 폰트 크기를 임의 값(`13.5px` 등)으로 — 정의된 4단만
- 액센트 색을 본문에 사용
- 한 슬라이드에 토큰 외 색 2개 이상 도입
- 버전 표기 없이 토큰 추가 — `version: "alpha"` 호환성 추적