Cals 디자인 토큰

Cals는 Vortex UI의 Cals 예약 플랫폼 전용 디자인 시스템으로, Cals 브랜드 가이드와 예약 시스템에 최적화된 디자인 토큰을 제공합니다.

Cals 특징

🎨 Cals 브랜딩

Cals는 Pink, Blue, Purple 컬러와 예약 상태별 전용 컬러를 제공합니다:

• Primary (Pink): #e91e63 - 활기찬 브랜드 정체성
• Secondary (Blue): #03a9f4 - 신뢰와 안정성
• Accent (Purple): #9c27b0 - 프리미엄 느낌
• Booking Status Colors: 예약 상태별 5가지 전용 컬러

🔧 Foundation 상속 + Booking 확장

Cals는 Foundation의 모든 디자인 토큰을 상속하고, 예약 시스템 전용 토큰을 추가합니다:

@import "tailwindcss";
 
@theme {
  /* Cals Brand Colors */
  --color-cals-primary-500: #e91e63;
  --color-cals-secondary-500: #03a9f4;
  --color-cals-accent-500: #9c27b0;
 
  /* Booking Status Colors */
  --color-booking-available: #4caf50;
  --color-booking-pending: #ff9800;
  --color-booking-confirmed: #03a9f4;
  --color-booking-cancelled: #f44336;
  --color-booking-completed: #9c27b0;
}

📦 사용 사례

Cals 패키지는 다음과 같은 경우에 적합합니다:

• ✅ Cals 예약 플랫폼을 개발할 때
• ✅ Cals 브랜드 가이드를 따라야 할 때
• ✅ 예약 시스템 UI를 구현할 때
• ✅ 예약 상태별 UI가 필요할 때

디자인 토큰 카테고리

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

Colors

Cals 브랜드 컬러 + 예약 상태 컬러

• Primary (Pink #e91e63)
• Secondary (Blue #03a9f4)
• Accent (Purple #9c27b0)
• Booking Status Colors (5가지)

Typography

Foundation과 동일한 타이포그래피

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

Spacing

Foundation과 동일한 간격 시스템

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

Shadows

Foundation과 동일한 그림자 효과

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

Borders

Foundation과 동일한 테두리 시스템

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

Breakpoints

Foundation과 동일한 반응형 브레이크포인트

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

Icons

Foundation과 동일한 아이콘 시스템

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

Animations

Foundation과 동일한 애니메이션

• Transition Duration (fast ~ slow)
• Easing Functions

Accessibility

Foundation과 동일한 접근성 가이드

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

Dark Mode

다크 모드 지원 현황

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

설치 및 사용

설치

npm install @vortex/ui-cals

React 19 앱과 Private Registry 접근이 준비되어 있어야 합니다. Foundation은 내부 의존성으로 자동 설치되므로 별도 설치나 import가 필요하지 않습니다. UI 유틸리티, 토큰, 폰트, 다크 모드 스타일은 컴파일된 CSS에 포함되어 Tailwind/PostCSS나 TypeScript 별칭 설정 없이 사용할 수 있습니다.

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

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

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

CSS Import

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

컴포넌트 사용

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

Foundation vs iCignal vs Cals

브랜드 가이드 준수

⚠️ 색상 변경 제한

Cals 브랜드 가이드를 준수해야 하므로 다음 변경은 제한됩니다:

• ❌ Primary/Secondary/Accent 색상 변경
• ❌ Booking Status Colors 변경
• ❌ 로고 변경
• ❌ 폰트 패밀리 변경 (Cals Sans 유지)

디자인 토큰을 변경해야 한다면 Cals 브랜드 팀의 승인을 받으세요.

✅ 허용되는 커스터마이징

다음 토큰은 프로젝트 요구사항에 맞게 조정 가능합니다:

• ✅ Spacing (간격 조정)
• ✅ Border Radius (모서리 둥글기 조정)
• ✅ Shadow (그림자 강도 조정)
• ✅ Typography Scale (폰트 크기 조정, 단 폰트 패밀리는 유지)

다음 단계

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

• Colors - 색상 시스템 (Booking Status 포함)
• Typography - 타이포그래피
• Spacing - 간격 시스템

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

• Foundation 디자인 토큰
• iCignal 디자인 토큰