Design System v2
잉크, 종이, 형광펜.
pudding.cool과 wattenberger.com에서 배운 원칙을 한국어 지면에 맞게 다시 만든 디자인 시스템. 글꼴·색·그림은 모두 직접 고른 무료 자원과 자체 제작물입니다.
원칙
| 무엇을 | 어디서 배웠나 | 어떻게 |
|---|---|---|
| 초대형 굵은 명조 이름, 넓은 여백 | wattenberger | Hahmlet 900 · --fs-display |
| 이름에 흐르는 그라디언트, 포인터에 반응 | wattenberger | background-clip: text + --mx/--my |
| 핵심 구절을 굵게 강조한 1인칭 소개 | wattenberger | Hahmlet 800 + 형광펜 |
| 떠 있는 스티커 배지 | 둘 다 | 직접 그린 SVG · 원형 텍스트 회전 |
| 3열 그리드, #호수 알약 + 날짜 | pudding | FrameCard · IBM Plex Mono |
| 항목별 단색 프레임 안에 커버 | pudding | frontmatter color → --frame |
| 굵고 촘촘한 세리프 카드 제목 | pudding | Hahmlet 800 · -0.045em |
| 본문 안의 라이브 데모 | wattenberger | React 아일랜드 · client:visible |
글꼴
뉴스가 닿는 법
제목·이름·카드 제목. 굵기 400–900 가변.
뉴스를 취재하고, 새로운 방법을 만듭니다.
본문·UI. keep-all, -0.02em.
#01 · 2026.06 · LIVE
호수·날짜·라벨·버튼.
타입 스케일
--fs-display최인수--fs-3xl페이지 제목--fs-xl섹션 제목--fs-card카드 제목은 이렇게--fs-lg리드 문단과 dek--fs-md본문은 Pretendard 17px, 행간 1.75.--fs-xsMETA · 2026.10 · #01색 · 잉크와 종이
--paper--paper-2--paper-3--ink--ink-2--ink-3--accent--accent-ink--marker--focus색 · 프레임 팔레트
스토리·프로젝트마다 frontmatter의 color로 하나를 고릅니다. 다크 모드에서는 자동으로 짙은 변형으로 바뀝니다. 정당색과 겹치지 않도록 채도를 낮췄습니다.
tangerinemarigoldskymintlilacroseoliveslateTailwind로 쓰기
Tailwind v4 테마가 위 토큰을 그대로 가리킵니다. 다크 모드에서도 같은 클래스가 자동으로 바뀝니다. 기존 리셋을 쓰기 때문에 Tailwind의 preflight는 켜지 않았습니다.
| 토큰 | Tailwind 클래스 |
|---|---|
--paper · --ink · --ink-2 | bg-paper · text-ink · text-ink-2 |
--accent · --marker | text-accent · bg-marker |
--frame-* 8색 | bg-frame-sky · fill-frame-mint · border-frame-rose |
| 글꼴 3종 | font-display · font-sans · font-mono |
--fs-display · --fs-3xl · --fs-card | text-display · text-3xl · text-card |
--measure-text · --measure-wide | max-w-text · max-w-wide |
TAILWIND · 예시
이 상자는 Tailwind 클래스만으로 만들었습니다
bg-frame-sky, font-display, text-ink-2가 모두 사이트 토큰입니다.