9장 디자인 시스템을 규칙으로 만든다

디자인 시스템은 컴포넌트 갤러리가 아니라 반복되는 판단의 규칙이다. BriefFlow는 --ink, --paper, --blue, --orange, --line 토큰으로 색 역할을 분리한다. 오렌지는 사람 승인 게이트와 원문 강조처럼 주의가 필요한 소수 지점에 제한적으로 사용한다.

타이포그래피는 크기보다 계층이 중요하다. eyebrow는 섹션 맥락, 큰 제목은 현재 업무, 본문은 설명, small은 보조 정보다. 간격은 관련성을 표현한다. 같은 카드 안의 제목과 상태는 가깝게, 다음 섹션은 멀게 둔다.

상태는 최소한 기본, hover, focus-visible, disabled, loading, error, success, empty를 정의한다. 정상 화면 하나만 디자인하면 개발 단계에서 나머지가 임의로 생긴다.

토큰 실습

브라우저 개발자 도구에서 --blue 값을 바꾸고 버튼, 강조 글자, 단계 번호가 함께 바뀌는지 본다. 하나가 고정 색상으로 남으면 토큰 규칙이 깨진 것이다. 이후 색 대비를 다시 측정한다.