Colors (색상)

Foundation의 색상 시스템은 Neutral Gray Scale을 중심으로 구성되어 있으며, 프로젝트 요구사항에 맞게 Primary, Secondary, Accent 색상을 자유롭게 커스터마이징할 수 있습니다.

색상 철학

Foundation은 특정 브랜드에 종속되지 않는 중립적인 색상 시스템을 제공합니다:

Neutral First: Gray Scale을 기본으로 제공
Customizable: Primary/Secondary/Accent는 프로젝트별로 정의
Accessibility: WCAG 2.1 AA 기준 색상 대비 보장
Consistency: 모든 컴포넌트가 동일한 색상 토큰 사용

Neutral Colors (Gray Scale)

Foundation은 50부터 900까지 10단계 Gray Scale을 제공합니다.

실제 토큰 값 (core.css)


@theme {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
}

사용 사례

Shade	Hex	사용 사례
white	#ffffff	기본 배경색, 카드 배경
gray-50	#fafafa	Subtle 배경, Hover 상태
gray-100	#f5f5f5	Input 배경, Disabled 배경
gray-200	#e5e5e5	Border, Divider
gray-300	#d4d4d4	Input Border
gray-400	#a3a3a3	Placeholder Text
gray-500	#737373	Secondary Text
gray-600	#525252	Primary Text (light bg)
gray-700	#404040	Heading Text
gray-800	#262626	Strong Text
gray-900	#171717	High Contrast Text
black	#000000	강조 텍스트, 아이콘

Primary/Secondary/Accent Colors

Foundation은 Primary, Secondary, Accent 색상을 커스터마이징 가능하도록 설계되었습니다.

기본값 (커스터마이징 전)

Foundation의 styles에는 기본 Primary/Secondary 토큰이 포함되어 있습니다. 패키지를 사용하기 위해 색상이나 Tailwind preset을 직접 정의할 필요는 없습니다.

커스터마이징 방법 (선택)

브랜드 색상을 변경하려면 @vortex/ui-foundation/styles 다음에 로드되는 앱 CSS에서 실제 토큰을 재정의하세요. 다음은 사용자 지정 색상의 예시이며 기본값은 아닙니다.


:root {
  --primary: #2196f3;
  --primary-foreground: #ffffff;
  --secondary: #6c757d;
  --secondary-foreground: #ffffff;
  --accent: #ff9800;
  --accent-foreground: #000000;
}

이 CSS 변수 변경에는 Tailwind가 필요하지 않습니다. 앱 자체 Tailwind v4 유틸리티도 작성하려면 선택적 앱 빌드 설정을 사용하세요. 자세한 내용은 설치 가이드를 참고하세요.

Material Design 3.0 Color System 활용

구글의 Material Theme Builder 를 사용하여 일관된 색상 팔레트를 생성할 수 있습니다.

사용 방법

CSS Variables로 사용


.my-component {
  background-color: var(--color-white);
  color: var(--color-gray-900);
  border-color: var(--color-gray-200);
}
 
.my-button {
  background-color: var(--color-primary-500);
  color: var(--color-primary-foreground);
}

Tailwind Utility Classes로 사용


<div className="bg-white text-gray-900 border-gray-200">
  <p className="text-gray-500">Secondary Text</p>
  <button className="bg-primary text-primary-foreground">Primary Button</button>
</div>

TypeScript/TSX에서 사용


import { Button } from "@vortex/ui-foundation";
 
export default function MyComponent() {
  return (
    <div className="p-6 bg-gray-50">
      <h1 className="text-2xl font-bold text-gray-900">Title</h1>
      <p className="text-gray-600">Description</p>
      <Button variant="primary">Primary Action</Button>
      <Button variant="secondary">Secondary Action</Button>
    </div>
  );
}

접근성 고려사항

WCAG 2.1 AA 준수

Foundation의 Neutral Colors는 WCAG 2.1 AA 기준을 준수합니다:

텍스트 대비 (일반 텍스트): 최소 4.5:1
텍스트 대비 (큰 텍스트): 최소 3:1
UI 요소 대비: 최소 3:1

권장 조합

배경	텍스트	대비율	WCAG
white (#ffffff)	gray-900 (#171717)	19.6:1	✅ AAA
white (#ffffff)	gray-700 (#404040)	10.4:1	✅ AAA
white (#ffffff)	gray-600 (#525252)	7.8:1	✅ AAA
white (#ffffff)	gray-500 (#737373)	4.7:1	✅ AA
gray-50 (#fafafa)	gray-900 (#171717)	18.8:1	✅ AAA
gray-100 (#f5f5f5)	gray-900 (#171717)	17.1:1	✅ AAA

색맹 사용자 고려

색상에만 의존하지 않기: 색상 외에 아이콘, 텍스트, 패턴으로 정보 전달
충분한 대비: Gray Scale 사용 시 최소 4.5:1 이상 대비 유지
테스트 도구: Stark , Accessibility Insights 사용

실전 예제

Card 컴포넌트


import { Card } from "@vortex/ui-foundation";
 
export default function ProductCard() {
  return (
    <Card className="bg-white border-gray-200">
      <div className="p-6">
        <h3 className="text-lg font-semibold text-gray-900">Product Title</h3>
        <p className="text-sm text-gray-500 mt-2">
          Product description goes here
        </p>
        <div className="mt-4 flex gap-2">
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
            Buy Now
          </button>
          <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md">
            Learn More
          </button>
        </div>
      </div>
    </Card>
  );
}

Alert 컴포넌트 (Semantic Colors)


export default function AlertExample() {
  return (
    <>
      {/* Success Alert */}
      <div className="p-4 bg-green-50 border-green-200 border rounded-md">
        <p className="text-green-800">Operation completed successfully</p>
      </div>
 
      {/* Error Alert */}
      <div className="p-4 bg-red-50 border-red-200 border rounded-md">
        <p className="text-red-800">An error occurred</p>
      </div>
 
      {/* Warning Alert */}
      <div className="p-4 bg-yellow-50 border-yellow-200 border rounded-md">
        <p className="text-yellow-800">Please review before proceeding</p>
      </div>
    </>
  );
}