/
design.md
Back to directory
duotone · warm · minimal · editorial · artisan

Terra Bone.

Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality.

01 · Preview

The kitchen sink.

Terra.app
ProductPricingDocsAbout
Sign inGet started
duotone · warm · minimal

Build with Terra 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
#7A2E1F
secondary
#A66854
tertiary
#C98C72
neutral
#F2EADD
surface
#F8F1E5
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
8px
md
10px
lg
12px
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: "Terra Bone"
3description: "Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality."
4tags: [duotone, warm, minimal, editorial, artisan]
5colors:
6  primary:   "#7A2E1F"
7  secondary: "#A66854"
8  tertiary:  "#C98C72"
9  neutral:   "#F2EADD"
10  surface:   "#F8F1E5"
11typography:
12  display: "DM Serif Display"
13  body:    "DM Sans"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 400 / -0.025em"
17    h1:   "3rem / 1.05 / 400 / -0.02em"
18    h2:   "1.625rem / 1.3 / 400 / -0.012em"
19    body: "1.0625rem / 1.7 / 400 / 0em"
20radius:
21  sm: 8px
22  md: 10px
23  lg: 12px
24shadows:
25  card:   "0 0 0 1px rgba(122, 46, 31, 0.10)"
26  button: none
27borders:
28  card:    "1px solid rgba(122, 46, 31, 0.10)"
29  divider: "rgba(122, 46, 31, 0.18)"
30buttons:
31  primary:
32    background: #7A2E1F
33    color: #F2EADD
34    border: 1px solid #7A2E1F
35    shape: rounded
36    padding: 13px 24px
37    font: 500 / 0.9375rem / 0em
38  secondary:
39    background: #F8F1E5
40    color: #7A2E1F
41    border: 1px solid #7A2E1F
42    shape: rounded
43    padding: 12px 23px
44    font: 500 / 0.9375rem / 0em
45  outline:
46    background: transparent
47    color: #7A2E1F
48    border: 1px solid rgba(122, 46, 31, 0.30)
49    shape: rounded
50    padding: 12px 23px
51    font: 500 / 0.9375rem / 0em
52  ghost:
53    background: transparent
54    color: #A66854
55    border: none
56    shape: rounded
57    padding: 12px 4px
58    font: 500 / 0.9375rem / 0em
59    hover: underline
60charts:
61  variant: "rounded-bars"
62  stroke_width: 2
63  gridlines: false
64  bar_radius: 4px
65  bar_gap: 10px
66  highlight: all
67  axis_color: "#A66854"
68  palette: ["#7A2E1F", "#A66854", "#C98C72"]
69fonts_url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Terra 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 **Terra 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 `#7A2E1F`, text `#F2EADD`, border `1px solid #7A2E1F`, padding `13px 24px`, weight `500`.
111- **Secondary** — rounded shape, bg `#F8F1E5`, text `#7A2E1F`, border `1px solid #7A2E1F`, padding `12px 23px`, weight `500`.
112- **Outline** — rounded shape, text `#7A2E1F`, border `1px solid rgba(122, 46, 31, 0.30)`, padding `12px 23px`, weight `500`.
113- **Ghost** — rounded shape, text `#A66854`, padding `12px 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: `#F8F1E5`
122- Border: `1px solid rgba(122, 46, 31, 0.10)`
123- Shadow: `0 0 0 1px rgba(122, 46, 31, 0.10)`
124- Radius: `radius.lg` (`12px`)
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: `4px`
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: `#7A2E1F`, `#A66854`, `#C98C72`.
134 
135#### Typography pairings
136 
137- **Display (`DM Serif Display`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`DM Sans`)** — 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
165Terra Bone is a strict two-color system: **deep terracotta and warm bone, nothing else.** No third hue anywhere — not in charts, not in icons, not in shadows. Charts and accents reuse the terracotta hue at three chroma levels so the duotone discipline holds.
166 
167The system is warm and earthen. For artisan brands, ceramics studios, slow-food platforms, boutique hospitality, anything that should feel hand-thrown rather than machined.
168 
169## Color
170- **Terracotta #7A2E1F** — the only "dark." Body text, headings, primary fills, hairlines.
171- **Faded #A66854** — same hue at lower chroma. Secondary text, axis labels, second chart bar.
172- **Soft #C98C72** — same hue, even softer. Hover underline, third chart bar.
173- **Bone #F2EADD** — page canvas. The only neutral.
174- **Surface #F8F1E5** — card surface, one notch above bone.
175 
176The "three" terracotta steps are not three colors — they are one color at three chroma levels. The duotone discipline holds.
177 
178## Typography
179- **Display: DM Serif Display 400** at 5.5rem with -2.5% tracking. Humanist serif with warmth.
180- **Body: DM Sans 400** at 1.0625rem with 1.7 leading.
181 
182| Role | Font | Size | Weight | Tracking |
183|------|------|------|--------|----------|
184| Hero | DM Serif Display | 5.5rem | 400 | -0.025em |
185| H1 | DM Serif Display | 3rem | 400 | -0.02em |
186| H2 | DM Serif Display | 1.625rem | 400 | -0.012em |
187| Body | DM Sans | 1.0625rem | 400 | 0 / 1.7 |
188 
189The serif/sans pairing is the whole texture — display does the singing, body does the reading.
190 
191## Geometry
192- **Radii: 8 / 10 / 12.** Soft, hand-thrown. Never sharp, never pill.
193- **No shadow.** A 1px terracotta hairline at 10% opacity is the only depth signal.
194- **Section gap: 120px** desktop, 72px mobile.
195 
196## Buttons
197- **Primary** — solid terracotta, bone label, 12px corners.
198- **Secondary** — surface bone, terracotta label, terracotta 1px hairline.
199- **Outline** — bare hairline at 30%.
200- **Ghost** — faded terracotta label, hover underline.
201 
202## Cards
203Surface bone on canvas, 1px terracotta hairline at 10% opacity, 10px corner radius, **no shadow**. Padding 32px. The card depth comes from the hairline alone — adding shadow would introduce a third tonal value and break the duotone.
204 
205## Charts & Data
206Three-bar histogram in three chroma steps of terracotta — deep, faded, soft — 4px corner radius, 10px gap, no gridlines. Axis labels in faded terracotta. The chart is monochrome by definition.
207 
208## Do's and Don'ts
209- ✅ Two colors only — terracotta and bone. The chart's chroma steps are the same hue.
210- ✅ The hairline is the only depth. No shadows.
211- ✅ Serif display + sans body. The pairing is the texture.
212- ✅ Soft 8-12px radii. Hand-thrown, never machined.
213- ❌ No third hue. No green, no blue, no grey accent. Ever.
214- ❌ No drop shadow. Hairline only.
215- ❌ No bold display weight. DM Serif Display lives at 400.
216- ❌ No pill buttons or sharp corners. The system is soft.
217 
218---
219 
220## Tokens
221 
222> Generated from the same source the live preview renders from.
223> Treat the values below as the contract — never substitute approximations.
224 
225### Colors
226 
227| Role      | Value |
228|-----------|-------|
229| primary   | `#7A2E1F` |
230| secondary | `#A66854` |
231| tertiary  | `#C98C72` |
232| neutral   | `#F2EADD` |
233| surface   | `#F8F1E5` |
234 
235### Typography
236 
237- **Display:** DM Serif Display
238- **Body:** DM Sans
239- **Mono:** JetBrains Mono
240 
241| Role | size / leading / weight / tracking |
242|------|------------------------------------|
243| Hero | 5.5rem / 1 / 400 / -0.025em |
244| H1   | 3rem / 1.05 / 400 / -0.02em |
245| H2   | 1.625rem / 1.3 / 400 / -0.012em |
246| Body | 1.0625rem / 1.7 / 400 / 0em |
247 
248### Radius
249 
250- sm: `8px`
251- md: `10px`
252- lg: `12px`
253 
254### Shadows
255 
256- **card:** `0 0 0 1px rgba(122, 46, 31, 0.10)`
257- **button:** `none`
258 
259### Borders
260 
261- **card:** `1px solid rgba(122, 46, 31, 0.10)`
262- **divider:** `rgba(122, 46, 31, 0.18)`
263 
264### Buttons
265 
266Four variants, each fully tokenized. The preview renders from these exact values.
267 
268#### Primary
269 
270| Property | Value |
271|----------|-------|
272| shape | `rounded` |
273| background | `#7A2E1F` |
274| color | `#F2EADD` |
275| border | `1px solid #7A2E1F` |
276| padding | `13px 24px` |
277| fontWeight | `500` |
278| fontSize | `0.9375rem` |
279| tracking | `0em` |
280 
281#### Secondary
282 
283| Property | Value |
284|----------|-------|
285| shape | `rounded` |
286| background | `#F8F1E5` |
287| color | `#7A2E1F` |
288| border | `1px solid #7A2E1F` |
289| padding | `12px 23px` |
290| fontWeight | `500` |
291| fontSize | `0.9375rem` |
292| tracking | `0em` |
293 
294#### Outline
295 
296| Property | Value |
297|----------|-------|
298| shape | `rounded` |
299| background | `transparent` |
300| color | `#7A2E1F` |
301| border | `1px solid rgba(122, 46, 31, 0.30)` |
302| padding | `12px 23px` |
303| fontWeight | `500` |
304| fontSize | `0.9375rem` |
305| tracking | `0em` |
306 
307#### Ghost
308 
309| Property | Value |
310|----------|-------|
311| shape | `rounded` |
312| background | `transparent` |
313| color | `#A66854` |
314| border | `none` |
315| padding | `12px 4px` |
316| fontWeight | `500` |
317| fontSize | `0.9375rem` |
318| tracking | `0em` |
319| hoverHint | `underline` |
320 
321### Charts
322 
323| Property | Value |
324|----------|-------|
325| variant | `rounded-bars` |
326| strokeWidth | `2` |
327| gridlines | `false` |
328| barRadius | `4px` |
329| barGap | `10px` |
330| highlight | `all` |
331| axisColor | `#A66854` |
332| palette | `#7A2E1F`, `#A66854`, `#C98C72` |
333
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=DM+Serif+Display:ital@0;1&family=DM+Sans: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: ['"DM Serif Display"', 'serif'],
        sans:    ['"DM Sans"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#7A2E1F',
        secondary: '#A66854',
        accent:    '#C98C72',
        neutral:   '#F2EADD',
        surface:   '#F8F1E5',
      },
      borderRadius: {
        sm: '8px',
        md: '10px',
        lg: '12px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Soft Pastel SaaS

Lavender and cream, generous rounding, friendly and approachable.

saasplayfulminimalmodern
Soft.app
ProductPricingDocsAbout
Sign inGet started
saas · playful · minimal

Build with Soft Pastel SaaS.

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

Vestige Folio

Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly.

editorialfashionecommercepremiumminimal
Vestige.app
ProductPricingDocsAbout
Sign inGet started
editorial · fashion · ecommerce

Build with Vestige Folio.

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