Metal / Chrome

---
name: metal-chrome
description: Apply the Metal / Chrome visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Metal / Chrome, mentions chrome type, liquid metal, brushed metal, or describes chrome gradient text, brushed metal gradients, specular highlight sweeps — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Metal / Chrome Design System

Polished-metal surfaces rendered in CSS: chrome-gradient headline type, brushed-aluminum panels, beveled edges, and specular highlight sweeps on a near-black stage. The language of automotive reveals, hardware launches, and sneaker-drop hype pages.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Metal / Chrome.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (chrome type, liquid metal, brushed metal, metallic UI, Y2K chrome), or describes its traits: chrome gradient text; brushed metal gradients; specular highlight sweeps; beveled edges; dark stage background; bold extended display type; silver-on-black palette.

## Design tokens

### Color palette

- Near-black studio stage background: `#0f0f11` (--color-bg)
- Panel base under metal gradients: `#1a1a1e` (--color-surface)
- Primary text, bright silver-white: `#f2f2f4` (--color-text)
- Secondary text, satin gray: `#9a9aa2` (--color-text-muted)
- Chrome highlight — gradient top stop and interactive accents: `#e8e8e8` (--color-accent)
- Chrome gradient midtone: `#8a8a8a` (--color-chrome-mid)
- Chrome gradient shadow stop: `#3a3a3a` (--color-chrome-dark)
- Specular sweep highlight, 80% white: `#ffffffcc` (--color-specular)
- Machined panel seams and edges: `#3f3f46` (--color-border)

### Typography

- Display / headings: Unbounded (fallback: Arial Black, sans-serif) (ideal: Monument Extended, premium — use Unbounded as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 900, line-height 1.2, letter-spacing 0.01em, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Cinematic: enormous heroes and wide section gaps so each metal object gets its own spotlight; dense specs tables are the one compact zone.
- Border radius: sm 4px, md 8px, lg 12px — 4–12px machined-corner rounding; radii read as milled edges, never soft blobs.
- Border treatment: 1px solid #3f3f46 — Panel seams. Beveled elements add inset top-light/bottom-dark gradient strokes to simulate a machined chamfer.

### Shadows

- bevel: `inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.6)` — Machined bevel on buttons and metal panels
- stage: `0 24px 60px rgba(0, 0, 0, 0.6)` — Product and hero object drop onto the dark stage
- specular-glow: `0 0 32px rgba(232, 232, 232, 0.18)` — Halo behind chrome type and hero hardware

### Layout

- Max content width: 1440px
- Full-bleed hero with a single spotlit product or chrome wordmark
- Horizontal spec strips with thin machined seam rules
- Oversized numerals and stats set in chrome gradient
- Symmetrical, centered composition like a turntable reveal

### Effects

- Chrome text via linear-gradient + background-clip: text with a hard highlight stop
- Brushed-metal panels: repeating-linear-gradient micro-lines at 2–3% opacity over a gray gradient
- Animated specular sweep: a rotated white gradient bar translating across metal surfaces
- Reflection: mirrored element below hero with mask-image fade

### Motion

- Easing: cubic-bezier(0.16, 1, 0.3, 1); durations 200ms / 450ms / 900ms
- Specular sweep glides across chrome type once on load, then only on hover
- Hero product rotates or tilts a few degrees on scroll like a turntable
- Slow, weighty easing — metal is heavy, nothing snaps

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0f0f11;
  --color-surface: #1a1a1e;
  --color-text: #f2f2f4;
  --color-text-muted: #9a9aa2;
  --color-accent: #e8e8e8;
  --color-chrome-mid: #8a8a8a;
  --color-chrome-dark: #3a3a3a;
  --color-specular: #ffffffcc;
  --color-border: #3f3f46;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-bevel: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.6);
  --shadow-stage: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-specular-glow: 0 0 32px rgba(232, 232, 232, 0.18);
  --border-default: 1px solid #3f3f46;
  --font-display: Unbounded, "Arial Black", sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 900ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@700;900&family=Inter:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Slim dark bar with 1px seam border below, uppercase extended wordmark, sparse uppercase links in satin gray that brighten to chrome white
- **Hero:** Black stage, giant uppercase chrome-gradient headline in the extended face, spotlit product render with reflection, single beveled metal CTA
- **Card:** Dark #1a1a1e panel, 8px radius, seam border, bevel inset shadow, brushed-metal texture on the header strip
- **Button (primary):** Chrome gradient fill (light to dark), near-black text, 8px radius, bevel inset; hover triggers a specular sweep across the face
- **Button (secondary):** Transparent with 1px silver #8a8a8a border and silver text; border and text step up to #e8e8e8 on hover
- **Form fields:** Recessed look: #131316 fill, seam border, inset 0 2px 4px rgba(0,0,0,0.5); focus adds a thin silver outer ring

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Headline type filled with a vertical chrome gradient (#e8e8e8 → #8a8a8a → #3a3a3a with a bright horizon line) via background-clip: text, so words read as machined metal catching studio light. Spend boldness here; keep everything else quiet.

## Do

- Reserve chrome gradients for headlines, numerals, and the primary CTA — metal is precious
- Keep the stage nearly black so silver reads as reflective, not gray
- Add a hard bright stop in chrome gradients; a soft gray blend reads as concrete, not metal
- Pair the extended display face with a quiet neutral body font

## Don't

- Don't color-tint the chrome palette into blues or golds unless the brand demands it — grayscale sells the material
- No soft pastel backgrounds; chrome dies on light, low-contrast stages
- Don't run body copy in gradient fills or uppercase
- Don't loop the specular sweep continuously — once on load, then hover-only

## Accessibility notes

- Chrome-gradient text contrast varies across its stops; keep gradient type at display sizes only and provide solid #f2f2f4 for all body and UI text
- Mid-gray #8a8a8a fails contrast on the dark bg for normal text — decorative and large-type use only
- Specular sweep and rotation animations must be disabled under prefers-reduced-motion

## Reference sites

- Monument Extended (Pangram Pangram): https://pangrampangram.com/products/monument-extended
- Nike SNKRS launch pages: https://www.nike.com/launch
- Porsche: https://www.porsche.com
- Chrome text effects on CodePen: https://codepen.io/search/pens?q=chrome%20text

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip metal-chrome.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/metal-chrome.json

Settings → Capabilities → Skills → Upload skill → metal-chrome.zip