Skip to main content

Design Tokens

Brand tokens​

All tokens live in app/globals.css inside @theme inline { ... } (Tailwind v4 config).

--mm-bg:        #080A0F       /* page background */
--mm-surface:   #0E1117       /* card / panel */
--mm-surface2:  #141720       /* elevated surface */
--mm-border:    rgba(255,255,255,0.07)
--mm-cyan:      #00D4FF       /* primary accent */
--mm-cyan-dim:  rgba(0,212,255,0.12)
--mm-text:      #F0F4FF
--mm-muted:     #6B7280

Never hardcode hex values. Always reference via var(--mm-*) or Tailwind arbitrary values like bg-[var(--mm-surface)].

shadcn color variables​

shadcn components use oklch-based primitives in :root / .dark blocks (also in globals.css). These cover --background, --foreground, --primary, --muted, etc.

Tailwind v4 config​

There is no tailwind.config.* file. All config lives in globals.css:

@import "tailwindcss";

@theme inline {
  /* brand tokens here */
}

Visual direction​

  • Dark & cinematic — deep blacks, electric blue/cyan glow accents
  • Hover states: hover:border-[var(--mm-cyan)]
  • Featured items: permanent cyan glow shadow (shadow-[0_0_24px_var(--mm-cyan-dim)])
  • No inline styles except for CSS variable references