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', }, }, },};Lavender and cream, generous rounding, friendly and approachable.
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.