Pop: 네오 브루탈리즘 디자인 시스템

Web · Light · Bold · Playful · Startups

Pop

굵은 검정 테두리, 단단한 그림자, 레몬 옐로. 일부러 시끄럽게.

Pop은 예의를 갖춘 네오 브루탈리즘입니다. 크림색 페이지, 폭이 넓은 Unbounded 헤드라인, 모든 요소의 검정 테두리, 카드를 스티커처럼 보이게 하는 단단한 오프셋 그림자. 소리치는 건 레몬 옐로와 코랄이고, 그리드와 간격은 단정하게 유지됩니다.

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/ko/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

스타트업·인디 제품 런칭
크리에이터 도구와 사이드 프로젝트
이벤트, 해커톤, 커뮤니티
장난기 있는 SaaS 마케팅 사이트

Do's and don'ts

모든 카드, 버튼, 입력창에 같은 검정 테두리를 주세요.
섹션마다 시끄러운 색을 하나만 고르세요.
그림자를 흐리게 하지 마세요. 단단하게 밀어 두세요.
파스텔 그라데이션이나 글래스모피즘을 섞지 마세요.