Style prompts
Website design style prompts for Claude
Writing “make it brutalist” gets you a few thick borders on an otherwise generic page. A style is a set of rules, and Claude follows rules well when you spell them out. Below are eight styles, each with a block you can paste into any website prompt.
5 min readUpdated
Why a style name is not enough
Style names are fuzzy. “Minimal” can mean Apple, Muji or an empty page. “Brutalist” has meant raw concrete, unstyled HTML and loud pink stickers. Given only a name, Claude averages all of those meanings and returns the safe middle.
The fix is to translate the name into decisions: a palette with hex values, a type pairing, a border and shadow rule, a layout rule and a short ban list. That is the structure of every block below. Paste one near the top of your prompt, then add your content. The full prompt anatomy is in how to write a Claude prompt for a website.
1. Neo-brutalist
Thick black outlines, hard offset shadows, flat saturated color and type that shouts. It suits agencies, events and anyone who wants to be remembered. The neo-brutalist style page collects live examples, and the Loudmouth agency site shows a full page.
STYLE: neo-brutalist.
COLORS: paper #FFFDF5, ink #111111, accents #FF5C39 and #3D5AFE, one flat color per section.
TYPE: huge grotesk headlines (clamp 3rem to 9rem), tight leading, mono for labels.
RULES: 3px solid black borders, hard shadows 6px 6px 0 #111 with no blur, square or lightly rounded corners, hover moves the element 2px and shrinks the shadow.
AVOID: gradients, glass, soft shadows, stock icons.2. Bauhaus
Primary colors, circles, squares and triangles, and a strict grid. It works for cafes, schools and cultural venues. See the Bauhaus style page and the Cafe Bauhaus website.
STYLE: Bauhaus.
COLORS: off-white #F4EFE6, black, red #D6322B, yellow #F2B705, blue #1F4E9E. Nothing else.
TYPE: geometric sans in bold and light, all lowercase headlines, set flush left.
RULES: build visuals only from circles, squares and triangles; align everything to a 12-column grid; use diagonals and rotated 90-degree blocks for rhythm.
AVOID: photos with effects, rounded cards, drop shadows.3. Swiss International
Grid, whitespace, one typeface and a single accent. It reads as credible, which is why it fits consultants, software and law. See the Swiss International style page.
STYLE: Swiss International.
COLORS: white, black, one red accent #E30613 used on at most one element per screen.
TYPE: one neo-grotesk family, three sizes only, headlines flush left and ragged right.
RULES: 12-column grid with visible alignment, generous margins, thin 1px rules between sections, numbered sections.
AVOID: decoration, icons, more than one accent color.4. Japanese minimal
Quiet, warm and slow, with space doing most of the work. It suits architects, ceramics and wellness. See the Japanese minimal style page and Kanso Architects.
STYLE: Japanese minimal (kanso).
COLORS: washi #F2EEE6, charcoal #2B2B2B, moss #6B705C as the only accent.
TYPE: light serif for headlines, small sans for body, generous letter spacing on small labels.
RULES: at least 120px between sections, one image per screen, vertical text for one decorative label, motion limited to slow 600ms fades.
AVOID: bright colors, dense grids, bounce animations.5. Luxury noir
Near-black backgrounds, a metallic accent and elegant serif type. It fits hotels, restaurants and jewelry. See the luxury noir style page and the Nocturne hotel website.
STYLE: luxury noir.
COLORS: background #0B0B0C, text #EDE8DF, gold #B8975A for lines and small details only.
TYPE: high-contrast serif for headlines at large size, small caps sans for navigation.
RULES: hairline 1px gold dividers, full-bleed dark photography, slow parallax at most, buttons as outlined rectangles.
AVOID: neon, glow effects, gradients, rounded pill buttons.6. Retro 70s
Warm browns and oranges, fat rounded type and sunset stripes. It suits food, music and lifestyle brands. See the retro 70s style page.
STYLE: retro 70s.
COLORS: cream #F6E7C8, brown #5A2E1B, orange #E8702A, mustard #E3A72F, teal #2A7F7B.
TYPE: soft heavy display serif or rounded sans, tight leading.
RULES: concentric stripe bands as dividers, rounded corners 24px, sun and arch shapes, subtle paper grain.
AVOID: pure black, cold blues, sharp corners.7. Claymorphism
Soft, inflated, toy-like shapes with inner highlights. It suits kids, apps and playful products. See the claymorphism style page.
STYLE: claymorphism.
COLORS: pastel background #EEF0FF, shapes in peach, mint and lilac, text #2A2A40.
TYPE: rounded sans, bold weights, friendly sentence-case headlines.
RULES: radius 28px or more, double shadow (outer soft plus inner highlight), buttons that squish on press, no hard borders.
AVOID: sharp edges, flat black, dense text blocks.8. Risograph zine
Two or three overprinted inks, grain and misregistration. It works for events, publishers and creative studios. See the risograph zine style page and the Overprint zine fair website.
STYLE: risograph zine.
COLORS: paper #F5F0E6, fluorescent pink #FF48B0, blue #0078BF, overlap areas use multiply blend.
TYPE: chunky grotesk plus a typewriter mono for captions.
RULES: halftone dot textures, shapes offset 3px to fake misregistration, uneven hand-cut edges, two inks per section at most.
AVOID: smooth gradients, glass, perfect alignment.How to combine and adapt styles
- Pick one style for structure. Borrow at most one detail from another, such as a mono font for labels.
- Swap the accent color to match the brand and keep the rest of the block.
- Ask for two variants of the hero only, compare them, then build the page.
- If the result drifts, paste the block again and say which rule was broken.
More tips on avoiding generic output are in how to make an AI website not look AI. To see each style running live, browse the website designs, and every design page includes the prompt behind it.
Designs mentioned in this guide
- Full Website Designs · Neo-BrutalistLoudmouth Agency WebsiteA loud agency site printed like a protest poster: a hero whose words shout back when you hover them while a speech bubble follows the cursor, service rows that flood pink, poster-style case tiles that press flat, a client strip and a giant 'SAY HI'.
- Full Website Designs · BauhausCafé Bauhaus WebsiteA coffee-shop site built like a Bauhaus poster: a stacked headline that rises in, a 3x3 geometric poster you tap to turn a quarter, a menu grid of primary-colored tiles, opening hours as a bar chart, bean bags that lift and a location block.
- Full Website Designs · Japanese MinimalKanso Architects WebsiteA quiet site for a Kyoto architecture practice: a line-drawn tea-house elevation where moving the pointer changes the hour and the eave shadows, vertical Japanese captions, project rows that slide a floor plan aside, and a vermilion seal.
- Full Website Designs · Luxury NoirNocturne Hotel WebsiteA dark luxury hotel site in a 1931 printing house: Bodoni 'Stay up late.' beside a line-drawn facade whose 24 windows light up to reveal each room and its price, gold floor plans that draw themselves, a cocktail menu that unfolds, and a booking bar.
- Full Website Designs · Risograph ZineOverprint Zine Fair WebsiteA loud cultural-event site printed in two riso inks: misregistered hero type that follows the cursor, a halftone program grid, exhibitor list and a ticket strip.
Questions, answered
What is the best prompt for a brutalist website?
Name the style, then give hard rules: black outlines of 3px, hard offset shadows with no blur, two or three flat accent colors and oversized grotesk type. A ban list for gradients and soft shadows keeps Claude from drifting.
Can I combine two design styles on one page?
Rarely well. Choose one style for the structure and borrow a single detail from another, for example a mono font for labels.
Which style converts best for a small business?
There is no single winner. Swiss International is the safest for credibility and clarity, while bolder styles like brutalism or Bauhaus help when standing out matters more.
Keep reading
- 01Prompting
6 min readHow to write a Claude prompt for a website designA practical structure for Claude website prompts: concept, sections, design system, motion and output rules. Includes copy-ready prompt templates and real examples.Read the guide - 02Design principles
5 min readHow to make an AI-built website not look AI-generatedWhy AI websites all look alike, and nine concrete design rules (with prompt snippets) to make a Claude-built site feel designed: palette, type, shadows, layout and motion.Read the guide - 03Walkthrough
5 min readBuilding a landing page with Claude, step by stepFrom brief to live URL: plan the page, prompt Claude, refine it as an artifact, move the code into Next.js and deploy. Seven steps with copy-ready prompts.Read the guide