색상

브랜드 색상 팔레트

Background

사용처

전체 배경색

HEX

#F0F2F5

RGB

240, 242, 245

HSL

210, 17%, 95%

Primary

사용처

주요 액션 버튼, 강조

HEX

#1a1a1a

RGB

26, 26, 26

HSL

240, 5.9%, 10%

Card

사용처

카드 배경

HEX

#FFFFFF

RGB

255, 255, 255

HSL

0, 0%, 100%

Border

사용처

테두리

HEX

#E5E7EB

RGB

229, 231, 235

HSL

240, 5.9%, 90%

Muted

사용처

비활성화 요소

HEX

#F3F4F6

RGB

243, 244, 246

HSL

240, 4.8%, 95.9%

Destructive

사용처

삭제, 경고

HEX

#EF4444

RGB

239, 68, 68

HSL

0, 84.2%, 60.2%

CSS Variables

프로젝트에서는 CSS Variables를 사용하여 색상을 관리합니다.

:root {
  --background: #F0F2F5;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --destructive: 0 84.2% 60.2%;
}

Tailwind에서 사용하기

Tailwind CSS 클래스로 쉽게 사용할 수 있습니다.

<div className="bg-background text-foreground">
  <div className="bg-card border-border">
    <button className="bg-primary text-primary-foreground">
      Click me
    </button>
  </div>
</div>