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

다크 모드 지원 현황

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

설치 및 사용

설치

npm install @vortex/ui-icignal

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

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

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

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

CSS Import

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

컴포넌트 사용

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

Foundation vs iCignal vs Cals

브랜드 가이드 준수

⚠️ 색상 변경 제한

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

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

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

✅ 허용되는 커스터마이징

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

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

다음 단계

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

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

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

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