70s Psychedelic

---
name: seventies-psychedelic
description: Apply the 70s Psychedelic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" 70s Psychedelic, mentions groovy revival, psychedelic poster, 70s groovy, or describes melting warped display type, wavy contour line patterns, burnt orange and avocado palette — 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
---

# 70s Psychedelic Design System

Warm, groovy maximalism from the poster art of the late 60s and 70s: fat rounded letterforms that melt and warp along curves, wavy contour lines, organic blobs, and a sunbaked palette of burnt orange, avocado, gold, and brown on cream.

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 70s Psychedelic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (groovy revival, psychedelic poster, 70s groovy, flower power, warped funk), or describes its traits: melting warped display type; wavy contour line patterns; burnt orange and avocado palette; organic blob shapes; arched and circular text paths; flat sunburst gradients.

## Design tokens

### Color palette

- Sunbaked cream background: `#f6ead2` (--color-bg)
- Lighter cream card surface: `#fdf6e6` (--color-surface)
- Deep brown primary text: `#3d2a20` (--color-text)
- Softer brown secondary text: `#6b5442` (--color-text-muted)
- Burnt orange — hero type and CTAs: `#d2691e` (--color-accent)
- Avocado green for waves and secondary shapes: `#568203` (--color-accent-avocado)
- Harvest gold for highlights and stripes: `#e1a95f` (--color-accent-gold)
- Chocolate brown for fills and outlines: `#5c4033` (--color-brown)

### Typography

- Display / headings: Ultra (fallback: Cooper Black, Georgia, serif) (ideal: Cooper Black, premium — use Ultra as the free substitute)
- Body: Quicksand (fallback: Avenir, Century Gothic, 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 400, line-height 1.2, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 104 — Flowing — sections bleed into each other via wavy dividers rather than hard edges; whitespace curves instead of stacking.
- Border radius: lg 24px, xl 40px, pill 999px, blob 63% 37% 54% 46% / 55% 48% 52% 45% — Everything is rounded or organic; a sharp corner is a style violation.
- Border treatment: 3px solid #5c4033 — Chunky chocolate-brown outlines on buttons and badges, echoing poster linework; cards can be borderless blobs.

### Shadows

- none: `none` — Default — the style is flat like screen-printed posters
- sticker: `0 2px 0 #5c4033` — Subtle grounding under buttons, like a print misregister

### Layout

- Max content width: 1140px
- Wavy SVG section dividers instead of straight seams
- Headlines set on arcs or gentle waves
- Concentric contour-line backgrounds radiating from focal points
- Centered poster-style composition for heroes, looser flow below

### Effects

- Warped text on curved paths (SVG textPath)
- Concentric wavy line patterns in alternating palette colors
- Flat sunburst rays behind hero elements
- Grain texture overlay at 3–4% for print feel

### Motion

- Easing: cubic-bezier(0.45, 0, 0.55, 1); durations 200ms / 400ms / 700ms
- Slow, liquid movements — waves undulate gently, never snap
- Headline letters can wobble slightly on hover
- Scroll-triggered sections flow in with a soft vertical drift
- All wave loops pause under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f6ead2;
  --color-surface: #fdf6e6;
  --color-text: #3d2a20;
  --color-text-muted: #6b5442;
  --color-accent: #d2691e;
  --color-accent-avocado: #568203;
  --color-accent-gold: #e1a95f;
  --color-brown: #5c4033;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 63% 37% 54% 46% / 55% 48% 52% 45%;
  --shadow-sticker: 0 2px 0 #5c4033;
  --border-default: 3px solid #5c4033;
  --font-display: Ultra, "Cooper Black", Georgia, serif;
  --font-body: Quicksand, Avenir, "Century Gothic", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}
```

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

## Component recipes

- **Nav:** Cream bar with chunky brown wordmark in Ultra, pill links outlined in brown; active pill fills gold
- **Hero:** Arc-warped Ultra headline in burnt orange with brown outline, sunburst rays behind, wavy divider into the next section
- **Card:** Blob-radius cream surface, no shadow, gold or avocado accent stripe, brown text
- **Button (primary):** Burnt orange pill, cream text, 3px brown border, sticker shadow; wobbles 1deg on hover
- **Button (secondary):** Transparent pill with 3px brown border, brown text; fills avocado with cream text on hover
- **Form fields:** Cream fill, 3px brown border, 24px radius; focus swaps border to burnt orange

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 fat, rounded headline warped along an arc or wave — letters swelling and melting like a Fillmore poster — sitting on concentric wavy contour lines in burnt orange, gold, and avocado. Spend boldness here; keep everything else quiet.

## Do

- Warp display type along arcs and waves — straight baselines waste the style
- Stick to the earth palette; the era's colors are warm and slightly muddy
- Use wavy dividers and contour lines to keep the page flowing
- Add grain so flats feel screen-printed, not digital

## Don't

- No neon, chrome, or cool blues — that breaks the 70s warmth
- Don't warp body copy; only display type melts
- Avoid drop shadows and 3D depth — poster art is flat
- Don't use more than one warped headline per viewport

## Accessibility notes

- Burnt orange (#d2691e) on cream is about 3:1 — use it only for large display type (24px+) and filled shapes with cream or brown text; body links stay deep brown
- Warped text must have a plain-text DOM equivalent (real text on an SVG path, or aria-label), never image-only headlines
- Wobble and wave animations should be subtle and fully disabled under prefers-reduced-motion

## Reference sites

- Psychedelic art: https://en.wikipedia.org/wiki/Psychedelic_art
- Cooper Black history: https://en.wikipedia.org/wiki/Cooper_Black
- Wes Wilson poster lettering: https://en.wikipedia.org/wiki/Wes_Wilson

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

Install this skill

unzip seventies-psychedelic.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → seventies-psychedelic.zip