Colors (색상)
iCignal의 색상 시스템은 Blue, Green, Orange 브랜드 컬러를 중심으로 구성되어 있으며, Foundation의 Neutral Colors를 상속합니다.
색상 철학
iCignal의 색상은 다음 원칙을 따릅니다:
- Brand First: iCignal 브랜드 컬러 우선 사용
- Trust & Growth: 신뢰감(Blue)과 성장(Green) 표현
- Energy: 활력과 강조(Orange)
- Consistency: 모든 iCignal 제품에서 동일한 컬러 사용
iCignal Primary Color (Blue)
iCignal의 Primary 컬러는 Blue (#2196f3) 입니다.
실제 토큰 값 (theme.css)
@theme {
/* iCignal Primary Color */
--color-primary-50: #e3f2fd;
--color-primary-100: #bbdefb;
--color-primary-200: #90caf9;
--color-primary-300: #64b5f6;
--color-primary-400: #42a5f5;
--color-primary-500: #2196f3;
--color-primary-600: #1e88e5;
--color-primary-700: #1976d2;
--color-primary-800: #1565c0;
--color-primary-900: #0d47a1;
}사용 가이드
| Shade | Hex | 사용 사례 |
|---|---|---|
| 50 | #e3f2fd | 배경색 (Subtle) |
| 100 | #bbdefb | Hover 배경 |
| 200 | #90caf9 | Disabled 상태 |
| 300 | #64b5f6 | Border |
| 400 | #42a5f5 | Hover 상태 |
| 500 | #2196f3 | Primary (기본) |
| 600 | #1e88e5 | Active 상태 |
| 700 | #1976d2 | Pressed 상태 |
| 800 | #1565c0 | Strong 강조 |
| 900 | #0d47a1 | High Contrast |
iCignal Secondary Color (Green)
iCignal의 Secondary 컬러는 Green (#4caf50) 입니다.
실제 토큰 값 (theme.css)
@theme {
/* iCignal Secondary Color */
--color-secondary-50: #e8f5e9;
--color-secondary-100: #c8e6c9;
--color-secondary-200: #a5d6a7;
--color-secondary-300: #81c784;
--color-secondary-400: #66bb6a;
--color-secondary-500: #4caf50;
--color-secondary-600: #43a047;
--color-secondary-700: #388e3c;
--color-secondary-800: #2e7d32;
--color-secondary-900: #1b5e20;
}사용 가이드
| Shade | Hex | 사용 사례 |
|---|---|---|
| 500 | #4caf50 | Secondary Button, Success 상태 |
| 600 | #43a047 | Hover 상태 |
| 700 | #388e3c | Active 상태 |
iCignal Accent Color (Orange)
iCignal의 Accent 컬러는 Orange (#ff9800) 입니다.
실제 토큰 값 (theme.css)
@theme {
/* iCignal Accent Color */
--color-accent-50: #fff3e0;
--color-accent-500: #ff9800;
--color-accent-900: #e65100;
}사용 가이드
| Shade | Hex | 사용 사례 |
|---|---|---|
| 50 | #fff3e0 | Warning 배경 |
| 500 | #ff9800 | Accent Button, Warning 상태 |
| 900 | #e65100 | Strong Warning |
Semantic Colors (상태별 컬러)
iCignal은 상태별 의미를 가진 Semantic Colors를 제공합니다.
실제 토큰 값 (theme.css)
@theme {
/* iCignal Semantic Colors */
--color-success: #4caf50;
--color-warning: #ff9800;
--color-error: #f44336;
--color-info: #2196f3;
}사용 가이드
| 색상 | Hex | 사용 사례 |
|---|---|---|
| success | #4caf50 | 성공 메시지, 완료 상태 |
| warning | #ff9800 | 경고 메시지, 주의 사항 |
| error | #f44336 | 에러 메시지, 실패 상태 |
| info | #2196f3 | 정보 메시지, 안내 |
Text Colors (텍스트 컬러)
실제 토큰 값 (theme.css)
@theme {
/* iCignal Text Colors */
--color-text-primary: #212121;
--color-text-secondary: #757575;
--color-text-disabled: #bdbdbd;
}사용 가이드
| 토큰 | Hex | 사용 사례 | Tailwind Class |
|---|---|---|---|
| primary | #212121 | 제목, 본문 텍스트 | text-text-primary |
| secondary | #757575 | 부가 설명, Caption | text-text-secondary |
| disabled | #bdbdbd | Disabled 상태 텍스트 | text-text-disabled |
Background Colors (배경 컬러)
실제 토큰 값 (theme.css)
@theme {
/* iCignal Background */
--color-bg-default: #ffffff;
--color-bg-paper: #fafafa;
--color-bg-subtle: #f5f5f5;
}사용 가이드
| 토큰 | Hex | 사용 사례 | Tailwind Class |
|---|---|---|---|
| default | #ffffff | 기본 배경색 | bg-bg-default |
| paper | #fafafa | Card, Dialog 배경 | bg-bg-paper |
| subtle | #f5f5f5 | Subtle 배경 | bg-bg-subtle |
Border Colors (테두리 컬러)
실제 토큰 값 (theme.css)
@theme {
/* iCignal Border */
--color-border-default: #e0e0e0;
--color-border-subtle: #eeeeee;
}사용 가이드
| 토큰 | Hex | 사용 사례 | Tailwind Class |
|---|---|---|---|
| default | #e0e0e0 | 기본 Border | border-border-default |
| subtle | #eeeeee | Subtle Border | border-border-subtle |
사용 방법
CSS Variables로 사용
.button-primary {
background-color: var(--color-primary-500);
color: white;
}
.button-primary:hover {
background-color: var(--color-primary-600);
}Tailwind Utility Classes로 사용
<button className="bg-primary-500 hover:bg-primary-600 text-white">
iCignal Primary Button
</button>TypeScript/TSX에서 사용
import { Button } from "@vortex/ui-icignal";
export default function Example() {
return (
<div className="p-md bg-bg-default">
<h1 className="text-2xl font-bold text-text-primary">iCignal Title</h1>
<p className="text-text-secondary">iCignal description</p>
<div className="mt-md flex gap-md">
<Button variant="primary">Primary (Blue)</Button>
<Button variant="secondary">Secondary (Green)</Button>
<Button variant="outline">Outline</Button>
</div>
</div>
);
}Semantic Color 사용 예제
Alert 컴포넌트
import { CheckCircle, AlertTriangle, XCircle, Info } from "lucide-react";
export default function Alerts() {
return (
<div className="space-y-md">
{/* Success */}
<div className="flex items-start gap-md p-md bg-green-50 border-l-4 border-[#4caf50] rounded">
<CheckCircle size={20} className="text-[#4caf50] mt-xs" />
<p className="text-gray-800">Operation completed successfully</p>
</div>
{/* Info */}
<div className="flex items-start gap-md p-md bg-blue-50 border-l-4 border-[#2196f3] rounded">
<Info size={20} className="text-[#2196f3] mt-xs" />
<p className="text-gray-800">Information message</p>
</div>
{/* Warning */}
<div className="flex items-start gap-md p-md bg-orange-50 border-l-4 border-[#ff9800] rounded">
<AlertTriangle size={20} className="text-[#ff9800] mt-xs" />
<p className="text-gray-800">Warning message</p>
</div>
{/* Error */}
<div className="flex items-start gap-md p-md bg-red-50 border-l-4 border-[#f44336] rounded">
<XCircle size={20} className="text-[#f44336] mt-xs" />
<p className="text-gray-800">Error message</p>
</div>
</div>
);
}접근성 고려사항
WCAG 2.1 AA 준수
iCignal의 Primary, Secondary, Accent 컬러는 흰색 배경에서 WCAG 2.1 AA 기준을 준수합니다:
| 배경 | 텍스트 | 대비율 | WCAG |
|---|---|---|---|
| white (#ffffff) | Primary 500 (#2196f3) | 4.6:1 | ✅ AA |
| white (#ffffff) | Secondary 500 (#4caf50) | 3.6:1 | ✅ AA (큰 텍스트) |
| white (#ffffff) | Accent 500 (#ff9800) | 2.8:1 | ⚠️ AAA (아이콘만) |
| white (#ffffff) | text-primary (#212121) | 16.1:1 | ✅ AAA |
| white (#ffffff) | text-secondary (#757575) | 4.7:1 | ✅ AA |
권장 조합
// ✅ Good: Primary 500 + white (4.6:1)
<button className="bg-primary-500 text-white">Button</button>
// ✅ Good: Secondary 700 + white (더 높은 대비)
<button className="bg-secondary-700 text-white">Button</button>
// ⚠️ Caution: Accent 500 + white (2.8:1, 아이콘/큰 텍스트만)
<div className="bg-accent-500 text-white text-2xl font-bold">Large Text</div>브랜드 가이드 준수
⚠️ 변경 금지
iCignal 브랜드 가이드를 준수해야 하므로 다음 변경은 금지됩니다:
- ❌ Primary (Blue) 색상 변경
- ❌ Secondary (Green) 색상 변경
- ❌ Accent (Orange) 색상 변경
- ❌ Semantic Colors 변경
✅ 허용되는 변경
다음 컬러는 프로젝트 요구사항에 맞게 조정 가능합니다:
- ✅ Background 컬러 (bg-paper, bg-subtle)
- ✅ Border 컬러 미세 조정
다음 단계
Last updated on