Foundations
접근성, 레이아웃, 인터랙션까지 — 훌륭한 UI의 기반이 되는 핵심 토큰과 패턴을 둘러봐요.
Foundations는 Clay의 모든 컴포넌트가 함께 쓰는 기본 규칙이에요. 색상·타이포그래피·간격 같은 디자인 토큰과, 상태·모션·글쓰기 같은 원칙으로 구성돼요.
모든 값은 브랜드별 토큰에서 나와요. 상단의 브랜드 선택기나 다크 모드 전환으로 바꾸면, 이 섹션의 표와 미리보기도 함께 바뀌어요.
디자인 토큰
Design Token
palette → semantic → component 로 이어지는 토큰 구조와 이름 규칙을 알아봐요.
Color
역할 기반 색상과 팔레트 색상, 명도 대비 기준을 살펴봐요.
Typography
t1~t14 텍스트 스케일과 폰트 두께를 알아봐요.
Spacing
dimension 스케일과 화면 간격 토큰을 알아봐요.
Radius
모서리 둥글기 토큰을 알아봐요.
Elevation
레이어 색상과 그림자로 깊이와 계층을 표현해요.
Motion
duration, timing function 토큰과 모션 원칙을 알아봐요.
인터랙션과 레이아웃
State
Enabled, Pressed, Selected, Disabled 상태 표현을 알아봐요.
Feedback
눌림을 알리는 색 전환과 축소 피드백을 알아봐요.
Layout
그리드, 중단점, 레이아웃 영역을 알아봐요.
Iconography
아이콘 라이브러리와 크기·터치 영역 규칙을 알아봐요.