Pop: Neo-Brutalist Design System

Web · Light · Bold · Playful · Startups

Pop

Thick black outlines, hard shadows and lemon yellow. Loud on purpose.

Pop is neo-brutalism with good manners: a cream page, wide Unbounded headlines, black outlines on everything and solid offset shadows that make cards look like stickers. Lemon yellow and coral do the shouting, while the grid and spacing stay disciplined.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Pop design system. Its spec is at https://codexdesign.io/design-systems/pop.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#FFFDF5oklch(0.993 0.011 95.159)
foreground#141414oklch(0.191 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#141414oklch(0.191 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#141414oklch(0.191 0 0)
primary#141414oklch(0.191 0 0)
primary-foreground#FFE45Coklch(0.917 0.155 97.996)
secondary#FFE45Coklch(0.917 0.155 97.996)
secondary-foreground#141414oklch(0.191 0 0)
muted#F5F1E4oklch(0.958 0.018 92.683)
muted-foreground#5C5A52oklch(0.467 0.013 95.338)
accent#FFF3B0oklch(0.958 0.086 99.199)
accent-foreground#141414oklch(0.191 0 0)
destructive#D62D20oklch(0.57 0.206 29.497)
border#141414oklch(0.191 0 0)
input#141414oklch(0.191 0 0)
ring#141414oklch(0.191 0 0)
chart-1#141414oklch(0.191 0 0)
chart-2#FF6B4Aoklch(0.707 0.187 34.078)
chart-3#3D7EFFoklch(0.622 0.204 262.151)
chart-4#22B573oklch(0.684 0.153 157.451)
chart-5#FFE45Coklch(0.917 0.155 97.996)

Dark theme

background#141414oklch(0.191 0 0)
foreground#FFFDF5oklch(0.993 0.011 95.159)
card#1E1E1Eoklch(0.235 0 0)
card-foreground#FFFDF5oklch(0.993 0.011 95.159)
popover#1E1E1Eoklch(0.235 0 0)
popover-foreground#FFFDF5oklch(0.993 0.011 95.159)
primary#FFE45Coklch(0.917 0.155 97.996)
primary-foreground#141414oklch(0.191 0 0)
secondary#2A2A2Aoklch(0.285 0 0)
secondary-foreground#FFFDF5oklch(0.993 0.011 95.159)
muted#222222oklch(0.252 0 0)
muted-foreground#A8A69Coklch(0.724 0.014 97.517)
accent#2E2E2Eoklch(0.301 0 0)
accent-foreground#FFFDF5oklch(0.993 0.011 95.159)
destructive#FF6B5Eoklch(0.709 0.183 27.67)
border#FFFDF5oklch(0.993 0.011 95.159)
input#FFFDF5oklch(0.993 0.011 95.159)
ring#FFE45Coklch(0.917 0.155 97.996)
chart-1#FFE45Coklch(0.917 0.155 97.996)
chart-2#FF8A6Eoklch(0.756 0.148 34.518)
chart-3#6FA0FFoklch(0.713 0.149 262.556)
chart-4#4CD494oklch(0.78 0.15 159.16)
chart-5#FFFDF5oklch(0.993 0.011 95.159)

Fonts

Headings: Unbounded · 600
Body: Manrope · 500
Monospace: JetBrains Mono

Type scale

display · 72/1 · -0.03emThe quick brown fox
h1 · 48/1.05 · -0.02emThe quick brown fox
h2 · 30/1.15 · -0.01emThe quick brown fox
h3 · 20/1.3The quick brown fox
body · 17/1.55The quick brown fox
small · 14/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 10pxmd 12pxlg 14pxxl 18px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowHard: a solid offset in the ink color, no blur; it disappears when pressed.

Layout

Max width: 1200px
Text width: 64ch
Columns: 12
Gutter: 24px

Best for

Startup and indie product launches
Creator tools and side projects
Events, hackathons and communities
Playful SaaS marketing sites

Do's and don'ts

Do give every card, button and input the same black outline.
Do pick one loud color per section.
Don't blur the shadows; keep them solid and offset.
Don't mix in pastel gradients or glassmorphism.