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 · 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

03 · 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.

04 · 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

// 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Obsidian Rail

A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument.

darkmodernminimalsaaspremium

Obsidian.app

ProductPricingDocsAbout

Sign inGet started