Foundations
디자인 토큰, 스타일, 가이드라인 — Steel 의 모든 화면이 함께 쓰는 시각 언어의 기초예요.
Foundations 는 Steel 의 모든 컴포넌트와 화면이 함께 지키는 기본 규칙이에요. 협업 도구는 이슈, 보드, 문서처럼 정보가 빽빽한 화면이 많아서, 색·글자·간격 같은 작은 결정이 흔들리면 금방 산만해져요. 그래서 이런 결정을 디자인 토큰으로 한곳에 모아 두고, 그 위에 스타일과 가이드라인을 쌓았어요.
이 섹션의 표와 미리보기는 현재 선택한 브랜드의 실제 토큰 데이터에서 바로 그려져요. 다크 모드로 바꾸면 미리보기도 함께 바뀌어요.
Steel 은 Atlassian Design System 을 따라요
토큰 이름(color.background.brand.bold), CSS 변수(--ds-*), 값, 사용 규칙을 Atlassian Design System 과 똑같이 맞췄어요. 서체만 오픈 라이선스 서체(Inter, JetBrains Mono)로 바꿨어요.
디자인 토큰
스타일
Color
역할·강조 단계·상호작용 상태로 짜인 색 토큰과 팔레트, 명도 대비를 살펴봐요.
Typography
heading·body·metric·code 텍스트 스타일과 굵기, 서체를 알아봐요.
Spacing
8px 기반 space 스케일과 gap·inset 시맨틱 간격을 알아봐요.
Shape
모서리 둥글기(radius)와 경계선 두께(border.width)를 알아봐요.
Elevation
sunken·default·raised·overlay 표면과 그림자로 깊이를 표현해요.
Iconography
아이콘 크기와 색 토큰, lucide 아이콘 쓰는 법을 알아봐요.
Motion
컴포넌트별 지속 시간과 가속 곡선, 동작 줄이기 대응을 알아봐요.
가이드라인
원칙
Foundations 전체에 흐르는 생각은 세 가지예요.
- 값이 아니라 의미로 고르기 — 파란색이 필요해서
blue-700을 고르지 않아요. "주요 액션의 배경"이라서color.background.brand.bold를 골라요. 그래야 다크 모드와 이후 테마에서도 올바르게 바뀌어요. - 밀도 높은 화면에서도 차분하게 — 대부분의 UI 는 중립 색과 작은 간격으로 만들고, 색과 높이는 정말 주목이 필요한 곳에만 써요.
- 누구나 쓸 수 있게 — 모든 텍스트 조합은 WCAG AA 대비를 지키고, 색만으로 의미를 전달하지 않아요.