Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation.
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: "Champagne Foundry"3description: "Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation."4tags: [premium, metallic, warm, luxury, editorial]5colors:6 primary: "#1F1A14"7 secondary: "#7A6B58"8 tertiary: "#C9A96A"9 neutral: "#F4EFE6"10 surface: "#FBF7EE"11typography:12 display: "Cormorant Garamond"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "5.5rem / 1 / 400 / -0.025em"17 h1: "3.25rem / 1.05 / 400 / -0.02em"18 h2: "1.625rem / 1.3 / 500 / -0.01em"19 body: "1rem / 1.7 / 400 / 0em"20radius:21 sm: 2px22 md: 4px23 lg: 6px24shadows:25 card: "0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)"26 button: "0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)"27borders:28 card: "1px solid rgba(122, 107, 88, 0.15)"29 divider: "rgba(122, 107, 88, 0.18)"30buttons:31 primary:32 background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)33 color: #1F1A1434 border: 1px solid rgba(122, 89, 45, 0.35)35 shape: rounded36 padding: 12px 26px37 font: 500 / 0.9375rem / 0em38 shadow: 0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)39 secondary:40 background: #FBF7EE41 color: #1F1A1442 border: 1px solid rgba(122, 107, 88, 0.25)43 shape: rounded44 padding: 12px 26px45 font: 500 / 0.9375rem / 0em46 outline:47 background: transparent48 color: #7A6B5849 border: 1px solid rgba(122, 107, 88, 0.40)50 shape: rounded51 padding: 11px 24px52 font: 500 / 0.9375rem / 0em53 ghost:54 background: transparent55 color: #7A6B5856 border: none57 shape: rounded58 padding: 11px 4px59 font: 500 / 0.9375rem / 0em60 hover: underline61charts:62 variant: line63 stroke_width: 1.564 gridlines: false65 highlight: last66 dot_marker: true67 axis_color: "#7A6B58"68 palette: ["#C9A96A", "#A88848", "#7A6B58"]69fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"70dependencies: ["lucide-react"]71---72 73# Champagne Foundry74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Champagne Foundry** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 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 recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — rounded shape, bg `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)`, text `#1F1A14`, border `1px solid rgba(122, 89, 45, 0.35)`, padding `12px 26px`, weight `500`, shadow `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)`.111- **Secondary** — rounded shape, bg `#FBF7EE`, text `#1F1A14`, border `1px solid rgba(122, 107, 88, 0.25)`, padding `12px 26px`, weight `500`.112- **Outline** — rounded shape, text `#7A6B58`, border `1px solid rgba(122, 107, 88, 0.40)`, padding `11px 24px`, weight `500`.113- **Ghost** — rounded shape, text `#7A6B58`, padding `11px 4px`, weight `500`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `#FBF7EE`122- Border: `1px solid rgba(122, 107, 88, 0.15)`123- Shadow: `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)`124- Radius: `radius.lg` (`6px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Charts128 129- Bar/line variant: `line`130- No gridlines — let the bars/lines carry the data.131- Highlight strategy: `last` — emphasize a single bar/point per chart.132- Use the declared palette in order: `#C9A96A`, `#A88848`, `#7A6B58`.133 134#### Typography pairings135 136- **Display (`Cormorant Garamond`)** — h1, h2, hero headlines, brand wordmarks.137- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.138- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.139 140### 4 · Hard constraints141 142Never do any of the following without explicit instruction from the user:143 144- Introduce a new color, font, radius, or shadow that isn't declared above.145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.149 150### 5 · Before you finish — verify151 152Run through this checklist for every screen you produce:153 154- [ ] Every color used appears in the Colors table above.155- [ ] Headlines use the display font; body copy uses the body font.156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.158- [ ] Cards and dividers use the declared border + shadow tokens.159- [ ] No values were invented; if you needed something missing, you stopped and asked.160 161---162 163## Overview164Champagne Foundry is a warm metallic premium system. Cream paper canvas, deep ink type in a high-contrast serif, and one machined gesture: a brushed champagne primary CTA with a top-edge gloss and a bottom-edge shadow that reads as lit metal.165 166For high-end consumer brands, watchmakers, private banking, concierge platforms, hospitality. Premium without ostentation — restraint is the whole point.167 168## The Metallic Gesture169The primary button is the system's signature. It uses a vertical 3-stop gradient that mimics a lit brushed surface:170 171```css172background: linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%);173border: 1px solid rgba(122, 89, 45, 0.35);174box-shadow:175 0 8px 20px -10px rgba(122, 89, 45, 0.40),176 inset 0 1px 0 rgba(255, 245, 220, 0.55),177 inset 0 -1px 0 rgba(122, 89, 45, 0.20);178```179 180The inner top-edge highlight is what reads as "polished." Without it the button looks flat. The inner bottom-edge shadow gives the metal weight. Both must be present.181 182**Where it appears:**183- The primary CTA fill.184- An optional thin horizontal divider beneath the hero (1px gradient line).185 186**Where it never appears:**187- Body text. Card fills. Backgrounds. Logos. Any second button on the page.188 189## Color190- **Ink #1F1A14** — primary text.191- **Bronze #7A6B58** — secondary text, refined captions.192- **Champagne #C9A96A** — the accent endstop.193- **Cream Paper #F4EFE6** — page canvas.194- **Warm Paper #FBF7EE** — card surface.195 196The system is monochromatic-warm. There is no second hue. Restraint of palette is what allows the metal to feel precious.197 198## Typography199- **Display: Cormorant Garamond 400** at 5.5rem with -2.5% tracking. High-contrast serif, never bolded above 500.200- **Body: Inter 400** at 1rem with **1.7 leading**.201- Italic Cormorant for emphasis inside hero headlines (one word per hero).202 203| Role | Font | Size | Weight | Tracking |204|------|------|------|--------|----------|205| Hero | Cormorant Garamond | 5.5rem | 400 | -0.025em |206| H1 | Cormorant Garamond | 3.25rem | 400 | -0.02em |207| H2 | Cormorant Garamond | 1.625rem | 500 | -0.01em |208| Body | Inter | 1rem | 400 | 0 / 1.7 |209 210## Geometry211- **Radii: 2 / 4 / 6.** Architectural restraint. The metal looks expensive at 4px; at 12px it looks cheap.212- **Section gap: 160px** desktop, 96px mobile. Air around the metal is mandatory.213- **Card padding: 40px** minimum.214 215## Buttons216- **Primary** — brushed champagne with the full gloss/shadow stack. The single most precious element on the page.217- **Secondary** — warm paper, 25% bronze hairline.218- **Outline** — transparent with a 40% bronze hairline.219- **Ghost** — bare bronze label, hover underline.220 221All four are softly rounded at 4px. The rest is restraint.222 223## Cards224Warm paper surface, 1px bronze hairline at 15%, a 1px shadow at 4%. Radius 6px. Cards never lift — the page is a layered paper composition, not a stack of floating tiles.225 226## Charts & Data227A single 1.5px champagne line over the cream canvas, no gridlines, no fills. A champagne dot at the latest reading. The chart should feel like a hand-engraved plot.228 229## Do's and Don'ts230- ✅ The metallic gradient appears once per page — the primary CTA. That's it.231- ✅ Always include the inner top-edge highlight + inner bottom-edge shadow. Without them the metal dies.232- ✅ Cormorant 400 for display — never bolded above 500. The serif's contrast is the elegance.233- ✅ Italic Cormorant on one accent word per hero, max.234- ❌ No second metallic surface. No silver, no rose-gold, no chrome.235- ❌ No drop shadows beyond the warm bronze underglow on the primary CTA.236- ❌ No pills. No 12px+ radii. The metal needs sharp edges to read as crafted.237- ❌ No saturated chromatic accents. The system is warm-monochrome.238 239---240 241## Tokens242 243> Generated from the same source the live preview renders from.244> Treat the values below as the contract — never substitute approximations.245 246### Colors247 248| Role | Value |249|-----------|-------|250| primary | `#1F1A14` |251| secondary | `#7A6B58` |252| tertiary | `#C9A96A` |253| neutral | `#F4EFE6` |254| surface | `#FBF7EE` |255 256### Typography257 258- **Display:** Cormorant Garamond259- **Body:** Inter260- **Mono:** JetBrains Mono261 262| Role | size / leading / weight / tracking |263|------|------------------------------------|264| Hero | 5.5rem / 1 / 400 / -0.025em |265| H1 | 3.25rem / 1.05 / 400 / -0.02em |266| H2 | 1.625rem / 1.3 / 500 / -0.01em |267| Body | 1rem / 1.7 / 400 / 0em |268 269### Radius270 271- sm: `2px`272- md: `4px`273- lg: `6px`274 275### Shadows276 277- **card:** `0 1px 2px rgba(31, 26, 20, 0.04), 0 0 0 1px rgba(122, 107, 88, 0.08)`278- **button:** `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)`279 280### Borders281 282- **card:** `1px solid rgba(122, 107, 88, 0.15)`283- **divider:** `rgba(122, 107, 88, 0.18)`284 285### Buttons286 287Four variants, each fully tokenized. The preview renders from these exact values.288 289#### Primary290 291| Property | Value |292|----------|-------|293| shape | `rounded` |294| background | `linear-gradient(180deg, #E6CC92 0%, #C9A96A 50%, #A88848 100%)` |295| color | `#1F1A14` |296| border | `1px solid rgba(122, 89, 45, 0.35)` |297| padding | `12px 26px` |298| fontWeight | `500` |299| fontSize | `0.9375rem` |300| tracking | `0em` |301| shadow | `0 8px 20px -10px rgba(122, 89, 45, 0.40), inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(122, 89, 45, 0.20)` |302 303#### Secondary304 305| Property | Value |306|----------|-------|307| shape | `rounded` |308| background | `#FBF7EE` |309| color | `#1F1A14` |310| border | `1px solid rgba(122, 107, 88, 0.25)` |311| padding | `12px 26px` |312| fontWeight | `500` |313| fontSize | `0.9375rem` |314| tracking | `0em` |315 316#### Outline317 318| Property | Value |319|----------|-------|320| shape | `rounded` |321| background | `transparent` |322| color | `#7A6B58` |323| border | `1px solid rgba(122, 107, 88, 0.40)` |324| padding | `11px 24px` |325| fontWeight | `500` |326| fontSize | `0.9375rem` |327| tracking | `0em` |328 329#### Ghost330 331| Property | Value |332|----------|-------|333| shape | `rounded` |334| background | `transparent` |335| color | `#7A6B58` |336| border | `none` |337| padding | `11px 4px` |338| fontWeight | `500` |339| fontSize | `0.9375rem` |340| tracking | `0em` |341| hoverHint | `underline` |342 343### Charts344 345| Property | Value |346|----------|-------|347| variant | `line` |348| strokeWidth | `1.5` |349| gridlines | `false` |350| highlight | `last` |351| dotMarker | `true` |352| axisColor | `#7A6B58` |353| palette | `#C9A96A`, `#A88848`, `#7A6B58` |354 # 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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Cormorant Garamond"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1F1A14', secondary: '#7A6B58', accent: '#C9A96A', neutral: '#F4EFE6', surface: '#FBF7EE', }, borderRadius: { sm: '2px', md: '4px', lg: '6px', }, }, },};A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal.
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.
Warm cream canvas with yellow-undertone ink, gothic compressed display, literary serif body, and warm crimson hover — code-editor elegance as print publication.
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.