Frutiger Metro

---
name: frutiger-metro
description: Apply the Frutiger Metro visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Frutiger Metro, mentions flat frutiger aero, vector metro, vectordelia, or describes bright candy-solid color blocks, flat vector silhouettes and pictograms, repeating abstract pattern wallpapers — 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
---

# Frutiger Metro Design System

The flat vector counterpart to Frutiger Aero (mid-2000s to early 2010s): bright candy solids — magenta, lime, orange, cyan — on white, repeating pattern wallpapers, rounded pictograms and silhouettes, and light humanist type. The design language of Wii channels, Windows Live, and Zune-era Microsoft that culminated in Windows 8.

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 Frutiger Metro.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (flat frutiger aero, vector metro, vectordelia, vector gloss), or describes its traits: bright candy-solid color blocks; flat vector silhouettes and pictograms; repeating abstract pattern wallpapers; light-weight humanist headlines; white space with rounded color panels; no gloss, no depth.

## Design tokens

### Color palette

- Clean white page background: `#ffffff` (--color-bg)
- Light gray panel for secondary sections: `#f4f4f4` (--color-surface)
- Primary text, near-black: `#1f1f1f` (--color-text)
- Secondary text: `#595959` (--color-text-muted)
- Hot magenta — the era's signature candy color (decorative at this brightness; see accessibility notes): `#ec008c` (--color-accent)
- Lime green block color: `#8dc63f` (--color-accent-2)
- Tangerine orange block color: `#f7941d` (--color-accent-3)
- Cyan block color: `#00aeef` (--color-accent-4)
- Darkened magenta for small interactive text on white: `#b0006a` (--color-accent-deep)
- Hairline separators (used sparingly): `#e0e0e0` (--color-border)

### Typography

- Display / headings: Jost (fallback: Segoe UI, Helvetica Neue, Arial, sans-serif) (ideal: Segoe UI Light, premium — use Jost as the free substitute)
- Body: Hanken Grotesk (fallback: Segoe UI, 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 300, line-height 1.1, letter-spacing -0.01em
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Generous white space around large flat color blocks; content sits in wide bands, and pattern wallpapers fill what would otherwise be empty margins.
- Border radius: sm 6px, md 12px, pill 999px — Rounded but flat — capsule buttons and soft-cornered tiles, never bevels or gloss.
- Border treatment: none — Color blocks meet edge-to-edge or float on white; hairline #e0e0e0 only for table rows and form fields.

### Shadows

- none: `none` — Default — the style is aggressively flat
- tile-lift: `0 4px 12px rgba(0, 0, 0, 0.12)` — Optional light lift on hovered tiles (used sparingly)

### Layout

- Max content width: 1200px
- Tile/band construction: full-width color bands or a mosaic of flat rounded tiles, each owning one candy color
- One repeating vector pattern (dots, blossoms, swooshes) as a section wallpaper at low density
- Silhouetted figures or rounded pictograms as illustration — never photos with gloss
- Light-weight oversized headlines with tight color-block pairings

### Effects

- Repeating SVG pattern wallpapers in two brights at 10–20% opacity
- Flat vector 'swoosh' flourishes crossing section boundaries
- Duotone silhouette treatment for imagery (one candy color over white)

### Motion

- Easing: cubic-bezier(0.2, 0, 0.1, 1); durations 140ms / 260ms / 450ms
- Tiles slide and settle on entrance (Metro-style pan)
- Hover shifts a tile's color to its deeper variant — no shadows or scaling gloss
- Pattern wallpapers may drift extremely slowly; disable under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-text: #1f1f1f;
  --color-text-muted: #595959;
  --color-accent: #ec008c;
  --color-accent-2: #8dc63f;
  --color-accent-3: #f7941d;
  --color-accent-4: #00aeef;
  --color-accent-deep: #b0006a;
  --color-border: #e0e0e0;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-tile-lift: 0 4px 12px rgba(0, 0, 0, 0.12);
  --border-default: none;
  --font-display: Jost, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.55;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;500&family=Hanken+Grotesk:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar, no border, wordmark in light Jost; links in gray that flip to a candy color when active; optional thin full-width color strip under the bar
- **Hero:** Huge light-weight headline in near-black with one word in magenta, flat pattern wallpaper behind, pill CTA in a candy solid, rounded silhouette illustration right
- **Card:** Flat candy-colored tile with white pictogram and label, 12px radius, no border or shadow; hover deepens the fill color
- **Button (primary):** Magenta pill (#ec008c) with white bold label — large sizes only; darkens to #b0006a on hover
- **Button (secondary):** White pill with 1px #e0e0e0 border and accent-deep label
- **Form fields:** White field with 1px hairline border, 6px radius; focus swaps the border to the section's candy color at 2px

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 wallpaper of repeating flat vector flourishes — circles, blossoms, swooshes — in two or three candy brights over white or a single saturated field, with a rounded human silhouette or pictogram as the focal point. Spend boldness here; keep everything else quiet.

## Do

- Give each section or tile exactly one candy color — the palette works as large flat fields
- Use light-weight type at large sizes; the contrast of huge-and-thin is the voice
- Illustrate with silhouettes, pictograms, and repeating vector patterns
- Keep everything flat: fills, not gradients

## Don't

- No gloss, bevels, glass, or drop shadows — that's Frutiger Aero, not Metro
- Don't mix more than three candy colors in one composition
- No photographic textures or realistic imagery
- Don't use thin light type below 24px — it collapses

## Accessibility notes

- The signature magenta #ec008c measures about 4.3:1 on white — it fails 4.5:1 for small text and is honestly labeled decorative/large-scale-only; use accent-deep (#b0006a) for small interactive text, and white-on-magenta only at large bold sizes
- Lime (#8dc63f), orange (#f7941d), and cyan (#00aeef) all fail as text on white — treat them strictly as fill colors with white or near-black labels checked per pairing
- Light 300-weight headlines need generous size (24px minimum) to stay readable

## Reference sites

- Frutiger Aero archive — Frutiger Metro: https://frutiger-aero.org/frutiger-metro
- Frutiger Aero Wiki — Frutiger Metro: https://frutigeraero.fandom.com/wiki/Frutiger_Metro
- Wikipedia — Frutiger Aero (family context): https://en.wikipedia.org/wiki/Frutiger_Aero

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

Install this skill

unzip frutiger-metro.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → frutiger-metro.zip