PERSONAL INTERFACE — Phase 0 / Art Direction
An interface
for a life
in progress
A personal web product that translates one person’s thinking and life into a single interface — and proves the ability to build that interface at the same time.
Inverted Duotone · one accent · grotesk only
01
Two grounds, one accent.
색은 하나도 직접 쓰이지 않습니다. 모든 요소는 --ground, --figure, --accent 같은 역할(role)만 참조하고, 섹션이 선언한 data-tone이 그 역할을 다시 가리킵니다.
그래서 Calm → Dense → Calm은 별도 장치가 아니라 톤의 배열 그 자체입니다. 서버에서 렌더된 속성 하나이므로 JavaScript가 꺼져 있어도 리듬은 그대로 남습니다.
data-tone="light"
CALM
--figure· Body and headings — AAA18.06:1 ≥ 7--muted· Secondary text — AA4.55:1 ≥ 4.5--accent· Fills and marks — non-text only3.05:1 ≥ 3--accent-text· Accent at body size — AA4.53:1 ≥ 4.5--on-accent· Text on the accent fill — AA5.91:1 ≥ 4.5--focus· Focus ring — SC 1.4.114.53:1 ≥ 3
data-tone="dark"
DENSE
--figure· Body and headings — AAA18.06:1 ≥ 7--muted· Secondary text — AA4.52:1 ≥ 4.5--accent· Fills, marks AND text5.91:1 ≥ 3--accent-text· Accent at body size — AA5.91:1 ≥ 4.5--on-accent· Text on the accent fill — AA5.91:1 ≥ 4.5--focus· Focus ring — SC 1.4.113.99:1 ≥ 3
02
One family. Two widths.
Archivo 한 종류만 씁니다. 보통 두 번째 서체가 맡는 디스플레이/본문 대비를 wdth 가변 축이 대신하기 때문에, “grotesk only”가 제약이 아니라 규율로 유지됩니다. 숫자는 별도 모노 서체 없이 tabular-nums로 정렬합니다.
03
The constraint is the direction.
#FF4D00은 종이 바탕에서 3.05:1입니다. 면과 UI에는 쓸 수 있지만 본문 텍스트로는 쓸 수 없습니다. 잉크 바탕에서는 5.91:1이라 텍스트로 쓸 수 있습니다. 그래서 액센트는 밝은 쪽에서 덩어리로, 어두운 쪽에서 글자로 나타납니다 — 대비 제약을 우회한 게 아니라, 그 제약이 반전 리듬을 만들어 줍니다.
On paper — 3.05:1
A solid mark only
면·규칙선·포커스링에는 사용. 본문 크기 글자에는 --accent-text (4.53:1).
Non-text · SC 1.4.11 pass
On ink — 5.91:1
Text is allowed
어두운 바탕에서는 액센트가 그대로 본문 텍스트 색이 됩니다. --accent와 --accent-text가 같은 값.
Body text · SC 1.4.3 AA pass
포커스 링은 #CC3E00 하나로, 종이 4.53:1 · 잉크 3.99:1. 반전이 일어나도 포커스 표시는 색을 바꿀 필요가 없습니다.
04
Five durations. No more.
prefers-reduced-motion에서는 모든 duration이 1ms로 접히지만 상태 변화 자체는 유지됩니다. 모션을 줄인 방문자도 Calm → Dense → Calm 구조를 그대로 받고, 전환 대신 컷으로 받습니다.
--dur-instant120ms--dur-quick220ms--dur-base420ms--dur-slow720ms--dur-invert900msState echo — a mark acknowledging a click · Hover, focus, small reveals · Element entrances, the default · Sustained reveals, scroll-linked figures · A full ground inversion — the loudest move
05
The mark is measured, not drawn.
로고는 사람에 대한 주장입니다. 이 표시는 측정치입니다 — 저장소의 커밋 기록을 접어서 만듭니다. 남이 이 마크를 못 그리는 이유는 스타일이 아니라 재료입니다.
- 칸
- 64 · 12시부터 시계방향, 가장 오래된 커밋이 첫 칸
- 현재
- 88 채움 · 40 비어 있음
- 깊이
- 직접 쓴 줄 12 / 36 / 108 / 324 / 972 을 넘길 때마다 한 단
- 돌기
- 저장소가 스스로 선언한 페이즈 (
Phase N:)
생성 마크가 커밋마다 모양을 뒤바꾸면 정체성이 아니라 노이즈입니다. 그래서 깊이는 절대 임계값에서 나옵니다 — 3번 칸은 그것이 최신 칸이던 날과 똑같이 보이고, 5년 뒤에도 그렇습니다. 칸이 다 차면 안쪽에 새 링이 열리고 바깥 링은 그대로 굳습니다. 이미 그려진 것은 다시 움직이지 않습니다.
Sigil · 88 / 64
06
An interface for a life in progress.
PERSONAL INTERFACE · GOLDIBUG