A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Pace Athletic"3description: "A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval."4tags: [fitness, dark, modern, minimal, saas]5colors:6 primary: "#f5f5f3"7 secondary: "#8a8a86"8 tertiary: "#f5f5f3"9 neutral: "#1c1c1a"10 surface: "#0e0e0c"11typography:12 display: "Archivo Black"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "9rem / 0.88 / 900 / -0.05em"17 h1: "4rem / 0.95 / 900 / -0.035em"18 h2: "1.75rem / 1.18 / 700 / -0.015em"19 body: "1rem / 1.55 / 400 / -0.005em"20radius:21 sm: 2px22 md: 4px23 lg: 6px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(245,245,243,0.10)"30 divider: rgba(245,245,243,0.12)31buttons:32 primary:33 background: #d4ff3a34 color: #0e0e0c35 border: none36 shape: sharp37 padding: 14px 24px38 font: 700 / 0.8125rem / 0.10em39 uppercase: true40 secondary:41 background: #1c1c1a42 color: #f5f5f343 border: 1px solid rgba(245,245,243,0.16)44 shape: sharp45 padding: 14px 24px46 font: 600 / 0.8125rem / 0.10em47 uppercase: true48 outline:49 background: transparent50 color: #f5f5f351 border: 1px solid rgba(245,245,243,0.20)52 shape: sharp53 padding: 14px 24px54 font: 600 / 0.8125rem / 0.10em55 uppercase: true56 ghost:57 background: transparent58 color: #8a8a8659 border: none60 shape: sharp61 padding: 14px 16px62 font: 600 / 0.8125rem / 0.10em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 1.567 fill_opacity: 068 gridlines: false69 bar_gap: 3px70 highlight: single71 dot_marker: true72fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"73dependencies: ["lucide-react"]74---75 76# Pace Athletic77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Pace Athletic** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#d4ff3a`, text `#0e0e0c`, padding `14px 24px`, weight `700`, uppercased.114- **Secondary** — sharp shape, bg `#1c1c1a`, text `#f5f5f3`, border `1px solid rgba(245,245,243,0.16)`, padding `14px 24px`, weight `600`, uppercased.115- **Outline** — sharp shape, text `#f5f5f3`, border `1px solid rgba(245,245,243,0.20)`, padding `14px 24px`, weight `600`, uppercased.116- **Ghost** — sharp shape, text `#8a8a86`, padding `14px 16px`, weight `600`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#0e0e0c`125- Border: `1px solid rgba(245,245,243,0.10)`126- Shadow: `none`127- Radius: `radius.lg` (`6px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `thin-bars`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Pace Athletic is a training platform with the discipline of a stopwatch. The page surface is near-black `#0e0e0c` — closer to charred matte than to true black, never blue-grey. Split times and PRs run in Archivo Black at 144px — the heavy industrial sans hits like a foot strike. Body sits in Inter at 16px on a 1.55 leading. Every pace, heart-rate, distance, split runs in JetBrains Mono with tabular-nums — column-aligned to the millisecond. The single accent is electric chartreuse `#d4ff3a` that appears only on the Start Workout CTA, the active interval indicator, and PR-broken markers — the moments when the athlete actually performs.172 173The discipline is in the contrast: Archivo Black at huge scale on near-black, no glow, no gradient — the chartreuse alone carries every moment of intensity.174 175**Signature moves**176- Archivo Black at 144px for split times and PRs — heavy industrial sans, foot-strike weight177- Near-black surface `#0e0e0c` — charred matte, never blue-grey178- Chartreuse `#d4ff3a` exclusively on Start Workout CTA + active interval + PR markers179- JetBrains Mono with tabular-nums on every pace, heart-rate, distance, split180- Sharp 2-6px radius — the stopwatch voice, never pill, never rounded181 182## 2. Palette183 184### Surfaces185- **Charcoal Matte** `#0e0e0c` — page background (near-black, warm undertone)186- **Lift** `#1c1c1a` — secondary surfaces, secondary button187- **Hairline** `rgba(245,245,243,0.10)` — every divider188 189### Ink190- **Bone** `#f5f5f3` — text, headings, primary text on charcoal191- **Ink 50** `#8a8a86` — secondary text, mono labels192 193### Accent194- **Chartreuse** `#d4ff3a` — Start Workout CTA, active interval indicator, PR markers195- **Chartreuse Soft** `rgba(212,255,58,0.12)` — focus ring, active interval row background196 197## 3. Typography198 199| Role | Font | Size | Weight | Leading | Tracking |200|------|------|------|--------|---------|----------|201| Split Time (Hero) | Archivo Black | 144px | 900 | 0.88 | -0.05em |202| H1 / Workout Title | Archivo Black | 64px | 900 | 0.95 | -0.035em |203| H2 | Inter | 28px | 700 | 1.18 | -0.015em |204| Body | Inter | 16px | 400 | 1.55 | -0.005em |205| UI / Button | Inter | 13px | 700 | 1.4 | 0.10em uppercase |206| Pace / HR / Distance | JetBrains Mono | 14px | 500 | 1.0 | 0 tabular-nums |207| Big Metric | JetBrains Mono | 32px | 700 | 1.0 | 0 tabular-nums |208| Label | JetBrains Mono | 11px | 500 | 1.0 | 0.12em uppercase |209 210Archivo Black is reserved for split times and workout titles — the heavy weight is the typographic equivalent of a personal best.211 212## 4. Buttons213 214### Primary (Chartreuse — Start Workout only)215```css216background: #d4ff3a;217color: #0e0e0c;218padding: 14px 24px;219border-radius: 4px;220text-transform: uppercase;221letter-spacing: 0.10em;222font-weight: 700;223```224 225The chartreuse on near-black is high-contrast on purpose — a Start button must read in peripheral vision when the athlete is mid-warm-up.226 227### Secondary (Lift Sharp)228- `#1c1c1a` background, 1px hairline at 16% bone, bone text — same sharp shape229 230### Outline & Ghost231- Outline: transparent, 1px hairline at 20% bone232- Ghost: no border, ink-50 uppercase, hover lifts to bone233 234## 5. Cards235 236```css237background: #1c1c1a;238border: 1px solid rgba(245,245,243,0.10);239border-radius: 6px;240box-shadow: none;241```242 243NO shadows. The active interval card adds a 2px chartreuse left border — the only place chartreuse appears as a card edge. PR-broken cards add a chartreuse top hairline.244 245## 6. Charts246 247Thin precise bars (4px wide, 3px gap) — used for pace splits and heart-rate-zone time. One bar in chartreuse (the PR / target-zone interval), others in 22% bone. Line charts at 1.5px bone, ending in a chartreuse dot marker (current pace). NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px.248 249## 7. Tabs250 251Underline 2px in chartreuse for the active state. Inactive tabs are ink-50 in JetBrains Mono uppercase 0.12em. Reads like a stopwatch lap selector.252 253## 8. Spacing254 255- Base 4px (interval-tick aware)256- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`257- Section padding: 64px desktop, 32px mobile — dense, never airy258 259## 9. Do's & don'ts260 261✅ **Do**262- Use Archivo Black for split times and workout titles only — the heavy weight IS the PR263- Hold the near-black charcoal — true black reads as console, blue-grey reads as fintech264- Reserve chartreuse for Start CTA + active interval + PR markers exclusively265- Put every pace, heart-rate, distance, split in JetBrains Mono with tabular-nums266 267❌ **Don't**268- Use Archivo Black for body or H2 — the heavy weight only works at 64px+269- Use chartreuse for decoration, secondary CTAs, or progress bars — three surfaces only270- Use rounded or pill buttons — sharp 4px is the stopwatch voice271- Add glows, neon shadows, or gradient overlays — chartreuse on charcoal alone carries the energy272 273---274 275## Tokens276 277> Generated from the same source the live preview renders from.278> Treat the values below as the contract — never substitute approximations.279 280### Colors281 282| Role | Value |283|-----------|-------|284| primary | `#f5f5f3` |285| secondary | `#8a8a86` |286| tertiary | `#f5f5f3` |287| neutral | `#1c1c1a` |288| surface | `#0e0e0c` |289 290### Typography291 292- **Display:** Archivo Black293- **Body:** Inter294- **Mono:** JetBrains Mono295 296| Role | size / leading / weight / tracking |297|------|------------------------------------|298| Hero | 9rem / 0.88 / 900 / -0.05em |299| H1 | 4rem / 0.95 / 900 / -0.035em |300| H2 | 1.75rem / 1.18 / 700 / -0.015em |301| Body | 1rem / 1.55 / 400 / -0.005em |302 303### Radius304 305- sm: `2px`306- md: `4px`307- lg: `6px`308- pill: `9999px`309 310### Shadows311 312- **card:** `none`313- **button:** `none`314 315### Borders316 317- **card:** `1px solid rgba(245,245,243,0.10)`318- **divider:** `rgba(245,245,243,0.12)`319 320### Buttons321 322Four variants, each fully tokenized. The preview renders from these exact values.323 324#### Primary325 326| Property | Value |327|----------|-------|328| shape | `sharp` |329| background | `#d4ff3a` |330| color | `#0e0e0c` |331| border | `none` |332| padding | `14px 24px` |333| fontWeight | `700` |334| fontSize | `0.8125rem` |335| tracking | `0.10em` |336| uppercase | `true` |337 338#### Secondary339 340| Property | Value |341|----------|-------|342| shape | `sharp` |343| background | `#1c1c1a` |344| color | `#f5f5f3` |345| border | `1px solid rgba(245,245,243,0.16)` |346| padding | `14px 24px` |347| fontWeight | `600` |348| fontSize | `0.8125rem` |349| tracking | `0.10em` |350| uppercase | `true` |351 352#### Outline353 354| Property | Value |355|----------|-------|356| shape | `sharp` |357| background | `transparent` |358| color | `#f5f5f3` |359| border | `1px solid rgba(245,245,243,0.20)` |360| padding | `14px 24px` |361| fontWeight | `600` |362| fontSize | `0.8125rem` |363| tracking | `0.10em` |364| uppercase | `true` |365 366#### Ghost367 368| Property | Value |369|----------|-------|370| shape | `sharp` |371| background | `transparent` |372| color | `#8a8a86` |373| border | `none` |374| padding | `14px 16px` |375| fontWeight | `600` |376| fontSize | `0.8125rem` |377| tracking | `0.10em` |378| uppercase | `true` |379 380### Charts381 382| Property | Value |383|----------|-------|384| variant | `thin-bars` |385| strokeWidth | `1.5` |386| fillOpacity | `0` |387| gridlines | `false` |388| barGap | `3px` |389| highlight | `single` |390| dotMarker | `true` |391 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Archivo Black"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#f5f5f3', secondary: '#8a8a86', accent: '#f5f5f3', neutral: '#1c1c1a', surface: '#0e0e0c', }, borderRadius: { sm: '2px', md: '4px', lg: '6px', }, }, },};Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.