# TheNoun Design System — Agent Guide

> AI 에이전트용 규칙서. TheNoun 화면을 생성·수정하기 전에 이 문서를 정독할 것.
> 사이트: https://design.thenoun.ai · 토큰: https://design.thenoun.ai/tokens.css

## 워크플로 (순서 강제)

1. `tokens.css` 를 로드하거나 내용을 확인한다 — 색·radius·모션을 절대 하드코딩하지 않는다
2. https://design.thenoun.ai/components.html 에서 기존 컴포넌트가 있는지 확인한다
3. 없을 때만 새로 만들되, 아래 규칙을 따른다

## 토큰 (단일 SoT)

```css
--foreground: oklch(0.145 0 0)      /* 텍스트·기본 버튼 배경 (검정) */
--primary: oklch(0.55 0.18 250)     /* 블루 — hover·포커스·강조 전용 */
--primary-muted: oklch(0.92 0.04 250)
--muted: oklch(0.97 0 0)  --muted-foreground: oklch(0.556 0 0)
--border: oklch(0.922 0 0)  --canvas: oklch(0.98 0 0)
--ok: oklch(0.62 0.17 150)  --err: oklch(0.58 0.21 25)
--radius: 0.5rem(카드) | 6px(버튼) | 7px(입력) | 999px(칩)
--ts: all 0.4s cubic-bezier(0.16,1,0.3,1)
font: "Geist", -apple-system, "Pretendard", sans-serif
```

## 컴포넌트 (클래스 = tokens.css 에 정의됨)

| 클래스 | 용도 | 핵심 규칙 |
|--------|------|-----------|
| `tn-btn tn-btn-primary` | 주 행동 버튼 | 검정 배경 → hover 파랑+translateY(-1px). **화면당 1개** |
| `tn-btn tn-btn-ghost` | 보조 버튼 | 테두리형 → hover 파랑 테두리 |
| `tn-card` | 카드 | 흰 배경·1px border·그림자 5% |
| `tn-chip` | 상태/라벨 | 행동 없음. 동사면 버튼을 쓸 것 |
| `tn-input` | 입력 | focus 시 파랑 테두리만 (그림자 없음) |
| `tn-eyebrow` / `tn-title` / `tn-sub` | 히어로 3단 | eyebrow(uppercase)→제목(2rem/-0.03em)→부제(muted) |
| `tn-fadeUp` | 등장 모션 | 0.55s, 카드는 0.08s 지연 |

## 화면 템플릿 3종

1. **앱 셸**: 사이드바 228px + 헤더(브레드크럼·칩) + 메인 — 플랫폼 화면
2. **센터 카드**: 상단바(로고+칩) + 히어로(eyebrow/title/sub) + 카드 + 푸터 — 단일 목적 페이지
3. **위저드**: steps + stage 전환(fadeUp) — 온보딩·빌더

## 금지 패턴 (위반 시 리뷰 반려)

- ❌ 파랑을 기본(비-hover) 배경·텍스트 색으로 사용
- ❌ 색상·radius·transition 하드코딩 (`#hex`, `px` 직접 값)
- ❌ 네이티브 `alert()`/`confirm()`/`prompt()`
- ❌ 이모지·과잉 안내 문구 ("~해보세요!" 류)
- ❌ 외부 CDN 폰트/스크립트 의존 (단일 파일·내부망 원칙)
- ❌ 화면당 primary 버튼 2개 이상

## 언어 규칙

- 격식 있는 한국어, 간결체. 버튼은 명사형("전송", "확인")
- 에러는 원인+다음 행동 한 문장 ("전송 링크가 만료되었습니다. 담당자에게 재발급을 요청해 주세요.")

## 검증 3질문 (셋업 확인용)

에이전트가 아래에 답하지 못하면 이 문서를 다시 읽는다:
1. primary 버튼의 기본 배경색 토큰은? → `--foreground` (검정, 파랑 아님)
2. 파랑(`--primary`)은 언제만 쓰나? → hover·포커스·강조
3. 카드 radius는? → `--radius` = 0.5rem

## 프로젝트 구조 표준 (배포 가능 형태로 만들 것)

사용자가 화면을 요청하면 처음부터 아래 구조로 만든다. 이 구조는 GitHub 저장소 → Cloudflare Pages 연결만으로 즉시 배포된다 (빌드 도구 불필요).

```
project/
├── index.html      # 메인 화면 (진입점)
├── tokens.css      # https://design.thenoun.ai/tokens.css 사본 또는 <link> 참조
├── site.css        # 화면별 커스텀 스타일 (토큰만 참조)
├── assets/         # 이미지·아이콘
└── *.html          # 추가 화면 (flat, 라우터 없음)
```

- 정적 파일만 사용한다. 프레임워크·빌드 단계·서버 코드를 넣지 않는다.
- 사용자가 배포를 요청하면: ① `git init` + GitHub 저장소 생성·push → ② Cloudflare Pages 에 저장소 연결 (프레임워크 프리셋 None, 빌드 명령 없음, 출력 디렉토리 `/`) → ③ 발급된 `*.pages.dev` 주소를 알려준다.
- 사용자는 비개발자일 수 있다. 배포 단계는 한 번에 하나씩, 클릭 위치까지 안내한다.