《북극성과 시행착오 노트》의 색·활자·컴포넌트·목소리를 한곳에 모았습니다. 조용한 종이 캔버스 위에서 타이포그래피가 일을 하고, 마리골드 구독 카드가 페이지의 유일한 외침이 됩니다. 이 페이지만 보고 새 이슈를 만들 수 있게 정리했어요.
따뜻한 크림 종이(paper) 위에, 워드마크(로고)만 청키한 Ria Sans로 큼직하게(clamp 26–40px), 제목·본문은 Pretendard로 짓습니다. 대형 제목은 weight 300으로 속삭이듯 얇게 — 두께가 아니라 크기와 여백으로 존재감을 냅니다. 색은 단 하나의 규율 — 파인 그린은 정체성(워드마크·링크·킥커)에만, 마리골드는 구독 카드 한 곳에만 씁니다.
그림자도 그라데이션도 없습니다. 깊이는 크림 위에 스노우(흰 면)를 얹는 레이어링과 라운드로만. 모든 것은 왼쪽에 정렬하고, 한글은 word-break:keep-all로 단어가 잘리지 않게 흐릅니다.
규율 — 텍스트는 오직 Charcoal. 뮤트는 rgba(35,33,44,.64), 메타는 .45. Pine은 정체성(워드마크·링크·킥커·role)에만, 버튼 배경·장식 도형에는 금지. Marigold는 서피스로만(구독 카드·칩·하이라이트), 텍스트 색으로 금지. Ember는 공지 바 링크의 밑줄 색으로만. 그림자·그라데이션 전면 금지.
Ria Sans(800)는 오직 워드마크(로고)에만 · 크게(clamp 26–40px). 제목(h1~h3·고스트 숫자·풀쿼트·강령 번호)·본문·메타·버튼·폼은 모두 Pretendard(250~700). 타이포 보이스는 Raus를 따라 — 대형 디스플레이 300(속삭임), 섹션·커버·풀쿼트 400, 카드·멤버 소형 제목 500, 고스트·강령 숫자 200–250, eyebrow·메타 500–600, 버튼·CTA 600, strong 700. 폰트 파일은 워드마크 글리프 서브셋(10KB)이라, 워드마크 문구를 바꾸면 폰트를 재서브셋해야 합니다. 한국어 어댑테이션 — 라이트 제목은 자간을 -0.03~-0.04em로 더 조여도 뭉치지 않아 밀도를 지키고, 디스플레이 행간은 1.14~1.3(라틴용 0.95는 한글 글리프가 잘림). 전역 word-break:keep-all + 숫자 tnum.
마리골드 칩(radius 12)이 상태를 말합니다. 채운 차콜 필(radius 99)은 CTA, 고스트 필은 이전/다음(pager). 자물쇠 아이콘은 쓰지 않아요.
스노우 서피스 + 잘려나가는 고스트 숫자(overflow:hidden 필수) + 마리골드 칩 + Pine 밑줄 링크. 그림자 없이 radius로만 뜹니다.
두 번째 이야기 · 곧 공개
그레이스케일·투명도 대신 칩이 상태를 말합니다. 제목은 Pretendard 800, 메타는 뮤트.
AI가 빠르게 끌어와도, 버릴 것을 고르는 건 사람이었어요.
규율은 하나였어요. 뽑아내는 건 AI, 틀리면 안 되는 건 사람이 검증한다.
풀쿼트는 좌정렬 · 위에 32×2px 차콜 룰 · Pretendard 800. strong은 Pretendard 700 + 마리골드 하이라이터 스와이프.
cap은 Pine 라벨, 행은 헤어라인. 좁은 화면에서는 dt/dd가 세로로 쌓입니다.
격주로 한 편. 직접 해본 이야기를 이메일로 조용히 보내드립니다.
translateY 12→0 + fade, 0.7s cubic-bezier(.2,.7,.2,1). 섹션별 delay 0.05~0.15s 스태거.
밑줄 슬라이드 · 화살표 5px 이동 · 고스트 필 채움 전환. translateY 리프트+그림자 금지. prefers-reduced-motion 존중.
서두르지 않습니다. 다만, 끝까지 만들어볼 뿐이에요. · No rush, no hype. We just keep building.