분기록

디자인 토큰

docs/spec/design-tokens.md 의 정의와 대조하는 확인용 페이지입니다. 색인되지 않습니다.

색상

  • canvas#F6F3EC전체 배경
  • surface#FCFBF8문서 영역, 카드 내부
  • ink#23221F기본 글자
  • ink-muted#6E6A62보조 글자, 라벨
  • ink-faint#9B968C비활성 텍스트
  • rule#D8D3C9구분선, 테두리
  • rule-strong#B8B2A5강조 구분선
  • rule-faint#E9E5DC옅은 배경 구분
  • accent#375A50주요 강조
  • caution#85524B위험 강조

타입 스케일

  • display — 32px / 1.35 · serif

    분기점은 조건이 갈라지는 자리입니다

  • h1 — 26px / 1.4 · serif

    분기점은 조건이 갈라지는 자리입니다

  • h2 — 20px / 1.45 · serif

    분기점은 조건이 갈라지는 자리입니다

  • h3 — 16px / 1.5 · sans 600

    분기점은 조건이 갈라지는 자리입니다

  • body — 15px / 1.75 · sans 400

    분기점은 조건이 갈라지는 자리입니다

  • body-sm — 13px / 1.7 · sans 400

    분기점은 조건이 갈라지는 자리입니다

  • caption — 12px / 1.6 · sans 400

    분기점은 조건이 갈라지는 자리입니다

  • mono-sm — 12px / 1.5 · mono

    분기점은 조건이 갈라지는 자리입니다

면과 선

카드는 그림자 대신 1px 테두리와 배경색 차이로 분리합니다.

바깥은 canvas, 안쪽은 surface, 경계는 rule 입니다.

강조 영역 배경 (accent-wash)

중대 — 위험 영역 배경 (caution-wash). 색상만으로 의미를 전달하지 않도록 텍스트 라벨을 함께 둡니다.

읽기 폭

본문 최대 폭은 34rem 입니다. 한 줄에 68자를 넘기지 않습니다. 한글은 단어 중간에서 줄이 바뀌지 않도록 word-break: keep-all 을 전역으로 적용합니다. 이 문단이 가로로 어디에서 끊기는지 확인합니다.

컴포넌트

shadcn 기본값을 분기록 토큰으로 재작성한 결과입니다. 반경 0, 그림자 없음, 포커스는 outline 입니다.

Button

Input · Textarea

RadioGroup

Slider — 값 40

Dialog · Sheet