Skip to content

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.

Neo-brutalist style block
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.

Bauhaus style block
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.

Swiss style block
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.

Japanese minimal style block
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.

Luxury noir style block
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.

Retro 70s style block
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.

Claymorphism style block
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.

Risograph style block
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

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

Studio — by commission

Wantoneofthesebuiltforyourbusiness?

Step 1 / 3

Who are we talking to?