🎨 Design System

이 프로젝트는 디자인 토큰을 중심으로 한 UI 시스템 설계 연습 프로젝트입니다.
Chakra UI의 토큰 및 컴포넌트 구조를 참고하여, 확장 가능하고 일관된 UI 시스템을 만드는 것을 목표로 합니다.

📌 Overview

• UI 규칙을 코드로 명확히 정의
• 디자인 토큰 기반의 일관된 스타일 관리
• 확장 가능한 테마 및 컴포넌트 구조 설계
• 실제 서비스에도 적용 가능한 구조 연습

🎯 Design Tokens

Design Token은 디자인을 구성하는 최소 단위 값입니다.

• 디자인 변경 시 한 곳에서 관리 가능
• 컴포넌트 간 스타일 불일치 방지
• 다크 모드 및 테마 확장에 유리
• 확장 가능한 객체 구조

⚙️ Build Structure

토큰은 최종적으로 CSS 변수 형태로 출력되어 컴포넌트와 스타일 레이어에서 공통으로 사용됩니다.

• JavaScript 기반 토큰 정의
• 토큰 → CSS 변수 자동 생성
• :root에 변수 주입

🚧 Roadmap

Design Tokens

• Color
• Typography
• Spacing / Radius / Shadow

Theme

• Dark Mode

UI Systems

• Layout
• Button
• Input
• Toast

Documentation

• Storybook

CI/CD

• Github Action