Metalheart

---
name: metalheart
description: Apply the Metalheart visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Metalheart, mentions depthcore, trendwhore, chrome Y2K, or describes brushed-metal and chrome surfaces, wireframe meshes and HUD fragments, dark iridescent blue-violet glows — 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
---

# Metalheart Design System

The dark, edgy sibling of Y2K futurism (late 1990s–mid 2000s): brushed metal and liquid chrome, wireframe meshes, deformed abstract 3D forms, lens flares, and dark iridescent blues and violets on near-black steel. Named after Andreas Lindholm's 2001 'Metalheart' design book and pioneered by studios like The Attik and Gmunk.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Metalheart.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (depthcore, trendwhore, chrome Y2K, cyber metal, y2k metal), or describes its traits: brushed-metal and chrome surfaces; wireframe meshes and HUD fragments; dark iridescent blue-violet glows; abstract deformed 3D shapes; techno display type; blurred depth-of-field backdrops.

## Design tokens

### Color palette

- Near-black steel background: `#0b0d10` (--color-bg)
- Raised panel, dark gunmetal: `#161a1f` (--color-surface)
- Primary text, cold silver: `#dde3ea` (--color-text)
- Secondary text and technical annotations: `#98a2ae` (--color-text-muted)
- Electric cyan — interactive elements and edge glows: `#62d9ff` (--color-accent)
- Iridescent violet, second stop of chrome sheens: `#9d84ff` (--color-accent-2)
- Chrome specular highlight stop: `#f2f5f8` (--color-chrome-hi)
- Chrome shadow stop / brushed-metal midtone: `#4c545e` (--color-chrome-lo)
- Panel seams and rule lines: `#2a313a` (--color-border)

### Typography

- Display / headings: Orbitron (fallback: Eurostile, Arial, sans-serif) (ideal: Bank Gothic, premium — use Orbitron as the free substitute)
- Body: Exo 2 (fallback: Verdana, Arial, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 15px — computed steps: 15px / 19px / 23px / 29px / 37px / 46px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.1, letter-spacing 0.08em, uppercase
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96 — Dense technical clusters (labels, coordinates, micro-annotations) floating in large fields of dark negative space — the contrast between cramped detail and emptiness is the rhythm.
- Border radius: none 0px, sm 3px, chamfer 0px — Mostly sharp; corners are cut (clip-path chamfers) rather than rounded when softened at all.
- Border treatment: 1px solid #2a313a — Panels read as machined plates; occasional 1px #62d9ff edge on active elements, like a laser-lit seam.

### Shadows

- plate: `0 8px 24px rgba(0, 0, 0, 0.6)` — Default panel depth over the void
- cyan-edge: `0 0 12px rgba(98, 217, 255, 0.4)` — Glow on hovered or active machined elements
- violet-bloom: `0 0 32px rgba(157, 132, 255, 0.3)` — Iridescent bloom behind hero chrome objects
- inset-machined: `inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.6)` — Beveled metal edge on buttons and toolbars

### Layout

- Max content width: 1280px
- Asymmetric compositions: one large chrome/3D focal object off-center, technical fragments orbiting it
- Thin horizontal rule lines and coordinate/version numbers as decoration (mono face)
- Wireframe mesh or grid textures at low opacity behind sections
- Deep blacks between sections; no soft section transitions

### Effects

- Chrome text/surface via linear-gradient(180deg, #f2f5f8 0%, #4c545e 48%, #0b0d10 52%, #98a2ae 100%) with background-clip:text for metallic headlines
- Iridescent sheen: linear-gradient(120deg, #62d9ff, #9d84ff, #62d9ff) at low opacity over metal panels
- Wireframe mesh SVG overlays at 6–10% opacity
- Blurred depth-of-field backdrop shapes (blur 40px) behind hero objects
- Occasional lens-flare streak on chrome edges

### Motion

- Easing: cubic-bezier(0.7, 0, 0.2, 1); durations 120ms / 260ms / 600ms
- Machined precision: elements snap into place with a fast decelerating ease
- Sheen sweep across chrome surfaces on hover
- Slow continuous rotation of wireframe/3D hero objects (respect prefers-reduced-motion)
- Micro-glitch or scanline flicker used extremely sparingly

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0b0d10;
  --color-surface: #161a1f;
  --color-text: #dde3ea;
  --color-text-muted: #98a2ae;
  --color-accent: #62d9ff;
  --color-accent-2: #9d84ff;
  --color-chrome-hi: #f2f5f8;
  --color-chrome-lo: #4c545e;
  --color-border: #2a313a;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-chamfer: 0px;
  --shadow-plate: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-cyan-edge: 0 0 12px rgba(98, 217, 255, 0.4);
  --shadow-violet-bloom: 0 0 32px rgba(157, 132, 255, 0.3);
  --shadow-inset-machined: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.6);
  --border-default: 1px solid #2a313a;
  --font-display: Orbitron, Eurostile, Arial, sans-serif;
  --font-body: "Exo 2", Verdana, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 15px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: 0.08em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 260ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Exo+2:wght@400;600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Thin dark bar with 1px bottom seam, uppercase Orbitron wordmark, mono-face section labels with index numbers (01 / 02 / 03); active link gets a cyan underline glow
- **Hero:** Off-center chrome headline (gradient-clipped) over a violet-blurred abstract form, wireframe mesh behind, tiny mono coordinates in the corners, chamfered cyan CTA
- **Card:** Gunmetal plate with 1px seam border, machined inset bevel, mono label strip on top; hover lights a cyan edge
- **Button (primary):** Chamfered steel slab with brushed-metal gradient fill, uppercase letter-spaced label in near-black, cyan-edge glow on hover
- **Button (secondary):** Transparent with 1px #2a313a border and silver uppercase label; border shifts to cyan on hover
- **Form fields:** Dark inset well (inset-machined shadow), 1px seam border, mono placeholder text; focus adds the cyan-edge glow

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

A liquid-chrome or brushed-steel form fractured by wireframe mesh overlays, lit with a cold cyan-to-violet iridescent sheen against a near-black background, annotated with tiny technical mono type. Spend boldness here; keep everything else quiet.

## Do

- Make metal feel machined: bevels, seams, chamfers, specular gradients
- Annotate with tiny technical mono type — coordinates, versions, index numbers
- Keep the palette cold; warmth breaks the material illusion
- Let one abstract chrome form dominate each composition

## Don't

- No friendly rounded corners or pastel colors
- Don't flood the page with glow — iridescence is an edge treatment, not a wash
- No organic textures (wood, paper, fabric)
- Avoid pure-white page backgrounds; the void is part of the style

## Accessibility notes

- Silver text on near-black passes comfortably, but chrome gradient-clipped headlines have internal stops that dip low against the background — always pair them with a plain-text fallback and never use gradient-clip for body copy
- Cyan (#62d9ff) on dark passes for text, but cyan glows alone must not be the only focus indicator — pair with a visible border change
- Rotating hero objects and glitch effects must be disabled under prefers-reduced-motion

## Reference sites

- CARI — Metalheart: https://cari.institute/aesthetics/metalheart
- Aesthetics Wiki — Metalheart: https://aesthetics.fandom.com/wiki/Metalheart
- GMUNK (Bradley G Munkowitz): https://gmunk.com

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

Install this skill

unzip metalheart.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → metalheart.zip