원칙

Cobalt Instrument: 계기판처럼 정밀하고 촘촘한 화면이에요. 차가운 회색을 바탕으로 쓰고, 행동을 유도하는 곳에만 코발트를 써요.

다섯 가지 원칙

1. 토큰 밖의 값은 없다색, 간격, radius, 글자 크기는 모두 토큰에서 골라요. #3355ff, 13px, p-[7px] 같은 임의의 값은 쓰지 않아요.
2. 강조는 한 곳에만한 화면에서 primary 버튼은 하나만 둬요. 나머지는 secondary나 ghost를 써요.
3. 숫자는 고정폭수치, ID, 키 값은 mono 계열로 써서 자리를 맞춰요.
4. 그림자 대신 선높낮이는 1px 테두리와 바탕 단계(canvas → surface → subtle)로 구분해요. 떠 있는 요소도 그림자 없이 테두리로 나눠요.
5. 움직임은 사용자 행동에 대한 응답만열기, 닫기, hover처럼 사용자가 일으킨 변화에만 모션을 넣고, prefers-reduced-motion을 지켜요.

해요 / 하지 않아요

화면을 만들거나 고칠 때 이 표로 먼저 확인해요.

해요하지 않아요

Semantic 토큰과 텍스트 스타일만 쓰기hex 값, Primitives, 임의 px 직접 쓰기
sonic-ui 컴포넌트를 조합하기같은 역할의 버튼, 입력란을 새로 그리기
버튼 문구는 동작 그대로 쓰기 ("API 키 만들기", "저장")"확인", "Submit"처럼 모호한 문구, 문구 끝에 화살표 붙이기
에러 문구는 무엇이 잘못됐고 어떻게 고치는지 쓰기"오류가 발생했습니다"만 쓰기
light/dark 둘 다 확인하기한 모드에서만 보고 끝내기
포커스 링(border/focus, 2px, offset 2px) 유지하기outline: none으로 포커스 표시 지우기
문장형 대소문자 쓰기라벨을 전부 대문자로 쓰기