# DESIGN.md — 루프공방 (LoopLab)

> AI 코딩 도구에 넘기는 기본 시각 언어. 프로젝트 루트 또는 이 파일을 `@DESIGN.md`로 참조하세요.

## Brand
- **Name:** 루프공방 / LoopLab
- **Positioning:** 바이브코딩을 해 봤지만 아직 서툰 사람을 위한 학습·공유 허브
- **Voice:** 짧고 실무적, 공공·학습 맥락에 무난, 과한 마케팅 톤 지양

## Visual principles
- **Monotone + one accent:** 회색 스케일 배경/텍스트/보더 + primary(indigo 계열) 1색
- **No:** 네온 글로우, 무지개 그라디언트 카드 나열, 장식 애니메이션 과다
- **Yes:** 여백, 위계, 한 화면 주요 CTA 1개, 읽기 쉬운 본문

## Color (semantic)
- background: near-white / near-black (dark)
- foreground: near-black / near-white
- muted-foreground: mid gray (모바일에서 너무 연하지 않게)
- border: light gray
- primary: indigo (~oklch 0.45 0.16 277)
- destructive: red for errors only

## Typography
- Font: Pretendard (or system-ui Korean-capable stack)
- Hierarchy: page title / section title / body / caption (3–4 steps only)
- Body ~16–17.5px, line-height ~1.7
- Letter-spacing slightly tight on headings

## Spacing & radius
- Spacing scale: multiples of 4/8 (8, 12, 16, 24, 32, 48)
- Card padding: 16–24px
- Section gap: 32–48px
- Radius: ~0.5–0.75rem (consistent)
- Shadow: none or very subtle; prefer 1px border

## Layout
- Max content width: ~max-w-3xl ~ max-w-5xl depending on page
- Mobile-first; no horizontal scroll at 360px
- Grid: 1 col mobile → 2–3 col desktop for cards

## Components
- Prefer shadcn/ui patterns: Button, Card, Badge, Input
- Buttons: primary for one main action; ghost/outline secondary
- Empty states: Korean copy + one next action
- Icons: Lucide, 16–20px

## Do / Don't for agents
- **Do:** monochrome UI, Korean labels, explicit done criteria in UI copy
- **Do:** empty/error states with next step
- **Don't:** put API keys in UI or code samples
- **Don't:** invent a second accent color
- **Don't:** clutter hero with 3+ equal CTAs

## Apply
```
@DESIGN.md 를 읽고 이 프로젝트 화면을 위 규칙에 맞춰 주세요.
모노톤 + primary 1색, 한국어, 한 화면 CTA 1개.
```