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

다크 모드 지원 현황

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

설치 및 사용

설치

npm install @vortex/ui-cals

Tailwind 설정

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { calsPreset } from "@vortex/ui-cals/preset";
 
export default {
  presets: [calsPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@vortex/ui-cals/dist/**/*.js",
  ],
} satisfies Config;

CSS Import

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

컴포넌트 사용

import { Button, Badge } from "@vortex/ui-cals";
 
export default function App() {
  return (
    <div className="p-md">
      <Button variant="primary">Cals Primary (Pink)</Button>
      <Badge variant="booking-available">예약 가능</Badge>
      <Badge variant="booking-confirmed">예약 확정</Badge>
    </div>
  );
}

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 디자인 토큰