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', }, }, },};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.
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.
An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page.
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.