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', }, }, },};Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
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 ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design.
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.