design.md
Back to directory
fitness · dark · modern · minimal · saas

Pace Athletic.

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.

01 · Preview

The kitchen sink.

Pace.app
ProductPricingDocsAbout
Sign inGet started
fitness · dark · modern

Build with Pace Athletic.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#F5F5F3
secondary
#8A8A86
tertiary
#F5F5F3
neutral
#1C1C1A
surface
#0E0E0C
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
2px
md
4px
lg
6px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypePlayful

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
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:    Inter
14  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: 2px
22  md: 4px
23  lg: 6px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(245,245,243,0.10)"
30  divider: rgba(245,245,243,0.12)
31buttons:
32  primary:
33    background: #d4ff3a
34    color: #0e0e0c
35    border: none
36    shape: sharp
37    padding: 14px 24px
38    font: 700 / 0.8125rem / 0.10em
39    uppercase: true
40  secondary:
41    background: #1c1c1a
42    color: #f5f5f3
43    border: 1px solid rgba(245,245,243,0.16)
44    shape: sharp
45    padding: 14px 24px
46    font: 600 / 0.8125rem / 0.10em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #f5f5f3
51    border: 1px solid rgba(245,245,243,0.20)
52    shape: sharp
53    padding: 14px 24px
54    font: 600 / 0.8125rem / 0.10em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #8a8a86
59    border: none
60    shape: sharp
61    padding: 14px 16px
62    font: 600 / 0.8125rem / 0.10em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1.5
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 3px
70  highlight: single
71  dot_marker: true
72fonts_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 Athletic
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Pace Athletic** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  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 recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
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 tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
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#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
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 pairings
141 
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 constraints
147 
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 — verify
157 
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. Atmosphere
170 
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 weight
177- Near-black surface `#0e0e0c` — charred matte, never blue-grey
178- Chartreuse `#d4ff3a` exclusively on Start Workout CTA + active interval + PR markers
179- JetBrains Mono with tabular-nums on every pace, heart-rate, distance, split
180- Sharp 2-6px radius — the stopwatch voice, never pill, never rounded
181 
182## 2. Palette
183 
184### Surfaces
185- **Charcoal Matte** `#0e0e0c` — page background (near-black, warm undertone)
186- **Lift** `#1c1c1a` — secondary surfaces, secondary button
187- **Hairline** `rgba(245,245,243,0.10)` — every divider
188 
189### Ink
190- **Bone** `#f5f5f3` — text, headings, primary text on charcoal
191- **Ink 50** `#8a8a86` — secondary text, mono labels
192 
193### Accent
194- **Chartreuse** `#d4ff3a` — Start Workout CTA, active interval indicator, PR markers
195- **Chartreuse Soft** `rgba(212,255,58,0.12)` — focus ring, active interval row background
196 
197## 3. Typography
198 
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. Buttons
213 
214### Primary (Chartreuse — Start Workout only)
215```css
216background: #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 shape
229 
230### Outline & Ghost
231- Outline: transparent, 1px hairline at 20% bone
232- Ghost: no border, ink-50 uppercase, hover lifts to bone
233 
234## 5. Cards
235 
236```css
237background: #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. Charts
246 
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. Tabs
250 
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. Spacing
254 
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 airy
258 
259## 9. Do's & don'ts
260 
261✅ **Do**
262- Use Archivo Black for split times and workout titles only — the heavy weight IS the PR
263- Hold the near-black charcoal — true black reads as console, blue-grey reads as fintech
264- Reserve chartreuse for Start CTA + active interval + PR markers exclusively
265- Put every pace, heart-rate, distance, split in JetBrains Mono with tabular-nums
266 
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 only
270- Use rounded or pill buttons — sharp 4px is the stopwatch voice
271- Add glows, neon shadows, or gradient overlays — chartreuse on charcoal alone carries the energy
272 
273---
274 
275## Tokens
276 
277> Generated from the same source the live preview renders from.
278> Treat the values below as the contract — never substitute approximations.
279 
280### Colors
281 
282| Role      | Value |
283|-----------|-------|
284| primary   | `#f5f5f3` |
285| secondary | `#8a8a86` |
286| tertiary  | `#f5f5f3` |
287| neutral   | `#1c1c1a` |
288| surface   | `#0e0e0c` |
289 
290### Typography
291 
292- **Display:** Archivo Black
293- **Body:** Inter
294- **Mono:** JetBrains Mono
295 
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### Radius
304 
305- sm: `2px`
306- md: `4px`
307- lg: `6px`
308- pill: `9999px`
309 
310### Shadows
311 
312- **card:** `none`
313- **button:** `none`
314 
315### Borders
316 
317- **card:** `1px solid rgba(245,245,243,0.10)`
318- **divider:** `rgba(245,245,243,0.12)`
319 
320### Buttons
321 
322Four variants, each fully tokenized. The preview renders from these exact values.
323 
324#### Primary
325 
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#### Secondary
339 
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#### Outline
353 
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#### Ghost
367 
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### Charts
381 
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 
392---
393 
394## Pro tokens
395 
396> Production-fidelity tokens. States, density, motion, elevation,
397> content rules and a measured WCAG contract — derived from the
398> resting tokens unless explicitly authored.
399 
400### States
401 
402#### Button
403 
404- **hover** — shadow: `4px 6px 0 0 #f5f5f3`, transform: `translateY(-2px) rotate(-1deg)`
405- **focus** — outline: `3px solid #f5f5f3`, outline-offset: `3px`
406- **active** — shadow: `1px 2px 0 0 #f5f5f3`, transform: `translateY(1px) scale(0.96)`
407- **disabled** — opacity: `0.4`
408- **loading** — opacity: `0.7`
409- **selected** — bg: `#f5f5f3`, color: `#f5f5f3`, transform: `rotate(-2deg)`
410 
411#### Input
412 
413- **hover** — border: `2px solid #f5f5f3`
414- **focus** — border: `2px solid #f5f5f3`, shadow: `3px 3px 0 0 #f5f5f3`
415- **disabled** — opacity: `0.4`
416- **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444`
417 
418#### Card
419 
420- **hover** — shadow: `6px 8px 0 0 #f5f5f3`, transform: `translateY(-4px) rotate(-1deg)`
421- **selected** — border: `2px solid #f5f5f3`, transform: `rotate(-1deg)`
422- **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85`
423 
424#### Tab
425 
426- **hover** — color: `#f5f5f3`, transform: `translateY(-1px)`
427- **focus** — outline: `3px solid #f5f5f3`, outline-offset: `2px`
428- **selected** — bg: `#f5f5f3`, color: `#f5f5f3`, transform: `rotate(-1deg)`
429 
430### Density
431 
432| Mode | padding × | row × | body | radius × | Use for |
433|------|-----------|-------|------|----------|---------|
434| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
435| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
436| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
437 
438### Motion
439 
440**Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful.
441 
442```css
443transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
444```
445 
446| Token | Value |
447|-------|-------|
448| duration.instant | `100ms` |
449| duration.fast | `200ms` |
450| duration.base | `320ms` |
451| duration.slow | `500ms` |
452| easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
453| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
454| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
455| easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` |
456 
457### Elevation
458 
459Five-level scale, system-specific recipe.
460 
461| Level | Shadow | Recipe |
462|-------|--------|--------|
463| level0 | `none` | Flat — the tone separates. |
464| level1 | `2px 3px 0 0 #f5f5f3` | Hard offset, slight shift. |
465| level2 | `4px 6px 0 0 #f5f5f3` | Cards — visible offset. |
466| level3 | `6px 8px 0 0 #f5f5f3` | Dialog — strong offset. |
467| level4 | `8px 12px 0 0 #f5f5f3` | Modal — maximum offset, scrim required. |
468 
469### Content
470 
471- **measure:** `62ch` (max line length for body prose)
472- **paragraph spacing:** `1.25em`
473- **list indent:** `1.5em`
474- **list gap:** `0.55em`
475- **link:** color `#f5f5f3`, underline `always`
476- **blockquote:** border `3px solid #f5f5f3`, padding `0.8em 1.2em`
477- **code:** background `#f5f5f3`, color `#f5f5f3`
478 
479### Accessibility (WCAG 2.1)
480 
481**Overall:** AA
482 
483| Pair | Ratio | Required | Grade | Suggested fix |
484|------|-------|----------|-------|---------------|
485| Body text on surface | 17.7:1 | AA | AAA | — |
486| Body text on canvas | 15.64:1 | AA | AAA | — |
487| Muted text on surface | 5.58:1 | AA | AA | — |
488| Accent on surface | 17.7:1 | AA-Large | AAA | — |
489| Accent on canvas | 15.64:1 | AA-Large | AAA | — |
490
04 · How to use it

Wire it into your agent.

markdown
# 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<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" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Titanium Deck

Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards.

metallicpremiummodernsaasdeveloper
Titanium.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · modern

Build with Titanium Deck.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone Press.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational