DESIGN.md 완전 가이드

마크다운 파일의 역할 분담

AGENTS.md / CLAUDE.md가 AI의 "행동"을 정의한다면, DESIGN.md는 "외관"을 정의한다.

실전 예제

DESIGN.md는 기술적 CSS 값 대신 감성적이고 서술적인 언어를 사용한다. AI가 "느낌"을 이해하도록.

# DESIGN.md — Minimal Furniture Store

## 1. Visual Theme & Atmosphere

세련된 미니멀리스트 공간. 스칸디나비아 디자인의 간결함과
럭셔리 에디토리얼의 시각 언어를 결합한다.

핵심 특성:
- 넉넉한 여백 — 콘텐츠가 숨 쉴 공간을 확보
- 사진 중심 프레젠테이션 — 텍스트보다 이미지가 주인공
- 속삭이듯 부드러운 시각적 계층 — 강렬한 대비 대신 미묘한 차이
- 의도적으로 절제된 색상 — 제품이 돋보이도록

## 2. Color Palette & Roles

### Foundation
- Pure White (#FFFFFF) — 기본 배경. 깨끗한 캔버스.
- Warm Cream (#FAF8F5) — 보조 배경, 카드 표면.
- Whisper Gray (#F5F3F0) — 구분선, 미묘한 영역 분리.

### Accent & Interactive
- Deep Muted Teal-Navy (#294056) — 유일한 강조색.
  CTA 버튼, 활성 네비게이션 링크, 선택된 필터 상태에만 사용.

### Typography Hierarchy
- Charcoal (#1A1A1A) — H1, H2 헤드라인.
- Dark Gray (#4A4A4A) — 본문 텍스트.
- Medium Gray (#8A8A8A) — 보조 텍스트, 캡션.
- Light Gray (#B0B0B0) — 플레이스홀더, 비활성 요소.

### Functional States
- Sage Success (#4A7C59) — 성공, 재고 있음.
- Warm Amber (#C4922A) — 경고, 한정 수량.
- Dusty Rose (#B85450) — 오류, 품절.

## 3. Typography Rules

Font Family: Manrope — 기하학적이면서 부드러운 느낌.

| 용도 | 크기 | Weight | 자간 |
|------|------|--------|------|
| H1 Display | 2.75–3.5rem | Semi-bold (600) | -0.02em |
| H2 Section | 1.75–2.25rem | Semi-bold (600) | -0.01em |
| H3 Subsection | 1.25–1.5rem | Medium (500) | 0 |
| Body | 1rem | Regular (400) | 0.01em |
| Small/Meta | 0.875rem | Regular (400) | 0.02em |

## 4. Component Stylings

### Buttons
- Corner radius: 8px
- Primary: Deep Muted Teal-Navy 배경, 흰색 텍스트
- Hover: 살짝 밝아지며 미세한 lift (translateY -1px)
- Focus: 2px 오프셋 아웃라인, 주 색상 50% 투명도
- Transition: all 0.2s ease

### Cards
- Corner radius: 12px
- 배경: Warm Cream
- 그림자: 0 2px 8px rgba(0,0,0,0.06)
- Hover: translateY(-4px) + 그림자 깊어짐
- 내부 패딩: 1.5rem

### Navigation
- 대문자 변환, 자간 0.06em, Medium weight
- 활성 링크: Deep Muted Teal-Navy 색상 + 하단 2px 바

## 5. Layout Principles

- 최대 너비: 1440px
- 기본 그리드: 12컬럼
- 제품 그리드: 4열(데스크톱) → 3열(태블릿) → 2열(모바일) → 1열(소형)
- 기본 단위: 8px
- 섹션 간격: 5–8rem (넉넉한 호흡)
- 브레이크포인트: 768px / 1024px / 1440px

## 6. Depth & Elevation

- 기본 표면: 그림자 없음 — 평평하고 깨끗
- 카드: 속삭이듯 부드러운 확산 그림자 (0 2px 8px rgba(0,0,0,0.06))
- Hover lift: translateY(-4px) + 그림자 확대
- 모달/오버레이: 0 16px 48px rgba(0,0,0,0.12)
- 표면 간 경계는 그림자로 표현, 실선 보더 최소화

## 7. Do's and Don'ts

DO:
- 여백을 아끼지 않는다 — 빼곡한 레이아웃 금지
- 제품 이미지에 집중한다 — UI 장식을 최소화
- 색상을 절제한다 — Teal-Navy만 강조색으로 사용
- 일관된 8px 그리드를 지킨다

DON'T:
- 그라디언트 배경 사용 금지
- 3가지 이상의 폰트 웨이트 혼용 금지
- 짙은 그림자 사용 금지 — 항상 부드럽고 확산된 그림자
- 네온 색상이나 고채도 강조색 사용 금지

## 8. Responsive Behavior

- 모바일 우선 접근
- 터치 타겟: 최소 44x44px
- 이미지: 모바일에서 aspect-ratio 유지, object-fit: cover
- 네비게이션: 모바일에서 가로 스크롤 또는 햄버거
- 타이포그래피: 모바일에서 H1은 2rem으로 축소

## 9. Agent Prompt Guide

빠른 색상 참조:
- 배경: Pure White #FFFFFF, Warm Cream #FAF8F5
- 강조: Deep Muted Teal-Navy #294056
- 텍스트: Charcoal #1A1A1A, Dark Gray #4A4A4A

컴포넌트 프롬프트:
"부드럽게 둥근 모서리(12px), 풀블리드 정사각형 제품 이미지,
hover 시 속삭이듯 부드러운 그림자가 깊어지는 제품 카드를 만들어줘"

3종 세트 구성

각 브랜드마다 DESIGN.md + preview 2종이 제공된다

# awesome-design-md 디렉토리 구조
designs/
├── stripe/
│   ├── DESIGN.md            # 디자인 시스템 문서 (AI가 읽음)
│   ├── preview.html         # 라이트 테마 시각 카탈로그
│   └── preview-dark.html    # 다크 테마 시각 카탈로그
├── notion/
│   ├── DESIGN.md
│   ├── preview.html
│   └── preview-dark.html
├── vercel/
├── claude/
├── figma/
├── linear/
└── ... (66+ 브랜드)

수록된 브랜드 (66+)

DESIGN.md 생태계

DESIGN.md를 둘러싼 도구와 커뮤니티