• Color는 명확한 커뮤니케이션을 위해 Hex Code보다는 컬러명을 사용합니다.
• WCAG 2.0 기반으로 컬러 별 10단계(50-900)를 지원하며, 각 컬러 별 주요 색상은 500입니다.
• 색상 사용을 제한함으로서 사용자 경험에 통일성과 일관성을 고려하고자합니다. 정의되지 않은 새로운 컬러는 재사용성이 높을 경우에만 담당자와 논의하여 컬러파레트에 추가하여 관리합니다.

서비스의 브랜드 컬러를 대표하는 G마켓 서비스의 메인 컬러입니다. Main Color와 Semantic Color는 코어 컬러로 모든 G마켓 서비스 및 경험에서 기본 작업 색상으로 사용되는 대표 색상입니다.

G마켓 브랜드를 대표하는 색상으로, 포인트 및 액션 컴포넌트 색상으로 사용합니다.

Green-900

#013600

Green-800

#015F00

Green-700

#018600

Green-600

#01A900

Green-500

#00C400

Green-400

#11D70D

Green-300

#39E532

Green-200

#6CEF64

Green-100

#A5F4A0

Green-50

#E5FCE3

Semantic Color는 UI요소들의 기능 또는 정보 유형에 따라 의미를 강조하여 전달하는 등의 목적으로 보조적으로 사용하는 컬러입니다. 사용되는 목적과 UI에 적용되는 상황에 따라 일관된 색상 사용은 인지 부하를 낮게 유지하고 통합된 사용자 경험을 제공합니다. UI에 적용되는 상황에 맞는 의미를 담은 명칭으로 관리하며, 여러 상황에 대해서는 컬러 팔레트와 함께 사용합니다.

UI요소들의 상황 별 의미를 전달하는 색상으로 사용자가 상태를 식별하고, 다음 단계를 이해하는 데 도움이 되는 컬러입니다.

Green-900

#013600

Green-800

#015F00

Green-700

#018600

Green-600

#01A900

Green-500

#00C400

Green-400

#11D70D

Green-300

#39E532

Green-200

#6CEF64

Green-100

#A5F4A0

Green-50

#E5FCE3

Blue-900

#072182

Blue-800

#0231A6

Blue-700

#0048C8

Blue-600

#0062E5

Blue-500

#067DFD

Blue-400

#329CFF

Blue-300

#68BBFF

Blue-200

#A7D9FF

Blue-100

#CBE8FF

Blue-50

#EEF7FF

Red-900

#7D0800

Red-800

#9F0A01

Red-700

#BF0A03

Red-600

#DA120D

Red-500

#EF2B2A

Red-400

#FF5454

Red-300

#FF8585

Red-200

#FFBFBF

Red-100

#FFDADB

Red-50

#FFF5F5

Orange-900

#5E2700

Orange-800

#882400

Orange-700

#B43200

Orange-600

#DA4000

Orange-500

#F9560E

Orange-400

#FF7638

Orange-300

#FF9E70

Orange-200

#FFCCB2

Orange-100

#FFE1D3

Orange-50

#FFF6F2

CTA컬러는 버튼, 뱃지 등 구매 주요 동선 색상에 사용하여 ‘구매’와 관련된 경험을 화면에서 이어나갈 수 있도록 돕습니다.

무채색 색상으로 Black에서부터 White까지 이루어지며 색상이 적용되는 UI의 특정 부분에 따라 구분하여 사용하는 컬러입니다.

텍스트 위계에 따라 CTA, Primary, Secondary, Tertiary 컬러로 사용하며 각 화면 구성 요소에 따라 이외의 컬러를 사용합니다.

Table of Figma Properties

Name	Usage	Token	Hex	Color
Black	상품명 및 가격(숫자 한정, 원 별도) 텍스트 색상	text-cto	#000000
Gray-900	제목(Title,Sub Title) 및 본문(Body) 텍스트 색상	text-primary	#222222
Gray-700	본문의 하위 위계인 서브 본문(Small) 텍스트 색상	text-secondary	#616161
Gray-500	설명 및 비활성화 텍스트 색상 (예시: 할인 전 가격, 품절)	text-tertiary	#9E9E9E
Gray-400	법적 규제 텍스트 색상 (예시: 푸터 저작관, 약관)	text-caption	#BDBDBD

배경 색상에만 사용하며 테두리 색상이나 텍스트 색상에는 사용하지 않습니다.

Table of Figma Properties

Name	Usage	Token	Hex	Color
White	전체 앱의 기본 배경 색상	bg-white	#FFFFFF
Gray-100	앱의 두번째 기본 배경 색상	bg-off-white	#F5F5F5
Gray-200	디바이더 라인에 사용하는 색상	bg-divider	#EEEEEE
Gray-50	목록과 유사한 구성 항목의 구분에 대한 배경 색상 (예시 : 푸터, 카드UI 내 배경)	bg-card-ui	#FAFAFA

영역을 구분하는 테두리 색상으로 사용하며, 배경색이나 텍스트 색상에는 사용하지 않습니다.

Table of Figma Properties

Name	Usage	Token	Hex	Color
Gray-900	활성화 시 사용하는 테두리 색상 (예시 : 폼 필드)	border-acitve	#222222
Gray-300	콘텐츠 background의 테두리 색상	border-tertiary	#E0E0E0
Gray-400	secondary버튼의 테두리 색상	border-secondary	#BDBDBD
White	배경에 thumbnail이 있을 경우 사용하는 테두리 색상	border-white	#FFFFFF

Service Brand Color는 G마켓과 동일한 위계를 지닌 브랜드 색상으로 사용합니다. 예시로는 타 서비스로 확장 가능성을 지닌 스마일 시리즈(스마일페이, 스마일카드, 스마일스탬프, 클럽 비즈, 캐치)와 스마일클럽이 있습니다.

#282864

Smile

스마일배송,페이,카드 브랜드 색상

#313191

Smilepay Sub

스마일페이 브랜드 배경 색상

#5939DA

Smilestamp

스마일스탬프 브랜드 색상

#102775

SmileClub Biz

스마일클럽 비즈 브랜드 색상

#280082

Catch

캐치 브랜드 색상

#FFD200

Smile

스마일브랜드 기본 색상

#BC9A6E

Smileclub-300

스마일클럽 밝은 버전의 색상

#A78353

Smileclub-400

스마일클럽 쿠폰 등 어두운 버전의 색상

#966E46

Smileclub-500

스마일클럽 브랜드 텍스트 색상

Sub Color는 다양한 카테고리 섹션 컬러로 State color색상을 포함하여 카테고리에 따라 주요 컬러를 다양하게 제공합니다.

Yellow-900

#592500

Yellow-800

#864300

Yellow-700

#AC6600

Yellow-600

#CF8B00

Yellow-500

#EAAD06

Yellow-400

#FFCC1F

Yellow-300

#FFE65C

Yellow-200

#FFF6A3

Yellow-100

#FDF8CB

Yellow-50

#FFFCE5

Teal-900

#0A3545

Teal-800

#125A6F

Teal-700

#1D7F97

Teal-600

#2DA2B8

Teal-500

#43BED0

Teal-400

#62D4E2

Teal-300

#89E5EE

Teal-200

#B8F0F6

Teal-100

#D1F5F8

Teal-50

#EAF9FA

Indigo-900

#2D2587

Indigo-800

#3931A8

Indigo-700

#4741C7

Indigo-600

#5855E2

Indigo-500

#706FF7

Indigo-400

#8A8AFF

Indigo-300

#ABABFF

Indigo-200

#D2D2FF

Indigo-100

#E4E4FF

Indigo-50

#F5F5FF

Purple-900

#37188C

Purple-800

#4C1FA7

Purple-700

#662AC0

Purple-600

#823AD5

Purple-500

#9D50E5

Purple-400

#B66EF0

Purple-300

#CE95F8

Purple-200

#E5C4FC

Purple-100

#F0DCFE

Purple-50

#FBF5FF

Pink-900

#64009A

Pink-800

#9C00A3

Pink-700

#BD00B8

Pink-600

#D300BE

Pink-500

#E413C3

Pink-400

#EF39CC

Pink-300

#F76DD9

Pink-200

#FCADE9

Pink-100

#FECFF2

Pink-50

#FFF2FC

이전글

Notation

다음글

Iconography