Skip to Content
FoundationsFoundationColors (색상)

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;
}

사용 사례

ShadeHex사용 사례
white#ffffff기본 배경색, 카드 배경
gray-50#fafafaSubtle 배경, Hover 상태
gray-100#f5f5f5Input 배경, Disabled 배경
gray-200#e5e5e5Border, Divider
gray-300#d4d4d4Input Border
gray-400#a3a3a3Placeholder Text
gray-500#737373Secondary Text
gray-600#525252Primary Text (light bg)
gray-700#404040Heading Text
gray-800#262626Strong Text
gray-900#171717High Contrast Text
black#000000강조 텍스트, 아이콘

Primary/Secondary/Accent Colors

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

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

Foundation은 기본 Primary/Secondary 색상을 제공하지 않습니다. 프로젝트에서 직접 정의해야 합니다.

커스터마이징 방법

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { foundationPreset } from "@vortex/ui-foundation/preset";
 
export default {
  presets: [foundationPreset],
  theme: {
    extend: {
      colors: {
        // Primary 색상 정의
        primary: {
          50: "#e3f2fd",
          100: "#bbdefb",
          200: "#90caf9",
          300: "#64b5f6",
          400: "#42a5f5",
          500: "#2196f3", // DEFAULT
          600: "#1e88e5",
          700: "#1976d2",
          800: "#1565c0",
          900: "#0d47a1",
          DEFAULT: "#2196f3",
          foreground: "#ffffff",
        },
        // Secondary 색상 정의
        secondary: {
          DEFAULT: "#6c757d",
          foreground: "#ffffff",
        },
        // Accent 색상 정의
        accent: {
          DEFAULT: "#ff9800",
          foreground: "#ffffff",
        },
      },
    },
  },
} satisfies Config;

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>
    </>
  );
}

다음 단계

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