Touchline · Liquid Glass

The Design System

One cohesive, theme-aware token set rendered as frosted liquid glass. Every color, surface, control, and chart on this page reads correctly in both dark and light. Dark is the default. Flip it from the nav.

5 accents9 glass surfaces2 themes, 0 hardcoded colors

Principles

Foundations

The system is dark-first and built entirely from CSS variable tokens. Nothing is hardcoded to a light or dark value, so a single class swap rethemes the whole product.

Theme-aware

Every token is a CSS var. Dark and light share one definition surface.

One accent

Each page picks a single accent. Neutrals carry everything else.

Liquid glass

Frosted surfaces with a specular edge sell depth without clutter.

Tokens

Color tokens

Neutrals do the heavy lifting; accents are for emphasis. These are theme-aware. Toggle light mode in the nav and watch every swatch re-tune itself for legibility.

Text & neutral roles

text-fg

Primary text

--fg

text-fg-muted

Secondary text

--fg-muted

text-fg-subtle

Captions / labels

--fg-subtle

Fills & lines

bg-panel

Subtle inner fill

--fill-1

bg-panel-2

Stronger inner fill

--fill-2

border-line

Dividers / rings

--line

Accent palette

Gold leads this page. The others sit beside it without clashing. Rule: one accent per page.

lead

gold

Lead · this page

--gold

pitch

Positive / live

--pitch

azure

Cool counterpoint

--azure

coral

Negative / danger

--coral

violet

Tertiary highlight

--violet

Type

Typography

A single SF-style sans, tight tracking on display sizes, tabular numerals for stats. Two gradient helpers add a liquid sheen to headlines.

World Cup 2026

Display / 5xl · tracking-tight

Group stage standings

Heading / 3xl

Knockout bracket

Subhead / xl

Body copy uses muted foreground for comfortable reading at length.

Body / base · fg-muted

Possession

Label / xs · tracked caps

3 : 1 · 87:45 · 2.4 xG

Tabular numerals / .tabnum

Gradient text helpers

.text-gradient-fg

Neutral fade

.text-gradient-gold

Golden sheen

Surfaces

Glass surfaces

Elevated content lives on frosted glass with a specular top edge. Reach for it where elevation genuinely helps, not for every block.

GlassCard · flathover={false}

The base surface. Frosted fill, specular edge, no lift.

GlassCard · hoverhover (default)

Hover me. Springs up 4px with a deeper shadow.

GlassCard · accentaccent='var(--accent)'

Accent-tinted glass for the one block that should glow.

GlassCard · railrail accent='...'

A thin accent rail instead of a full tint. Subtle emphasis.

GlassPanel · strongglass-strong

A heavier, static panel for dense regions like tables, rails, and forms. Stronger blur, no scroll-reveal animation.

Controls

Buttons + pills

Primary actions carry the gold gradient; secondary actions stay on glass. Pills tag status; the live pill pulses coral.

Buttons

Pills

DefaultLive · 67'AccentQualified

Charts

Data visualization

The signature primitives: animated progress rings, comparison bars, momentum sparklines, and three-way probability bars. All accent-driven and theme-aware.

ProgressRing

28%

value 0.28

55%

value 0.55

74%

value 0.74

92%

value 0.92

CompareBar

61%Possession39%

14Shots9

24xG11

MomentumGraph

Pressure over time

WinProbBar

Win probability

52%Draw 27%21%

Stat

104

Matches

Teams

Venues

2.7

Goals / game

Motion

Motion language

Springs, not linear easing. Surfaces fade up on scroll, lift on hover, and shimmer while loading. Subtle, fast, and respectful of reduced-motion preferences.

⚽

Spring hover

whileHover y:-6

reveals on scroll

Fade up

whileInView y:0

🏆

Float loop

animate y loop

Skeleton shimmer

<Skeleton/>

Library