Gen X Soft Club

---
name: gen-x-soft-club
description: Apply the Gen X Soft Club visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Gen X Soft Club, mentions soft club, 90s soft futurism, soft-focus club, or describes blurred soft-focus gradients, cool green, blue, and grey pastels, rounded humanist sans type — 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
---

# Gen X Soft Club Design System

The soft-focus cool of late-90s club flyers, trip-hop sleeves, and tech ads: blurred pastel gradients in cool greens, blues, and greys, hazy photography, rounded humanist sans type, and lots of calm negative space. Y2K futurism with the volume turned down — introspective, urban, and quietly optimistic.

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 Gen X Soft Club.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (soft club, 90s soft futurism, soft-focus club, gen x minimalism), or describes its traits: blurred soft-focus gradients; cool green, blue, and grey pastels; rounded humanist sans type; hazy urban photography; calm minimalist layouts; small centered wordmarks.

## Design tokens

### Color palette

- Cool pale grey-blue background: `#e8eef1` (--color-bg)
- Lighter panel, morning-fog white: `#f6f9fa` (--color-surface)
- Primary text, soft slate: `#2e3d47` (--color-text)
- Secondary text, haze grey: `#54666f` (--color-text-muted)
- Muted steel teal for links and actions: `#33708a` (--color-accent)
- Sage green for gradient stops and tags: `#9db8a5` (--color-accent-2)
- Hazy lilac for gradient stops: `#a9a3cf` (--color-accent-3)
- Soft cool hairlines: `#c8d4da` (--color-border)

### Typography

- Display / headings: Comfortaa (fallback: Century Gothic, Futura, sans-serif) (ideal: VAG Rounded, premium — use Comfortaa as the free substitute)
- Body: Urbanist (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.25, letter-spacing 0.06em, lowercase
- Body: line-height 1.7, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Very airy — small type floating in large calm fields; the emptiness is the luxury, like a quiet lounge at 2am.
- Border radius: md 16px, lg 28px, pill 999px — Everything softly rounded; edges should feel cushioned, never crisp.
- Border treatment: 1px solid #c8d4da — Hairlines only, and often replaced by soft gradient fades between regions.

### Shadows

- haze: `0 12px 40px rgba(46, 61, 71, 0.10)` — Default card lift — diffuse, never sharp
- soft-glow: `0 0 32px rgba(157, 184, 165, 0.35)` — Ambient glow behind focal elements

### Layout

- Max content width: 1040px
- Centered, symmetric compositions with small focal elements and enormous margins
- Full-bleed blurred gradient fields as section backdrops
- Hazy duotone photography (airports, metros, skylines, plants) as imagery
- Small lowercase wordmarks and widely letter-spaced labels

### Effects

- Blurred mesh gradients (blur 60px+) blending sage, pale blue, and lilac
- Soft-focus/duotone treatment on photographs (cool tint, slight blur at edges)
- Grain at very low opacity to keep gradients from banding
- Vignette fade at section edges instead of hard boundaries

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 200ms / 400ms / 800ms
- Slow, dreamy crossfades — nothing snaps
- Gradient backdrops drift almost imperceptibly (disable under prefers-reduced-motion)
- Hover states brighten softly rather than move

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e8eef1;
  --color-surface: #f6f9fa;
  --color-text: #2e3d47;
  --color-text-muted: #54666f;
  --color-accent: #33708a;
  --color-accent-2: #9db8a5;
  --color-accent-3: #a9a3cf;
  --color-border: #c8d4da;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-haze: 0 12px 40px rgba(46, 61, 71, 0.10);
  --shadow-soft-glow: 0 0 32px rgba(157, 184, 165, 0.35);
  --border-default: 1px solid #c8d4da;
  --font-display: Comfortaa, "Century Gothic", Futura, sans-serif;
  --font-body: Urbanist, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
}
```

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

## Component recipes

- **Nav:** Borderless translucent bar over the gradient; small lowercase wordmark, widely-spaced lowercase links; active link gets a soft teal dot beneath
- **Hero:** Blurred pastel gradient field, small lowercase Comfortaa headline centered with wide letter-spacing, one-line subcopy, single pill CTA — restraint is the statement
- **Card:** Fog-white rounded panel with haze shadow, no border, small lowercase title; optional duotone photo with soft-focus edges
- **Button (primary):** Steel-teal pill with white label, haze shadow; brightens slightly on hover with a sage glow
- **Button (secondary):** Transparent pill with 1px cool border and teal label
- **Form fields:** Fog-white field, 1px cool hairline, 16px radius; focus swaps to a 2px teal border with a soft outer 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 soft radial gradient — seafoam into pale blue into grey — slightly out of focus, with a small lowercase rounded-sans wordmark floating in generous empty space, like a chill-out compilation cover. Spend boldness here; keep everything else quiet.

## Do

- Blur the gradients until they feel like memory, not graphics
- Keep type small, lowercase, and letter-spaced; whisper, don't shout
- Use cool desaturated pastels only — sage, fog blue, haze lilac, grey
- Let photography be hazy, urban, and human: stations, skylines, plants

## Don't

- No saturated neons or chrome — that's the loud side of Y2K, not this
- No hard edges, thick borders, or hard shadows
- Don't crowd layouts; density kills the introspective mood
- Avoid warm sunny palettes; the light here is dawn or dusk

## Accessibility notes

- Slate text and the steel-teal accent both clear 4.5:1 on the pale background, but sage (#9db8a5) and lilac (#a9a3cf) are gradient/decor colors that fail as text — never use them for copy
- Lowercase, letter-spaced small type is stylistic; keep body copy at 16px+ and reserve the smallest sizes for labels
- Slow ambient gradient drift must be disabled under prefers-reduced-motion

## Reference sites

- CARI — Gen X Soft Club: https://cari.institute/aesthetics/gen-x-soft-club
- Aesthetics Wiki — Gen X Soft Club: https://aesthetics.fandom.com/wiki/Gen_X_Soft_Club
- Fashionista — Gen X Soft Club revival: https://fashionista.com/2023/12/gen-x-soft-club-aesthetic-tiktok

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

Install this skill

unzip gen-x-soft-club.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/gen-x-soft-club.json

Settings → Capabilities → Skills → Upload skill → gen-x-soft-club.zip