01 — Hero

Welcome aboard

환영합니다.

Linear · Vercel · Stripe 톤의 line-only chrome. 큰 typography + 가벼운 weight + 충분한 여백이 가독성과 정보 밀도를 동시에 만듭니다.

02 — Typography

Display XL · 80px

Display XL

Display · 56px

Display Default

Title LG · 32px

Title LG

Title · 24px

Title default

Body · 1rem

Body 1rem regular. The quick brown fox jumps over the lazy dog.

Mono · 0.875rem

$ git push origin main
03 — Buttons
04 — Form

Email

Message

진행률 · 72%

05 — Tags
Default Accent Success Warning Danger Inverted
06 — Cards
07 — Stats

Visitors

12,489

↑ 18.4% this week

Conversion

3.2%

↓ 0.6%p yesterday

Revenue

₩42.5M

↑ 7.1% month-to-date

08 — Article

Dispatch · Tehran

What happened today

2026.05.20 · 4 min read

Editorial 디자인 언어는 Linear · Vercel · Stripe 같은 모던 SaaS 의 공통된 톤입니다. 핵심은 그림자 없음 · 그라데이션 없음 · line-only chrome — 컴포넌트가 떠 있지 않은 순수 typography 정체성.

큰 타이포 (64px+) + 가벼운 weight (500) + tight letter-spacing (-0.04em) 의 조합이 information density 가 높으면서도 가독성이 좋은 결과를 만듭니다.

디자인이 잘 나오는 이유는 클로드의 자유도가 줄어든 결과.

뉴스 · blog · dev tool · portfolio · long-form 같은 콘텐츠 중심 product 에 적합.

09 — Signature

Editorial 시그니처: line-only meta table + 큰 typography 단단 column.

Reading time 4 min
Word count 1,247
References 12 links
Contrast 15.4 : 1 (AAA)

이 디자인, 내 프로젝트에 바로 쓸 수 있어요

크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.

Creator OS 사용 중이라면

에이전트에게 말 한마디면 끝

테마 선택·CSS 세팅·컴포넌트 배치까지 자동이에요. 코드 한 줄 안 봐도 돼요.

"Editorial 스타일로 블로그 만들어줘"
Creator OS 시작하기 →
직접 적용하고 싶다면

2단계로 즉시 적용

① HTML 파일 <head> 안에 아래 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="editorial">

버튼·카드·폼·태그가 모두 미니멀 Editorial 디자인으로 바뀌어요. Framer · Wix 커스텀 코드에도 동일하게 작동해요.