Design Guidelines

Color & Typography

The living reference for Kudo Coach's visual identity — every token, its value, and where it belongs.

01 — Brand & Accents

The Vitality palette

Magenta leads. Green, amber, and sky support as data accents — used sparingly so the brand stays singular.

Brand — Vitality Magenta

--brand

#D32F52hsl(347 65% 51%)

Primary accent, active nav links, buttons, eyebrows, key data highlights.

Pair on: White / paper surfaces; never on ink without white text.

Brand Deep

--brand-deep

#B51E3Fhsl(347 70% 43%)

Gradient endpoint for brand-gradient buttons and gradient text.

Pair on: Pairs with Brand in linear gradients; standalone on white only.

Brand Accent — Vitality Green

--brand-accent

#12AC68hsl(158 83% 42%)

Secondary data accent, positive/recovery states, hero radial glow.

Pair on: White or ink; use sparingly as a complement to magenta.

Data Amber

--data-amber

#F5A623hsl(38 92% 50%)

Warning / moderate-intensity chart series.

Pair on: White or ink; high contrast on both.

Data Sky

--data-sky

#0A9CE6hsl(200 90% 48%)

Informational chart series, cool accent.

Pair on: White or ink.

02 — Surfaces

Ink & paper

Two surface families: near-black ink for dark sections, warm off-white paper for everything else.

Ink

--ink

#101114hsl(240 14% 7%)

Dark hero backgrounds, footer, dark cards.

Ink-2

--ink-2

#181A1Ehsl(240 12% 11%)

Dark card gradient endpoint, elevated dark surfaces.

Ink-3

--ink-3

#25262Ahsl(240 10% 16%)

Metric tiles on dark sections, inset surfaces.

Paper

--paper

#FBFAF6hsl(60 18% 98%)

Default page background, light section fills.

Paper-2

--paper-2

#F4F2EChsl(60 14% 96%)

Muted section fills, metric tiles, integration logo boxes.

Border

--border

#E4E3DEhsl(60 8% 90%)

Card borders, input borders, dividers on light surfaces.

03 — Text

Readable hierarchy

Three text roles keep contrast clear on every surface.

Aa

Foreground

--foreground

Primary body text on light surfaces.

Aa

Muted Foreground

--muted-foreground

Secondary text, captions, subtitles.

Aa

Brand Foreground

--brand-foreground

Text on brand-gradient buttons.

04 — Typography

Three voices

Recoleta for headlines, Inter for body, Benzin for data and eyebrows.

Headings

--font-heading

The quick brown fox jumps

Editorial serif for hero headlines and section titles.

Body

--font-body

The quick brown fox jumps

Default body text and UI labels.

Data / Eyebrows

--font-data

0123456789 ABCDEF

Tabular numbers, uppercase tracked eyebrows, metric values.

05 — Usage Rules

How to apply

Keep the system consistent across every page.

Do

  • • Use bg-brand-gradient for primary buttons and login CTAs.
  • • Reserve magenta for one accent per section — active states, eyebrows, key numbers.
  • • Pair ink surfaces with white text and white/10 borders.
  • • Use Benzin (font-data) for all numeric values and uppercase eyebrows.
  • • Keep light sections on paper/paper-2, dark sections on ink.

Don't

  • • Don't use magenta as a large background fill — it's an accent, not a surface.
  • • Don't mix data accents (green/amber/sky) with brand magenta in the same chart.
  • • Don't place light text on paper or dark text on ink without checking contrast.
  • • Don't introduce new hex values — extend the token system in index.css instead.
  • • Don't use Recoleta for body copy or Benzin for long-form paragraphs.