Introduction

SPI Design System은 확장 가능하고 유지보수가 쉬운 대규모 웹 애플리케이션을 위해 설계된 현대적인 디자인 시스템입니다. 미려한 디자인, 강력한 타입 안전성, 그리고 유연한 토큰 시스템을 제공합니다.

Core Features

• 3-Layer Token System: Primitive, Semantic, Component 계층으로 나뉘어 디자인 의도를 명확하게 관리합니다.
• Tailwind v4 Optimized: 최신 Tailwind CSS 엔진을 사용하여 최고의 개발 경험과 성능을 제공합니다.
• Radix UI Primitives: 접근성이 검증된 Radix UI를 기반으로 안정적인 컴포넌트를 제공합니다.
• Dark Mode Native: 설계 단계부터 다크 모드를 고려하여 자연스러운 테마 전환을 지원합니다.

Tech Stack

• React 19 & TypeScript
• Tailwind CSS v4
• Radix UI
• Fumadocs (Documentation)
• Storybook 10 (Playground)

Documentation Structure

• Colors - 색상 팔레트, 시맨틱 매핑, 테마 전략
• Typography - 타이포그래피 스케일 및 합성 프리셋
• Spacing - 내부 및 외부 간격, 요소 간 여백
• Radius - 단위 컴포넌트의 모서리 둥글기
• Elevation - Z축 깊이감 표현 및 테마(다크모드) 호환 그림자
• Animation - 모션 시간 스케일 및 트랜지션 프리셋
• Dark Mode - 다크 모드 설정 및 사용
• Components - UI 컴포넌트 라이브러리