# 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 ( 시멘틱 컬러 ); }; const Wrapper = styled.div` background-color: ${semantic_colors.brand.primary}; `; ```