---
name: html-design-styles
description: Use when the user wants to apply a named design style or aesthetic to a frontend interface — e.g., bento, brutalist, neobrutalist, glassmorphism, vaporwave, dark SaaS, kawaii, cyberpunk, art deco, neumorphism, swiss, memphis, scandinavian, cottagecore, y2k, sci-fi HUD, and more. Triggers when the user names a specific style, asks "what design styles do you support", requests "a [style] look" for a page or component, or wants to restyle existing markup with a chosen aesthetic. Provides a curated catalog of 53 design styles each with full color palettes, typography stacks, component patterns, and layout specifications.
---

# HTML Design Styles

This skill provides 53 named design styles for HTML/CSS frontend work. Each style is a complete, opinionated specification — color palette, typography stack, component patterns (cards, buttons, navs), layout conventions, and signature visual mechanics. Apply the chosen style faithfully without substitution.

The styles range across many design traditions: minimalist (Swiss, Scandinavian, Japanese), brutalist (Pure Brutalist, Neobrutalist, Acid Brutalist, Monolith), retro (Y2K, Vaporwave, Memphis, Pixel, Retro Terminal), dark/atmospheric (Dark Cinema, Dark Cosmic, Dark Action, Dark Neon, Cyberpunk, Sci-Fi HUD), warm/organic (Cottagecore, Organic, Tropical, Groovy), editorial (Newspaper, Longform, Enterprise Editorial, Luxury), playful (Kawaii, Memphis, Manga, Pop Art), and many more.

---

## Initialization Gate

Before generating any code, confirm:

1. **Which style?** The user must name one from the catalog. If they say "modern", "clean", "minimal", a category word like "brutalist" / "dark" / "retro" / "terminal" that matches multiple catalog entries, or nothing at all, **prefer the `AskUserQuestion` tool over plain text** to present the matching styles as a structured multi-choice picker — that gives the user keyboard navigation and selection rather than forcing them to retype a style name. Include each candidate style as a suggested option with its one-line description from the catalog table; allow a free-text fallback for "something else from the catalog" or to switch styles. Use plain text only when `AskUserQuestion` isn't available in the runtime.
2. **What are you styling?** A full page, a single component, a section? If they pasted markup to restyle, work from that markup; if they want something built from scratch, confirm the page type (landing page, dashboard, blog post, app shell, etc.).
3. **Any constraints?** Existing color palette to honor? Required content (specific headlines, sections)? Output format (single HTML file vs. multiple files)? If unstated, default to a single self-contained HTML file with CDN Tailwind and inline `<style>` for custom rules.

If the user has not picked a style, do not invent one. Ask — via `AskUserQuestion` if available.

---

## How to use this skill

1. **Identify the style** from the user's request. Match against the catalog table below. If the request is ambiguous (no style named, a category word that matches multiple styles like "brutalist"/"dark"/"retro", or anything not corresponding to a single catalog entry), **prefer the `AskUserQuestion` tool** to present matching styles as a structured multi-choice picker rather than asking via plain text — keyboard selection is faster than retyping a style name. Pass each candidate style as an option with its one-line description from the catalog table.
2. **Get project context** — page type, content, any markup to restyle.
3. **Load references**:
   - Read `references/common.md` once per session for cross-cutting patterns (font loading, container widths, marquee, scrollbar, focus states, accessibility).
   - Read `references/styles/<slug>.md` for the chosen style's complete spec. The slug is in the table below.
4. **Apply the style faithfully**. Use the exact color values, typography stack, shadow recipes, and component patterns from the style file. Do not substitute "similar" colors or "close enough" fonts. Do not blend two styles unless the user explicitly asks. The opinionated specifications are the entire value of the catalog — preserve them.

---

## Available styles

| Style | Slug | One-line description |
|-------|------|----------------------|
| Acid Brutalist | `acid-brutalist` | Pure black with acid yellow + brutal red, Anton/Bebas Neue display, noise grain overlay — punk and chaotic. |
| Art Deco | `art-deco` | 1920s symmetry, geometric gold ornaments and sunburst motifs on black or ivory — opulent and formal. |
| Athletic | `athletic` | Diagonal clip-path cuts, condensed Barlow caps, hard color blocks — sports-branding energy. |
| Aurora | `aurora` | Drifting multi-color gradient blobs blended like silk over deep base — dreamy and ethereal. |
| Bento | `bento` | Apple/macOS bento grid: white cards on light gray, Plus Jakarta Sans, blue accent — clean and trust-building. |
| Blueprint | `blueprint` | Midnight blueprint blue with white grid, Courier Prime, crosshair cursor, technical drawing details. |
| Clay | `clay` | Chunky rounded cards with 3-layer purple shadow, Nunito 900, candy section colors — physical and toy-like. |
| Corporate | `corporate` | Conservative navy + blue, IBM Plex Sans, structured grid, professional B2B trust signals. |
| Cottagecore | `cottagecore` | Sage and dusty-rose pastels, Playfair italic + Lato Light, botanical SVG accents — storybook softness. |
| Cyberpunk | `cyberpunk` | Yellow/black hazard stripes, clip-path angled corners, Orbitron + Rajdhani — dystopian danger aesthetic. |
| Dark Action | `dark-action` | Cobra-black gradient with FCD34D yellow, Oswald display, gold pulse-glow — cinematic martial energy. |
| Dark Cinema | `dark-cinema` | Near-black with red glow, Bebas Neue, noise overlay, floating animated rotated labels — visceral. |
| Dark Cosmic | `dark-cosmic` | Slate-950 base with indigo/cyan glow blobs, glassmorphism cards, dot grid — SaaS infrastructure feel. |
| Dark Mono | `dark-mono` | Dark zinc panels, system monospace, cyan + pink color pops, scanline texture — compact and techy. |
| Dark Neon | `dark-neon` | Pure black with multiple simultaneous neon glow colors (pink/cyan/green/purple) — club/gaming. |
| Dark SaaS | `dark-saas` | Slate-950 base, sky-blue accent, staggered fade-up animations, trust chips — polished SaaS landing. |
| Dashboard | `dashboard` | 240px sidebar + slate-50 main, Inter, metric cards, data tables, status badges — admin/analytics. |
| Dot Grid | `dot-grid` | Gray dotted bg, Archivo Black + Space Mono, hot pink hover, hard 10px black shadows — content portal. |
| Enterprise Editorial | `enterprise-editorial` | Alternating white/dark sections, Inter font-black, indigo, large rounded "app" mockup cards. |
| Glassmorphism | `glassmorphism` | Frosted blur cards over vivid mesh-gradient backgrounds, Outfit/DM Sans — futuristic and airy. |
| Gothic | `gothic` | Forest greens and near-black, Cinzel + Crimson Text, blood-red wax drips, gold ornament accents. |
| Groovy | `groovy` | Warm 70s oranges/mustards/avocado, Righteous bubble lettering, irregular border-radius cards. |
| Grunge | `grunge` | Aged paper textures, Bebas Neue + Courier, splatter clip-paths, distressed worn aesthetic. |
| Handwritten | `handwritten` | Caveat headlines, SVG-displaced sketchy borders, irregular border-radius — designer's sketchbook feel. |
| Isometric | `isometric` | Soft blue-white bg with isometric 3D cubes, blue-purple top/left/right faces, iso-direction shadows. |
| Japanese | `japanese` | Washi off-white with sumi black, Cormorant Garamond, persimmon accent, asymmetric negative space. |
| Kawaii | `kawaii` | Blush whites with candy pastels, Nunito 900, bounce/wiggle animations, mascot emoji accents. |
| Longform | `longform` | Full-bleed hero photo, Merriweather + Playfair, drop caps, pull quotes, sidebar annotations — magazine. |
| Luxury | `luxury` | Cream + Cormorant Garamond, generous py-32/py-48 whitespace, brass gold accents — refined and editorial. |
| Manga | `manga` | High-contrast black/white with single red pop, Bangers SFX text, halftone dots, panel clip-paths. |
| Maximalist | `maximalist` | Layered patterns on patterns, Bebas Neue + Abril Fatface, clashing colors, intentional density. |
| Memphis | `memphis` | 80s/90s pastels (pink, yellow, turquoise), Fredoka One, scattered geometric shapes — playful chaos. |
| Monolith | `monolith` | White with thick `border-t-8` dark navy top edge, system monospace, 4px navy offset shadows. |
| Neobrutalist | `neobrutalist` | Light gray bg, hard 5px black shadows, neon accents (purple/green/pink/yellow/blue), Space Grotesk. |
| Neumorphism | `neumorphism` | All elements share `#e0e5ec` bg; dual light/dark shadows extrude or inset everything — soft tactile UI. |
| Newspaper | `newspaper` | Warm newsprint paper, Playfair + Lora serif, column grids, drop caps, red flag accents — print editorial. |
| Organic | `organic` | Warm cream + terracotta + sage, Fraunces serif, irregular blob border-radius — hand-crafted natural. |
| Pink Neo | `pink-neo` | Hot-pink dotted page with floating white cards, Archivo Black + Space Mono, multi-color tag pills. |
| Pixel | `pixel` | Press Start 2P with classic NES/Game Boy/CGA palettes, image-rendering pixelated — 8-bit game UI. |
| Pop Art | `pop-art` | Cyan page hosting a max-w-1280 white-bordered floating box, IBM Plex Mono headlines — energetic. |
| Psychedelic | `psychedelic` | Cycling rainbow gradient body, morphing blob border-radius, wavy skew text — melting reality. |
| Pure Brutalist | `pure-brutalist` | System monospace, pure black/white, hard 8/5/3px black shadows, no border-radius — confrontational. |
| Retro Terminal | `retro-terminal` | #00ff41 phosphor green on near-black, CRT scanlines, screen vignette, blinking cursor, glow-text. |
| Scandinavian | `scandinavian` | Barely-warm white, Sora 300, single terracotta accent, lowercase headings, py-28 whitespace. |
| Sci-Fi HUD | `sci-fi-hud` | Cyan corner brackets, Orbitron + Share Tech Mono, scan-line animation, data-readout patterns. |
| Skeuomorphic | `skeuomorphic` | Realistic material gradients (metal, leather, paper, wood), inset+outset shadows, top-left light source. |
| Soft Modern | `soft-modern` | White with blurred orb backgrounds, system-ui, blue/pink, focus-visible rings — friendly and accessible. |
| Swiss | `swiss` | International Typographic Style: white/black/red only, mathematical grid, no decoration. |
| Tropical | `tropical` | Coral/turquoise/sandy palette, Nunito 800, rounded cards with colored top bars — vacation/resort. |
| Utility Terminal | `utility-terminal` | White with strict 1px black borders, system monospace, no border-radius, terminal panel + scanlines. |
| Vaporwave | `vaporwave` | Dark purple-black with retro perspective grid floor + synthwave sun, Audiowide + VT323, gradient text. |
| Y2K | `y2k` | Windows 95/98 gray bevels, system fonts, raised/sunken outset/inset borders, blue title bar gradient. |
| Zine | `zine` | Aged newsprint, Special Elite + VT323, intentionally rotated cards, rubber-stamp labels, tape strips. |

---

## Always-active rules

- **Load `common.md` once per session** — it covers font loading, container/padding conventions, focus rings, marquees, scrollbars, and accessibility patterns shared across many styles. Don't re-load it per request.
- **Output complete working code.** Single self-contained HTML file by default, with CDN Tailwind and an inline `<style>` block for custom rules. Production-ready, not a stub.
- **Preserve the user's existing structure when restyling.** If they paste markup and ask for a new look, change classes, colors, fonts, and decorative elements — but keep their content, semantic tags, and DOM hierarchy intact unless they ask otherwise.
- **Honor accessibility baselines from `common.md`** (skip link, landmarks, focus-visible rings, aria-labels, prefers-reduced-motion). If a style's signature mechanic conflicts with WCAG (e.g. extremely low-contrast text in some maximalist or grunge variants), implement the style as specified but flag the deviation in a one-line comment so the user can review.
- **Don't blend styles.** If the user names one style, deliver that one style. Cross-pollination dilutes both. If they want a hybrid, ask which one is dominant and which one provides the accent.

---

## Decision points

### User names a style not in the catalog

Suggest the closest match from the table above. Examples:
- "wireframe" → Blueprint or Utility Terminal
- "cartoon" → Kawaii or Memphis
- "futuristic" → Sci-Fi HUD, Cyberpunk, or Dark Cosmic
- "minimal" → Scandinavian, Swiss, or Soft Modern (ask which)
- "elegant" → Luxury or Art Deco (ask which)
- "old-school computer" → Retro Terminal, Y2K, or Pixel (ask which)
- "newspaper" → Newspaper (already in catalog)

Offer 2–3 candidates with one-line distinctions and let the user pick.

### User asks for ambiguous adjectives

Words like "modern", "clean", "professional", "simple", "fresh", "bold", or "fun" map to many styles. Ask the user to choose from a short list rather than guessing:

> "Several catalog styles fit 'modern and clean' — would you like:
> - **Soft Modern** (white + blurred blue/pink orbs, system font, friendly)
> - **Bento** (Apple-style cards on light gray, Plus Jakarta Sans, blue accent)
> - **Dark SaaS** (slate-950 + sky blue, staggered animations, polished)
> - **Swiss** (white + black + red only, rigid grid, zero decoration)?"

### User asks "what styles do you support"

List the table above. Group by mood if helpful (minimalist / brutalist / dark / retro / playful / editorial / etc.) but the table is the authoritative inventory.

### User asks for two styles at once

Confirm: "Should the page be primarily [style A] with [style B] accents, or vice versa?" Then deliver one as the dominant frame and use the other only for specific components (e.g., a Bento layout with Memphis decorative accents). Note in a comment which style is dominant.

### User wants to restyle existing markup

Read their HTML carefully. Preserve content, semantic tags, IDs/classes that drive functionality, and overall DOM shape. Replace styling-only classes (Tailwind utilities, CSS class names) and inject the new style's color palette, typography, and component patterns. If they have existing custom CSS, replace it wholesale — don't try to merge two design systems.