Design System / Foundations

Foundations

The source of truth for the 6-8 Sports language — a broadcast heads-up display rendered in code. A dark navy stage, luminous teal as the hero, electric yellow as the spark, glass panels, and a wash of scanlines. Everything on the pages that follow is built from the tokens and utilities shown here.

Navy stage
Teal hero accent
Yellow spark
Glass + scanlines

6-8 UI

Brand marks

The logo is a real asset, never redrawn by hand. Load it through next/image and place it on navy. Below is the primary wordmark lockup plus the three mark variants.

68-sports-logo.svg — primary lockup, teal figure-8 loop + yellow dot

Reversed mark

68-logo-white.png

White knockout for dark chrome and busy footage.

Full-color mark

68-logo.png

Teal loop, yellow dot. The default lockup.

Full-color mark

68-logo.webp

The same mark shipped as WebP for the web.

6-8 UI

Color

Five families on one rule: navy is the stage, teal leads, yellow sparks, and everything else supports. Values here mirror the Tailwind tokens exactly.

Navy — the stage

Every panel sits on navy. Deep is the page base; mid is a raised surface.

navy#0D1B2A

navy-deep#0A1622

navy-mid#1a3453

Teal — the hero accent

The luminous lead. Bright lifts on hover, deep seats on press, dim tints fills.

teal#1DC9BE

teal-bright#0DE6D6

teal-deep#13827b

teal-dimrgba(29, 201, 190, 0.18)

Yellow — the spark

Reserved for live and high-priority moments, so it never loses its charge.

yellow#F5CE3F

yellow-deep#D9A400

yellow-dimrgba(245, 206, 63, 0.15)

Text

Foreground carries prose on navy; the two muted steps recede beneath it.

foreground#EAF1FF

muted-light#8E96A8

muted#6A7285

Semantic

Status colors for outcomes and alerts. Info borrows the hero teal.

success#00D084

warning#FCB900

danger#CF2E2E

info#1DC9BE

6-8 UI

Typography

Two faces, clear roles. Barlow Condensed sets every heading, label, and stat in uppercase with wide tracking. DM Sans carries the prose.

Montserrat — display

H172 / 60px · tracking 0.04emBroadcast

H260 / 48px · tracking 0.05emGame Recap

H336px · tracking 0.06emBox Score

H430px · tracking 0.08emTeam Leaders

H524px · tracking 0.10emQuarter Split

H620px · tracking 0.14emPlay By Play

DM Sans — body

Lead18px · DM Sans

DM Sans handles every run of prose. It stays quiet under the condensed display type so a headline always leads and the body never competes.

Body16px · DM Sans

The default paragraph size. Comfortable line length, relaxed leading, and a muted foreground that reads cleanly on the navy stage.

Small14px · DM Sans

Captions, helper text, and secondary detail. Small but never cramped, and dropped to a muted tone so it recedes.

Numbers & stats

68102–98

Every number and stat is set in the display face withtabular-numsso digits align in columns and scores never jitter.

6-8 UI

Spacing & radius

The 4px spacing rhythm and the corner scale. Consistent steps keep density even across every panel, control, and gap.

Spacing scale

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Radius scale

sm2px

base4px

md6px

lg8px

xl12px

2xl16px

3xl24px

full999px

6-8 UI

Depth

Shadows and glows carry the broadcast depth. A deep drop shadow lifts a panel off the stage; accent glows make teal and yellow elements feel lit.

shadow-panel

Panel

shadow-glow-teal

Teal glow

shadow-glow-teal-sm

Hover glow

shadow-glow-yellow

Live glow

border-glow-teal

Bordered

shadow-inner

Inset

6-8 UI

Signature utilities

The visual signature of the system, running live. These are the classes to reach for — glass tiers, broadcast scanlines, accent glows, and the motion primitives.

Glass tiers

.glass-strongChrome & headers

.glassCards & panels

.glass-subtleNested frames

scanlines + animate-scan

Live

102–98

text-glow-teal / -yellow

TealSpark

animate-float

animate-glow-pulse

animate-pulse-ring

shimmer

grid-overlay

32px teal grid

card-3d + focus-ring

6-8 UI

Utility index

Every signature class shipped in the config, with what it does. Reach for these generously but tastefully — they are what make the system unmistakable.

.glass

Frosted navy panel, teal hairline, inset highlight.

.glass-strong

Heavier blur + brighter border for chrome and headers.

.glass-subtle

Light-touch glass for demo frames and nested panels.

.scanlines

Broadcast-DNA repeating horizontal scanlines overlay.

.text-glow-teal

Luminous teal text shadow.

.text-glow-yellow

Electric yellow text shadow for live / emphasis.

.border-glow-teal

Teal border with a soft outer glow.

.shadow-panel

Deep panel drop shadow + teal ring.

.shadow-glow-teal

Large teal ambient glow.

.shadow-glow-teal-sm

Compact teal glow for hover states.

.shadow-glow-yellow

Yellow ambient glow for live elements.

.card-3d

3D transform stage with cubic-bezier transition.

.grid-overlay

Faint teal 32px background grid.

.shimmer

Teal-tinted moving gradient for skeletons / loading.

.text-balance

text-wrap: balance for tidy multi-line headings.

.focus-ring

Teal focus-visible ring with navy offset.

.live-dot

Pulsing yellow live indicator dot.

.animate-scan

Slow vertical scanline drift.

.animate-float

Gentle vertical float.

.animate-glow-pulse

Opacity glow pulse for live accents.

.animate-shimmer

Background-position shimmer sweep.

.animate-pulse-ring

Expanding + fading ring pulse.