Design System v0.1 · 작은 원칙, 일관된 경험

일관된 프로덕트 경험을
만드는 Design Guide

디자인 토큰부터 접근성을 고려한 UI 컴포넌트까지. 명확한 규칙과 유연한 제어로 사용자에게 신뢰할 수 있는 인터페이스를 제공합니다.

Interactive ButtonLive Preview
버튼을 직접 클릭하고 조작해 보세요.
Form ControlsAccessible
Design TokensSystematic
Brand
#212121
#757575
#eeeeee
Radius4px / 8px
Height36px / 40px
Base Grid8px Spacing

디자인 가이드가 추구하는 원칙

시각적 완성도뿐 아니라 개발 용이성과 웹 접근성을 충족하도록 정밀하게 설계되었습니다.

01 / TOKENS

체계적인 디자인 토큰

Primitive, Semantic, Component의 3단계 토큰 위계로 모바일·태블릿·데스크톱 반응형 스케일이 유기적으로 연결됩니다.

02 / ACCESSIBILITY

기본 내장된 웹 접근성

WAI-ARIA 규격 준수, 완전한 키보드 탐색, 그리고 레이아웃 흔들림이 없는 정밀한 포커스 링 처리가 기본 적용됩니다.

03 / PLAYGROUND

실시간 인터랙티브 체험

모든 컴포넌트 페이지에서 상태(Size, State, Variant)를 직접 조작하고, 실시간으로 동기화되는 완성된 예제 코드를 복사할 수 있습니다.

04 / DEVELOPER FIRST

엄격한 개발자 경험

Next.js와 TypeScript 기반의 엄격한 타입 정의와 표준 CSS Custom Properties로 어떤 환경에서도 안전하게 통합됩니다.

핵심 인터랙션 컴포넌트

자주 사용되는 기본 컴포넌트들이 고도화된 상태 제어와 통일된 디자인으로 제공됩니다.

기반 시스템 (Foundations)

시각적 통일성을 뒷받침하는 색상, 글꼴, 여백의 기본 원칙을 문서화했습니다.