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은 프로젝트 요구사항에 맞게 자유롭게 커스터마이징할 수 있습니다:

// tailwind.config.ts
import { foundationPreset } from "@vortex/ui-foundation/preset";
 
export default {
  presets: [foundationPreset],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#0066cc", // 원하는 색상으로 변경
          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

다크 모드 지원 현황

• 현재 미지원
• 향후 업데이트 계획

설치 및 사용

설치

npm install @vortex/ui-foundation

Tailwind 설정

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { foundationPreset } from "@vortex/ui-foundation/preset";
 
export default {
  presets: [foundationPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@vortex/ui-foundation/dist/**/*.js",
  ],
} satisfies 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 (
    <div className="p-md">
      <Button variant="primary">Click me</Button>
    </div>
  );
}

Foundation vs iCignal vs Cals

다음 단계

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

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

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

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