design system

디자인 규칙

토큰과 컴포넌트를 한 화면에 모았습니다. 아래 예시는 실제 페이지에서 쓰는 Tailwind 유틸리티를 그대로 사용합니다.

색 8간격 12글자 12라이트 · 다크

원칙

결정이 막힐 때 돌아오는 네 문장입니다.

사진이 먼저

글에 표지가 있으면 사진이 먼저 보입니다. 목록은 112×80 썸네일로 시작합니다.

한 장의 종이

회색 바탕 위에 흰 시트 하나. 모든 콘텐츠는 둥근 모서리 24px 안에 들어갑니다.

큰 활자, 짧은 문장

제목은 800 굵기, 자간은 좁게. 설명은 한두 줄로 끊습니다.

조용한 움직임

호버에서 화살표가 4px 이동합니다. 그 이상은 하지 않습니다.

색

무채색 바탕에 파랑 하나. 왼쪽 조각이 라이트, 오른쪽 조각이 다크 값입니다.

--paper

페이지 바탕

#f4f4f6 · #0e0e10

--surface

카드, 시트

#ffffff · #161618

--surface-soft

입력, 목차, 태그

#f9f9fa · #1d1d21

--ink-strong

제목, 활성 pill

#111111 · #ffffff

--ink-soft

본문, 보조 텍스트

#6b7280 · #a1a1aa

--line

테두리, 구분선

#e5e7eb · #2a2a2f

--accent

링크, 포커스

#1d4ed8 · #8ab4ff

--highlight

검색 표시

#e11d48 · #fb7185

파랑은 링크와 포커스에만 씁니다.

빨강은 검색 하이라이트와 이 화면의 섹션 번호처럼 표시가 필요한 곳에만 씁니다.

나머지는 모두 --paper, --ink-strong, --line입니다.

간격

4px 배수 스케일을 Tailwind 유틸리티로 씁니다. 막대 길이가 실제 px입니다.

space-22px
space-44px
space-66px
space-88px
space-1212px
space-1616px
space-2020px
space-2424px
space-3232px
space-4040px
space-4848px
space-5656px

활자

Inter + Noto Sans KR, 한 서체 계열. 12단계만 씁니다.

공책 Aatext-10 · 10px
공책 Aatext-12 · 12px
공책 Aatext-14 · 14px
공책 Aatext-16 · 16px
공책 Aatext-20 · 20px
공책 Aatext-24 · 24px
공책 Aatext-28 · 28px
공책 Aatext-32 · 32px
공책 Aatext-40 · 40px
공책 Aatext-48 · 48px
공책 Aatext-56 · 56px
공책 Aatext-64 · 64px

제목700–800

본문400 · 1.8

메타400–500 · tabular-nums

형태

모서리는 세 단계, 그림자는 한 단계만 씁니다.

시트 · 24px

rounded-sheet

카드 · 16px

rounded-card

썸네일 · 12px

rounded-thumb

shadow-soft

헤더, 시트

shadow-lift

드로어

컴포넌트

실제 유틸리티 조합입니다. 새 화면은 이 조합에서 시작합니다.

필터

전체#solid#design

태그

solidvitebuild

목록 행

2026.11.10공책을 펼치며블로그를 다시 시작합니다. 첫 글은 이 공책을 어떻게 쓸지에 대한 메모입니다.

버튼

홈으로 ← 목록으로

입력

레이아웃

회색 바탕 위 흰 시트 하나. 본문은 44rem에서 멈춥니다.

시트 · rounded-sheet · p-5 / sm:p-10

본문 · max-w-[44rem] · text-16 / 1.8

폭	변화
40rem	시리즈 이전/다음 글이 2열이 됩니다.
48rem	상단 내비가 사라지고 햄버거 드로어가 열립니다.
64rem	시트 패딩이 40px로 늘고, 카드 여백이 넓어집니다.

접근성

새 화면을 만들 때 확인하는 여섯 가지입니다.

건너뛰기모든 페이지 첫 포커스는 본문으로 건너뛰는 링크입니다.
포커스:focus-visible에 2px 파랑 아웃라인을 표시합니다.
현재 위치내비는 aria-current, 목차는 aria-current=true로 표시합니다.
검색 상태결과 수와 로딩은 aria-live="polite"로 안내합니다.
대비본문과 링크는 라이트·다크 모두 WCAG AA를 넘습니다.
모션prefers-reduced-motion이면 애니메이션과 부드러운 스크롤을 끕니다.

하는 것과 하지 않는 것

하는 것

표지가 있는 글은 항상 같은 비율(112×80)로 자릅니다.
여백은 Tailwind 간격 유틸리티(4px 배수)로만 줍니다.
색은 토큰(bg-surface, text-ink-soft)으로만 씁니다.
새 요소는 기존 카드·필·행 조합에서 시작합니다.

하지 않는 것

13px, 1.3rem 같은 스케일 밖의 값.
세 번째 포인트 컬러, 그라데이션 배경.
그림자 두 겹, 24px이 아닌 시트 모서리.
색만으로 호버와 현재 상태를 구분하는 일.

긴 설명은 「읽는 사이트를 만드는 법」에 적어 두었습니다. 규칙이 바뀌면 이 화면과 docs/05_design.md를 함께 고칩니다.