AFL · Light mode
AFL theme
Deep navy chrome with a red accent; dark mode is a navy surface ramp rather than neutral gray. Links, buttons and nav fills keep the blue primary.
Readability
Every pair a reader meets, scored against WCAG AA: 4.5:1 for text, 3:1 for large or decorative text.
- Aa Body text on the page —
- Aa Body text on a card —
- Aa Muted text on a card —
- Aa Link on a card —
- Aa Accent as text on a card —
- Aa Button text on the button —
- Aa Button text on hover —
- Aa Text on a primary fill —
- Aa Text on an accent fill —
- Aa Text on a hovered accent fill —
- Aa Text on a hero button —
- Aa Text on a secondary button —
- Aa Text on a success fill —
- Aa Primary as text on a card —
- Aa Footer text on the footer —
Heroes
Buttons and links
Body copy with an inline link and muted secondary text.
Cards, tables and badges
Standings
| Team | W-L | PF | Status |
|---|---|---|---|
| Pacific Pigskins | 5-1 | 812.4 | Clinched |
| Midwest Marauders | 4-2 | 776.9 | In the hunt |
| Bayside Brawlers | 3-3 | 701.2 | Bubble |
| Northern Lights | 1-5 | 598.0 | Eliminated |
Empty and error states
Type
Display — headlines and hero titles
Week 6 Power Rankings
Body — everything you read
The trade deadline is Thursday at 4pm. Set your lineup before kickoff.
Numbers — scores, stats, salaries
127.45 · $4,250,000 · 12–4
Color system
Every color this theme sets in light mode, as the site renders it. 33 slots are left to the shared defaults.
Surfaces
- card-bg
- card-border
- card-surface
- content-bg
- content-bg-accent
- content-bg-muted
- input-bg
- inverse-bg
- page-bg
- table-border
- table-header-bg
- table-row-bg
- table-row-bg-alt
- table-row-bg-hover
Text
- accent-content-text-color
- content-text-muted
- input-placeholder
- input-text
- page-text
Borders
- content-border
- content-border-color
- input-border
Neutral ramp
- color-gray-100
- color-gray-200
- color-gray-300
- color-gray-400
- color-gray-50
- color-gray-500
- color-gray-600
- color-gray-700
- color-gray-800
- color-gray-900
Primary and buttons
- btn-icon-text-focus
- btn-primary-bg
- btn-primary-bg-hover
- btn-primary-border
- btn-primary-border-hover
- btn-primary-text
- color-primary
- color-primary-dark
- color-primary-light
- input-border-focus
- shadow-btn-hover
- shadow-focus-ring
Call to action
- cta-fill
- cta-fill-hover
- on-cta-fill
Secondary
- btn-secondary-bg
- btn-secondary-bg-hover
- btn-secondary-text
- color-secondary
- color-secondary-dark
- color-secondary-light
Accent and links
- color-accent
- league-accent
- link-color
- link-color-accent
- link-color-accent-hover
- link-color-focus
- link-color-hover
- on-league-accent
- league-accent-hover
- on-color-accent
Header, breadcrumb strip and wordmark
- breadcrumb-bar-bg
- header-nav-icon-color
- header-nav-icon-hover-color
- header-nav-label-color
- header-nav-label-hover-color
Heroes
- hero-ink
- hero-surface
- hero-accent
- hero-glow
- hero-urgent
- hero-gradient
- hero-highlight
- hero-pill-bg
- hero-pill-border
- hero-cta-ink
- hero-action
- on-hero-action
Text selection
- selection-bg
Side nav
- nav-active-bg
- nav-active-text
- nav-bg
- nav-bg-subtle
- nav-border
- nav-border-subtle
- nav-focus-ring
- nav-footer-bg
- nav-footer-border
- nav-hover-bg
- nav-scrollbar-thumb
- nav-scrollbar-thumb-hover
- nav-switcher-bg
- nav-text
- nav-text-muted
- nav-verify-bg
- nav-verify-border
- nav-verify-hover-bg
- nav-verify-text
Badges
- badge-info-bg
- badge-info-text
Content box tints
- accent-content-bg-color
- accent-content-border-color
- primary-content-boxshadow-color
Raw palette
- afl-gold
- afl-gold-text
- afl-navy
- afl-trophy-gold
- afl-trophy-gold-light
Message