| 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. Applies a NAMED catalog style only - do NOT use for open-ended visual direction with no style named (this skill applies only named catalog styles, so ask the user to pick one first), backend/JS functionality, or full multi-page app builds; styling and markup only. |
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:
- 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.
- Determine what is being styled. A full page, a single component, a section? If the user 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.).
- Identify 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
- 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.
- Get project context - page type, content, any markup to restyle.
- 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.
- 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 |
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.
