Seapunk

---
name: seapunk
description: Apply the Seapunk visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Seapunk, mentions sea punk, aqua tumblr, oceanic cyber, or describes turquoise, cyan, and aquamarine everywhere, chrome and liquid-metal accents, CGI dolphins, shells, and palm trees — 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
---

# Seapunk Design System

The aquatic corner of early-2010s Tumblr: turquoise-to-cyan gradients, chrome dolphins, spinning CGI water, yin-yangs, palm trees, and 90s cyberculture kitsch. Everything looks rendered in an early 3D program and soaked in seawater glitter.

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 Seapunk.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (sea punk, aqua tumblr, oceanic cyber, dolphin wave), or describes its traits: turquoise, cyan, and aquamarine everywhere; chrome and liquid-metal accents; CGI dolphins, shells, and palm trees; 90s web and early-3D render kitsch; water-caustic and wave textures; techno display type with glow.

## Design tokens

### Color palette

- Deep ocean teal base: `#07303f` (--color-bg)
- Mid-depth panel teal: `#0d4658` (--color-surface)
- Sea-foam white body text: `#dffbff` (--color-text)
- Diffused underwater light for secondary text: `#9fd8e3` (--color-text-muted)
- Electric aqua for links, actions, and glow: `#40f2df` (--color-accent)
- Liquid-metal highlight for chrome text and icons: `#cfe0e8` (--color-chrome)
- Tumblr-pink secondary accent for stickers and tags: `#ff8ad8` (--color-dolphin-pink)
- Seaweed green for tertiary decoration: `#46d98b` (--color-kelp)
- Deepest water for footers and vignettes: `#041d27` (--color-abyss)

### Typography

- Display / headings: Audiowide (fallback: Trebuchet MS, sans-serif)
- Body: Exo 2 (fallback: Verdana, sans-serif)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.15, letter-spacing 0.06em, uppercase
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96 — Buoyant and loose; elements float with room to drift, like props suspended at different depths.
- Border radius: sm 8px, lg 24px, blob 60% 40% 55% 45% / 50% 60% 40% 50% — Rounded, waterworn corners; hero shapes can use organic blob radii like droplets.
- Border treatment: 1px solid rgba(64, 242, 223, 0.4) — Glowing aqua hairlines; chrome elements instead use a light #cfe0e8 bevel edge.

### Shadows

- aqua-glow: `0 0 20px rgba(64, 242, 223, 0.5)` — Neon-water glow on buttons, links, and display type
- depth: `0 12px 36px rgba(4, 29, 39, 0.6)` — Card elevation, like an object nearer the surface
- caustic-inset: `inset 0 2px 12px rgba(223, 251, 255, 0.18)` — Watery light rippling inside surfaces

### Layout

- Max content width: 1200px
- Vertical gradient from surface-teal to abyss mirrors ocean depth down the page
- Floating sticker-like props (shells, dolphins, yin-yangs) scattered at section edges
- Wave-shaped section dividers instead of straight seams
- Centered hero, loose asymmetric drift elsewhere

### Effects

- Animated water-caustic light pattern at low opacity on backgrounds
- Chrome text treatment (light-to-dark metallic gradient with sharp highlight) on headlines
- Slow bobbing float (translateY ±6px, 4-6s) on decorative props
- Sparkle/glitter particles on hover

### Motion

- Easing: cubic-bezier(0.37, 0, 0.63, 1); durations 160ms / 350ms / 900ms
- Everything drifts and bobs sinusoidally, nothing is static
- Hovers ripple: scale 1.03 with an aqua-glow bloom
- Section transitions wash in like a wave, bottom-up

## CSS variables (drop-in)

```css
:root {
  --color-bg: #07303f;
  --color-surface: #0d4658;
  --color-text: #dffbff;
  --color-text-muted: #9fd8e3;
  --color-accent: #40f2df;
  --color-chrome: #cfe0e8;
  --color-dolphin-pink: #ff8ad8;
  --color-kelp: #46d98b;
  --color-abyss: #041d27;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-blob: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --shadow-aqua-glow: 0 0 20px rgba(64, 242, 223, 0.5);
  --shadow-depth: 0 12px 36px rgba(4, 29, 39, 0.6);
  --shadow-caustic-inset: inset 0 2px 12px rgba(223, 251, 255, 0.18);
  --border-default: 1px solid rgba(64, 242, 223, 0.4);
  --font-display: Audiowide, "Trebuchet MS", sans-serif;
  --font-body: "Exo 2", Verdana, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-fast: 160ms;
  --duration-base: 350ms;
  --duration-slow: 900ms;
}
```

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

## Component recipes

- **Nav:** Translucent teal bar with glowing aqua underline on the active link; logo set in chrome-gradient Audiowide with a tiny dolphin glyph.
- **Hero:** Depth-gradient backdrop with chrome headline, bobbing 3D-render props, wave divider at the bottom, caustic light overlay.
- **Card:** Rounded teal surface with caustic-inset light, aqua hairline border, floating icon; hover lifts with depth shadow and glow.
- **Button (primary):** Electric-aqua fill with deep-teal text, 8px radius, aqua-glow shadow; hover intensifies glow and adds sparkle particles.
- **Button (secondary):** Transparent with glowing aqua border and aqua text; hover floods with rgba(64,242,223,0.15).
- **Form fields:** Dark teal input with aqua hairline, sea-foam text; focus ring is a soft aqua bloom (0 0 0 3px rgba(64,242,223,0.3)).

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 chrome dolphin arcing over a turquoise-to-cyan gradient sea, surrounded by rotating early-3D props — yin-yangs, shells, wireframe globes — with glittering water caustics. Spend boldness here; keep everything else quiet.

## Do

- Stay in the aqua family — turquoise, cyan, seafoam — and let pink/green be garnish
- Use chrome gradients on display type; it is the fastest seapunk signal
- Reference early-3D rendering: simple props, hard highlights, visible kitsch
- Animate gently and constantly, like water

## Don't

- Don't slide into vaporwave: no sunset pinks-and-purples, Roman busts, or Japanese text
- Don't use realistic ocean photography — this is CGI water, not National Geographic
- Don't set body copy in the chrome treatment or over busy caustics
- Don't dry it out with static, cornerless minimalism

## Accessibility notes

- Body, muted, and accent colors all clear 4.5:1 on the deep teal background; chrome-gradient text is display-only and always paired with an accessible plain-text sibling.
- dolphin-pink and kelp are decorative accents, not body-text colors.
- Constant bobbing and caustic animation must pause under prefers-reduced-motion.

## Reference sites

- Seapunk — Wikipedia: https://en.wikipedia.org/wiki/Seapunk
- Seapunk — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Seapunk
- What is Seapunk and its impact on Vaporwave — Palm Treat: https://palmtreat.design/blogs/news/what-is-seapunk-what-is-its-impact-on-vaporwave

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

Install this skill

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

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

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