styles
← 갤러리

Gumroad Flat

크림색 바탕 위 새까만 텍스트와 핫핑크 액센트로 외치는 플랫 브루탈리즘 — 그림자 없이 얇고 또렷한 검정 테두리, 거대한 레귤러 웨이트 그로테스크 헤드라인, 쨍한 원색 블록으로 승부하는 검로드식 대담함.

brutalist flatshadowlesshigh-contrasthot-pinkcream-canvasoversized-typebold-bordersplayfulcreator-economy
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

오늘날의 gumroad.com이 보여주는 '플랫' 브루탈리즘. 오프셋 그림자 없이(측정값: 그림자 0) 크림색(#f4f4f0) 배경과 순수 블랙 텍스트, 그리고 브랜드 시그니처인 핫핑크(#ff90e8) 액센트만으로 화면을 크게 외친다. 깊이는 소프트 섀도우가 아니라 얇지만 또렷한 1px 솔리드 블랙 테두리와 평평한 컬러 블록으로만 만든다. 헤드라인은 최대 96~192px에 이르지만 웨이트는 400~500으로 가벼워, 굵기가 아니라 '크기'로 압도한다. 옐로우·라임·레드 같은 보조 원색은 일러스트와 제품 카드에 스티커처럼 흩뿌려진다. 같은 라이브러리의 neo-brutalist(하드 오프셋 그림자 문법)와 달리, 이 스타일은 그림자를 완전히 버리고 대비와 색면으로만 밀어붙이는 것이 핵심 차이다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen

검로드 시그니처는 '가벼운데 거대한' 헤드라인이다 — 최대 96~192px에 이르지만 웨이트는 400~500으로 유지해, 굵기가 아니라 크기와 타이트한 자간(-0.02em)으로 압도한다. 본문은 평범한 16px/400. h3(카드 타이틀)만 700으로 살짝 무겁게. 드라마는 스케일 점프에서 나오지 웨이트 대비에서 나오지 않는다. 폰트는 상용 ABC Favorit(그로테스크)이며 Google Fonts 대체는 Hanken Grotesk.

골든 예제 (exemplar)

Go from 0 to $1

Anyone can earn their first dollar online. Just start with what you know, and get paid.

Start selling
Search marketplace …

Sell anything

Courses, ebooks, memberships — list it and get paid today.

Make your own road

One flat pink block, one thin black outline, zero shadow.

9.3K ★

Get paid fast

Depth from color and border alone — one corner squared, brand-style.

Do

  • 크림(#f4f4f0) 바탕에 순수 블랙 텍스트, 핫핑크(#ff90e8) 브랜드 액센트로 대비를 낸다
  • 헤드라인을 아주 크게(최대 96~192px) 쓰되 웨이트는 400~500으로 가볍게 유지 — 굵기가 아니라 크기로 압도한다
  • 모든 버튼·카드·인풋에 1px 솔리드 블랙(다크: 화이트) 테두리를 두른다
  • 그림자 없이 평평한 컬러 블록과 테두리만으로 깊이를 만든다
  • 주 CTA는 블랙 필 버튼, 브랜드 강조 CTA는 핑크 필 버튼으로 나눈다

Don't

  • 어떤 종류의 드롭 섀도우도 쓰지 말 것 — 오프셋 하드 섀도우조차 금지(그게 neo-brutalist와의 차이)
  • 헤드라인을 700~900 볼드로 만들지 말 것 — 검로드 헤드라인은 거대하지만 레귤러 웨이트다
  • 그라디언트·글래스모피즘·파스텔 저대비 배색 금지
  • 은은한 1px 회색 경계선 금지 — 테두리는 얇아도 순수 블랙(다크: 화이트)이다

컴포넌트 노트

button
primary: background primary(블랙) 필, color primary-foreground(화이트), border 1px solid var(--border), radius var(--radius-field) ~4px, padding 14px 28px, 그림자 없음. 호버 시 액센트(핑크)로 필 반전 또는 미세 스케일 1.02.
accent: background accent(핫핑크) 필, color accent-foreground(블랙), border 1px solid var(--border). 브랜드 CTA·화살표 버튼에 사용.
focus: 2px offset ring outline(var(--ring), 핫핑크), 테두리 유지
disabled: opacity 0.5, 색 반전 없음, cursor not-allowed
card
background card(크림/다크는 #242423), border 1px solid var(--border), radius var(--radius-box) ~16px, 그림자 없음. 내부 padding 24~32px. 제품 카드는 '24px 24px 24px 4px'처럼 한 모서리만 각지게 하는 시그니처 변형도 있다.
input
background background(크림), border 1px solid var(--border), radius var(--radius-field) ~4px, inset 그림자 없음. 우측에 사각 검색 아이콘 버튼을 붙인다. 포커스 시 2px 핑크 ring.
nav
풀블리드 크림 바, 하단 1px 하이라인. 로고는 두툼한 워드마크. 활성 내비 항목은 블랙 필 pill(radius 9999px)에 크림 텍스트('About'), 우측 상단 'Start selling'은 블랙 필 버튼. 다크에서는 이 CTA가 핑크로 바뀐다.
badge
pill(radius 9999px), border 1px solid var(--border), 원색 또는 크림 배경. 별점·카운트 칩처럼 쓴다.