DartBrief Design System

토큰 + 컴포넌트 카탈로그 + 화면/시나리오 spec 통합 site. SSOT — 코드 (Flutter / Web) 와 spec (docs/spec/*.md) 의 단일 진실.

Foundation

색 / spacing / radius / typography. Style Dictionary 가 Flutter (Dart) + Web (CSS) 동시 생성.

Components 11

AI 분석 카드 — lazy reveal 모델 (M1~M9 + W1~W5)

주 분석 quota 한 줄 인디케이터 + breakdown dialog

중앙 dialog SSOT — showAppModal()

Primary CTA — AppButton.primary() / inline()

하단 시트 SSOT — showAppBottomSheet() (transparent / chrome'd)

소셜 로그인 — AppSocialButton (Kakao / Google / Apple)

대시보드 공시 목록 한 줄 카드

워치리스트 종목 칩 + X 제거 (a11y)

종목 검색 박스 + 드롭다운 (debounce 300ms)

신규 사용자 온보딩 (추천 칩 + 최근 공시)

Screens 4

Dashboard · App

홈 — 워치리스트 + 공시 피드 (Flutter 모바일). docs/spec/screen-dashboard.md

Dashboard · Web

웹 비로그인 랜딩 — SuggestedStocks + 최근 공시 (Next.js).

DisclosureDetail · App

공시 상세 — AnalysisCard reveal + quota + 이전 공시. docs/spec/screen-disclosure-detail.md

DisclosureDetail · Web

웹 공시 상세 — meta only + AppCTA (Next.js SSR).

Flows

AuthGate (예정)

requireAuth → 모달 → 로그인 → 후속 액션

Onboarding (예정)

첫 로그인 → 추천 종목 등록 → 첫 공시 reveal

📂 구조: 토큰 SSOT = docs/design/tokens/*.json (Style Dictionary) · 컴포넌트 시각 = docs/design/components/*.html · 화면/플로우 spec = docs/spec/screen-*.md / flow-*.md (Vite ?raw import 로 빌드 시 inline)
🔗 Flutter: mobile/lib/shared/theme/generated/ · Web (Next.js): frontend/src/styles/generated/ · 둘 다 Style Dictionary 출력 import.
🚀 빌드: cd docs/design && npm run build → docs/design/dist/ → docs 사이트(cd docs && npm run docs:build)가 /design 으로 verbatim 호스팅. 배포는 docs 사이트 전체(docs.dartbrief.com)가 CF Pages 대상.