Call the game. Climb the board.
Dark-first. One citron accent.
Green means won, red means lost.
Foundations
Valid · Hybrid direction. Dark-first with a full light theme, olive-tinted neutrals, one citron accent, and green/red reserved for won/lost. Direction established 2026-10-01.
One accent: citron
Citron marks the primary action in dark mode, the "you" highlight, the verified check, AI badges and the paid subscriber window. Text on citron is always ink. In light mode the primary action is ink, and citron stays a highlight.
Citron
Highlights, verified, AI badges
--citron / --brand-primary
Action
Ink in light, citron in dark
--accent / --accent-fg
Won · +1
Every right pick, record and delta
--win / --success
Lost · −1
Every wrong pick, loss and drop
--loss / --danger
Team colors are content, not chrome: they appear only on team discs, pick fills, carousel dots and Market heroes.
Text roles
Opaque, contrast-checked values in both themes. The concept's faint gray was lifted to reach 4.5:1.
--fg--fg-secondary--fg-muted--fg-subtle--fg-placeholder--fg-disabled--fg-brand-primary--fg-inverseMaterials
Surfaces are lit from above. Cards use a translucent gradient with a 1px edge and an inner top highlight; the stage is an olive gradient with stadium floodlights and film grain on product screens.
--card--inset--surface-hero--surface-sheet--you-bg--nav-glass--glass · --photo-scrim--glass-blackon --photo-veil (game sheet)bg
bg-subtle
bg-muted
bg-inverse
Explore the full palettes · 50–950
Raw ingredients. Components use semantic roles so colors adapt to light and dark.
Neutral · olive-tinted
50
100
200
300
400
500
600
700
800
900
950
Citron
50
100
200
300
400
500
600
700
800
900
950
Spacing, radius & elevation
4pt grid. Screens pad 16px; cards stack 14px apart; card insides pad 16px with 10–14px gaps.
Typography
Figtree is the only family; tabular numerals are on globally so scores and timers never jitter.
Line height
.9 / 1.1 / 1.25 / 1.5 / 1.75
Letter spacing
−.05em → .12em · 8 steps
Weights
400 / 500 / 600 / 700 / 800
Headings and numbers tighten as they grow: display sizes use None (.9) and −.05em, titles use Tight and −.02em. Body copy stays Normal (1.5) at 0. Uppercase kickers open up to .08em.
Line-height options
Display and heading styles
13XL · 150px
Wiped score
.text-13xl
Semibold · 600
0
Bold · 700
0
Extrabold · 800
0
12XL · 124px
Wipe confirmation score
.text-12xl
Semibold · 600
0
Bold · 700
0
Extrabold · 800
0
11XL · 96px
Result +1 / −1
.text-11xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
10XL · 64px
Score focus, pick abbreviation
.text-10xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
9XL · 54px
All-time scores
.text-9xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
8XL · 46px
Gauge percentage
.text-8xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
7XL · 38px
Login headline
.text-7xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
6XL · 34px
Score after a result
.text-6xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
5XL · 30px
Screen title (H1)
.text-5xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
4XL · 28px
Confirmation titles
.text-4xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
3XL · 24px
Sport tile name, done title
.text-3xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
2XL · 22px
Market title, KPI values
.text-2xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
XL · 20px
Stat values, section heads
.text-xl
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
LG · 18px
Section header (H2), card titles
.text-lg
Semibold · 600
+23
Bold · 700
+23
Extrabold · 800
+23
Body styles
BODY-LG · 17px
Card name, primary CTA
.text-body-lg
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
MD · 16px
Inputs, row titles
.text-md
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
BODY · 15px
Row titles, chips
.text-body
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
BODY-SM · 14px
Supporting copy
.text-body-sm
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
SM · 13px
Meta and secondary text
.text-sm
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
XS · 12px
Captions, badges
.text-xs
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
2XS · 11px
Tab labels, stat labels
.text-2xs
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
3XS · 10px
Kicker
.text-3xs
Regular · 400
Aa
Semibold · 600
Aa
Bold · 700
Aa
Kickers
Final · NFL · This week
Figtree · 2XS / 11px · Bold · .08em · uppercase. Use text-label, or eyebrow for muted kickers.
NFL · College
Figtree · 3XS / 10px · Semibold · .12em · uppercase. Use text-kicker only for sport-tile kickers.
Calm, precise copy
No emoji and no exclamation marks. Sentence case, short plain statements, and a true minus sign (−1, U+2212) on every loss.
Icons
Phosphor is the shared icon library. Choose regular, filled, or duotone to suit the visual concept. The same icons below show how each style changes the visual weight.
Valid set
Regular for interface and the inactive tabs; fill for the current tab, the verified seal and badge glyphs; bold, with an added stroke, for the won/lost marks on team logos.
Regular
A clear outline for navigation and everyday controls.
Filled
Solid shapes for stronger emphasis or selected states.
Duotone
Two opacity levels for added depth, using the same theme color.
These examples are a starter selection, not the entire library. During concept work, choose one style or define purposeful combinations, such as regular navigation with filled active states. After approval, document and reuse the chosen rules.
01 / Button
Every button is a pill. Solid is the one primary action per group: citron in dark mode, ink in light. Card sits on the lit material for secondary actions and round icon buttons. Minimum target 44px; primary CTAs 52–60px.
Citron (data-palette="citron") is reserved for paying, unlocking and the subscriber window. Pressed buttons scale to 98%.
02 / Chip
Horizontal filters for scopes and sports. The selected chip takes the action fill; the row scrolls edge to edge. Use aria-pressed for filters.
03 / Field
Input, textarea, and native select share labels, hints, and validation. Selects reserve space for an inset arrow. Help and error text have an additional 2px of top spacing.
Enter a valid email address.
04–06 / Selection controls
Checkboxes and radios use 20px indicators. Checkboxes select options, radios select one option, and switches change a setting.
07 / Surface
A visual treatment with no prescribed content or layout. Valid uses two: the default card and the dark hero (rank card). Sheets and menus use --surface-sheet through their own recipes.
A horizontal composition
Identity, a short description, and room to breathe.
+23
A compact data composition.
#1,284
of 48,210 playersThese compositions are examples, not core card templates. Surface defines treatment only; layout and padding are composed separately.
08 / Badge
Compact labels communicate status with words as well as color.
09 / Tabs
Line and segmented treatments share keyboard and panel behavior.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
10 / Alert
Persistent feedback belongs near the relevant content.
Use inline feedback near the relevant content.
Your preferences are up to date.
Some information may be out of date.
Check the highlighted fields and try again.
11 / Dialog
Native modal semantics with an accessible title and explicit dismissal.
12 / Avatar
Image, initials, and a neutral fallback. Three sizes.
Use initials or the neutral person icon when a photo is unavailable.
13 / Search field
A field composition with search and clear actions.
Clearing returns focus to the field. Product code owns filtering.
Mobile primitives
App header, bottom navigation, sheet, sticky action bar, and list row. In the framed mobile player, safe-area padding clears the transparent 44px status bar and 28px home indicator overlays. Standalone and canvas screens keep native safe areas only.
Lions over Packers
NFL · Final 27–20
Sheets share dialog behavior: focus stays inside, Escape closes, and focus returns to the trigger.