Skip to Content
FoundationsCalsColors (색상)

Colors (색상)

Cals의 색상 시스템은 Pink, Blue, Purple 브랜드 컬러와 예약 상태별 5가지 전용 컬러를 제공합니다.

색상 철학

Cals의 색상은 다음 원칙을 따릅니다:

  • Vibrant Brand: 활기찬 Pink로 브랜드 정체성 표현
  • Booking Status: 예약 상태를 직관적으로 전달하는 색상
  • Trust & Premium: Blue(신뢰)와 Purple(프리미엄) 조화
  • Consistency: 모든 Cals 제품에서 동일한 컬러 사용

Cals Primary Color (Pink)

Cals의 Primary 컬러는 Pink (#e91e63) 입니다.

실제 토큰 값 (theme.css)

@theme {
  /* Cals Brand Colors - Primary (Pink) */
  --color-cals-primary-50: #fce4ec;
  --color-cals-primary-100: #f8bbd0;
  --color-cals-primary-200: #f48fb1;
  --color-cals-primary-300: #f06292;
  --color-cals-primary-400: #ec407a;
  --color-cals-primary-500: #e91e63;
  --color-cals-primary-600: #d81b60;
  --color-cals-primary-700: #c2185b;
  --color-cals-primary-800: #ad1457;
  --color-cals-primary-900: #880e4f;
}

사용 가이드

ShadeHex사용 사례
50#fce4ec배경색 (Subtle)
100#f8bbd0Hover 배경
200#f48fb1Disabled 상태
300#f06292Border
400#ec407aHover 상태
500#e91e63Primary (기본)
600#d81b60Active 상태
700#c2185bPressed 상태
800#ad1457Strong 강조
900#880e4fHigh Contrast

Cals Secondary Color (Blue)

Cals의 Secondary 컬러는 Blue (#03a9f4) 입니다.

실제 토큰 값 (theme.css)

@theme {
  /* Cals Brand Colors - Secondary (Blue) */
  --color-cals-secondary-50: #e1f5fe;
  --color-cals-secondary-100: #b3e5fc;
  --color-cals-secondary-200: #81d4fa;
  --color-cals-secondary-300: #4fc3f7;
  --color-cals-secondary-400: #29b6f6;
  --color-cals-secondary-500: #03a9f4;
  --color-cals-secondary-600: #039be5;
  --color-cals-secondary-700: #0288d1;
  --color-cals-secondary-800: #0277bd;
  --color-cals-secondary-900: #01579b;
}

사용 가이드

ShadeHex사용 사례
500#03a9f4Secondary Button, 예약 확정 상태
600#039be5Hover 상태
700#0288d1Active 상태

Cals Accent Color (Purple)

Cals의 Accent 컬러는 Purple (#9c27b0) 입니다.

실제 토큰 값 (theme.css)

@theme {
  /* Cals Brand Colors - Accent (Purple) */
  --color-cals-accent-50: #f3e5f5;
  --color-cals-accent-100: #e1bee7;
  --color-cals-accent-200: #ce93d8;
  --color-cals-accent-300: #ba68c8;
  --color-cals-accent-400: #ab47bc;
  --color-cals-accent-500: #9c27b0;
  --color-cals-accent-600: #8e24aa;
  --color-cals-accent-700: #7b1fa2;
  --color-cals-accent-800: #6a1b9a;
  --color-cals-accent-900: #4a148c;
}

사용 가이드

ShadeHex사용 사례
500#9c27b0Accent Button, 예약 완료 상태
600#8e24aaHover 상태
700#7b1fa2Active 상태

⭐ Booking Status Colors (예약 상태 컬러)

Cals의 핵심 기능인 예약 상태별 5가지 전용 컬러입니다.

실제 토큰 값 (theme.css)

@theme {
  /* Booking Status Colors */
  --color-booking-available: #4caf50;
  --color-booking-pending: #ff9800;
  --color-booking-confirmed: #03a9f4;
  --color-booking-cancelled: #f44336;
  --color-booking-completed: #9c27b0;
}

사용 가이드

상태Hex의미사용 사례
available#4caf50예약 가능 (Green)예약 가능한 시간대 표시
pending#ff9800예약 대기 (Orange)결제 대기, 승인 대기
confirmed#03a9f4예약 확정 (Blue)예약이 확정된 상태
cancelled#f44336예약 취소 (Red)취소된 예약
completed#9c27b0예약 완료 (Purple)완료된 예약 (이용 완료)

예약 상태 흐름

예약 가능 (available)
  ↓
예약 대기 (pending)
  ↓
예약 확정 (confirmed)
  ↓
예약 완료 (completed) 또는 예약 취소 (cancelled)

Semantic Colors (Foundation 상속)

Cals는 Foundation의 Semantic Colors를 상속합니다.

실제 토큰 값 (theme.css)

@theme {
  /* Semantic Colors (Foundation 상속) */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;
}

사용 방법

Booking Status Badge

import { Badge } from "@vortex/ui-cals";
 
export default function BookingStatusExample() {
  return (
    <div className="flex gap-md">
      <Badge variant="booking-available">예약 가능</Badge>
      <Badge variant="booking-pending">예약 대기</Badge>
      <Badge variant="booking-confirmed">예약 확정</Badge>
      <Badge variant="booking-cancelled">예약 취소</Badge>
      <Badge variant="booking-completed">예약 완료</Badge>
    </div>
  );
}

BookingCard 컴포넌트

export default function BookingCard({ status }) {
  const statusConfig = {
    available: {
      color: "bg-[#4caf50]",
      text: "예약 가능",
      icon: "✓",
    },
    pending: {
      color: "bg-[#ff9800]",
      text: "예약 대기",
      icon: "⏳",
    },
    confirmed: {
      color: "bg-[#03a9f4]",
      text: "예약 확정",
      icon: "✓",
    },
    cancelled: {
      color: "bg-[#f44336]",
      text: "예약 취소",
      icon: "✗",
    },
    completed: {
      color: "bg-[#9c27b0]",
      text: "예약 완료",
      icon: "★",
    },
  };
 
  const config = statusConfig[status];
 
  return (
    <div className="p-md bg-white border rounded-lg">
      <div className="flex items-center gap-sm mb-md">
        <span
          className={`${config.color} text-white px-sm py-xs rounded text-sm`}
        >
          {config.icon} {config.text}
        </span>
      </div>
      <h3 className="text-lg font-semibold">예약 정보</h3>
      <p className="text-sm text-gray-600 mt-sm">예약 날짜: 2025-01-15</p>
    </div>
  );
}

Calendar with Booking Status

export default function BookingCalendar() {
  const timeSlots = [
    { time: "09:00", status: "available" },
    { time: "10:00", status: "confirmed" },
    { time: "11:00", status: "pending" },
    { time: "12:00", status: "available" },
    { time: "13:00", status: "completed" },
    { time: "14:00", status: "cancelled" },
  ];
 
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-md">
      {timeSlots.map((slot) => (
        <button
          key={slot.time}
          className={`
            p-md border rounded-lg text-center
            ${
              slot.status === "available"
                ? "bg-green-50 border-[#4caf50] hover:bg-green-100"
                : ""
            }
            ${
              slot.status === "confirmed"
                ? "bg-blue-50 border-[#03a9f4] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "pending"
                ? "bg-orange-50 border-[#ff9800] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "completed"
                ? "bg-purple-50 border-[#9c27b0] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "cancelled"
                ? "bg-red-50 border-[#f44336] cursor-not-allowed"
                : ""
            }
          `}
          disabled={slot.status !== "available"}
        >
          <div className="font-semibold">{slot.time}</div>
          <div className="text-xs mt-xs capitalize">{slot.status}</div>
        </button>
      ))}
    </div>
  );
}

접근성 고려사항

WCAG 2.1 AA 준수

Cals의 Primary, Secondary, Accent, Booking Status 컬러는 흰색 배경에서 WCAG 2.1 AA 기준을 준수합니다:

배경텍스트대비율WCAG
white (#ffffff)Primary 500 (#e91e63)4.8:1✅ AA
white (#ffffff)Secondary 500 (#03a9f4)3.2:1✅ AA (큰 텍스트)
white (#ffffff)Accent 500 (#9c27b0)5.5:1✅ AA
white (#ffffff)booking-available (#4caf50)3.6:1✅ AA (큰 텍스트)
white (#ffffff)booking-pending (#ff9800)2.8:1⚠️ 아이콘만
white (#ffffff)booking-confirmed (#03a9f4)3.2:1✅ AA (큰 텍스트)
white (#ffffff)booking-cancelled (#f44336)4.0:1✅ AA (큰 텍스트)
white (#ffffff)booking-completed (#9c27b0)5.5:1✅ AA

색맹 사용자 고려

예약 상태는 색상 + 아이콘 + 텍스트를 함께 사용하여 전달하세요:

// ✅ Good: 색상 + 아이콘 + 텍스트
<Badge variant="booking-available">
  <CheckCircle size={16} className="mr-xs" />
  예약 가능
</Badge>
 
// ❌ Bad: 색상만 사용
<div className="bg-[#4caf50]"></div>

브랜드 가이드 준수

⚠️ 변경 금지

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

  • ❌ Primary (Pink) 색상 변경
  • ❌ Secondary (Blue) 색상 변경
  • ❌ Accent (Purple) 색상 변경
  • ❌ Booking Status Colors 변경 (5가지 모두)

예약 상태 컬러 일관성

예약 시스템에서는 반드시 다음 컬러를 사용하세요:

  • 예약 가능: 항상 Green (#4caf50)
  • 예약 대기: 항상 Orange (#ff9800)
  • 예약 확정: 항상 Blue (#03a9f4)
  • 예약 취소: 항상 Red (#f44336)
  • 예약 완료: 항상 Purple (#9c27b0)

다음 단계

Last updated on
Breakpoints (반응형 브레이크포인트)Dark Mode (다크 모드)