디자인 토큰부터 접근성을 고려한 UI 컴포넌트까지. 명확한 규칙과 유연한 제어로 사용자에게 신뢰할 수 있는 인터페이스를 제공합니다.
시각적 완성도뿐 아니라 개발 용이성과 웹 접근성을 충족하도록 정밀하게 설계되었습니다.
Primitive, Semantic, Component의 3단계 토큰 위계로 모바일·태블릿·데스크톱 반응형 스케일이 유기적으로 연결됩니다.
WAI-ARIA 규격 준수, 완전한 키보드 탐색, 그리고 레이아웃 흔들림이 없는 정밀한 포커스 링 처리가 기본 적용됩니다.
모든 컴포넌트 페이지에서 상태(Size, State, Variant)를 직접 조작하고, 실시간으로 동기화되는 완성된 예제 코드를 복사할 수 있습니다.
Next.js와 TypeScript 기반의 엄격한 타입 정의와 표준 CSS Custom Properties로 어떤 환경에서도 안전하게 통합됩니다.
자주 사용되는 9개의 기본 컴포넌트들이 고도화된 상태 제어와 통일된 디자인으로 제공됩니다.
Primary, Secondary, Outline, Ghost, Danger의 5가지 역할과 5단계 크기로 행동의 중요도를 명확하게 표현합니다.
자세히 보기라벨, 도움말 설명, 에러 메시지, 글자 수 카운터를 입력 컨트롤과 접근성 표준(WAI-ARIA)으로 자동 연결합니다.
자세히 보기4단계 크기 스케일과 Default, Error, ReadOnly, Disabled 상태를 지원하는 표준 텍스트 입력 필드입니다.
자세히 보기실시간 검색, 다중 선택 태그/요약 모드, 아이템 보조 설명 및 아이콘을 지원하는 풍부한 드롭다운 리스트박스입니다.
자세히 보기여러 줄의 긴 텍스트 입력을 위한 영역으로 행 수(rows)와 수직 리사이즈 제어를 완벽하게 지원합니다.
자세히 보기WAI-ARIA 표준의 Unchecked, Checked, Indeterminate 3가지 상태와 스페이스바 키보드 제어를 지원합니다.
자세히 보기상호 배타적 단일 선택과 RadioGroup 컨테이너를 통한 방향키 키보드 탐색을 지원합니다.
자세히 보기설정의 켜짐과 꺼짐 상태를 즉각적이고 직관적으로 전환하는 모던 토글 스위치 컴포넌트입니다.
자세히 보기8가지 시맨틱 컬러와 Solid, Line 스타일을 조합하여 상태와 프로모션을 한눈에 강조합니다.
자세히 보기시각적 통일성을 뒷받침하는 색상, 글꼴, 여백의 기본 원칙을 문서화했습니다.