← All styles
Live preview Open site ↗
A page rendered in Pastel Brutalist

Pastel Brutalist

a sticker sheet that handles your invoices

Cream page, white cards, 2px ink outlines and hard offset shadows. Flat pastel fills and one ultra-heavy display face carry all the volume.

lightbrutalistplayfulpastelsaasmarketing v1.0.0 CC-BY-4.0

Install

npx styles-md add pastel-brutalist

Palette

bg #f5f2f0
surface #ffffff
fg #151617
muted #63615f
accent #b09cfb
accent-fg #151617
border #151617
success #4ecb71
danger #ff6b52

Type

Body Geist

Aa Bb Cc 0123 The quick brown fox

"Geist", "Geist Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif
Headings Gasoek One

Aa Bb Cc 0123 The quick brown fox

"Gasoek One", "Archivo Black", "Arial Black", Impact, sans-serif
Code Geist Mono

const total = 1 + lI0O;

"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.25 ratio · body 400 / heading 800 · heading tracking -0.02em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 48.83px

The quick brown fox jumps

3xl · 39.06px

The quick brown fox jumps

2xl · 31.25px

The quick brown fox jumps

xl · 25px

The quick brown fox jumps

lg · 20px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 12.8px

The quick brown fox jumps

xs · 10.24px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: system-ui, -apple-system, Segoe UI, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace, Arial Black, Impact. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
2px
radius
8px · 12px · 16px
spacing unit
4px
gutter
24px
section gap
96px
max width
1200px
motion
180ms cubic-bezier(0.34, 1.4, 0.64, 1)
Download

Pastel Brutalist

Brutalist structure with the edges taken off. Every box is outlined in ink and printed a second time as a hard shadow, but the corners are round and the fills are pastel, so the page reads as friendly rather than severe.

Principles

  • Every element that holds content gets a 2px ink border. The border is the drawing.
  • Shadows are solid ink offsets, never blurred. Depth is a second copy of the shape, down and right.
  • Corners stay round. 12px is the house radius and it is what keeps the black outlines warm.
  • Fills are flat pastel. A tint fills the shape, ink outlines it, nothing gradients in between.
  • Display type carries all the volume. Body text stays at base size and stays quiet.
  • Pressing something moves it into its own shadow: translate 2px, drop the offset to zero.

Typography

Two families with opposite jobs. The display stack is a single ultra-heavy weight used only for headings, set tight at -0.02em with line height near 1.0, because at that weight the letters already fill the line. Everything else is the sans at 400. The mono stack handles small uppercase labels and any number that sits in a table or a metric, where tabular figures matter.

Colour

The cream page is what makes plain white cards read as raised, so the two are not interchangeable. Ink is the only line colour and the only shadow colour. accent, success and danger are tints for filling shapes, not for setting text: use them behind an ink label, and let ink or muted carry the prose.

Components

  • Button (primary): accent fill, ink label at weight 600, 2px border, radius-md, 12px/20px padding, shadow-sm.
  • Button (secondary): surface fill, identical border, shadow and metrics. Only the fill changes.
  • Card: surface fill, 2px border, radius-lg, 24px padding, shadow-md.
  • Tinted card: same as card with a pastel fill. One per group, so the eye has a landing spot.
  • Input: surface fill, 2px border, radius-md, 10px/14px padding; focus adds shadow-sm.
  • Nav: floating bar inset 16px from the top, surface fill, 2px border, radius-lg, shadow-sm.
  • Badge: radius-full, 2px border, tint fill, mono uppercase at text-xs, 4px/10px padding.
  • Table: 2px outer border, 1px inner rules, surface header row in mono uppercase, 12px/16px cells.
  • Heading: "Gasoek One", "Archivo Black", "Arial Black", sans-serif, tracking -0.02em, line height 1.0.
  • Focus ring: 3px accent outline at 2px offset, following the element radius.

Do / Don’t

  • Do outline every tinted shape. A pastel fill with no border dissolves into the cream.
  • Do keep all shadow offsets pointing the same way. One light source, down and right.
  • Do use mono uppercase at text-xs for micro labels: badges, table headers, metric captions.
  • Do let headings run wide and wrap. The display face is meant to fill its measure.
  • Don’t blur a shadow or tint it any colour other than ink.
  • Don’t set the page to pure white. The cream is why the cards read as raised.
  • Don’t set body copy, buttons or labels in the display family. It is for headings only.
  • Don’t put more than three tints in one view, or the outlines stop reading as structure.
  • Don’t drop the border to 1px on small elements. Badges and inputs keep the full 2px.

When to use

Marketing sites, pricing pages, launch pages and developer products that want warmth without losing structure. A poor fit for dense dashboards and long-form reading, where the outlines and offsets become noise.