iCignal 디자인 토큰

iCignal은 Vortex UI의 iCignal 브랜드 전용 디자인 시스템으로, iCignal 브랜드 가이드를 따르는 디자인 토큰을 제공합니다.

iCignal 특징

🎨 iCignal 브랜딩

iCignal은 Blue, Green, Orange 컬러를 사용한 고유한 브랜딩을 제공합니다:

• Primary (Blue): #2196f3 - 신뢰감과 안정성 표현
• Secondary (Green): #4caf50 - 성공과 성장 표현
• Accent (Orange): #ff9800 - 강조와 활력 표현
• Semantic Colors: 상태별 의미 있는 컬러 시스템

🔧 Foundation 상속

iCignal은 Foundation의 모든 디자인 토큰을 상속하고 확장합니다:

@import "@vortex/ui-foundation/theme";
 
@theme {
  /* iCignal 전용 컬러 추가 */
  --color-primary-500: #2196f3;
  --color-secondary-500: #4caf50;
  --color-accent-500: #ff9800;
}

📦 사용 사례

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

• ✅ iCignal 제품을 개발할 때
• ✅ iCignal 브랜드 가이드를 따라야 할 때
• ✅ iCignal 디자인 시스템을 사용할 때

디자인 토큰 카테고리

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

Colors

iCignal 브랜드 컬러 시스템

• Primary (Blue #2196f3)
• Secondary (Green #4caf50)
• Accent (Orange #ff9800)
• Semantic Colors

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-icignal

Tailwind 설정

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

CSS Import

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

컴포넌트 사용

import { Button } from "@vortex/ui-icignal";
 
export default function App() {
  return (
    <div className="p-md">
      <Button variant="primary">iCignal Primary</Button>
      <Button variant="secondary">iCignal Secondary</Button>
    </div>
  );
}

Foundation vs iCignal vs Cals

브랜드 가이드 준수

⚠️ 색상 변경 제한

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

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

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

✅ 허용되는 커스터마이징

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

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

다음 단계

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

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

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

• Foundation 디자인 토큰
• Cals 디자인 토큰