1  # F008-design_system.component.cspec
  2  
  3  metadata:
  4    id: F008
  5    name: design_system
  6    version: 1.0.0
  7    domain: frontend
  8    stability: stable
  9    updated: 2026-01-14
 10    cascade_priority: 5
 11    roles:
 12      primary: [Dev]
 13      review: []
 14    expertise:
 15      required: [design_systems, css, accessibility]
 16      helpful: [tailwind, figma]
 17    context_tags: [design, tokens, themes, colors, typography, accessibility]
 18  
 19  dependencies:
 20    upstream: []
 21    downstream: [F002, F003, F004, F006, F007]
 22  
 23  interface:
 24    types_ref: _registry/types.cspec
 25    types:
 26      theme: enum[light, dark, high_contrast, testnet]
 27      color_token: {name: string, value: hex}
 28      spacing_unit: 4px_base
 29  
 30  spec:
 31    # === PURPOSE ===
 32    purpose: Design tokens, themes, component patterns
 33  
 34    # === STRUCTURE ===
 35    structure:
 36      acdc-design/:
 37        tokens/:
 38          - colors.json
 39          - typography.json
 40          - spacing.json
 41          - borders.json
 42          - shadows.json
 43          - animation.json
 44        themes/:
 45          - light.json
 46          - dark.json
 47          - high-contrast.json
 48          - testnet.json
 49        components/: component_specs
 50  
 51    # === COLOR TOKENS ===
 52    colors:
 53      brand:
 54        alpha_primary: "#6366F1"    # Indigo
 55        alpha_light: "#A5B4FC"
 56        alpha_dark: "#4338CA"
 57        delta_primary: "#10B981"    # Emerald
 58        delta_light: "#6EE7B7"
 59        delta_dark: "#059669"
 60      semantic:
 61        success: "#22C55E"
 62        warning: "#F59E0B"
 63        error: "#EF4444"
 64        info: "#3B82F6"
 65      trading:
 66        long_buy: "#22C55E"
 67        short_sell: "#EF4444"
 68      privacy:
 69        private: "#6366F1"
 70        public: "#F59E0B"
 71      testnet:
 72        testnet_primary: "#F97316"   # Orange
 73        testnet_secondary: "#FBBF24" # Amber
 74  
 75    # === THEMES ===
 76    themes:
 77      light:
 78        background_primary: "#FFFFFF"
 79        foreground_primary: "#111827"
 80        border_default: "#E5E7EB"
 81      dark:
 82        background_primary: "#0F0F0F"
 83        foreground_primary: "#F9FAFB"
 84        border_default: "#374151"
 85      high_contrast:
 86        background_primary: "#000000"
 87        foreground_primary: "#FFFFFF"
 88        border_default: "#FFFFFF"
 89  
 90    # === TYPOGRAPHY ===
 91    typography:
 92      families:
 93        sans: "Inter, system-ui, sans-serif"
 94        mono: "JetBrains Mono, Consolas, monospace"
 95        display: "Inter (tight tracking)"
 96      scale_px:
 97        xs: 12
 98        sm: 14
 99        base: 16
100        lg: 18
101        xl: 20
102        2xl: 24
103        3xl: 30
104        4xl: 36
105        5xl: 48
106      weights:
107        normal: 400
108        medium: 500
109        semibold: 600
110        bold: 700
111  
112    # === SPACING ===
113    spacing:
114      base_unit: 4px
115      scale:
116        0: 0px
117        0.5: 2px
118        1: 4px
119        2: 8px
120        3: 12px
121        4: 16px
122        5: 20px
123        6: 24px
124        8: 32px
125        10: 40px
126        12: 48px
127        16: 64px
128        20: 80px
129        24: 96px
130  
131    # === ANIMATION ===
132    animation:
133      durations:
134        instant: 0ms
135        fast: 100ms
136        normal: 200ms
137        slow: 300ms
138        slower: 500ms
139      easings:
140        default: "cubic-bezier(0.4, 0, 0.2, 1)"
141        in: "cubic-bezier(0.4, 0, 1, 1)"
142        out: "cubic-bezier(0, 0, 0.2, 1)"
143        bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
144      reduced_motion: replace_all_with_instant_opacity
145  
146    # === ACCESSIBILITY ===
147    accessibility:
148      standard: wcag_2.1_aa
149      requirements:
150        - color_contrast_4.5_to_1_text
151        - color_contrast_3_to_1_ui
152        - full_keyboard_navigation
153        - screen_reader_compatible_aria
154        - visible_focus_indicators
155        - text_resizable_200_percent
156        - no_color_only_information
157        - error_prevention_transactions
158      enhanced_options:
159        - high_contrast_mode
160        - large_text_mode
161        - reduced_motion_mode
162        - screen_reader_optimizations
163  
164    # === UI FRAMEWORK ===
165    framework:
166      css: tailwind_utility_first
167      primitives: radix_ui_accessible
168      icons: lucide
169      charts: recharts_tradingview
170  
171  changelog:
172    - version: 1.0.0
173      date: 2026-01-14
174      type: initial
175      description: "Initial design system spec from UI/UX Specification v1.0"
176      breaking: false