Roles

역할 색은 색에 기능적 역할(주요 동작 · 오류 · 정보 …)을 줘서 화면 전체의 일관성 · 명확성 · 접근성을 지킨다. 이름은 속성(Property) · 역할(Role) · 변형(Variant) · 상태(State) 순으로 짓는다.

Property

-fg (글자 · 아이콘)-bg (배경)-stroke (선)

Role

-layer-neutral-brand-critical-positive-warning-informative

Variant

-solid-weak-contrast-muted-subtle-inverted

State

-pressed

bgProperty

criticalRole

weakVariant

pressedState

역할 색 이름 규칙 — 속성 · 역할 · 변형 · 상태 순으로 붙인다

Property (속성)

Foreground

글자 · 아이콘처럼 앞에 놓이는 요소에 쓴다 — fg-. 채움(solid) 위의 흰 글자는 static-white 다.

Role (역할)

Brand

브랜드 요소를 바로 알아보게 하고, 화면에서 가장 중요한 동작을 강조한다. 값은 브랜드마다 다르다.

카드 청구서이번 달

결제하기눌림보류

포커스된 입력칸

라이트

카드 청구서이번 달

결제하기눌림보류

포커스된 입력칸

다크

브랜드 역할 — Desk. 화면에서 가장 중요한 동작과 브랜드 요소에 쓴다

fg-brand
fg-brand-contrast
bg-brand-solid
bg-brand-solid-pressed
bg-brand-weak
stroke-brand-solid
stroke-focus-ring

연차 신청대기

승인눌림보류

포커스된 입력칸

라이트

연차 신청대기

승인눌림보류

포커스된 입력칸

다크

브랜드 역할 — HR. 화면에서 가장 중요한 동작과 브랜드 요소에 쓴다

fg-brand
fg-brand-contrast
bg-brand-solid
bg-brand-solid-pressed
bg-brand-weak
stroke-brand-solid
stroke-focus-ring

Neutral

일반 콘텐츠에 쓰는 기본 색이다. 가장 눈에 띄지는 않지만 읽혀야 하는 요소에 쓴다.

약한 배경(bg-neutral-weak)과 비활성(bg-disabled)은 라이트에서 회색 바닥과 같은 색이라 흰 표면 위에만 둔다. 회색 바닥 위에 바로 놓이는 칩 · 세그먼트 트랙은 투명한 bg-neutral-weak-alpha 로 칠한다 — Elevation 의 "바닥 위의 채움".

전체식비카페

점심 · 지어낸분식

세 명이 나눠 냈어요

식비 · 카드 · 오늘 12:40

검색어를 입력하세요

저장저장했어요

라이트

전체식비카페

점심 · 지어낸분식

세 명이 나눠 냈어요

식비 · 카드 · 오늘 12:40

검색어를 입력하세요

저장저장했어요

다크

중립 역할 — 일반 콘텐츠. 글자는 neutral · muted · subtle 세 단계로 위계를 준다

fg-neutral
fg-neutral-muted
fg-neutral-subtle
fg-placeholder
fg-disabled
bg-neutral-weak
bg-neutral-weak-alpha
bg-disabled
bg-neutral-inverted
fg-neutral-inverted

Positive

작업 성공 · 확인 · 긍정적인 상태를 나타낸다.

완료완료+1,200,000원

이체를 마쳤어요 · 5.72:1

라이트

완료완료+1,200,000원

이체를 마쳤어요 · 7.78:1

다크

positive 역할 — 채움(solid)은 흰 글자, 약한 배경(weak)은 contrast 글자

fg-positive
fg-positive-contrast
bg-positive-solid
bg-positive-solid-pressed
bg-positive-weak
bg-positive-weak-pressed
stroke-positive-solid

Warning

주의가 필요한 경고나 안내를 전한다.

주의주의마감 D-1

예산의 90% 를 썼어요 · 5.70:1

라이트

주의주의마감 D-1

예산의 90% 를 썼어요 · 7.84:1

다크

warning 역할 — 채움(solid)은 흰 글자, 약한 배경(weak)은 contrast 글자

fg-warning
fg-warning-contrast
bg-warning-solid
bg-warning-solid-pressed
bg-warning-weak
bg-warning-weak-pressed
stroke-warning-solid

Critical

오류 · 문제 · 되돌릴 수 없는 동작을 알린다. 사용자의 주의를 바로 끈다.

실패실패−32,400원

결제에 실패했어요 · 5.65:1

1234-5678카드 번호가 맞지 않아요

라이트

실패실패−32,400원

결제에 실패했어요 · 7.79:1

1234-5678카드 번호가 맞지 않아요

다크

critical 역할 — 채움(solid)은 흰 글자, 약한 배경(weak)은 contrast 글자

fg-critical
fg-critical-contrast
bg-critical-solid
bg-critical-solid-pressed
bg-critical-weak
bg-critical-weak-pressed
stroke-critical-solid

Informative

유용한 정보를 주거나 상태를 설명한다.

안내안내새 기능

10월부터 청구일이 바뀌어요 · 5.67:1

라이트

안내안내새 기능

10월부터 청구일이 바뀌어요 · 7.80:1

다크

informative 역할 — 채움(solid)은 흰 글자, 약한 배경(weak)은 contrast 글자

fg-informative
fg-informative-contrast
bg-informative-solid
bg-informative-solid-pressed
bg-informative-weak
bg-informative-weak-pressed
stroke-informative-solid

Layer

레이어 색은 화면의 깊이와 층을 나타낸다. 바닥(basement) 위에 기본 표면(default)이, 그 위에 메뉴 · 팝오버 같은 뜨는 표면(floating)이 놓인다.

basement

default

default · 눌림

default

floating

floating · 눌림

라이트

basement

default

default · 눌림

default

floating

floating · 눌림

다크

레이어 — 바닥(basement) 위에 기본 표면(default), 그 위에 뜨는 표면(floating)

bg-layer-basement
bg-layer-default
bg-layer-default-pressed
bg-layer-floating
bg-layer-floating-pressed

Variant

같은 역할이라도 강조 정도에 따라 변형을 고른다 — 채움(solid)은 강하게, 약한 배경(weak)은 부드럽게. 약한 배경 위 글자는 contrast 를 써서 4.5:1 을 지킨다. 글자의 위계는 muted · subtle, 반전 배경 위 글자는 inverted 다.

State

누를 수 있는 요소는 누르는 동안 pressed 값으로 바뀐다. 웹의 hover 도 같은 값을 쓴다.

목록 줄눌림

브랜드 채움눌림

약한 오류눌림

라이트

목록 줄눌림

브랜드 채움눌림

약한 오류눌림

다크

상태 — 누르는 동안 한 단계 짙은 pressed 값으로 바뀐다(웹 hover 도 같은 값)

*-pressed

Tokens

값 옆의 이름은 역할이 가리키는 팔레트 단계다. 모드마다 다른 단계를 가리킬 수 있다 — bg-layer-default 는 라이트 gray-00, 다크 gray-100 이다.

Foreground

토큰	라이트	다크	옛 이름
`fg-neutral`	`#1A1F2E`gray-1000	`#F5F6FA`gray-1000	text-primary
`fg-neutral-muted`	`#535866`gray-800	`#B7BDCC`gray-800	text-secondary
`fg-neutral-subtle`	`#62697A`gray-700	`#A2A8B7`gray-700	text-tertiary
`fg-neutral-inverted`	`#FFFFFF`gray-00	`#242938`gray-100	—
`fg-placeholder`	`#767C8B`gray-600	`#838997`gray-600	—
`fg-disabled`	`#8A91A0`gray-500	`#838997`gray-600	text-disabled
`static-white`	`#FFFFFF`	`#FFFFFF`	text-on-accent
`fg-critical`	`#D72323`red-700	`#FF8477`red-800	error · error-light
`fg-positive`	`#167F3F`green-700	`#25C062`green-800	success · success-light
`fg-warning`	`#BE490D`orange-700	`#FF8758`orange-800	warning · warning-light
`fg-informative`	`#1D6EC9`blue-700	`#69ABFF`blue-800	info · info-light
`fg-critical-contrast`	`#C01016`red-800	`#FFBCB3`red-900	—
`fg-positive-contrast`	`#026E33`green-800	`#AED6B6`green-900	—
`fg-warning-contrast`	`#A53E0A`orange-800	`#F9BFA9`orange-900	—
`fg-informative-contrast`	`#0F5FB3`blue-800	`#ACCEFB`blue-900	—
`fg-positive-inverted`	`#25C062`green-800	`#167F3F`green-700	—
`fg-critical-inverted`	`#FF8477`red-800	`#D72323`red-700	—

Background

토큰	라이트	다크	옛 이름
`bg-layer-basement`	`#F5F6FA`gray-200	`#1A1F2E`gray-00	bg-page
`bg-layer-default`	`#FFFFFF`gray-00	`#242938`gray-100	surface-default
`bg-layer-default-pressed`	`#F7F8FD`gray-100	`#353B4D`gray-300	—
`bg-layer-floating`	`#FFFFFF`gray-00	`#2D3346`gray-200	—
`bg-layer-floating-pressed`	`#F7F8FD`gray-100	`#353B4D`gray-300	—
`bg-neutral-weak`	`#F5F6FA`gray-200	`#353B4D`gray-300	surface-input
`bg-neutral-weak-pressed`	`#EDEFF3`gray-300	`#404757`gray-400	—
`bg-neutral-weak-alpha`	`#0000000C`	`#FFFFFF20`	—
`bg-neutral-weak-alpha-pressed`	`#00000010`	`#FFFFFF2E`	—
`bg-neutral-inverted`	`#1A1F2E`gray-1000	`#F5F6FA`gray-1000	—
`bg-neutral-inverted-pressed`	`#535866`gray-800	`#B7BDCC`gray-800	—
`bg-disabled`	`#F5F6FA`gray-200	`#353B4D`gray-300	—
`bg-critical-solid`	`#D72323`red-700	`#CC0E17`red-600	error
`bg-critical-solid-pressed`	`#C01016`red-800	`#D82424`red-700	—
`bg-critical-weak`	`#FFEFEC`red-100	`#532722`red-200	—
`bg-critical-weak-pressed`	`#FFDEDA`red-200	`#722722`red-300	—
`bg-positive-solid`	`#167F3F`green-700	`#117539`green-600	success
`bg-positive-solid-pressed`	`#026E33`green-800	`#198140`green-700	—
`bg-positive-weak`	`#EAF5EC`green-100	`#223927`green-200	—
`bg-positive-weak-pressed`	`#D8EADB`green-200	`#20482B`green-300	—
`bg-warning-solid`	`#BE490D`orange-700	`#B04209`orange-600	warning
`bg-warning-solid-pressed`	`#A53E0A`orange-800	`#BF4A10`orange-700	—
`bg-warning-weak`	`#FFEFE8`orange-100	`#4B2B1F`orange-200	—
`bg-warning-weak-pressed`	`#FAE0D5`orange-200	`#65321D`orange-300	—
`bg-informative-solid`	`#1D6EC9`blue-700	`#0F65BF`blue-600	info
`bg-informative-solid-pressed`	`#0F5FB3`blue-800	`#1F70CB`blue-700	—
`bg-informative-weak`	`#EAF3FE`blue-100	`#21344D`blue-200	—
`bg-informative-weak-pressed`	`#D7E6FB`blue-200	`#204069`blue-300	—

Stroke

토큰	라이트	다크	옛 이름
`stroke-neutral-subtle`	`#EDEFF3`gray-300	`#353B4D`gray-300	—
`stroke-neutral-weak`	`#E5E8EF`gray-400	`#404757`gray-400	border-default
`stroke-neutral-solid`	`#767C8B`gray-600	`#838997`gray-600	border-strong
`stroke-neutral-contrast`	`#1A1F2E`gray-1000	`#F5F6FA`gray-1000	—
`stroke-neutral-overlay`	`#0000000C`	`#FFFFFF0D`	—
`stroke-critical-solid`	`#D72323`red-700	`#FF8477`red-800	error
`stroke-positive-solid`	`#167F3F`green-700	`#25C062`green-800	success
`stroke-warning-solid`	`#BE490D`orange-700	`#FF8758`orange-800	warning
`stroke-informative-solid`	`#1D6EC9`blue-700	`#69ABFF`blue-800	info
`stroke-critical-weak`	`#FEC4BC`red-300	`#93231F`red-400	—
`stroke-positive-weak`	`#BBDAC1`green-300	`#1A582F`green-400	—
`stroke-warning-weak`	`#F5C7B6`orange-300	`#833615`orange-400	—
`stroke-informative-weak`	`#B9D4F6`blue-300	`#1C4E8A`blue-400	—

Brand

브랜드 파일(DESIGN.desk.md · DESIGN.hr.md)에 같은 이름으로 다른 값이 있다.

토큰	Desk 라이트	Desk 다크	HR 라이트	HR 다크
`fg-brand`	`#0147AD`brand-600	`#7AA9F6`brand-900	`#075B3C`brand-600	`#2ABE84`brand-900
`fg-brand-contrast`	`#013D96`brand-700	`#7AA9F6`brand-900	`#064F33`brand-700	`#2ABE84`brand-900
`fg-brand-inverted`	`#7AA9F6`brand-900	`#0147AD`brand-600	`#2ABE84`brand-900	`#075B3C`brand-600
`bg-brand-solid`	`#0147AD`brand-600	`#1049A4`brand-500	`#075B3C`brand-600	`#1B583E`brand-500
`bg-brand-solid-pressed`	`#013D96`brand-700	`#1A5AC2`brand-700	`#064F33`brand-700	`#0C6C49`brand-700
`bg-brand-weak`	`#E8F1FE`brand-100	`#20314E`brand-200	`#E8F3EC`brand-100	`#21352B`brand-200
`bg-brand-weak-pressed`	`#D7E5FC`brand-200	`#1F3A69`brand-300	`#D6E8DE`brand-200	`#214132`brand-300
`stroke-focus-ring`	`#0147AD`brand-600	`#7AA9F6`brand-900	`#075B3C`brand-600	`#2ABE84`brand-900
`stroke-brand-solid`	`#0147AD`brand-600	`#7AA9F6`brand-900	`#075B3C`brand-600	`#2ABE84`brand-900
`stroke-brand-weak`	`#79A6F3`brand-300	`#4C83DC`brand-800	`#77B193`brand-300	`#1D9567`brand-800

옛 이름(text-primary · surface-default · border-default · success …)은 역할 색을 가리키는 별칭으로 남아 있다 — 값을 따로 갖지 않는다. 컴포넌트 스펙을 새 이름으로 옮기고 나면 지운다. SEED 의 bg.neutral-solid · bg.transparent-* · stroke.neutral-muted 같은 역할은 groo 화면에 아직 쓰는 자리가 없어 두지 않았다.

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.

Property (속성)제목 링크 복사

Background제목 링크 복사

Foreground제목 링크 복사

Stroke제목 링크 복사

Role (역할)제목 링크 복사

Brand제목 링크 복사

Neutral제목 링크 복사

Positive제목 링크 복사

Warning제목 링크 복사

Critical제목 링크 복사

Informative제목 링크 복사

Layer제목 링크 복사

Variant제목 링크 복사

State제목 링크 복사

Tokens제목 링크 복사

Foreground제목 링크 복사

Background제목 링크 복사

Stroke제목 링크 복사

Brand제목 링크 복사

이 페이지

Property (속성)

Background

Foreground

Stroke

Role (역할)

Brand

Neutral

Positive

Warning

Critical

Informative

Layer

Variant

State

Tokens

Foreground

Background

Stroke

Brand