design.md
Back to directory
metallic · premium · warm · modern · minimal

Bronze Foundry.

A workshop interface cast in brushed bronze. Warm metallic tonal surfaces with a subtle vertical sheen, Fraunces for display and Inter for UI, sharp 2px corners, a single patina-green accent reserved for verified-cast marks and the primary CTA. Built for craft brands, manufacturing portfolios, and premium hardware product pages where the surface itself reads as machined metal.

01 · Preview

The kitchen sink.

Bronze.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · warm

Build with Bronze Foundry.

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
#1A1410
secondary
#6E5E4C
tertiary
#1A1410
neutral
#D8C4A8
surface
#E6D3B5
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
1px
md
2px
lg
3px
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.

ArchetypeDark Luxury

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: "Bronze Foundry"
3description: "A workshop interface cast in brushed bronze. Warm metallic tonal surfaces with a subtle vertical sheen, Fraunces for display and Inter for UI, sharp 2px corners, a single patina-green accent reserved for verified-cast marks and the primary CTA. Built for craft brands, manufacturing portfolios, and premium hardware product pages where the surface itself reads as machined metal."
4tags: [metallic, premium, warm, modern, minimal]
5colors:
6  primary:   "#1a1410"
7  secondary: "#6e5e4c"
8  tertiary:  "#1a1410"
9  neutral:   "#d8c4a8"
10  surface:   "#e6d3b5"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "7rem / 0.94 / 400 / -0.04em"
17    h1:   "4rem / 1.05 / 400 / -0.025em"
18    h2:   "1.875rem / 1.22 / 500 / -0.012em"
19    body: "1.0625rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 1px
22  md: 2px
23  lg: 3px
24  pill: 9999px
25shadows:
26  card:   "rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)"
27  button: none
28borders:
29  card:    "1px solid rgba(26,20,16,0.14)"
30  divider: rgba(26,20,16,0.18)
31buttons:
32  primary:
33    background: #1a1410
34    color: #e6d3b5
35    border: none
36    shape: sharp
37    padding: 12px 24px
38    font: 600 / 0.8125rem / 0.14em
39    uppercase: true
40  secondary:
41    background: rgba(26,20,16,0.04)
42    color: #1a1410
43    border: 1px solid rgba(26,20,16,0.20)
44    shape: sharp
45    padding: 12px 24px
46    font: 600 / 0.8125rem / 0.14em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #1a1410
51    border: 1px solid rgba(26,20,16,0.16)
52    shape: sharp
53    padding: 12px 24px
54    font: 600 / 0.8125rem / 0.14em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #6e5e4c
59    border: none
60    shape: sharp
61    padding: 12px 16px
62    font: 600 / 0.8125rem / 0.14em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1.25
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 10px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Bronze Foundry
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 **Bronze Foundry** 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 `#1a1410`, text `#e6d3b5`, padding `12px 24px`, weight `600`, uppercased.
114- **Secondary** — sharp shape, bg `rgba(26,20,16,0.04)`, text `#1a1410`, border `1px solid rgba(26,20,16,0.20)`, padding `12px 24px`, weight `600`, uppercased.
115- **Outline** — sharp shape, text `#1a1410`, border `1px solid rgba(26,20,16,0.16)`, padding `12px 24px`, weight `600`, uppercased.
116- **Ghost** — sharp shape, text `#6e5e4c`, padding `12px 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: `#e6d3b5`
125- Border: `1px solid rgba(26,20,16,0.14)`
126- Shadow: `rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)`
127- Radius: `radius.lg` (`3px`)
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 (`Fraunces`)** — 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 
171Bronze Foundry is a workshop interface cast in brushed bronze. The page surface is warm bronze `#e6d3b5` with a subtle vertical `linear-gradient(180deg, #ecdcc1 0%, #e6d3b5 50%, #d8c4a8 100%)` — a 5% lightness sheen that reads as light hitting brushed metal. Display headlines run in Fraunces 400 at 112px — the soft-modern serif inscribed into the bronze. Body sits in Inter at 17px on a 1.65 leading. UI labels in Inter 600 with 0.14em uppercase tracking — the stamped-into-the-metal voice. The single accent is patina green `#3d5e4a` that appears only on verified-cast marks, the primary CTA, and the active step in a process flow — the oxidation that signals authority on real bronze.
172 
173The discipline is in the surface treatment: every elevated card gets an `inset 0 1px 0 rgba(255,240,215,0.40)` highlight — the thin top edge of light that distinguishes a brushed-metal panel from a flat tinted card.
174 
175**Signature moves**
176- Brushed-bronze tonal page `#ecdcc1 → #e6d3b5 → #d8c4a8` — vertical sheen, 5% lightness shift
177- Fraunces 400 at 112px for display — soft-modern serif inscribed into bronze
178- Patina green `#3d5e4a` exclusively on verified-cast marks + primary CTA + active step
179- Inset 1px highlight at 40% warm-white on every card — the brushed-metal top edge
180- Sharp 1-3px corners — machined precision, never pill, never rounded
181- 0.14em uppercase tracking on UI labels — stamped-into-the-metal voice
182 
183## 2. Palette
184 
185### Surfaces
186- **Bronze Top** `#ecdcc1` — page top highlight
187- **Bronze** `#e6d3b5` — page body (the brushed metal mid-tone)
188- **Bronze Lift** `#d8c4a8` — page bottom shadow, secondary surfaces
189- **Hairline** `rgba(26,20,16,0.14)` — every divider
190 
191### Ink
192- **Ink** `#1a1410` — text, headings, primary CTA fill (warm near-black)
193- **Ink 50** `#6e5e4c` — secondary text, mono labels
194 
195### Accent
196- **Patina** `#3d5e4a` — verified-cast marks, primary CTA accent stripe, active step
197- **Patina Soft** `rgba(61,94,74,0.10)` — focus ring, hovered step
198 
199## 3. Typography
200 
201| Role | Font | Size | Weight | Leading | Tracking |
202|------|------|------|--------|---------|----------|
203| Hero | Fraunces | 112px | 400 | 0.94 | -0.04em |
204| H1 | Fraunces | 64px | 400 | 1.05 | -0.025em |
205| H2 | Fraunces | 30px | 500 | 1.22 | -0.012em |
206| Pull Quote | Fraunces (italic) | 26px | 400 | 1.4 | -0.008em |
207| Body | Inter | 17px | 400 | 1.65 | -0.005em |
208| UI / Button | Inter | 13px | 600 | 1.4 | 0.14em uppercase |
209| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |
210| Cast Number | JetBrains Mono | 13px | 500 | 1.0 | 0.04em tabular-nums |
211 
212Fraunces 400 only — the soft-modern proportion needs to stay light to sit on the warm bronze without going muddy.
213 
214## 4. Buttons
215 
216### Primary (Ink — Engage)
217```css
218background: #1a1410;
219color: #e6d3b5;
220padding: 12px 24px;
221border-radius: 2px;
222text-transform: uppercase;
223letter-spacing: 0.14em;
224font-weight: 600;
225```
226 
227The ink button on bronze reads as a stamped iron tag riveted to the brushed surface. The 0.14em tracking is the stamped-into-the-metal voice.
228 
229### Secondary (Bronze Wash)
230- `rgba(26,20,16,0.04)` background, 1px hairline at 20% ink — same sharp 2px corners
231 
232### Outline & Ghost
233- Outline: transparent, 1px hairline at 16% ink
234- Ghost: no border, ink-50 uppercase
235 
236## 5. Cards
237 
238```css
239background: #e6d3b5;
240border: 1px solid rgba(26,20,16,0.14);
241border-radius: 3px;
242box-shadow: rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40);
243```
244 
245The `inset 0 1px 0` highlight at 40% warm-white is the entire trick — that thin top edge of light is what makes the card read as a brushed-metal panel rather than a flat tinted rectangle. Without it, the card just looks beige.
246 
247## 6. Charts
248 
249Thin precise bars (3px wide, 10px gap). One bar in patina, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts read as inscribed exhibits on the bronze plate.
250 
251## 7. Tabs
252 
253Underline 1.5px in patina for the active state. Inactive tabs are ink-50 in Inter 600 uppercase. Tabs sit on a 1px hairline baseline.
254 
255## 8. Spacing
256 
257- Base 8px
258- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200`
259- Section padding: 128px desktop, 64px mobile
260 
261## 9. Do's & don'ts
262 
263✅ **Do**
264- Use the brushed-bronze vertical gradient as the page surface — flat bronze reads as beige
265- Use the `inset 0 1px 0 rgba(255,240,215,0.40)` highlight on every card — that's the brushed-metal edge
266- Reserve patina green for verified marks + primary CTA + active step exclusively
267- Use Fraunces 400 only — bold breaks the soft-modern proportion on warm metal
268 
269❌ **Don't**
270- Use flat single-tone bronze — the vertical sheen IS the metal
271- Use a second accent — patina alone, on three specific surfaces
272- Use rounded or pill corners — sharp 2px is the machined-precision voice
273- Use bright gold or copper accents — the only accent is muted patina-green oxidation
274 
275---
276 
277## Tokens
278 
279> Generated from the same source the live preview renders from.
280> Treat the values below as the contract — never substitute approximations.
281 
282### Colors
283 
284| Role      | Value |
285|-----------|-------|
286| primary   | `#1a1410` |
287| secondary | `#6e5e4c` |
288| tertiary  | `#1a1410` |
289| neutral   | `#d8c4a8` |
290| surface   | `#e6d3b5` |
291 
292### Typography
293 
294- **Display:** Fraunces
295- **Body:** Inter
296- **Mono:** JetBrains Mono
297 
298| Role | size / leading / weight / tracking |
299|------|------------------------------------|
300| Hero | 7rem / 0.94 / 400 / -0.04em |
301| H1   | 4rem / 1.05 / 400 / -0.025em |
302| H2   | 1.875rem / 1.22 / 500 / -0.012em |
303| Body | 1.0625rem / 1.65 / 400 / -0.005em |
304 
305### Radius
306 
307- sm: `1px`
308- md: `2px`
309- lg: `3px`
310- pill: `9999px`
311 
312### Shadows
313 
314- **card:** `rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)`
315- **button:** `none`
316 
317### Borders
318 
319- **card:** `1px solid rgba(26,20,16,0.14)`
320- **divider:** `rgba(26,20,16,0.18)`
321 
322### Buttons
323 
324Four variants, each fully tokenized. The preview renders from these exact values.
325 
326#### Primary
327 
328| Property | Value |
329|----------|-------|
330| shape | `sharp` |
331| background | `#1a1410` |
332| color | `#e6d3b5` |
333| border | `none` |
334| padding | `12px 24px` |
335| fontWeight | `600` |
336| fontSize | `0.8125rem` |
337| tracking | `0.14em` |
338| uppercase | `true` |
339 
340#### Secondary
341 
342| Property | Value |
343|----------|-------|
344| shape | `sharp` |
345| background | `rgba(26,20,16,0.04)` |
346| color | `#1a1410` |
347| border | `1px solid rgba(26,20,16,0.20)` |
348| padding | `12px 24px` |
349| fontWeight | `600` |
350| fontSize | `0.8125rem` |
351| tracking | `0.14em` |
352| uppercase | `true` |
353 
354#### Outline
355 
356| Property | Value |
357|----------|-------|
358| shape | `sharp` |
359| background | `transparent` |
360| color | `#1a1410` |
361| border | `1px solid rgba(26,20,16,0.16)` |
362| padding | `12px 24px` |
363| fontWeight | `600` |
364| fontSize | `0.8125rem` |
365| tracking | `0.14em` |
366| uppercase | `true` |
367 
368#### Ghost
369 
370| Property | Value |
371|----------|-------|
372| shape | `sharp` |
373| background | `transparent` |
374| color | `#6e5e4c` |
375| border | `none` |
376| padding | `12px 16px` |
377| fontWeight | `600` |
378| fontSize | `0.8125rem` |
379| tracking | `0.14em` |
380| uppercase | `true` |
381 
382### Charts
383 
384| Property | Value |
385|----------|-------|
386| variant | `thin-bars` |
387| strokeWidth | `1.25` |
388| fillOpacity | `0` |
389| gridlines | `false` |
390| barGap | `10px` |
391| highlight | `single` |
392| dotMarker | `false` |
393 
394---
395 
396## Pro tokens
397 
398> Production-fidelity tokens. States, density, motion, elevation,
399> content rules and a measured WCAG contract — derived from the
400> resting tokens unless explicitly authored.
401 
402### States
403 
404#### Button
405 
406- **hover** — shadow: `0 0 24px -4px rgba(26, 20, 16, 0.5), 0 8px 24px -8px rgba(0,0,0,0.6)`, filter: `brightness(1.1)`
407- **focus** — outline: `1.5px solid #1a1410`, outline-offset: `3px`
408- **active** — transform: `translateY(1px)`, filter: `brightness(0.92)`
409- **disabled** — opacity: `0.35`, filter: `saturate(0.4)`
410- **loading** — opacity: `0.6`
411- **selected** — bg: `#1a1410`, color: `#0A0A0A`
412 
413#### Input
414 
415- **hover** — border: `1px solid rgba(26, 20, 16, 0.5)`
416- **focus** — border: `1px solid #1a1410`, shadow: `0 0 0 3px rgba(26, 20, 16, 0.2)`
417- **disabled** — opacity: `0.35`
418- **error** — border: `1px solid #F87171`, shadow: `0 0 0 3px rgba(248,113,113,0.2)`
419 
420#### Card
421 
422- **hover** — shadow: `0 16px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(26, 20, 16, 0.18)`, transform: `translateY(-2px)`
423- **selected** — border: `1px solid #1a1410`, shadow: `0 0 0 1px #1a1410`
424- **dragging** — shadow: `0 24px 60px -16px rgba(0,0,0,0.85)`, transform: `scale(1.02)`, opacity: `0.85`
425 
426#### Tab
427 
428- **hover** — color: `#1a1410`
429- **focus** — outline: `1.5px solid #1a1410`, outline-offset: `2px`
430- **selected** — color: `#1a1410`, border: `0 0 1.5px 0 solid #1a1410`
431 
432### Density
433 
434| Mode | padding × | row × | body | radius × | Use for |
435|------|-----------|-------|------|----------|---------|
436| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
437| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
438| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
439 
440### Motion
441 
442**Signature — Glide.** Fließende, leicht beschleunigte Übergänge mit Accent-Glow auf hover. Premium-Feeling durch kontrollierte Lichtspiele.
443 
444```css
445transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1);
446```
447 
448| Token | Value |
449|-------|-------|
450| duration.instant | `100ms` |
451| duration.fast | `180ms` |
452| duration.base | `280ms` |
453| duration.slow | `450ms` |
454| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
455| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
456| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
457| easing.spring | `cubic-bezier(0.5, 1.25, 0.55, 1)` |
458 
459### Elevation
460 
461Five-level scale, system-specific recipe.
462 
463| Level | Shadow | Recipe |
464|-------|--------|--------|
465| level0 | `none` | Flat — Hairline mit Accent-Hauch. |
466| level1 | `0 2px 4px rgba(0,0,0,0.45)` | Subtle drop — list items. |
467| level2 | `0 12px 28px -8px rgba(0,0,0,0.6)` | Popover — vom Canvas gelöst. |
468| level3 | `0 20px 48px -12px rgba(0,0,0,0.7), 0 0 32px -8px rgba(26, 20, 16, 0.25)` | Sheet — Accent-Halo. |
469| level4 | `0 40px 96px -16px rgba(0,0,0,0.85), 0 0 64px -12px rgba(26, 20, 16, 0.4)` | Modal — voller Accent-Rim, dramatisch. |
470 
471### Content
472 
473- **measure:** `66ch` (max line length for body prose)
474- **paragraph spacing:** `1.3em`
475- **list indent:** `1.5em`
476- **list gap:** `0.5em`
477- **link:** color `#1a1410`, underline `hover`
478- **blockquote:** border `2px solid #1a1410`, padding `0.8em 1.2em`
479- **code:** background `rgba(26, 20, 16, 0.12)`, color `#1a1410`
480 
481### Accessibility (WCAG 2.1)
482 
483**Overall:** AA-Large
484 
485| Pair | Ratio | Required | Grade | Suggested fix |
486|------|-------|----------|-------|---------------|
487| Body text on surface | 12.46:1 | AA | AAA | — |
488| Body text on canvas | 10.75:1 | AA | AAA | — |
489| Muted text on surface | 4.26:1 | AA | AA-Large | `#685948` → 4.61:1 (AA) |
490| Accent on surface | 12.46:1 | AA-Large | AAA | — |
491| Accent on canvas | 10.75:1 | AA-Large | AAA | — |
492
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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1a1410',
        secondary: '#6e5e4c',
        accent:    '#1a1410',
        neutral:   '#d8c4a8',
        surface:   '#e6d3b5',
      },
      borderRadius: {
        sm: '1px',
        md: '2px',
        lg: '3px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Kinfolk Stone

Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious.

editorialminimallightmagazine
Kinfolk.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · light

Build with Kinfolk Stone.

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 Admin

An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug.

enterpriseadmindashboardminimalsaas
Atlas.app
ProductPricingDocsAbout
Sign inGet started
enterprise · admin · dashboard

Build with Atlas Admin.

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