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 7

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).

Notifications · App

알림 — 푸시 권한 토글 + 종목별 알림 on/off (App 전용). docs/spec/screen-notifications.md

Settings · App

더보기 — 정보 링크 + 계정(로그인/로그아웃/회원탈퇴) (App 전용). docs/spec/screen-settings.md

구독 2티어(PRO/MAX) 선택·결제 — 플랜 카드 + CTA + 복원 (하단 시트). docs/spec/screen-paywall.md

Flows

AuthGate · App

requireAuth → 게이트 시트 → 소셜 로그인 → 후속 액션 (4 trigger action). docs/spec/flow-auth-gate.md

Onboarding · App

첫 실행 가치 인트로(AI 요약 + 관심종목 알림) · 비로그인 · 스킵 가능. docs/spec/flow-onboarding.md

📂 구조: 토큰 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 대상.