# Semantic Colors

시멘틱 컬러는 임의로 수정하여 사용할 수 없으며 반드시 각 목적에 맞게 정의된 시멘틱 컬러를 사용해야 합니다.

---

Background

배경 또는 면적이 넓은 곳에 사용합니다.

Base

colors.gray30

Surface

colors.white

Elevated

colors.white

Disabled

colors.gray10

Surface Inverse

colors.gray800

Scrim

Fill

좁은 면적을 가진 요소의 배경에 사용합니다.

Primary

colors.gray150

Secondary

colors.gray30

Tertiary

colors.gray20

Disabled

colors.gray10

Primary Inverse

colors.gray970

Border

Input, Box 등의 외곽선에 사용합니다.

Primary

colors.gray50

Secondary

colors.gray80

Active

colors.gray550

Disabled

colors.gray50

Primary Inverse

colors.white

Content

Text와 Icon 등 Content 요소에 사용합니다.

Primary

colors.gray800

Secondary

colors.gray550

Tertiary

colors.gray400

Disabled

colors.gray150

Primary Inverse

colors.white

Quaternary

colors.gray200

Brand

브랜드를 나타내기 위해 강한 강조가 필요한 요소에 사용합니다.

Primary

colors.zigzag_pink500

Light

colors.zigzag_pink100

Disabled

colors.zigzag_pink200

Accent

브랜드 컬러 다음으로 강조가 필요한 요소에 사용합니다.

Primary

colors.blue500

Light

colors.blue50

Disabled

colors.blue200

State

긍정, 위험, 부정 등 특정 상태를 나타낼 때 사용합니다.

Positive

colors.green500

Positive Light

colors.green100

Positive Disabled

colors.green200

Warning

colors.orange400

Warning Light

colors.orange50

Warning Disabled

colors.orange150

Negative

colors.red400

Negative Light

colors.red50

Negative Disabled

colors.red100

Static

White

colors.white

Black

colors.black

Tab Focus

Button, Checkbox 등을 Tab 키를 이용해 Focus 했을 때 사용합니다.

colors.light_blue700

Graph

대시보드, 통계 등 그래프에 사용합니다.

Red Light

colors.red150

Red

colors.red400

Red Dark

colors.red700

Blue Light

colors.blue300

Blue

colors.blue500

Blue Dark

colors.blue700

Orange Light

colors.orange200

Orange

colors.orange400

Orange Dark

colors.orange600

Purple Light

colors.purple300

Purple

colors.purple500

Purple Dark

colors.purple700

Yellow Light

colors.yellow150

Yellow

colors.yellow300

Yellow Dark

colors.yellow600

Pink Light

colors.zigzag_pink_new200

Pink

colors.zigzag_pink_new400

Pink Dark

colors.zigzag_pink_new600

Green Light

colors.green300

Green

colors.green500

Green Dark

colors.green700

Sky Blue Light

colors.light_blue200

Sky Blue

colors.light_blue400

Sky Blue Dark

colors.light_blue700

```tsx
import styled from '@emotion/styled';
import { semantic_colors, BaseText } from '@croquiscom/pds';
export const Element = () => {
  return (
    <Wrapper>
      <BaseText color={semantic_colors.content.primary}>시멘틱 컬러</BaseText>
    </Wrapper>
  );
};
const Wrapper = styled.div`
  background-color: ${semantic_colors.brand.primary};
`;
```