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.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Fraunces13 body: Inter14 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: 1px22 md: 2px23 lg: 3px24 pill: 9999px25shadows:26 card: "rgba(26,20,16,0.06) 0 1px 2px, inset 0 1px 0 rgba(255,240,215,0.40)"27 button: none28borders:29 card: "1px solid rgba(26,20,16,0.14)"30 divider: rgba(26,20,16,0.18)31buttons:32 primary:33 background: #1a141034 color: #e6d3b535 border: none36 shape: sharp37 padding: 12px 24px38 font: 600 / 0.8125rem / 0.14em39 uppercase: true40 secondary:41 background: rgba(26,20,16,0.04)42 color: #1a141043 border: 1px solid rgba(26,20,16,0.20)44 shape: sharp45 padding: 12px 24px46 font: 600 / 0.8125rem / 0.14em47 uppercase: true48 outline:49 background: transparent50 color: #1a141051 border: 1px solid rgba(26,20,16,0.16)52 shape: sharp53 padding: 12px 24px54 font: 600 / 0.8125rem / 0.14em55 uppercase: true56 ghost:57 background: transparent58 color: #6e5e4c59 border: none60 shape: sharp61 padding: 12px 16px62 font: 600 / 0.8125rem / 0.14em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 1.2567 fill_opacity: 068 gridlines: false69 bar_gap: 10px70 highlight: single71 dot_marker: false72fonts_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 Foundry77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Bronze Foundry** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 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 recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 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 tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 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#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 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 pairings141 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 constraints147 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 — verify157 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. Atmosphere170 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 shift177- Fraunces 400 at 112px for display — soft-modern serif inscribed into bronze178- Patina green `#3d5e4a` exclusively on verified-cast marks + primary CTA + active step179- Inset 1px highlight at 40% warm-white on every card — the brushed-metal top edge180- Sharp 1-3px corners — machined precision, never pill, never rounded181- 0.14em uppercase tracking on UI labels — stamped-into-the-metal voice182 183## 2. Palette184 185### Surfaces186- **Bronze Top** `#ecdcc1` — page top highlight187- **Bronze** `#e6d3b5` — page body (the brushed metal mid-tone)188- **Bronze Lift** `#d8c4a8` — page bottom shadow, secondary surfaces189- **Hairline** `rgba(26,20,16,0.14)` — every divider190 191### Ink192- **Ink** `#1a1410` — text, headings, primary CTA fill (warm near-black)193- **Ink 50** `#6e5e4c` — secondary text, mono labels194 195### Accent196- **Patina** `#3d5e4a` — verified-cast marks, primary CTA accent stripe, active step197- **Patina Soft** `rgba(61,94,74,0.10)` — focus ring, hovered step198 199## 3. Typography200 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. Buttons215 216### Primary (Ink — Engage)217```css218background: #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 corners231 232### Outline & Ghost233- Outline: transparent, 1px hairline at 16% ink234- Ghost: no border, ink-50 uppercase235 236## 5. Cards237 238```css239background: #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. Charts248 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. Tabs252 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. Spacing256 257- Base 8px258- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200`259- Section padding: 128px desktop, 64px mobile260 261## 9. Do's & don'ts262 263✅ **Do**264- Use the brushed-bronze vertical gradient as the page surface — flat bronze reads as beige265- Use the `inset 0 1px 0 rgba(255,240,215,0.40)` highlight on every card — that's the brushed-metal edge266- Reserve patina green for verified marks + primary CTA + active step exclusively267- Use Fraunces 400 only — bold breaks the soft-modern proportion on warm metal268 269❌ **Don't**270- Use flat single-tone bronze — the vertical sheen IS the metal271- Use a second accent — patina alone, on three specific surfaces272- Use rounded or pill corners — sharp 2px is the machined-precision voice273- Use bright gold or copper accents — the only accent is muted patina-green oxidation274 275---276 277## Tokens278 279> Generated from the same source the live preview renders from.280> Treat the values below as the contract — never substitute approximations.281 282### Colors283 284| Role | Value |285|-----------|-------|286| primary | `#1a1410` |287| secondary | `#6e5e4c` |288| tertiary | `#1a1410` |289| neutral | `#d8c4a8` |290| surface | `#e6d3b5` |291 292### Typography293 294- **Display:** Fraunces295- **Body:** Inter296- **Mono:** JetBrains Mono297 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### Radius306 307- sm: `1px`308- md: `2px`309- lg: `3px`310- pill: `9999px`311 312### Shadows313 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### Borders318 319- **card:** `1px solid rgba(26,20,16,0.14)`320- **divider:** `rgba(26,20,16,0.18)`321 322### Buttons323 324Four variants, each fully tokenized. The preview renders from these exact values.325 326#### Primary327 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#### Secondary341 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#### Outline355 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#### Ghost369 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### Charts383 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 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.
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.
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.
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.