← All UI styles
Brutalist Pastel
The same hard outlines, but the fills went soft — mint, lilac, black ink.
Hard offsetexpressiveConsumer appsCommunity productsPlayful marketing
Construction · Hard offset
The shadow is a solid copy of the shape, offset and never blurred, inside a heavy ink outline.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Brutalist Pastel style. Hard black outlines and offset shadows kept intact, with pastel mint and lilac fills instead of primaries. The contradiction is the style. Build every surface the
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- hard outlines with pastel fills
- offset shadow
- mint and lilac
- black ink
What this style refuses
- soft blurred shadows
- grey neutrals
- gradients
- thin borders
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#f4f7f2#131413Surface
#e7f5ec#1b201cBorder
#141414#f0f0f0Text
#141414#f3f5f2Muted text
#4a4a4a#a1a5a1Accent
#b9a5f0#c4b3f5On accent
#141414#141414Shape and type
Radius0 / 2 / 4 px
Border2px solid
Shadowhard-offset
DisplayHelvetica Neue
BodyHelvetica Neue
Monoui-monospace
Type scale11 · 13 · 15 · 17 · 22 · 32 px
Weights500 / 700 / 800
Line height1.4
Tracking0em
Spacing4px grid · regular
Surfaceflat
Accentblock
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 17.05:1 light, 16.84:1 dark; secondary text 8.2:1 and 7.4:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Brutalist Pastel
*
* The same hard outlines, but the fills went soft — mint, lilac, black ink.
*
* One complete product screen, rendered from the token object below —