Skip to content

design-system-llm.md

Latest commit

 

History

History
146 lines (114 loc) · 7.54 KB

design-system-llm.md

File metadata and controls

146 lines (114 loc) · 7.54 KB
title Design System — LLM Reference (v2.2.0)
owner human
status approved
updated 2026-05-28
tags
agent
design-system

Design System — LLM Reference (v2.2.0)

decoded Design System v2.2 1-pager SSOT. Human-facing 토큰·패턴 상세는 docs/design-system/를 SSOT로 둡니다. 구현체: packages/web/lib/design-system/ + packages/web/app/globals.css.

Visual Foundations

Dual palette (surface-scoped)

  • Editorial surfaces (/, /magazine/*, spot detail) → magazine palette, fixed dark, .dark 토글 무관.
    • Tokens: magPrimary (--mag-primary #050505), magAccent (--mag-accent #eafd67), magBg (--mag-bg #050505), magText (--mag-text #f5f5f5)
    • Source: packages/web/lib/design-system/tokens.ts:176-179, packages/web/app/globals.css:109-112 (#573)
    • ThemeToggle 숨김
  • Product UI (/explore, /profile, /rankings, /admin, /auth, /upload, /settings) → semantic OKLCH, next-themes .dark 토글 활성.
    • Tokens: primary, secondary, muted, accent, destructive, background, foreground, card, border, ring
  • No-mix rule: 두 팔레트를 한 페이지에서 섞지 말 것. 섞여야 한다면 surface 경계가 잘못 그어진 것.

Typography

  • Playfair Display (serif) — 제목/브랜드/Hero
  • Inter (sans) — 본문/UI/버튼
  • JetBrains Mono (mono) — 코드
  • IBM Plex Mono — DecodedLogo / HeroCover inline 사용 (현재 next/font 미적용, 점진 마이그레이션 대상)

크기 스케일: hero(64px) / h1(48) / h2(36) / h3(28) / h4(24) / body(16) / small(14) / caption(12).

Spacing / Radius / Shadow

4px 기반 spacing (0 ~ 32), --radius 기준 borderRadius (sm ~ 2xl, full), CSS-var 기반 shadow (2xs ~ 2xl).

Z-index layers

base(0) / floating(10) / dropdown(20) / header(30) / sidebar(40) / modalBackdrop(50) / modal(60) / toast(70) / tooltip(100).

Navigation facts

Surface Height Source
Desktop Header 72px lib/design-system/desktop-header.tsx
Mobile Header 56px lib/design-system/mobile-header.tsx
본문 top padding pt-[56px] md:pt-[72px] patterns.md §1.4

Home page sequence

packages/web/app/page.tsx:568 기준: HeroItemSync (md+) → EditorialMagazine → EditorialCarousel → StyleMoods → EditorPicks (data 있을 때) → TrendingListSection → DomeGallerySection (data 있을 때). 루트 컨테이너: <div className="min-h-screen bg-[#050505] overflow-x-hidden"> — magazine palette 고정.

3D / Shader

DecodedLogo → three.js + @chenglou/pretext shader, packages/web/lib/components/DecodedLogo.tsx.

Content Fundamentals

decoded 콘텐츠 규칙 (v2.2 신규, 정본 content-fundamentals.md):

  • Voice: 큐레이터 톤 — 단정적·간결·과한 마케팅 언어 회피
  • Casing: 영문 헤더는 Title Case, 본문은 Sentence case
  • Person: 사용자 1인칭("나의 ...") vs 시스템 3인칭 명확히 구분
  • Language: 한국어 우선, 영문 브랜드/기술 용어는 원형 보존
  • Pricing: 통화 기호 + 천 단위 콤마, 통화 코드는 후위 (예: ₩48,000 KRW)
  • Numbers: 천 단위 콤마, 0.xxx 단축 금지
  • Emoji: UI 안에 emoji 사용 금지 (decorative 포함). 본문/에디토리얼만 허용.

Iconography

Lucide Icons SSOT. 도메인 특화 아이콘은 lib/design-system/ 내 컴포넌트로 캡슐화. 크기 규칙: inline body 16px, button leading icon 16-20px, hero/feature 24-32px. Animation 카탈로그는 animations.md 참조 (spin, pulse, fade-in-up, marquee 등 15+ keyframes + prefers-reduced-motion 정책).

Import path

import {
  // Typography
  Heading,
  Text,
  // Inputs
  Input,
  SearchInput,
  // Cards
  Card,
  CardHeader,
  CardContent,
  CardFooter,
  CardSkeleton,
  ProductCard,
  GridCard,
  FeedCardBase,
  ProfileHeaderCard,
  // Navigation
  DesktopHeader,
  MobileHeader,
  DesktopFooter,
  // Tokens
  typography,
  colors,
  spacing,
  shadows,
  borderRadius,
  zIndex,
} from "@/lib/design-system";

colors.magPrimary / colors.magAccent / colors.magBg / colors.magText도 동일 barrel에서 export.

Component inventory

Located in packages/web/lib/design-system/:

Component Purpose
tokens.ts Design tokens (colors, spacing, typography, shadows)
Heading, Text Typography components with size variants
Input, SearchInput Form inputs with variants
Card Family Base card + Header/Content/Footer + Skeleton
ProductCard / GridCard Product / grid layout cards
FeedCardBase Social feed card
ProfileHeaderCard Profile header card
DesktopHeader / MobileHeader Top navigation (72px / 56px)
DesktopFooter Desktop footer with links
ActionButton / OAuthButton / GuestButton Interactive buttons
ArtistCard / SpotCard / SpotDetail / SpotMarker Domain cards
Badge / Tag / Divider / Tabs Feedback / structure
BottomSheet / Hotspot / LoadingSpinner / LoginCard / StepIndicator Misc UI
NavBar / NavItem / SectionHeader Navigation primitives
RankingItem / LeaderItem / StatCard / ShopCarouselCard Ranking & shop
DecodedLogo WebGL brand mark (lib/components/DecodedLogo.tsx)

Cross-links