design.md
Back to directory
agency · display · bold · editorial · modern

Atlas Display.

Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads.

01 · Preview

The kitchen sink.

Atlas.app
ProductPricingDocsAbout
Sign inGet started→
agency · display · bold

Build with Atlas Display.

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
#13110F
secondary
#6D6862
tertiary
#FF5722
neutral
#F4F1EC
surface
#FFFFFF
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

Primary→SecondaryOutlineGhostText 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
0px
md
2px
lg
4px
pill
999px
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.

ArchetypeEditorial

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

Tab

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

DESIGN.md

markdown
1---
2name: "Atlas Display"
3description: "Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads."
4tags: [agency, display, bold, editorial, modern]
5colors:
6  primary:   "#13110F"
7  secondary: "#6D6862"
8  tertiary:  "#FF5722"
9  neutral:   "#F4F1EC"
10  surface:   "#FFFFFF"
11typography:
12  display: "Archivo Black"
13  body:    Archivo
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "8rem / 0.92 / 900 / -0.05em"
17    h1:   "4.5rem / 0.95 / 900 / -0.04em"
18    h2:   "1.875rem / 1.2 / 900 / -0.02em"
19    body: "1.0625rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 0px
22  md: 2px
23  lg: 4px
24shadows:
25  card:   "0 0 0 1px rgba(19, 17, 15, 0.10)"
26  button: none
27borders:
28  card:    "1px solid rgba(19, 17, 15, 0.10)"
29  divider: "rgba(19, 17, 15, 0.18)"
30buttons:
31  primary:
32    background: #FF5722
33    color: #13110F
34    border: 1px solid #FF5722
35    shape: sharp
36    padding: 16px 28px
37    font: display / 900 / 0.8125rem / 0.04em
38    uppercase: true
39    suffix: arrow
40  secondary:
41    background: #13110F
42    color: #F4F1EC
43    border: 1px solid #13110F
44    shape: sharp
45    padding: 16px 28px
46    font: display / 900 / 0.8125rem / 0.04em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #13110F
51    border: 1px solid #13110F
52    shape: sharp
53    padding: 15px 27px
54    font: display / 900 / 0.8125rem / 0.04em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #FF5722
59    border: none
60    shape: sharp
61    padding: 15px 4px
62    font: display / 900 / 0.8125rem / 0.04em
63    uppercase: true
64    hover: underline
65charts:
66  variant: bars
67  stroke_width: 2
68  gridlines: false
69  bar_radius: 0px
70  bar_gap: 4px
71  highlight: last
72  axis_color: "#6D6862"
73  palette: ["#13110F", "#13110F", "#FF5722"]
74fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
75dependencies: ["lucide-react"]
76---
77 
78# Atlas Display
79 
80## AI Build Instructions
81 
82> **Read this section before writing any code.** The rules below
83> are non-negotiable. Every value used in the UI must come from this
84> file's frontmatter — never substitute, approximate, or invent new
85> colors, fonts, radii, or shadows. If a value is missing, ask the
86> user before adding one.
87 
88### 1 · Your role
89 
90You are building UI for a project that has adopted **Atlas Display** as its
91design system. Treat `DESIGN.md` as the single source of truth.
92Your job is to translate the user's product requirements into
93components and pages that look like they were designed by the same
94person who authored this file.
95 
96### 2 · Token compliance
97 
98- Pull every color, font family, radius, shadow, and spacing value
99  from the frontmatter at the top of this file.
100- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
101  hard-code hex values that bypass the system.
102- When a token can be expressed as a CSS variable, declare it once
103  in your global stylesheet and reference it everywhere downstream.
104- The Google Fonts `<link>` is provided in the Typography section.
105  Add it to `<head>` before any component renders.
106 
107### 3 · Component recipes
108 
109Use these recipes verbatim when building the corresponding component.
110 
111#### Buttons
112 
113Four variants are defined. Pick one — never blend variants or invent a fifth.
114 
115- **Primary** — sharp shape, bg `#FF5722`, text `#13110F`, border `1px solid #FF5722`, padding `16px 28px`, weight `900`, uppercased.
116- **Secondary** — sharp shape, bg `#13110F`, text `#F4F1EC`, border `1px solid #13110F`, padding `16px 28px`, weight `900`, uppercased.
117- **Outline** — sharp shape, text `#13110F`, border `1px solid #13110F`, padding `15px 27px`, weight `900`, uppercased.
118- **Ghost** — sharp shape, text `#FF5722`, padding `15px 4px`, weight `900`, uppercased.
119 
120Reach for **primary** as the single dominant CTA per screen.
121**Secondary** for the supporting action. **Outline** for tertiary
122actions in toolbars. **Ghost** for inline links and table actions.
123 
124#### Cards
125 
126- Background: `#FFFFFF`
127- Border: `1px solid rgba(19, 17, 15, 0.10)`
128- Shadow: `0 0 0 1px rgba(19, 17, 15, 0.10)`
129- Radius: `radius.lg` (`4px`)
130- Internal padding: `20px` for compact cards, `24–28px` for content cards.
131 
132#### Tabs
133 
134Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
135Tabs are uppercased with `0.08em` tracking.
136 
137#### Charts
138 
139- Bar/line variant: `bars`
140- Bar radius: `0px`
141- No gridlines — let the bars/lines carry the data.
142- Highlight strategy: `last` — emphasize a single bar/point per chart.
143- Use the declared palette in order: `#13110F`, `#13110F`, `#FF5722`.
144 
145#### Typography pairings
146 
147- **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks.
148- **Body (`Archivo`)** — paragraphs, labels, button text, form inputs.
149- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
150 
151### 4 · Hard constraints
152 
153Never do any of the following without explicit instruction from the user:
154 
155- Introduce a new color, font, radius, or shadow that isn't declared above.
156- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
157- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
158- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
159- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
160 
161### 5 · Before you finish — verify
162 
163Run through this checklist for every screen you produce:
164 
165- [ ] Every color used appears in the Colors table above.
166- [ ] Headlines use the display font; body copy uses the body font.
167- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
168- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
169- [ ] Cards and dividers use the declared border + shadow tokens.
170- [ ] No values were invented; if you needed something missing, you stopped and asked.
171 
172---
173 
174## Overview
175Atlas Display is the sans counterpart to serif-editorial systems. The whole identity rests on one decision: an 8rem condensed display sans (Archivo Black, weight 900) with -5% tracking, set against an off-white canvas. The type isn't on the layout — the type *is* the layout. A single molten-orange accent does the rest of the talking.
176 
177For independent studios, agency case-study sites, fashion-adjacent brands, anything that should hit the moment it loads.
178 
179## Color
180- **Ink #13110F** — primary text and primary fills. Near-black with a warm bias so it sits on the off-white naturally.
181- **Graphite #6D6862** — secondary text, captions, axis labels.
182- **Molten Orange #FF5722** — the single chromatic accent. Hero pull-words, primary CTA, active links.
183- **Off-white #F4F1EC** — page canvas.
184- **Paper #FFFFFF** — card surface.
185 
186Color is one note. Orange and nothing else.
187 
188## Typography
189The system is the type. **Archivo Black** is single-weight at 900 — there is no choice; it lives at one weight, used at scale.
190 
191| Role | Font | Size | Weight | Tracking |
192|------|------|------|--------|----------|
193| Hero | Archivo Black | 8rem | 900 | -0.05em |
194| H1 | Archivo Black | 4.5rem | 900 | -0.04em |
195| H2 | Archivo Black | 1.875rem | 900 | -0.02em |
196| Body | Archivo | 1.0625rem | 400 | -0.005em / 1.65 |
197| Button | Archivo Black | 0.8125rem | 900 | 0.04em uppercase |
198 
199Body copy uses regular Archivo at 17px — same family, dialed down. Buttons use Archivo Black uppercase at 13px with positive tracking — small, dense, loud.
200 
201## Geometry
202- **Radii: 0 / 2 / 4.** Sharp. The display carries the system; geometry stays rectangular.
203- **Asymmetric columns.** Hero usually breaks into the margin. 12-column grid where text often sits in columns 1-9 or 4-12, never centered.
204- **Hairline rules** between sections at 18% ink. The grid is visible.
205- **Section gap: 160px** desktop, 96px mobile.
206 
207## Buttons
208- **Primary** — solid molten orange, ink label. Sharp. Optional → arrow suffix.
209- **Secondary** — solid ink, off-white label. Sharp.
210- **Outline** — bare full-opacity ink hairline.
211- **Ghost** — bare orange label, hover underline.
212 
213All buttons use Archivo Black uppercase at 13px with 4% tracking. The button is a small loud rectangle.
214 
215## Cards
216Bordered rectangles — 1px ink hairline at 10% opacity, sharp 2-4px corners, **no drop shadow**. Padding 32-40px on the long side. Cards are containers, never decorations.
217 
218## Charts & Data
219Three-bar histogram in ink with the lead bar in molten orange, sharp 0px corners, 4px gap, no gridlines. Axis labels in graphite at 11px regular Archivo.
220 
221## Do's and Don'ts
222- ✅ The hero at 8rem is mandatory. The system collapses below 6rem.
223- ✅ Archivo Black at 900 only. There is no other display weight.
224- ✅ One chromatic accent — molten orange. Used on lead, not everywhere.
225- ✅ Asymmetric columns. Centered hero kills the energy.
226- ❌ No second chromatic color.
227- ❌ No rounded corners beyond 4px. No pills. No drop shadows.
228- ❌ No serif body. Family discipline — Archivo throughout.
229- ❌ No timid hero size. Below 6rem the type stops being the layout.
230 
231---
232 
233## Tokens
234 
235> Generated from the same source the live preview renders from.
236> Treat the values below as the contract — never substitute approximations.
237 
238### Colors
239 
240| Role      | Value |
241|-----------|-------|
242| primary   | `#13110F` |
243| secondary | `#6D6862` |
244| tertiary  | `#FF5722` |
245| neutral   | `#F4F1EC` |
246| surface   | `#FFFFFF` |
247 
248### Typography
249 
250- **Display:** Archivo Black
251- **Body:** Archivo
252- **Mono:** JetBrains Mono
253 
254| Role | size / leading / weight / tracking |
255|------|------------------------------------|
256| Hero | 8rem / 0.92 / 900 / -0.05em |
257| H1   | 4.5rem / 0.95 / 900 / -0.04em |
258| H2   | 1.875rem / 1.2 / 900 / -0.02em |
259| Body | 1.0625rem / 1.65 / 400 / -0.005em |
260 
261### Radius
262 
263- sm: `0px`
264- md: `2px`
265- lg: `4px`
266 
267### Shadows
268 
269- **card:** `0 0 0 1px rgba(19, 17, 15, 0.10)`
270- **button:** `none`
271 
272### Borders
273 
274- **card:** `1px solid rgba(19, 17, 15, 0.10)`
275- **divider:** `rgba(19, 17, 15, 0.18)`
276 
277### Buttons
278 
279Four variants, each fully tokenized. The preview renders from these exact values.
280 
281#### Primary
282 
283| Property | Value |
284|----------|-------|
285| shape | `sharp` |
286| background | `#FF5722` |
287| color | `#13110F` |
288| border | `1px solid #FF5722` |
289| padding | `16px 28px` |
290| fontFamily | `display` |
291| fontWeight | `900` |
292| fontSize | `0.8125rem` |
293| tracking | `0.04em` |
294| uppercase | `true` |
295| suffix | `arrow` |
296 
297#### Secondary
298 
299| Property | Value |
300|----------|-------|
301| shape | `sharp` |
302| background | `#13110F` |
303| color | `#F4F1EC` |
304| border | `1px solid #13110F` |
305| padding | `16px 28px` |
306| fontFamily | `display` |
307| fontWeight | `900` |
308| fontSize | `0.8125rem` |
309| tracking | `0.04em` |
310| uppercase | `true` |
311 
312#### Outline
313 
314| Property | Value |
315|----------|-------|
316| shape | `sharp` |
317| background | `transparent` |
318| color | `#13110F` |
319| border | `1px solid #13110F` |
320| padding | `15px 27px` |
321| fontFamily | `display` |
322| fontWeight | `900` |
323| fontSize | `0.8125rem` |
324| tracking | `0.04em` |
325| uppercase | `true` |
326 
327#### Ghost
328 
329| Property | Value |
330|----------|-------|
331| shape | `sharp` |
332| background | `transparent` |
333| color | `#FF5722` |
334| border | `none` |
335| padding | `15px 4px` |
336| fontFamily | `display` |
337| fontWeight | `900` |
338| fontSize | `0.8125rem` |
339| tracking | `0.04em` |
340| uppercase | `true` |
341| hoverHint | `underline` |
342 
343### Charts
344 
345| Property | Value |
346|----------|-------|
347| variant | `bars` |
348| strokeWidth | `2` |
349| gridlines | `false` |
350| barRadius | `0px` |
351| barGap | `4px` |
352| highlight | `last` |
353| axisColor | `#6D6862` |
354| palette | `#13110F`, `#13110F`, `#FF5722` |
355 
356---
357 
358## Pro tokens
359 
360> Production-fidelity tokens. States, density, motion, elevation,
361> content rules and a measured WCAG contract — derived from the
362> resting tokens unless explicitly authored.
363 
364### States
365 
366#### Button
367 
368- **hover** — bg: `rgba(255, 87, 34, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 87, 34, 0.4)`
369- **focus** — outline: `1.5px solid #FF5722`, outline-offset: `4px`
370- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
371- **disabled** — opacity: `0.45`
372- **loading** — opacity: `0.7`
373- **selected** — bg: `#13110F`, color: `#FFFFFF`
374 
375#### Input
376 
377- **hover** — border: `1px solid #13110F`
378- **focus** — border: `1px solid #FF5722`, shadow: `0 1px 0 0 #FF5722`
379- **disabled** — opacity: `0.45`
380- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
381 
382#### Card
383 
384- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
385- **selected** — border: `1px solid #13110F`
386 
387#### Tab
388 
389- **hover** — color: `#13110F`
390- **focus** — outline: `1.5px solid #FF5722`, outline-offset: `3px`
391- **selected** — color: `#FF5722`, border: `0 0 2px 0 solid #FF5722`
392 
393### Density
394 
395| Mode | padding × | row × | body | radius × | Use for |
396|------|-----------|-------|------|----------|---------|
397| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
398| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
399| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
400 
401### Motion
402 
403**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
404 
405```css
406transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
407```
408 
409| Token | Value |
410|-------|-------|
411| duration.instant | `80ms` |
412| duration.fast | `180ms` |
413| duration.base | `320ms` |
414| duration.slow | `500ms` |
415| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
416| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
417| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
418| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
419 
420### Elevation
421 
422Five-level scale, system-specific recipe.
423 
424| Level | Shadow | Recipe |
425|-------|--------|--------|
426| level0 | `none` | Hairline only — typical editorial resting state. |
427| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
428| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
429| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
430| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
431 
432### Content
433 
434- **measure:** `60ch` (max line length for body prose)
435- **paragraph spacing:** `1.5em`
436- **list indent:** `1.75em`
437- **list gap:** `0.55em`
438- **link:** color `#FF5722`, underline `always`
439- **blockquote:** border `4px solid #FF5722`, padding `0.4em 0 0.4em 1.5em`
440- **code:** background `rgba(19, 17, 15, 0.06)`, color `#13110F`
441 
442### Accessibility (WCAG 2.1)
443 
444**Overall:** FAIL
445 
446| Pair | Ratio | Required | Grade | Suggested fix |
447|------|-------|----------|-------|---------------|
448| Body text on surface | 18.84:1 | AA | AAA | — |
449| Body text on canvas | 16.72:1 | AA | AAA | — |
450| Muted text on surface | 5.52:1 | AA | AA | — |
451| Accent on surface | 3.16:1 | AA-Large | AA-Large | — |
452| Accent on canvas | 2.81:1 | AA-Large | FAIL | `#cf3200` → 4.54:1 (AA) |
453
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=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400&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:    ['"Archivo"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#13110F',
        secondary: '#6D6862',
        accent:    '#FF5722',
        neutral:   '#F4F1EC',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '0px',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

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

Sable Hairline

Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark.

darkdev-toolminimalprecisehairline
Sable.app
ProductPricingDocsAbout
Sign inGet started
dark · dev-tool · minimal

Build with Sable Hairline.

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