AIOX SQUADSEMANTIC TOKENSV2.0 // DARK COCKPIT EDITION

Semantic Tokens

Aliases, Glow, States, Font Weights, shadcn/ui Mapping // 2026

Design System6 Subsections2026
01Semantic TokensAliases · Glow · States · Weights · shadcn
Semantic Backgrounds
--color-bg-void#000000Absolute black. Overlays, blackout.
--color-bg-base#050505Page background. Main canvas.
--color-bg-surface#0F0F11Elevated surface. Cards, panels.
--color-bg-surface-alt#1C1E19Secondary surface. Nested cards.
--color-bg-elevated#1C1E19Alias for surface-alt.
--color-bg-overlayrgba(61,61,61,0.5)Modal backdrop dim.
Semantic TextText color aliases
--color-text-basergb(244,244,232)Primary text. Warm cream.
--color-text-secondaryrgba(244,244,232,0.7)Secondary text. Descriptions.
--color-text-tertiaryrgba(244,244,232,0.55)Tertiary text. Metadata.
--color-text-mutedrgba(245,244,231,0.4)Muted text. Dim labels.
Glow & NeonBrand luminance tokens
--neon
#D1FF00
Brand neon. = --bb-lime.
--neon-dim
rgba(209,255,0,0.15)
Subtle neon tint. Backgrounds.
--neon-glow
rgba(209,255,0,0.4)
Strong glow. Active focus.
--lime-glow
rgba(209,255,0,0.25)
Box-shadow glow. CTAs.
--lime-glow-soft
rgba(209,255,0,0.1)
Soft glow. Hover states.
Interactive StatesFocus, selection, warning
--focus-brand
#D1FF00
Focus ring on brand elements.
--focus-neutral
#BDBDBD
Focus ring on neutral elements.
--selection-bg
#050505
Text selection background.
--selection-fg
#D1FF00
Text selection foreground.
--warning-bg
rgba(245,158,11,0.05)
Warning state background.
--warning-border
rgba(245,158,11,0.2)
Warning state border.
Font WeightsWeight scale tokens
--font-weight-thin300Thin
--font-weight-regular400Regular
--font-weight-medium500Medium
--font-weight-semibold600Semibold
--font-weight-bold700Bold
--font-weight-extrabold800Extrabold
--font-weight-black900Black
shadcn/ui MappingComponent library token bridge
shadcn tokenmaps toresolved value
--background--bb-dark
#050505
--foreground--bb-cream
rgb(244,244,232)
--card / --popover--bb-surface
#0F0F11
--primary--bb-lime
#D1FF00
--primary-foreground--bb-dark
#050505
--accent--bb-lime
#D1FF00
--accent-foreground--bb-dark
#050505
--muted--bb-gray-charcoal
#3D3D3D
--muted-foreground--bb-gray-dim
#696969
--destructive--bb-error
#EF4444
--ring--bb-lime
#D1FF00
--radius
0.5rem