테마와 토큰

색상, 간격, radius, typography token을 활용해 앱 전체의 시각 규칙을 통일합니다.

Token 사용

token은 색상표가 아니라 제품 전체의 의미 체계입니다. primary, muted, border, surface 같은 의미형 token을 사용하면 테마가 바뀌어도 페이지의 정보 구조가 유지됩니다.

- 직접 색상값은 예외 상황에만 씁니다.

- border와 background 대비를 함께 봅니다.

- 상태 색은 성공, 경고, 오류 의미와 연결합니다.

업무형 UI는 과도한 여백보다 일정한 밀도가 중요합니다. section, toolbar, card, form row의 간격을 단계화하면 페이지마다 구성이 달라도 같은 제품처럼 보입니다.

- 반복 item 간격을 먼저 정합니다.

- 모바일에서 좌우 padding을 줄입니다.

- 고정 포맷 요소는 min/max 크기를 둡니다.

큰 제목은 실제 hero나 문서 제목에만 사용하고, card나 sidebar 내부에는 더 작은 heading을 씁니다. 글자 크기를 viewport에 직접 비례시키기보다 clamp와 container 폭으로 읽기 흐름을 제어합니다.

- letter spacing은 기본적으로 0을 유지합니다.

- 본문 line-height는 긴 한국어 문장에 맞춥니다.

- 버튼 텍스트가 넘치지 않게 확인합니다.

페이지에 필요한 CSS는 data 속성을 기준으로 좁게 작성하는 편이 안전합니다. 전역 class를 무리하게 덮어쓰면 다른 화면이 같이 변할 수 있으므로 문서, 대시보드, 카탈로그처럼 영역별 hook을 둡니다.

- selector 범위를 페이지 shell 안으로 제한합니다.

- 반응형 breakpoint는 기능 기준으로 정합니다.

- script가 의존하는 hook은 이름을 안정적으로 유지합니다.