01. Identity

The Coach Watts identity represents precision, power, and human potential. It should be used consistently to maintain professional integrity.

Primary WordmarkWordmark
Download WebP
Square SymbolSymbol
Download WebP

Safety Space

Always maintain a minimum clearance area around the logo to ensure its impact and legibility. No other elements should enter this "protection" zone.

Constant:X = 24px (1.5rem)
X
X
X
X
Logo

02. Colors

Our color system is built for high-contrast accessibility and premium aesthetic depth.

Primary Palette

Contrast11.1:1

Brand Green

#00DC82
primary-400
--color-primary-400

Primary brand identifier. Used for accents, interactive elements, and key call-to-actions.

Contrast8.8:1

Action Green

#00C16A
primary-500
--color-primary-500

Deep green used for primary buttons and main brand highlights.

Contrast6.1:1

Deep Green

#00A155
primary-600
--color-primary-600

Used for hover states and dark mode accents.

Neutral Palette

Contrast1:1

Background (Dark)

#09090B
zinc-950
--color-zinc-950

Primary background for the high-performance dark interface.

Contrast1.2:1

Card Base

#111111
zinc-900
--color-zinc-900

Standard card background color for floating components.

Contrast21:1

Text (Primary)

#FFFFFF
white
--color-white

Main body text and header color for maximum readability.

Contrast4.5:1

Text (Muted)

#71717A
zinc-500
--color-zinc-500

Secondary text, subtitles, and labels.

03. Typography

Our typography system balances the mathematical precision of Public Sans with the aggressive, high-impact energy of our athletic display face.

Public Sans

A strong, neutral, yet friendly sans-serif that reflects our commitment to clarity and professional results. It is highly legible at small sizes and authoritative at large ones.

FamilyPublic Sans
Tracking-0.02em
AaBbCc
Regular400
Aa
Semibold600
Aa
Bold700
Aa
Black900
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
WATTZ
Performance Accent

The Athletic
Display Face

UsageMetrics, Headlines, High-Impact Cards
StyleCondensed Black Italic
264W
Peak Performance Metric

Type Scale System

H1 / Hero Title

Size: 4rem (64px)

Line: 0.85

Spacing: -0.05em

Weight: 900

ENGINEERED FOR POWER
H2 / Section Title

Size: 2.25rem (36px)

Line: 1.1

Spacing: -0.02em

Weight: 900

High Fidelity Coaching
Body / Standard

Size: 1.125rem (18px)

Line: 1.6

Spacing: 0.01em

Weight: 400

Coach Watts uses advanced biometric data to craft the perfect training block for your specific physiological profile.
Technical / Mono
0.875rem (14px) / 700
npm run dev --host 0.0.0.0 --port 3000

04. Naming & Voice

How we speak is as important as how we look. We are technical, authoritative, yet motivating.

The Do List

Coach Watts

Always use two words. Capitalize both "Coach" and "Watts". Maintain a professional tone.

The Don't List

CoachWatts, CW, Wattz

Avoid camel-case, informal abbreviations, or misspelling the brand name in official communications.

05. Technical Specs

Precision is in the decimals. Our component architecture follows strict geometric rules.

Corner Radii

8px
Buttons/Inputs
16px
Standard Cards
40px
Feature Bento

Iconography

Library: Heroicons Solid