Marketing Site (td-home)

Nuxt 3 + Tailwind CSS v4. Light theme. Token subset synced from the web app.

Token source: apps/td-home/assets/css/tailwind.css (synced from main-app-web)

Color Tokens

Same core tokens as the web app, plus marketing-specific dark and FitScore colors.

Core (synced from web app)

Primary#2563eb
Primary Light#dbeafe
Surface#f6f8fb
Text#1a202c
Text Muted#64748b

Dark Header/Footer

Dark BG#171626
Dark Medium#201f2d
Dark Accent#405387
Mid Grey#b4b4c5

FitScore Brand (dark section)

FS BG#0a0a0b
FS Card#161618
FS Accent#3b82f6
FS Border#252528

Buttons

Marketing Button (larger)

Hero CTAs and feature sections use larger buttons: text-[17px] px-9 py-3.5

Standard Buttons (same as web app)

Same utility classes as web: .td-btn-primary, .td-btn-secondary, etc.

Shadow Scale

Resting 0 1px 2px rgba(0,0,0,0.05)
Medium 0 4px 12px rgba(0,0,0,0.08)
Elevated 0 8px 24px rgba(0,0,0,0.12)

Marketing Cards

*

Feature Card

Standard feature card with icon, heading, and description text.

Most Popular

$5.99/mo

All features included

"TrainerDay has transformed my training. Simple, effective, and actually fun to use."

Alex K. Cyclist

Section Backgrounds

White Section bg-white — default content sections
Surface Section bg-surface (#f6f8fb) — alternating sections
Dark Section bg-dark-bg (#171626) — header, footer, CTA blocks
Marketing Dark bg-dark-marketing (#000000) — full-bleed marketing sections

Forms (Auth Pages)

Login, register, and password reset pages use the same input system as the web app.

Log In

Don't have an account? Sign up

Blog Prose

Blog content uses the .prose-blog class with @tailwindcss/typography.

Blog Post Title

January 15, 2026

Blog body text renders with comfortable reading typography. Links appear in primary blue with a light underline that darkens on hover.

Code blocks use surface bg with border