Foundation 디자인 토큰

Foundation은 Vortex UI의 기본 디자인 시스템으로, 중립적이고 범용적인 디자인 토큰을 제공합니다.

Foundation 특징

🎨 중립적인 디자인

Foundation은 특정 브랜드에 종속되지 않은 중립적인 디자인을 제공합니다:

• Neutral Gray Scale: 50부터 900까지 10단계 회색 팔레트
• 범용적인 간격 시스템: xs(4px)부터 3xl(64px)까지
• 일관된 타이포그래피: 12px부터 32px까지 7단계 폰트 크기
• 표준화된 그림자: sm, md, lg, xl 4단계 그림자 효과

🔧 완전한 커스터마이징

Foundation은 기본 토큰을 포함하며, 필요할 때 앱 CSS에서 토큰을 재정의할 수 있습니다. styles 다음에 로드하는 앱 CSS의 예시입니다. 이 선택적 커스터마이징에는 Tailwind가 필요하지 않습니다.

:root {
  --primary: #0066cc;
  --primary-foreground: #ffffff;
}

📦 사용 사례

Foundation은 다음과 같은 경우에 적합합니다:

• ✅ 새로운 프로젝트를 시작할 때
• ✅ 자체 브랜드 컬러를 적용하고 싶을 때
• ✅ 제품별 제약 없이 자유롭게 디자인하고 싶을 때
• ✅ 프로토타이핑 및 MVP 개발 시

디자인 토큰 카테고리

Foundation의 디자인 토큰은 다음 카테고리로 구성됩니다:

Colors

Neutral Gray Scale 중심의 색상 시스템

• Neutral (Gray 50-900)
• White / Black
• 커스터마이징 가이드

Typography

일관된 타이포그래피 시스템

• Font Size (xs ~ 3xl)
• Font Weight (normal ~ bold)
• Line Height (tight ~ relaxed)

Spacing

간격 시스템 (Padding, Margin, Gap)

• xs (4px) ~ 3xl (64px)
• 8px 기반 스케일

Shadows

그림자 효과 시스템

• sm, md, lg, xl
• 깊이감 표현

Borders

테두리 시스템

• Border Radius (sm ~ xl)
• Border Width
• Border Color

Breakpoints

반응형 디자인 브레이크포인트

• Mobile, Tablet, Desktop
• Tailwind 기본값 사용

Icons

아이콘 시스템

• Lucide React 사용
• 일관된 아이콘 크기

Animations

애니메이션 및 트랜지션

• Transition Duration (fast ~ slow)
• Easing Functions

Accessibility

접근성 가이드라인

• 색상 대비 (WCAG 2.1 AA)
• 키보드 네비게이션
• 스크린 리더 지원

Dark Mode

다크 모드 지원 현황

• 컴파일된 styles에 다크 모드 토큰과 스타일 포함
• 상위 요소의 dark 클래스로 전환

설치 및 사용

설치

npm install @vortex/ui-foundation

React 19 앱과 Private Registry 접근이 준비되어 있어야 합니다. UI 유틸리티, 토큰, 폰트, 다크 모드 스타일은 컴파일된 CSS에 포함되어 Tailwind/PostCSS나 TypeScript 별칭 설정 없이 사용할 수 있습니다.

앱 자체 Tailwind v4 유틸리티를 작성할 때만 앱 빌드를 구성하고 CSS 진입점에 선택적 설정을 추가하세요. 이 설정은 아래 styles import를 대신하지 않습니다.

@import "tailwindcss";
@import "@vortex/ui-foundation/tailwind-config";

자세한 내용은 설치 가이드를 참고하세요.

CSS Import

// src/main.tsx
import "@vortex/ui-foundation/styles";
import "./index.css";

컴포넌트 사용

import { Button } from "@vortex/ui-foundation"
 
export default function App() {
  return <Button>저장</Button>
}

Foundation vs iCignal vs Cals

다음 단계

각 카테고리별 상세 문서를 확인하세요:

• Colors - 색상 시스템
• Typography - 타이포그래피
• Spacing - 간격 시스템

또는 다른 제품의 디자인 토큰을 확인하세요:

• iCignal 디자인 토큰
• Cals 디자인 토큰