Frutiger Aero

---
name: frutiger-aero
description: Apply the Frutiger Aero 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 Aero, mentions web 2.0 gloss, aero glass, frutiger eco, or describes glossy aqua and green gradients, translucent glass panels and orbs, bokeh circles and lens flares — 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 Aero Design System

The glossy techno-optimist look of 2004–2013: aqua-blue and grass-green gradients, translucent glass panels, glossy orbs, bokeh light, and nature imagery (water droplets, fish, skies, leaves) fused with clean humanist type. The house style of Windows Vista/7, the Wii era, and Web 2.0 marketing.

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 Aero.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (web 2.0 gloss, aero glass, frutiger eco, techno-optimism aesthetic, vista aero), or describes its traits: glossy aqua and green gradients; translucent glass panels and orbs; bokeh circles and lens flares; nature imagery mixed with tech; specular top-edge highlights; humanist sans type.

## Design tokens

### Color palette

- Pale sky-blue page background, base of the sky gradient: `#e8f4fb` (--color-bg)
- Deeper sky stop for background gradients: `#b3e0f5` (--color-bg-gradient-2)
- Opaque card/panel fill: `#ffffff` (--color-surface)
- Translucent glass panel fill (55% white) over the sky backdrop: `#ffffff8c` (--color-glass)
- Primary text, deep slate blue: `#143a52` (--color-text)
- Secondary text: `#3e6079` (--color-text-muted)
- Primary interactive blue (darkened from canonical cyan for legibility): `#0277bd` (--color-accent)
- Grass/leaf green, the eco half of the palette — decorative fills and icons: `#8dc63f` (--color-accent-2)
- Bright aqua for gradient tops, glows, and glossy highlights: `#29b6f6` (--color-accent-3)
- Soft blue hairlines on glass edges: `#b7dcee` (--color-border)

### Typography

- Display / headings: Hanken Grotesk (fallback: Segoe UI, Helvetica Neue, Arial, sans-serif) (ideal: Frutiger 55 Roman, premium — use Hanken Grotesk as the free substitute)
- Body: Nunito Sans (fallback: Segoe UI, Verdana, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Airy and open — panels float with room to breathe so the sky backdrop stays visible between them; content inside panels is comfortably padded, never cramped.
- Border radius: sm 8px, md 14px, lg 24px, full 999px — Everything is rounded; capsules and orb shapes are core vocabulary. No sharp corners anywhere.
- Border treatment: 1px solid #b7dcee — Glass panels add an inner 1px rgba(255,255,255,0.7) top edge to catch the light.

### Shadows

- float: `0 6px 18px rgba(2, 119, 189, 0.18)` — Default panel and card elevation, blue-tinted
- gloss-inset: `inset 0 1px 0 rgba(255,255,255,0.8), inset 0 12px 16px -8px rgba(255,255,255,0.6)` — Specular top-half highlight on buttons and orbs
- orb-glow: `0 0 24px rgba(41, 182, 246, 0.45)` — Halo around glossy orbs and active elements
- deep: `0 16px 40px rgba(20, 58, 82, 0.22)` — Modals and hero glass sheets

### Layout

- Max content width: 1140px
- A full-bleed sky-to-grass gradient (or nature photo) behind everything; content floats as glass sheets on top
- Hero splits: message left, glossy device/orb render right
- Bokeh circles and light streaks scattered at low opacity in backdrop corners
- Rounded panels aligned to a relaxed 12-column grid

### Effects

- backdrop-filter: blur(12px) on glass panels
- Radial white gloss overlay: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 50%) on buttons
- Floating bokeh: blurred rgba(255,255,255,0.35) circles of varied sizes behind content
- Subtle lens-flare or aurora streak in hero backdrops

### Motion

- Easing: cubic-bezier(0.25, 0.6, 0.3, 1); durations 150ms / 300ms / 550ms
- Gentle floats: cards drift up 4px on hover with a stronger blue shadow
- Gloss sweep: a light band sweeps across buttons on hover
- Bokeh drifts slowly and continuously in the backdrop (disabled under prefers-reduced-motion)

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e8f4fb;
  --color-bg-gradient-2: #b3e0f5;
  --color-surface: #ffffff;
  --color-glass: #ffffff8c;
  --color-text: #143a52;
  --color-text-muted: #3e6079;
  --color-accent: #0277bd;
  --color-accent-2: #8dc63f;
  --color-accent-3: #29b6f6;
  --color-border: #b7dcee;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-float: 0 6px 18px rgba(2, 119, 189, 0.18);
  --shadow-gloss-inset: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 12px 16px -8px rgba(255,255,255,0.6);
  --shadow-orb-glow: 0 0 24px rgba(41, 182, 246, 0.45);
  --shadow-deep: 0 16px 40px rgba(20, 58, 82, 0.22);
  --border-default: 1px solid #b7dcee;
  --font-display: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Verdana, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 550ms;
}
```

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

## Component recipes

- **Nav:** Translucent white glass bar (blur 12px) with 1px light bottom edge; logo left, links in Hanken Grotesk; active link gets a glossy capsule pill
- **Hero:** Sky gradient backdrop with bokeh, oversized friendly headline in deep slate blue, glossy aqua CTA capsule, floating glass card or orb render on the right
- **Card:** Glass or white panel, 14px radius, blue-tinted float shadow, thin light border; optional glossy icon orb in the header
- **Button (primary):** Aqua gradient capsule (accent-3 to accent), white bold label, gloss-inset highlight, orb-glow on hover
- **Button (secondary):** Translucent white glass capsule with accent text and 1px blue border
- **Form fields:** White rounded field, 1px blue border, inner top highlight; focus ring is a soft aqua glow (0 0 0 3px rgba(41,182,246,0.35))

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

The glossy 'aqua button': a rounded, blue-to-cyan gradient capsule with a white specular highlight band across its top half, sitting over a sky-and-grass backdrop dotted with soft bokeh circles. Spend boldness here; keep everything else quiet.

## Do

- Blend nature and technology — leaves, water, skies alongside UI chrome
- Put a specular highlight on every glossy element; the light source is always above
- Use blue-tinted shadows, never gray or black ones
- Keep type humanist and friendly; the optimism is the point

## Don't

- No flat design — flatness is the aesthetic's historical opposite
- No dark moody palettes; Frutiger Aero is daylight
- Don't use grunge textures or hard borders
- Avoid neon cyberpunk saturation — the greens are grass, not laser

## Accessibility notes

- The canonical bright aqua (#29b6f6) fails 4.5:1 on the pale sky background — it is reserved for decorative glows; the interactive accent is darkened to #0277bd, which passes on white surfaces but measures about 4.3:1 on the tinted page bg — below AA for small text, so place accent-colored text on the white surface role or use it at 18px+/bold on the page bg
- Text over glass panels depends on the backdrop behind them; keep body copy on panels with at least 55% white fill or on opaque surfaces
- Continuous bokeh drift and gloss sweeps must be disabled under prefers-reduced-motion

## Reference sites

- Wikipedia — Frutiger Aero: https://en.wikipedia.org/wiki/Frutiger_Aero
- CARI — Frutiger Aero: https://cari.institute/aesthetics/frutiger-aero
- Frutiger Aero archive: https://frutiger-aero.org
- Aesthetics Wiki — Frutiger Aero: https://aesthetics.fandom.com/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-aero.zip -d ~/.claude/skills/

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

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