Foundations

색상, 타이포그래피, 간격, 모서리 등 디자인 토큰

Brand Colors

주요 브랜드 컬러. SCSS 변수와 CSS 커스텀 프로퍼티(--bs-*) 모두로 사용 가능.

Primary

$color-primary

#7C3AED

Secondary

$color-secondary

#64748B

Success

$color-success

#10B981

Danger

$color-danger

#EF4444

Warning

$color-warning

#F59E0B

Info

$color-info

#06B6D4

Gray Scale

중립 톤 9단계. 텍스트, 보더, 배경에 사용.

Gray 100

$color-gray-100

#F1F5F9

Gray 200

$color-gray-200

#E2E8F0

Gray 300

$color-gray-300

#CBD5E1

Gray 400

$color-gray-400

#94A3B8

Gray 500

$color-gray-500

#64748B

Gray 600

$color-gray-600

#475569

Gray 700

$color-gray-700

#334155

Gray 800

$color-gray-800

#1E293B

Gray 900

$color-gray-900

#0F172A

Typography Scale

폰트 크기 스케일. 유틸리티 클래스로 적용.

$font-size-xs0.75rem초소형 텍스트
$font-size-sm0.875rem소형 텍스트
$font-size-base1rem기본 텍스트
$font-size-lg1.125rem대형 텍스트
$font-size-xl1.25rem특대 텍스트
$font-size-2xl1.5rem제목 2
$font-size-3xl1.875rem제목 1

Border Radius

모서리 반경 토큰

-sm0.25rem
base0.5rem
-md0.75rem
-lg1rem
-full9999px

Headings

h1~h6 + 섹션 헤딩 변형

Heading 1 — 페이지 제목

Heading 2 — 섹션 제목

Heading 3 — 서브 제목

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>