Everything the app is built from.
This page is the single source of truth for PlayerCoach360's UI. Every feature page consumes these tokens and components — no hardcoded colors, fonts, or one-off styling.
Logo & identity
Uploaded via lovable-assets and imported from src/components/global/Logo.tsx.
Color
Defined in src/styles.css as CSS variables. Reference via Tailwind utilities (bg-primary, text-foreground, etc.) — never hex.
bg-brand-gradientTypography
Lato, loaded via <link> in __root.tsx. Use these semantic utilities — never text-[..] with arbitrary sizes.
Find your edge
text-display · 48/900Section heading
text-h1 · 36/900Subsection heading
text-h2 · 28/700Card title
text-h3 · 20/700Body copy. The quick brown fox jumps over the lazy dog. 1234567890.
text-body · 16/400Small body copy.
text-body-sm · 14/400Caption / helper text.
text-caption · 12/400Eyebrow label
text-eyebrow · 12/700 uppercaseButtons
Pill-shaped, from src/components/global/Buttons.tsx. Pages inject onClick — never bake behavior into the global component.
Primary
<PrimaryButton onClick={...}>Continue</PrimaryButton>Secondary
<SecondaryButton>Learn more</SecondaryButton>Ghost
<GhostButton>Skip</GhostButton>Form fields
From src/components/global/Fields.tsx. Fully controlled — pass value + onChange from the page.
Cards & stats
Containers from src/components/global/AppCard.tsx.
Default card
Bordered surface for grouped content.
Elevated card
Uses the brand shadow for emphasis.
Soft card
Tinted green background for callouts.
Pills & badges
From src/components/global/Pill.tsx.
Radius & shadow
Base radius 0.75rem. Use rounded-xl / 2xl / full for pills.
rounded-mdrounded-xlrounded-2xlrounded-fullshadow-brand