FAJAR MUHARRAM

Generated Nov 3, 2026

DESIGN.md for neobrutalism.com

neobrutalism.com12 colors6 componentsSpace Grotesk

Remix

12 screenshots captured· neobrutalism.com

1 / 12 · NeoBrutalism — Retro UI components for React · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from neobrutalism.com

Primary

#FFDC58

Primary CTA, brand accent, active state

#3A352F

Accent / decorative

#FF6B6B

Accent / decorative

#E63946

Accent / decorative

Neutral

#1A1815

Default page background

#262320

Card / panel background

#FFF7E8

Alternating section band

#FFFFFF

Headings / primary text

#F5F0E6

Body copy

#B3AC9E

Captions, secondary text

#6B6355

Tertiary / placeholder text

#000000

Label colour on brand surfaces

Typography · Space Grotesk

body14px · 700 · 17.5px

caption12px · 700 · 16px

h160px · 700 · 58.8px

display60px · 700 · 58.8px

heading12px · 700 · 16px

body14px · 600 · 20px

h248px · 700 · 48px

body15.2px · 700 · 21.7143px

button15px · 600 · 21.4286px

display48px · 700 · 48px

caption10.4px · 400 · 15.6px

body16px · 700 · 24px

button18px · 700 · 28px

caption12px · 700 · 16px

link16px · 400 · 24px

button14px · 500 · 20px

link14px · 500 · 20px

body26.4px · 800 · 39.6px

body14px · 800 · 20px

body16.8px · 800 · 25.2px

h318px · 600 · 28px

body14px · 600 · 20px

caption9.6px · 500 · 14.4px

h324px · 600 · 32px

heading18px · 600 · 28px

caption10.88px · 700 · 16.32px

body14px · 700 · 19.25px

heading36px · 700 · 40px

label12px · 600 · 16px

heading36px · 700 · 40px

heading20px · 700 · 28px

h318px · 600 · 28px

body16px · 800 · 24px

body16px · 600 · 24px

body14px · 700 · 20px

h230px · 700 · 36px

body18px · 700 · 28px

h136px · 700 · 40px

h220px · 500 · 28px

body14px · 400 · 20px

caption12px · 600 · 16px

body15px · 500 · 22.5px

button12px · 500 · 16px

Typography · -apple-system

body14px · 400 · 19.25px

list-item16px · 400 · 24px

quote14px · 400 · 22.75px

caption12px · 400 · 16px

body18px · 500 · 28px

button14px · 400 · 20px

body12px · 400 · 16px

body15px · 500 · 22.5px

h314px · 400 · 20px

table-header16px · 700 · 24px

body14px · 500 · 20px

body14px · 600 · 19.25px

body18px · 700 · 28px

body16.8px · 400 · 27.3px

body16px · 500 · 22px

body15px · 400 · 24.375px

list-item15px · 400 · 22.5px

nav-link16px · 400 · 24px

body12.8px · 400 · 18.2857px

caption12px · 500 · 16px

body12.8px · 500 · 18.2857px

Typography · ui-monospace

code14px · 400 · 21px

Typography · Geist Mono

code14px · 400 · 14px

code9.6px · 700 · 14.4px

code12.8px · 400 · 20.8px

Typography · Geist

code14px · 400 · 20px

Spacing

12px

16px

20px

8px

24px

4px

32px

48px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(111, 103, 90) 2px 2px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(74, 68, 60) 4px 4px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(111, 103, 90) 3px 3px 0px 0px

Components · 6

Remixes of neobrutalism.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it