Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined.
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: "Argent Machined"3description: "Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined."4tags: [metallic, premium, cool, minimal, hardware]5colors:6 primary: "#13171C"7 secondary: "#5C6670"8 tertiary: "#C8CDD3"9 neutral: "#E6E8EC"10 surface: "#F2F3F6"11typography:12 display: "Space Grotesk"13 body: Inter14 mono: "IBM Plex Mono"15 scale:16 hero: "4.5rem / 1.02 / 600 / -0.04em"17 h1: "2.75rem / 1.08 / 600 / -0.03em"18 h2: "1.5rem / 1.3 / 600 / -0.015em"19 body: "1rem / 1.6 / 400 / -0.005em"20radius:21 sm: 4px22 md: 6px23 lg: 8px24shadows:25 card: "0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)"26 button: "0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)"27borders:28 card: "1px solid rgba(19, 23, 28, 0.08)"29 divider: "rgba(19, 23, 28, 0.10)"30buttons:31 primary:32 background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)33 color: #13171C34 border: 1px solid rgba(19, 23, 28, 0.18)35 shape: rounded36 padding: 12px 22px37 font: 600 / 0.9375rem / -0.01em38 shadow: 0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)39 secondary:40 background: #13171C41 color: #F2F3F642 border: 1px solid #13171C43 shape: rounded44 padding: 12px 22px45 font: 500 / 0.9375rem / -0.005em46 outline:47 background: transparent48 color: #13171C49 border: 1px solid rgba(19, 23, 28, 0.22)50 shape: rounded51 padding: 11px 21px52 font: 500 / 0.9375rem / -0.005em53 ghost:54 background: transparent55 color: #5C667056 border: none57 shape: rounded58 padding: 11px 6px59 font: 500 / 0.9375rem / -0.005em60 hover: underline61charts:62 variant: "rounded-bars"63 stroke_width: 264 gridlines: false65 bar_radius: 3px66 bar_gap: 8px67 highlight: all68 axis_color: "#5C6670"69 palette: ["#13171C", "#5C6670", "#9AA1AB", "#C8CDD3"]70fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"71dependencies: ["lucide-react"]72---73 74# Argent Machined75 76## AI Build Instructions77 78> **Read this section before writing any code.** The rules below79> are non-negotiable. Every value used in the UI must come from this80> file's frontmatter — never substitute, approximate, or invent new81> colors, fonts, radii, or shadows. If a value is missing, ask the82> user before adding one.83 84### 1 · Your role85 86You are building UI for a project that has adopted **Argent Machined** as its87design system. Treat `DESIGN.md` as the single source of truth.88Your job is to translate the user's product requirements into89components and pages that look like they were designed by the same90person who authored this file.91 92### 2 · Token compliance93 94- Pull every color, font family, radius, shadow, and spacing value95 from the frontmatter at the top of this file.96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never97 hard-code hex values that bypass the system.98- When a token can be expressed as a CSS variable, declare it once99 in your global stylesheet and reference it everywhere downstream.100- The Google Fonts `<link>` is provided in the Typography section.101 Add it to `<head>` before any component renders.102 103### 3 · Component recipes104 105Use these recipes verbatim when building the corresponding component.106 107#### Buttons108 109Four variants are defined. Pick one — never blend variants or invent a fifth.110 111- **Primary** — rounded shape, bg `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)`, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.18)`, padding `12px 22px`, weight `600`, shadow `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)`.112- **Secondary** — rounded shape, bg `#13171C`, text `#F2F3F6`, border `1px solid #13171C`, padding `12px 22px`, weight `500`.113- **Outline** — rounded shape, text `#13171C`, border `1px solid rgba(19, 23, 28, 0.22)`, padding `11px 21px`, weight `500`.114- **Ghost** — rounded shape, text `#5C6670`, padding `11px 6px`, weight `500`.115 116Reach for **primary** as the single dominant CTA per screen.117**Secondary** for the supporting action. **Outline** for tertiary118actions in toolbars. **Ghost** for inline links and table actions.119 120#### Cards121 122- Background: `#F2F3F6`123- Border: `1px solid rgba(19, 23, 28, 0.08)`124- Shadow: `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)`125- Radius: `radius.lg` (`8px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Charts129 130- Bar/line variant: `rounded-bars`131- Bar radius: `3px`132- No gridlines — let the bars/lines carry the data.133- Highlight strategy: `all` — emphasize a single bar/point per chart.134- Use the declared palette in order: `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3`.135 136#### Typography pairings137 138- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.140- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## Overview166Argent Machined is the cool counterpart to warm metallic systems: brushed silver on a slate canvas, graphite ink, quiet steel hairlines. The metallic surface is rationed — it appears only on the primary CTA and a hero badge, never on cards or backgrounds. Everywhere else is restraint.167 168The system is built for premium hardware product pages: audio equipment, watches, automotive interfaces, professional electronics. Anything where the product is the protagonist and the page is its plinth.169 170## The Metallic Recipe171Brushed silver is a vertical 3-stop gradient with a top-edge gloss and a bottom-edge shadow. Together they simulate directional light hitting a machined surface:172 173```css174.argent-metal {175 background: linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%);176 border: 1px solid rgba(19, 23, 28, 0.18);177 box-shadow:178 inset 0 1px 0 rgba(255, 255, 255, 0.55), /* top-edge gloss */179 inset 0 -1px 0 rgba(19, 23, 28, 0.18), /* bottom-edge shadow */180 0 6px 14px -6px rgba(19, 23, 28, 0.30); /* ambient drop */181 border-radius: 8px;182}183```184 185The 50% mid-stop is the key — it creates the brushed-band that reads as metal rather than just "grey gradient." Without it the surface dies.186 187## Color188- **Graphite #13171C** — primary text.189- **Steel #5C6670** — secondary text, axis labels.190- **Silver #C8CDD3** — metallic mid-stop, used in the primary CTA.191- **Slate #E6E8EC** — page canvas. Cool but not sterile.192- **Surface #F2F3F6** — card surface, one notch lighter than canvas.193 194Three neutrals, one "accent" (which is itself a neutral). The system has no chromatic color at all.195 196## Typography197- **Display: Space Grotesk 600** at 4.5rem with -4% tracking. The neo-grotesque feels engineered.198- **Body: Inter 400** at 1rem with 1.6 leading.199- **Mono: IBM Plex Mono 500** for spec callouts (S/N, dimensions, weight).200 201| Role | Font | Size | Weight | Tracking |202|------|------|------|--------|----------|203| Hero | Space Grotesk | 4.5rem | 600 | -0.04em |204| H1 | Space Grotesk | 2.75rem | 600 | -0.03em |205| H2 | Space Grotesk | 1.5rem | 600 | -0.015em |206| Body | Inter | 1rem | 400 | -0.005em / 1.6 |207| Spec | IBM Plex Mono | 0.8125rem | 500 | 0 |208 209## Geometry210- **Radii: 4 / 6 / 8.** Machined edges. Never pill, never sharp, never soft.211- **Section gap: 96px** desktop, 64px mobile.212- **12-column grid** with 24px gutters.213 214## Buttons215- **Primary** — brushed silver gradient with top gloss + bottom shadow. Graphite label at 600. Reads as a machined toggle.216- **Secondary** — solid graphite, surface label. The dark inverse.217- **Outline** — bare hairline rectangle.218- **Ghost** — bare steel label, hover underline.219 220Primary and secondary always appear together as a pair, in that order. Never two primaries.221 222## Cards223Surface cards on slate, 1px graphite hairline at 8% opacity, soft 6px corner radius, low cool ambient shadow. Padding 28px. Cards never use the metallic gradient — that surface belongs only to the primary CTA.224 225## Charts & Data226Multi-bar histogram in three steps of grey (graphite → steel → silver), 3px corner radius, 8px gap, no gridlines. Axis labels in steel at 11px. The chart reads like a measurement readout, not a marketing graphic.227 228## Do's and Don'ts229- ✅ Metallic surface only on the primary CTA + one hero badge. Anywhere else cheapens it.230- ✅ The 50% mid-stop in the gradient is mandatory — it is what makes it read as metal.231- ✅ Top-edge gloss + bottom-edge shadow inset. Without both, the metal looks like a flat grey button.232- ✅ Pair primary (silver) + secondary (graphite) — that contrast is the system's signature.233- ❌ No warm tints. The system is strictly cool — slate, graphite, silver.234- ❌ No chromatic accent. There is no blue, no green, no anything.235- ❌ No metallic backgrounds or large metallic surfaces. The metal is jewelry, not wallpaper.236- ❌ No pill shape. Machined hardware does not round to a pill.237 238---239 240## Tokens241 242> Generated from the same source the live preview renders from.243> Treat the values below as the contract — never substitute approximations.244 245### Colors246 247| Role | Value |248|-----------|-------|249| primary | `#13171C` |250| secondary | `#5C6670` |251| tertiary | `#C8CDD3` |252| neutral | `#E6E8EC` |253| surface | `#F2F3F6` |254 255### Typography256 257- **Display:** Space Grotesk258- **Body:** Inter259- **Mono:** IBM Plex Mono260 261| Role | size / leading / weight / tracking |262|------|------------------------------------|263| Hero | 4.5rem / 1.02 / 600 / -0.04em |264| H1 | 2.75rem / 1.08 / 600 / -0.03em |265| H2 | 1.5rem / 1.3 / 600 / -0.015em |266| Body | 1rem / 1.6 / 400 / -0.005em |267 268### Radius269 270- sm: `4px`271- md: `6px`272- lg: `8px`273 274### Shadows275 276- **card:** `0 0 0 1px rgba(19, 23, 28, 0.06), 0 6px 18px -10px rgba(19, 23, 28, 0.12)`277- **button:** `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)`278 279### Borders280 281- **card:** `1px solid rgba(19, 23, 28, 0.08)`282- **divider:** `rgba(19, 23, 28, 0.10)`283 284### Buttons285 286Four variants, each fully tokenized. The preview renders from these exact values.287 288#### Primary289 290| Property | Value |291|----------|-------|292| shape | `rounded` |293| background | `linear-gradient(180deg, #EEF1F5 0%, #C8CDD3 50%, #9AA1AB 100%)` |294| color | `#13171C` |295| border | `1px solid rgba(19, 23, 28, 0.18)` |296| padding | `12px 22px` |297| fontWeight | `600` |298| fontSize | `0.9375rem` |299| tracking | `-0.01em` |300| shadow | `0 6px 14px -6px rgba(19, 23, 28, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(19, 23, 28, 0.18)` |301 302#### Secondary303 304| Property | Value |305|----------|-------|306| shape | `rounded` |307| background | `#13171C` |308| color | `#F2F3F6` |309| border | `1px solid #13171C` |310| padding | `12px 22px` |311| fontWeight | `500` |312| fontSize | `0.9375rem` |313| tracking | `-0.005em` |314 315#### Outline316 317| Property | Value |318|----------|-------|319| shape | `rounded` |320| background | `transparent` |321| color | `#13171C` |322| border | `1px solid rgba(19, 23, 28, 0.22)` |323| padding | `11px 21px` |324| fontWeight | `500` |325| fontSize | `0.9375rem` |326| tracking | `-0.005em` |327 328#### Ghost329 330| Property | Value |331|----------|-------|332| shape | `rounded` |333| background | `transparent` |334| color | `#5C6670` |335| border | `none` |336| padding | `11px 6px` |337| fontWeight | `500` |338| fontSize | `0.9375rem` |339| tracking | `-0.005em` |340| hoverHint | `underline` |341 342### Charts343 344| Property | Value |345|----------|-------|346| variant | `rounded-bars` |347| strokeWidth | `2` |348| gridlines | `false` |349| barRadius | `3px` |350| barGap | `8px` |351| highlight | `all` |352| axisColor | `#5C6670` |353| palette | `#13171C`, `#5C6670`, `#9AA1AB`, `#C8CDD3` |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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Space Grotesk"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#13171C', secondary: '#5C6670', accent: '#C8CDD3', neutral: '#E6E8EC', surface: '#F2F3F6', }, borderRadius: { sm: '4px', md: '6px', lg: '8px', }, }, },};A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed.
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.
Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.
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.