Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards.
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: "Titanium Deck"3description: "Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards."4tags: [metallic, premium, modern, saas, developer]5colors:6 primary: "#1c1f24"7 secondary: "#6c727a"8 tertiary: "#1c1f24"9 neutral: "#e7e9ec"10 surface: "#f1f2f4"11typography:12 display: "Space Grotesk"13 body: "Space Grotesk"14 mono: "IBM Plex Mono"15 scale:16 hero: "3.5rem / 1.04 / 600 / -0.03em"17 h1: "2.25rem / 1.15 / 600 / -0.025em"18 h2: "1.5rem / 1.3 / 600 / -0.015em"19 body: "0.9375rem / 1.55 / 400 / 0"20radius:21 sm: 3px22 md: 5px23 lg: 8px24 pill: 9999px25shadows:26 card: "rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px"27 button: "rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px"28borders:29 card: "1px solid rgba(28,31,36,0.06)"30 divider: rgba(28,31,36,0.10)31buttons:32 primary:33 background: #1c1f2434 color: #f1f2f435 border: 1px solid rgba(0,0,0,0.4)36 shape: rounded37 padding: 9px 18px38 font: 600 / 0.8125rem39 shadow: rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px40 secondary:41 background: linear-gradient(180deg, #f6f7f8, #e2e4e8)42 color: #1c1f2443 border: 1px solid rgba(28,31,36,0.18)44 shape: rounded45 padding: 9px 18px46 font: 600 / 0.8125rem47 shadow: rgba(255,255,255,0.6) 0 1px 0 inset48 outline:49 background: transparent50 color: #1c1f2451 border: 1px solid rgba(28,31,36,0.22)52 shape: rounded53 padding: 9px 18px54 font: 600 / 0.8125rem55 ghost:56 background: transparent57 color: #6c727a58 border: none59 shape: rounded60 padding: 9px 14px61 font: 600 / 0.8125rem62charts:63 variant: "thin-bars"64 stroke_width: 1.565 fill_opacity: 0.0666 gridlines: true67 bar_gap: 10px68 highlight: single69 dot_marker: true70fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"71dependencies: ["lucide-react"]72---73 74# Titanium Deck75 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 **Titanium Deck** 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 `#1c1f24`, text `#f1f2f4`, border `1px solid rgba(0,0,0,0.4)`, padding `9px 18px`, weight `600`, shadow `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px`.112- **Secondary** — rounded shape, bg `linear-gradient(180deg, #f6f7f8, #e2e4e8)`, text `#1c1f24`, border `1px solid rgba(28,31,36,0.18)`, padding `9px 18px`, weight `600`, shadow `rgba(255,255,255,0.6) 0 1px 0 inset`.113- **Outline** — rounded shape, text `#1c1f24`, border `1px solid rgba(28,31,36,0.22)`, padding `9px 18px`, weight `600`.114- **Ghost** — rounded shape, text `#6c727a`, padding `9px 14px`, weight `600`.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: `#f1f2f4`123- Border: `1px solid rgba(28,31,36,0.06)`124- Shadow: `rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px`125- Radius: `radius.lg` (`8px`)126- Internal padding: `20px` for compact cards, `24–28px` for content cards.127 128#### Tabs129 130Variant: `boxed`. Each tab is a bordered card. Active tab gets the accent border and a subtle fill.131 132#### Charts133 134- Bar/line variant: `thin-bars`135- Highlight strategy: `single` — emphasize a single bar/point per chart.136 137#### Typography pairings138 139- **Display (`Space Grotesk`)** — h1, h2, hero headlines, brand wordmarks.140- **Body (`Space Grotesk`)** — paragraphs, labels, button text, form inputs.141- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.142 143### 4 · Hard constraints144 145Never do any of the following without explicit instruction from the user:146 147- Introduce a new color, font, radius, or shadow that isn't declared above.148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.152 153### 5 · Before you finish — verify154 155Run through this checklist for every screen you produce:156 157- [ ] Every color used appears in the Colors table above.158- [ ] Headlines use the display font; body copy uses the body font.159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.161- [ ] Cards and dividers use the declared border + shadow tokens.162- [ ] No values were invented; if you needed something missing, you stopped and asked.163 164---165 166## 1. Atmosphere167 168Titanium Deck is brushed metal interpreted as restraint. Surfaces sit on a faint vertical gradient (`#f6f7f8` → `#e2e4e8`) that reads as machined aluminum under fluorescent light. Headlines run in Space Grotesk 600, body in the same. Technical labels — IDs, timestamps, sensor readouts — switch to IBM Plex Mono with uppercase tracking. The single accent is a warm amber `#f0a000` that appears as a tiny dot indicator on active modules, like a status LED on a server rack.169 170The discipline is in the micro-detail: every button gets a 1px white inset highlight at the top edge to mimic the way light catches machined steel; every card has the same. There are no decorative gradients beyond the surface itself.171 172**Signature moves**173- Vertical machined gradient on every surface — `linear-gradient(180deg, #f6f7f8, #e2e4e8)` — never a hard fill174- 1px white inset highlight (`rgba(255,255,255,0.7)`) at the top of every card and button — the catch-light is structural175- Amber `#f0a000` used only as a 6px dot status indicator and the chart highlight — never as a fill or text color176- IBM Plex Mono with 0.06em uppercase tracking for every technical label177- Boxed tabs with the same machined gradient — they read as physical buttons178 179## 2. Palette180 181### Surfaces182- **Aluminum Light** `linear-gradient(180deg, #f6f7f8, #e2e4e8)` — primary card surface183- **Aluminum Mid** `linear-gradient(180deg, #eaecef, #d6d9de)` — pressed/secondary state184- **Aluminum Dark** `linear-gradient(180deg, #2a2d33, #1c1f24)` — primary CTA, dark sections185- **Page** `#e7e9ec` — cool background, slightly bluer than the cards186 187### Ink188- **Ink** `#1c1f24` — text, headings, primary CTA fill189- **Ink 60** `#6c727a` — secondary text, mono labels190- **Hairline** `rgba(28,31,36,0.06)` — every card edge191 192### Accent193- **Amber LED** `#f0a000` — status dot, active chart bar194- **Amber Soft** `rgba(240,160,0,0.16)` — focus ring, hovered tab background195 196## 3. Typography197 198| Role | Font | Size | Weight | Leading | Tracking |199|------|------|------|--------|---------|----------|200| Hero | Space Grotesk | 56px | 600 | 1.04 | -0.03em |201| H1 | Space Grotesk | 36px | 600 | 1.15 | -0.025em |202| H2 | Space Grotesk | 24px | 600 | 1.3 | -0.015em |203| Body | Space Grotesk | 15px | 400 | 1.55 | 0 |204| UI | Space Grotesk | 13px | 500 | 1.4 | 0 |205| Label / Mono | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |206| Sensor Readout | IBM Plex Mono | 24px | 600 | 1.1 | 0 tabular-nums |207 208Three weights for sans: 400 / 500 / 600. Mono is uppercase whenever it appears as a label, mixed-case only inside code blocks.209 210## 4. Buttons211 212### Primary (Anodized Dark)213```css214background: #1c1f24;215color: #f1f2f4;216padding: 9px 18px;217border-radius: 5px;218border: 1px solid rgba(0,0,0,0.4);219box-shadow:220 rgba(255,255,255,0.10) 0 1px 0 inset,221 rgba(0,0,0,0.18) 0 1px 2px;222```223 224The 1px inset white highlight is what sells the metal — without it the button reads as flat black.225 226### Secondary (Aluminum)227```css228background: linear-gradient(180deg, #f6f7f8, #e2e4e8);229color: #1c1f24;230border: 1px solid rgba(28,31,36,0.18);231box-shadow: rgba(255,255,255,0.6) 0 1px 0 inset;232```233 234### Outline & Ghost235- Outline: transparent, 1px ink hairline at 22%236- Ghost: transparent, no border, ink-secondary text237 238## 5. Cards239 240```css241background: linear-gradient(180deg, #f6f7f8, #e2e4e8);242border: 1px solid rgba(28,31,36,0.06);243border-radius: 8px;244box-shadow:245 rgba(255,255,255,0.7) 0 1px 0 inset,246 rgba(28,31,36,0.06) 0 0 0 1px,247 rgba(28,31,36,0.04) 0 1px 2px;248```249 250The signature is the inset white highlight + a 1px outline shadow — it reads as a physical machined panel, not a flat surface.251 252Active cards get a 6px amber dot in the top-right corner — the only place amber appears as a fill.253 254## 6. Charts255 256Thin precise bars (4px wide, 10px gap) with dashed gridlines at 6% ink. One bar in amber, others in 22% ink. Line charts run at 1.5px ink with a 6% fill, ending in an amber dot marker. Y-axis labels in IBM Plex Mono uppercase 11px. The chart reads as instrument output, not infographic.257 258## 7. Tabs259 260Boxed tabs with the aluminum gradient. Active = pressed-in look (gradient flips to `linear-gradient(180deg, #d6d9de, #eaecef)`) with a tiny amber dot at the bottom-right corner. Inactive = standard aluminum surface. Boxed shape (3px radius), tight gap.261 262## 8. Spacing263 264- Base 4px265- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64`266- Section padding: 80px desktop, 40px mobile267 268## 9. Do's & don'ts269 270✅ **Do**271- Use the vertical machined gradient on every card and button — flat fills break the metal272- Keep the 1px white inset highlight on every surface — it's the catch-light, not decoration273- Use the amber accent only as a 6px status dot and as the chart highlight — never as text or button fill274- Switch to IBM Plex Mono uppercase 0.06em for every technical label275 276❌ **Don't**277- Use bright color fills — the entire system is greyscale + one amber dot278- Use sharp 0px corners — the radius is small (3-8px) but never zero, mimicking machined chamfer279- Skip the inset highlight to "simplify" — the surface stops reading as metal280- Use Space Grotesk at 700 — 600 is the maximum, anything heavier looks plastic281 282---283 284## Tokens285 286> Generated from the same source the live preview renders from.287> Treat the values below as the contract — never substitute approximations.288 289### Colors290 291| Role | Value |292|-----------|-------|293| primary | `#1c1f24` |294| secondary | `#6c727a` |295| tertiary | `#1c1f24` |296| neutral | `#e7e9ec` |297| surface | `#f1f2f4` |298 299### Typography300 301- **Display:** Space Grotesk302- **Body:** Space Grotesk303- **Mono:** IBM Plex Mono304 305| Role | size / leading / weight / tracking |306|------|------------------------------------|307| Hero | 3.5rem / 1.04 / 600 / -0.03em |308| H1 | 2.25rem / 1.15 / 600 / -0.025em |309| H2 | 1.5rem / 1.3 / 600 / -0.015em |310| Body | 0.9375rem / 1.55 / 400 / 0 |311 312### Radius313 314- sm: `3px`315- md: `5px`316- lg: `8px`317- pill: `9999px`318 319### Shadows320 321- **card:** `rgba(255,255,255,0.7) 0 1px 0 inset, rgba(28,31,36,0.06) 0 0 0 1px, rgba(28,31,36,0.04) 0 1px 2px`322- **button:** `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px`323 324### Borders325 326- **card:** `1px solid rgba(28,31,36,0.06)`327- **divider:** `rgba(28,31,36,0.10)`328 329### Buttons330 331Four variants, each fully tokenized. The preview renders from these exact values.332 333#### Primary334 335| Property | Value |336|----------|-------|337| shape | `rounded` |338| background | `#1c1f24` |339| color | `#f1f2f4` |340| border | `1px solid rgba(0,0,0,0.4)` |341| padding | `9px 18px` |342| fontWeight | `600` |343| fontSize | `0.8125rem` |344| shadow | `rgba(255,255,255,0.10) 0 1px 0 inset, rgba(0,0,0,0.18) 0 1px 2px` |345 346#### Secondary347 348| Property | Value |349|----------|-------|350| shape | `rounded` |351| background | `linear-gradient(180deg, #f6f7f8, #e2e4e8)` |352| color | `#1c1f24` |353| border | `1px solid rgba(28,31,36,0.18)` |354| padding | `9px 18px` |355| fontWeight | `600` |356| fontSize | `0.8125rem` |357| shadow | `rgba(255,255,255,0.6) 0 1px 0 inset` |358 359#### Outline360 361| Property | Value |362|----------|-------|363| shape | `rounded` |364| background | `transparent` |365| color | `#1c1f24` |366| border | `1px solid rgba(28,31,36,0.22)` |367| padding | `9px 18px` |368| fontWeight | `600` |369| fontSize | `0.8125rem` |370 371#### Ghost372 373| Property | Value |374|----------|-------|375| shape | `rounded` |376| background | `transparent` |377| color | `#6c727a` |378| border | `none` |379| padding | `9px 14px` |380| fontWeight | `600` |381| fontSize | `0.8125rem` |382 383### Charts384 385| Property | Value |386|----------|-------|387| variant | `thin-bars` |388| strokeWidth | `1.5` |389| fillOpacity | `0.06` |390| gridlines | `true` |391| barGap | `10px` |392| highlight | `single` |393| dotMarker | `true` |394 # 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=IBM+Plex+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Space Grotesk"', 'serif'], sans: ['"Space Grotesk"', 'sans-serif'], mono: ['"IBM Plex Mono"', 'monospace'], }, colors: { primary: '#1c1f24', secondary: '#6c727a', accent: '#1c1f24', neutral: '#e7e9ec', surface: '#f1f2f4', }, borderRadius: { sm: '3px', md: '5px', lg: '8px', }, }, },};Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode.
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-studio editorial. Massive display serif at 7rem with tight tracking, hairline rules between sections, asymmetric column grids, captions in small-caps mono. One ox-blood accent. The page reads like a printed monograph.
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.