Design System

oklch tokens, component library, and the GOaT visual language.

The GOaT design system is dark-first, sport-inspired, and built entirely with Tailwind + DaisyUI. No component library imports — just CSS classes.

Color Tokens (oklch)

All colors use oklch for perceptual uniformity:

/* Base palette */
--color-base-100: oklch(14% 0.01 260);      /* Deep dark background */
--color-base-200: oklch(18% 0.012 260);     /* Card backgrounds */
--color-base-300: oklch(23% 0.015 260);     /* Borders, dividers */
--color-base-content: oklch(93% 0.008 260); /* Primary text */

/* Brand */
--color-primary: oklch(74% 0.19 45);        /* Electric orange */
--color-accent: oklch(82% 0.14 85);         /* Warm amber */

/* Semantic */
--color-success: oklch(72% 0.17 155);       /* Green */
--color-error: oklch(65% 0.2 25);           /* Red */
--color-info: oklch(70% 0.14 250);          /* Blue */
--color-warning: oklch(84% 0.15 80);        /* Yellow */

Component Classes

Glass Card

<div class="card-glass rounded-box p-5">
  <!-- Frosted glass with blur backdrop -->
</div>

Gradient Button

<button class="btn btn-gradient font-display">Start Game</button>

Stat Card

<div class="stat-card card-glass rounded-box p-4" style="--stat-accent: var(--color-primary)">
  <span class="label-uppercase text-xs">Score</span>
  <span class="text-4xl font-display font-bold tabular-nums">21</span>
</div>

Rank Badges

<span class="badge badge-rank-1">1st</span>  <!-- Gold gradient -->
<span class="badge badge-rank-2">2nd</span>  <!-- Silver gradient -->
<span class="badge badge-rank-3">3rd</span>  <!-- Bronze gradient -->

Animations

Score Pop

<span class="score-animate text-6xl font-display" x-text="score">0</span>

Fade Up (entrance)

<div class="animate-fade-up">Content appears from below</div>

Pulse Glow (CTA)

<button class="btn btn-gradient animate-pulse-glow">Play Now</button>

Ripple Effect

<button class="btn ripple-effect">Tap me</button>

Typography Scale

ElementFontWeightTracking
H1Clash Display600-0.03em
H2, H3Clash Display600-0.02em
BodyInter400normal
LabelsInter6000.08em (uppercase)
CodeJetBrains Mono400normal
ScoresClash Display700tabular-nums

Layout Patterns

Glass Nav

<nav class="nav-glass sticky top-0 z-50">
  <!-- Frosted glass navigation -->
</nav>

Mobile Bottom Tab Bar

<div class="fixed bottom-0 left-0 right-0 nav-glass pb-safe">
  <!-- Sleeper-style bottom nav -->
</div>

Hero Gradient

<div class="hero-gradient min-h-[60vh]">
  <!-- Radial gradient background -->
</div>

Motion Tokens

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* Smooth deceleration */
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot bounce */
--duration-fast: 120ms;   /* Micro-interactions */
--duration-base: 200ms;   /* Standard transitions */
--duration-slow: 400ms;   /* Page transitions */

All animations respect prefers-reduced-motion.

Design Inspirations

  • Hudl — Bold sports energy, uppercase labels, confident typography
  • Sleeper — Dark-first, neon accents, mobile-first navigation
  • Polymarket — Clean data density, minimal chrome, sharp corners