FRONTLINE
Design System

Design Tokens

Semantic color surface, sourced from theme

Shadcn semantic

bg-backgroundbg-background
bg-cardbg-card
bg-popoverbg-popover
bg-primarybg-primary
bg-secondarybg-secondary
bg-mutedbg-muted
bg-accentbg-accent
bg-destructivebg-destructive
bg-borderbg-border
bg-inputbg-input
bg-ringbg-ring
bg-foregroundbg-foreground

Frontline surface

bg-fl-bgbg-fl-bg
bg-fl-surfbg-fl-surf
bg-fl-raisedbg-fl-raised
bg-fl-elevbg-fl-elev
bg-fl-borderbg-fl-border
bg-fl-border-stbg-fl-border-st

Factions

bg-fl-redbg-fl-red
bg-fl-red-hbg-fl-red-h
bg-fl-bluebg-fl-blue
bg-fl-blue-hbg-fl-blue-h
bg-fl-goldbg-fl-gold
bg-fl-gold-hbg-fl-gold-h
bg-red-factionbg-red-faction
bg-blue-factionbg-blue-faction
bg-goldbg-gold
bg-successbg-success
bg-warningbg-warning
bg-dangerbg-danger

Foreground ramp

The quick brown foxfl-fg1
The quick brown foxfl-fg2
The quick brown foxfl-fg3
The quick brown foxfl-fg4

Typography

Oswald · Barlow · IBM Plex Mono
Hold The Line
font-oswald · display 48/semibold
Section Heading
font-oswald · 24/semibold/0.08em
Body — Barlow 15px. Command your units across the front and seize strategic objectives before reinforcements arrive.
font-barlow · body 15/regular
Interactive Label · Play Ranked
font-barlow · 13/medium/0.06em
STATUS · OPERATIONAL · 14.2MS
font-plex · 11/0.14em

Button

Variants × sizes, icon + link combos

Variants (size: default)

Sizes (variant: default)

Variant × Size matrix

variant \ sizexssmdefaultlg
default
secondary
outline
ghost
destructive
link

Icon sizes

With icon (leading / trailing)

States

CTA Button

Primary · Blue · Outline · Ghost · Link · lg / md / sm / xs

Variants (size: md)

Sizes (variant: primary)

lg
md
sm
xs

Variant × Size matrix

variant \ sizelgmdsmxs
primary
blue
outline
ghost
link

Dialog

Modal, blocking interactions

Theme Switchers

Cycle (inline) and Toggle (menu)

ThemeCycle

Inline cycle button. Click to step through system → dark → light.

ThemeToggle

Icon button with dropdown menu. Explicit select light / dark / system.