Design System

A visual reference of Trackside's current design tokens, colors, typography, and UI patterns. Use this page to audit the current theme and plan dark mode redesigns.

Toggle dark mode in your browser/OS to preview both themes

Color Palette

zinc (Primary Neutral)

Main neutral palette used throughout the site for backgrounds, text, and borders

#f8fafc

zinc-50

Lightest backgrounds

#f1f5f9

zinc-100

Light mode page bg

#e2e8f0

zinc-200

Hover states, borders

#cbd5e1

zinc-300

Borders, dividers

#94a3b8

zinc-400

Muted text, icons

#64748b

zinc-500

Secondary text

#475569

zinc-600

Body text

#334155

zinc-700

Dark hover states

#1e293b

zinc-800

Dark mode header/cards

#0f172a

zinc-900

Dark mode page bg

#020617

zinc-950

Darkest backgrounds

Status Colors

Used for race status badges and interactive feedback

#dc2626

red-600

Next race badge, alerts

#2563eb

blue-600

Previous race, links

#16a34a

green-600

Completed races, success

#d97706

amber-600

Upcoming races, warnings

Accent Colors (CSS Variables)

Defined in global.css :root - used for branding elements

#00a6f4

--accent

Primary accent, blockquotes

#0084d1

--accent-dark

Darker accent variant

Light/Dark Mode Comparison

Light Mode

Page Background

bg-zinc-100

Card Background

bg-white

Primary Text (zinc-900)

Secondary Text (zinc-600)

Muted Text (zinc-400)

Dark Mode

Page Background

bg-zinc-900

Card Background

bg-zinc-800

Primary Text (zinc-100)

Secondary Text (zinc-400)

Muted Text (zinc-500)

Typography

Element Preview Size Usage
<h1>

Heading 1

3.052em / ~55px Page titles, hero headlines
<h2>

Heading 2

2.441em / ~44px Section headers
<h3>

Heading 3

1.953em / ~35px Card titles, subsections
<h4>

Heading 4

1.563em / ~28px Component headers
<h5>
Heading 5
1.25em / ~22px Small headings
<p>

Body paragraph text

18px (body) Body text
<small> Small/caption text 14px Captions, metadata

Font Families

Headings

Atkinson Hyperlegible

Body Text

Noto Sans Variable

Button Styles

Primary (Red/Racing)

Primary CTAs, Season links

bg-red-600 hover:bg-red-700 text-white

Secondary (Blue)

Secondary actions, info links

bg-blue-600 hover:bg-blue-700 text-white

Outline Light

Light mode tertiary buttons

border bg-white hover:bg-zinc-100 text-zinc-700

Outline Dark

Dark mode tertiary buttons

border-zinc-600 bg-zinc-800 hover:bg-zinc-700 text-zinc-200

Ghost

Navigation, subtle actions

hover:bg-zinc-100 dark:hover:bg-zinc-700

Card Styles

Default Card

Example card content with the applied styles.

border shadow-sm rounded-lg

Elevated Card

Example card content with the applied styles.

shadow-lg rounded-lg

Interactive Card

Hover over this card to see the effect.

hover:shadow-xl hover:border-blue-500

Spacing Scale

p-1
0.25rem / 4px
p-2
0.5rem / 8px
p-4
1rem / 16px
p-6
1.5rem / 24px
p-8
2rem / 32px
p-10
2.5rem / 40px
p-12
3rem / 48px
p-16
4rem / 64px

Interactive States

Hover States

Hover me (zinc-100 → zinc-200)
Hover for border change

Focus States

Status Badges (Race Cards)

Next Race Previous Race Completed Upcoming

Dark Theme Alternatives

Explore different dark theme palettes. The current theme uses cool zinc tones. Consider these alternatives for a fresh look:

Current Theme (zinc)

Card Background

zinc-800 on zinc-900

Primary Text (zinc-100)

Secondary Text (zinc-400)

Muted Text (zinc-500)

Red Blue Green
Alternative: Neutral (True Gray)

Card Background

neutral-800 on neutral-900

Primary Text (neutral-50)

Secondary Text (neutral-400)

Muted Text (neutral-500)

Rose Violet Teal
Alternative: Zinc (Warmer)

Card Background

zinc-800 on zinc-900

Primary Text (zinc-50)

Secondary Text (zinc-400)

Muted Text (zinc-500)

Red Blue Green
Alternative: Zinc with Racing Red Accent

Card Background with Red Accent

zinc-800 on zinc-900 + racing red accent

Primary Text (zinc-50)

Secondary Text (zinc-400)

Muted Text (zinc-500)

Racing Red Blue Green
Alternative: Racing Red Accent

Card with Red Accent

Deep black with red highlights

Primary Text (white)

Secondary Text (neutral-300)

Muted Text (neutral-500)

Racing Red Amber Emerald
Alternative: Deep Blue

Card Background

Navy tones for racing feel

Primary Text (sky-50)

Secondary Text (sky-300)

Accent Text (sky-400)

Sky Orange Purple
Alternative: Deep Blue with Accent

Card Background with Accent

Navy tones with site accent highlights

Primary Text (sky-50)

Secondary Text (sky-300)

Accent Text (sky-400)

Accent Orange Purple
Alternative: Stone (Warm Brown)

Card Background

stone-800 on stone-900

Primary Text (stone-50)

Secondary Text (stone-400)

Muted Text (stone-500)

Orange Cyan Lime

Quick Reference: Tailwind Gray Scales

Scale 900 (Page BG) 800 (Card BG) Undertone
zinc (current) #0f172a #1e293b Cool blue
Zinc #18181b #27272a Neutral warm
Neutral #171717 #262626 True gray
Stone #1c1917 #292524 Warm brown
Gray #111827 #1f2937 Cool blue-gray

Redesign Recommendations

Approach for Redesign

  • • Define new colors in global.css as CSS variables
  • • Use Tailwind's dark: variant for dark mode classes
  • • Consider adding a Tailwind config for custom color names
  • • Test contrast ratios for WCAG accessibility (4.5:1 for text)
  • • Use this page to preview changes in real-time

Key Files to Modify

  • src/styles/global.css - CSS variables
  • src/components/Header.astro
  • src/components/Footer.astro
  • src/pages/index.astro
  • All component files in src/components/