Me Vs Me // Design System
HomeAnalyticsDevelopmentSecurityDesign SystemMe vs MeSite HealthFlowchart Designer
MVM
Design System
PHASES
9 available
OverviewDestiny 2 StylePhase 1: FoundationPhase 2: ComponentsPhase 3: NavigationPhase 4: Icons & MotionPhase 5: Templates & HubsPhase 6: Mobile & QAPhase 7: User Journeys
[ MvM / IMPLEMENTATION PLAN / PHASE 1 ]

Foundation

Design tokens, Tailwind config, typography scale, fonts, grid & layout system. Weeks 1–2.

Tasks & Deliverables

  • CSS variables for primary palette (Deep Space Black, Void Purple, Solar Orange, Arc Blue, Stasis Ice)

    styles/destiny-tokens.css

  • Secondary & accent colors (Gunmetal, Steel, Legendary Purple, Exotic Gold, status colors)

    styles/destiny-tokens.css

  • Gradient tokens (Void, Solar, Arc, Stasis, Legendary Shimmer, Exotic Glow)

    styles/destiny-tokens.css

  • Typography scale (Display XL → Micro, weights 100–900, line heights)

    styles/destiny-tokens.css

  • Spacing scale (8px base: 0, 4, 8 … 96px)

    styles/destiny-tokens.css

  • Tailwind config extending defaults with MvM tokens

    app/globals.css

  • Dark/light mode CSS variables

    app/globals.css

Output: styles/destiny-tokens.css, lib/design-tokens.ts, lib/destiny-tokens.ts

UI Reference

Colors paletteDesign tokens
DESIGN
Me Vs Me Design System9 phases