design.md
Back to directory
duotone · editorial · minimal · premium · modern

Indigo Bone.

Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority.

01 · Preview

The kitchen sink.

Indigo.app
ProductPricingDocsAbout
Sign inGet started
duotone · editorial · minimal

Build with Indigo Bone.

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

Try another system.

Slate Material

tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.

saasmaterialminimalmoderntrustworthylightb2b
Slate.app
ProductPricingDocsAbout
Sign inGet started
saas · material · minimal

Build with Slate Material.

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

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.

agencydisplayboldeditorialmodern
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