The 6-8 Sports
UI Framework
Forty-seven typed React components, a 3D chart stage, and a drillable world map, all wired to one token layer and already running on real water-polo data. Scroll to see the whole system.
Bruins 68% to close it out
Westgate Bruins 11, Southport Trojans 9, Q4 3:24. The shaded arc carries the uncertainty band, never a false-precision needle.
01 · Charts
Every chart, chosen for the question
Comparison, ranking, distribution, correlation, and the signature 3D stage. Every example runs on live water-polo data, sits in the broadcast HUD frame, and stays honest by construction: zero baselines, rate kept apart from volume, and 3D that decorates the stage without ever distorting a magnitude.
Bruins finish inside five meters as the perimeter dries up
Use when position IS the story. Orbit the pool to read where shots fall and which zones actually convert. Depth encodes real position, never a value.
Kovač tops the board with +3 on the field
Use for a sorted, largest-first standing on one metric, with a rank column and per-row drilldown.
Westgate out-works Southport across the board
Use when a same-unit metric is compared across categories within two or three groups.
Bauer's edge is sprint and vision; Kovač owns attack
Use for a multi-metric identity of one entity across three to eight axes.
02 · Broadcast
The on-air layer, ready for the truck
Scoreboards, the play-by-play feed, and the team comparison that anchor a 6-8 match center. Live navy stage, luminous teal accents, and a scanline wash straight off the broadcast truck.
Match CenterLiveSouthport Aquatics Center · Attendance 1,842
- WGBQ4 3:2411-9
Bauer buries the counter-attack from the left post.
Assist off the steal. Bruins push the lead to two.
- SPTQ4 4:10
Marković sent off: 20-second exclusion.
Bruins draw the ejection at center.
- WGBQ4 5:38
Keeper Andersson denies the five-meter penalty.
Kick save keeps it a one-goal game.
- SPTQ4 6:5210-9
Kovač finishes the six-on-five power play.
Trojans answer to level the quarter.
Conversion trending up
Possession edge held
Fewer fouls drawn
03 · Maps
The US carries the base; South Africa is the breakout market
GeoDrilldownMap is the 6-8 geographic HUD, a branded choropleth that falls from the whole world down to a single province, one lit landmass at a time. Click a lit country to drill; the breadcrumb walks back up.
Twelve lit markets, and two of them carry nearly half the base
Live on the 6-8 active-subscriber base. A region with no reading shows as an honest grey, never a zero. The map itself loads when you reach it, so it costs the top of this page nothing.
Active subscribers
89,000
Across 12 lit markets. The United States and South Africa are the two drillable anchors, falling through continent, country, and state or province.
Four tiers
- World: every country, shaded by its subscriber cohort.
- Continent: the countries of one continent, ranked.
- Country: the states or provinces with a footprint.
- Province: the metros, pinned as yellow pucks.
04 · Foundations
One token layer under all of it
Every color, type step, radius, and depth treatment above resolves from the same tokens, so a brand tweak ripples through the whole system in a single edit.
Navy: the stage
Teal: the hero accent
Yellow: the spark
Semantic
Championship
Giant display: hero headlines and scoreboard numerals.
Team Leaders
Headings, eyebrows, nav, buttons, and tracked labels.
Bruins finish inside five meters as the perimeter dries up.
Prose, links, and controls. Quiet under the display type.
glass-subtle
Light-touch glass for nested panels and demo frames.
glass
Frosted navy panel, teal hairline, inset highlight.
glass-strong
Heavier blur and a brighter border for chrome and headers.
05 · Components
The reference shelf
Eight groups of primitives, every one of them typed, token-driven, and focus-safe. Each tile is a live render; open its page for the full set with props and usage.
Buttons
Primary, glass, outline, and icon actions with every state wired.
Surfaces
Cards, panels, badges, and tags on the glass stage.
Data
Stats, tables, sparklines, and standings furniture.
Forms
Inputs, selects, switches, and sliders with real validation states.
Overlays
Dialogs, popovers, tooltips, and menus on the same glass surface.
Navigation
Breadcrumbs, tabs, pagination, and the app shell.
Feedback
Progress, spinners, skeletons, callouts, banners, and toasts.
Dashboard
The composed shell: KPI rows, metric tiles, and panel layouts.
Take it on air
Wire up a live dashboard, or open the interactive canvas and lay a screen out piece by piece.