DEFAULT
White block.
3px 검정 보더 + 5px offset shadow. 클래식 Neo-Brutalist 카드.
View Details →DROP #042 · 2026
SHIP IT.
BREAK IT.
OWN IT.
파스텔 캔디 + pure black 보더 + 5px 5px 0 offset shadow. 인디 SaaS · 1인 제품 · 크리에이터 도구 톤이에요.
Display XL
DISPLAY XL
Display
Display Default
Title LG
Title LG
Title
Title default
Body
Body 1rem regular. The quick brown fox jumps over the lazy dog.
Mono
$ npx create-app클릭하면 shadow가 사라지면서 5px 이동 — 실제로 눌리는 느낌이에요.
MESSAGE
진행률 · 72%
DEFAULT
ACCENT
SUCCESS
WARNING
DANGER
INVERTED
ACCENT
Yellow pop.
캔디 옐로 fill — Neo-Brutalist 시그니처 컬러.
View Details →INVERTED
Reverse.
검정 fill — 대비를 위한 반전 surface.
View Details →USERS
12,489
↑ 18% this week
REVENUE
$42.5K
↑ 7.1% MTD
SIGNUPS
347
↓ 4 yesterday
MANIFESTO · 042
Ship before you're ready.
BY RYAN · 2026.05.22 · 3 MIN
Neo-Brutalism은 Brutalist의 친절한 사촌이에요. 두꺼운 검정 보더와 offset shadow는 그대로지만, 캔디 팔레트(yellow · pink · blue · green)로 무게를 덜어내요. Gumroad, shadcn 생태계, 1인 SaaS 인디들이 사랑하는 스타일이에요.
핵심은 *클릭이 실제로 눌리는 느낌* — `:active` 상태에서 shadow가 사라지고 5px 만큼 translate(x,y)로 카드가 가라앉아요. 미세한 디테일이지만 사용자가 체감하는 만족감이 커요.
예쁘게 만들지 마요. 정직하게 만들어요.
Neo-Brutalist 시그니처 메커니즘: solid offset shadow + 캔디 팔레트 + press 인터랙션.
SHADOW
5px 5px 0 #000
blur 0 — 솔리드 오프셋. 그림자가 아니라 두 번째 카드.
BORDER
3px solid #000
반드시 두꺼운 pure black. radius는 0~8px 사이.
PRESS
translate(5,5)
:active에서 shadow 0 + 5px 이동 → 카드가 내려앉음.
이 디자인, 내 프로젝트에 바로 쓸 수 있어요
크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.
Creator OS 사용 중이라면
에이전트에게 말 한마디면 끝
테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.
"Neo-Brutalism 스타일로 인디 SaaS 랜딩 만들어줘"Creator OS 시작하기 →
직접 적용하고 싶다면
2단계로 즉시 적용
① <head> 에 CSS 2줄
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-tokens.css">
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-components.css">
② <body> 에 테마 한 줄
<body data-theme="neo-brutalism">