Color

PAI Design 색상은 semantic role과 palette로 나뉘어요. 컴포넌트는 역할을 기준으로 색을 사용하고, palette는 그 역할을 만들 때 참고하는 원본 색상표로 사용해요.

Overview

PAI Design 색상은 2단계로 구성돼요.

Semantic Role

Semantic role은 색 자체보다 화면에서 맡는 역할을 기준으로 이름을 붙여요. 같은 브랜드 색이라도 주요 액션인지, 보조 강조인지, subtle 배경인지에 따라 다른 역할을 가질 수 있어요.

현재 PAI Design은 크게 아래 역할 묶음을 사용해요.

• color.bg.*, color.fg.*, color.border.*: 화면의 배경, 텍스트, 경계선을 나눠요.
• color.accent.*, color.neutral.*, color.neutral.inverse.*: 주요 액션, 중립 액션, 대비가 큰 bubble을 표현해요.
• color.danger.*, color.success.*, color.warning.*, color.border.focusRing: 상태, 피드백, 포커스 경계를 표현해요.

컴포넌트와 레시피에서는 palette 대신 semantic role을 먼저 사용해요. 그래야 브랜드 색이나 다크 모드 대비를 바꿔도 컴포넌트 코드를 다시 손대지 않아도 돼요.

기본 사용법

인터페이스를 구현할 때는 semantic role을 먼저 선택해요.

import { tokenVars } from "@pai-design/tokens";

const primaryFill = tokenVars["color.accent.fill"];
const surface = tokenVars["color.bg.surface"];

Palette 값이 직접 필요하다면 @pai-design/tokens에서 colorPalettes를 가져와 사용할 수 있어요.

import { colorPalettes } from "@pai-design/tokens";

const primaryBrand = colorPalettes.brand[500];
const surfaceNeutral = colorPalettes.neutral[100];

버튼, 배경, 보더처럼 인터페이스 역할이 이미 정해진 영역이라면 palette보다 semantic role을 먼저 사용해요.

예를 들어 Dialog처럼 떠 있는 표면은 color.bg.surface를, HelpBubble처럼 짧은 설명 bubble은 color.neutral.inverse.fill을 사용하는 식으로 역할을 나눠요.

사용하는 기준

• 버튼, 배경, 보더처럼 이미 역할이 정해진 UI에는 palette보다 semantic role을 먼저 사용해요.
• 주요 액션과 브랜드 강조에는 color.accent.*를 사용해요.
• secondary, outline, ghost처럼 중립적인 액션에는 color.neutral.*를 사용해요.
• Dialog 같은 표면에는 color.bg.*를, HelpBubble처럼 대비가 큰 bubble에는 color.neutral.inverse.*를 사용해요.
• 오류, 성공, 경고처럼 상태가 분명해야 하는 경우에는 color.danger.*, color.success.*, color.warning.*를 사용해요.

Color Palette

Palette는 semantic role을 만들 때 참고하는 원본 색상표예요. neutral과 chromatic scale을 단계별로 나눠두어, 각 역할이 어떤 색상군에서 왔는지 확인하기 쉽게 해요.

Brand

Brand는 PAI의 주요 액션과 브랜드 강조를 만드는 기준이에요. primary 계열 액션과 accent role이 이 scale을 바탕으로 만들어져요.

Neutral

Neutral은 화면의 배경, 텍스트, 보더, 중립 액션 계층을 만들 때 기준이 되는 scale이에요. 0은 가장 밝은 표면, 950은 가장 깊은 배경에 가까운 색이에요.

Blue

Blue는 브랜드와 별도로, 실제 파란색이 필요한 표현에 사용하는 scale이에요. 현재는 focus ring처럼 blue 계열 대비가 필요한 역할을 만들 때 참고해요.

Red

Red는 오류, 삭제, 되돌리기 어려운 액션처럼 위험도를 분명하게 보여줘야 할 때 기준이 되는 scale이에요.

Green

Green은 성공 상태와 완료 피드백을 표현할 때 기준이 되는 scale이에요.

Amber

Amber는 주의 상태나 경고 메시지처럼 시선을 모아야 하지만 위험으로 읽히면 안 되는 상황의 기준이에요.