Design tokens a component library system

Navrhni design tokens systém pro [PRODUKT/APLIKACE]. Platformy: [WEB/MOBILE/DESKTOP]. Framework: [REACT/VUE/FLUTTER/SWIFT]. Design tool: [FIGMA/SKETCH/XD]. Struktura: 1) **Token Architecture** - token hierarchy (global → alias → component), naming convention (category-property-variant-state), semantic vs literal tokens, token categories (color, spacing, typography, shadows, borders, animations), 2) **Color Tokens** - primitive colors (brand.green.500), semantic colors (color.text.primary, color.bg.success), theme variants (light/dark mode), alpha variants (opacity levels), usage documentation, 3) **Spacing Tokens** - base unit (4px or 8px grid), scale system (4, 8, 12, 16, 24, 32, 48, 64, 96px), semantic names (space.xs, space.sm, space.md), responsive modifiers (space.sm-mobile vs space.sm-desktop), 4) **Typography Tokens** - font families (font.primary, font.mono), font sizes (fontSize.xs to fontSize.3xl), line heights (lineHeight.tight, lineHeight.relaxed), font weights (fontWeight.normal, fontWeight.bold), letter spacing, 5) **Component Tokens** - button tokens (button.primary.bg, button.primary.text, button.height.md), input tokens (input.border, input.focus.ring), card tokens (card.padding, card.shadow), 6) **Shadow & Elevation** - shadow levels (shadow.sm to shadow.2xl), elevation scale (z-index system), blur & spread values, 7) **Border & Radius** - border widths (1px, 2px, 4px), border radius scale (radius.sm to radius.full), 8) **Animation Tokens** - duration (duration.fast 150ms, duration.normal 300ms), easing functions (easing.easeIn, easing.spring), 9) **Implementation** - JSON/YAML format, CSS variables output, platform-specific exports (iOS Swift, Android XML, React Native, Flutter), build pipeline (Style Dictionary), 10) **Component Library** - atomic design structure (atoms, molecules, organisms), component variants, prop API design, composition patterns, storybook documentation. Zahrň code examples a config files.