Colors

이 콘텐츠는 아직 번역되지 않았습니다.

Screens and components use the semantic colors. The component colors belong to one component each, on every platform. The raw palette is not listed: nothing outside the token files refers to it.

Semantic colors

Background

Token	Light	Dark	Use
`background.base`	`#f5f5f7`	`#0e0e11`	Page background. Slightly off white, so a white surface on it reads as raised.
`background.surface`	`#ffffff`	`#18181c`	Cards and panels on top of the page.
`background.raised`	`#ffffff`	`#222228`	Surfaces that float above the page: menus, dialogs. Lighter than the page in dark mode, where shadows barely show.
`background.disabled`	`#ececf0`	`#2c2c33`	Fill of a disabled control.

Text

Token	Light	Dark	Use
`text.primary`	`#18181c`	`#f5f5f7`
`text.secondary`	`#5c5c66`	`#a9a9b4`	Supporting text. Still readable: 4.5:1 on every background.
`text.tertiary`	`#6e6e79`	`#84848f`	Placeholders, timestamps and marks such as chevrons. 4.5:1 on the page and on a surface; not for raised surfaces.
`text.disabled`	`#a9a9b4`	`#5c5c66`	Text of a disabled control. Exempt from contrast rules, and meant to look unavailable.
`text.accent`	`#4f46e5`	`#a5b4fc`	Links and accent-colored text on a neutral background.
`text.on-accent`	`#ffffff`	`#ffffff`	Text on an accent-colored surface.
`text.on-danger`	`#ffffff`	`#ffffff`	Text on a danger-colored surface.

Border

Token	Light	Dark	Use
`border.default`	`#e2e2e8`	`#2c2c33`	Dividers and card outlines. Decorative, so low contrast is fine.
`border.control`	`#c9c9d1`	`#44444c`	Outline of a control that its label already identifies, such as a secondary button. Decorative, so it does not have to hold 3:1.
`border.strong`	`#84848f`	`#84848f`	Outline of a control that would be invisible without it, such as a text field: 3:1 against the background.
`border.focus`	`#4f46e5`	`#818cf8`	Focus ring: 3:1 against the background.

Accent

Token	Light	Dark	Use
`accent.default`	`#4f46e5`	`#5b5ef0`	The one action a view is for, and selected states.
`accent.hover`	`#4338ca`	`#4f46e5`
`accent.pressed`	`#3730a3`	`#4338ca`
`accent.subtle`	`#eef2ff`	`#1e1b4b`	Tinted background for accent-colored text.

Control

Token	Light	Dark	Use
`control.default`	`#ececf0`	`#2c2c33`	Fill of a neutral control, such as a secondary button.
`control.hover`	`#e2e2e8`	`#44444c`
`control.pressed`	`#c9c9d1`	`#5c5c66`

Danger

Token	Light	Dark	Use
`danger.default`	`#d92d20`	`#d92d20`	Fill of a destructive action.
`danger.hover`	`#b42318`	`#b42318`
`danger.pressed`	`#912018`	`#912018`

Status

Token	Light	Dark	Use
`status.danger`	`#b42318`	`#f97066`	Status colors are for text and icons. Never the only signal: pair them with a word or an icon.
`status.danger-subtle`	`#fef3f2`	`#55160c`
`status.success`	`#067647`	`#47cd89`
`status.success-subtle`	`#ecfdf3`	`#053321`
`status.warning`	`#b54708`	`#fdb022`
`status.warning-subtle`	`#fffaeb`	`#4e1d09`
`status.info`	`#175cd3`	`#53b1fd`
`status.info-subtle`	`#eff8ff`	`#102a56`

Component colors

Scrim

Token	Light	Dark	Use
`scrim`	`#000000 at 50%`	`#000000 at 50%`	Dims the screen behind a sheet. The same in both modes.

Button

Token	Light	Dark	Use
`button.primary.background`	`#4f46e5`	`#5b5ef0`
`button.primary.background-hover`	`#4338ca`	`#4f46e5`
`button.primary.background-pressed`	`#3730a3`	`#4338ca`
`button.primary.text`	`#ffffff`	`#ffffff`
`button.secondary.background`	`#ffffff`	`#2c2c33`	A secondary button is outlined: a white fill with a border, so it sits quietly next to a primary one.
`button.secondary.background-hover`	`#ececf0`	`#44444c`
`button.secondary.background-pressed`	`#e2e2e8`	`#5c5c66`
`button.secondary.border`	`#c9c9d1`	`#44444c`
`button.secondary.text`	`#18181c`	`#f5f5f7`
`button.ghost.background-hover`	`#ececf0`	`#2c2c33`	A ghost button has no fill until it is hovered.
`button.ghost.background-pressed`	`#e2e2e8`	`#44444c`
`button.ghost.text`	`#18181c`	`#f5f5f7`
`button.danger.background`	`#d92d20`	`#d92d20`
`button.danger.background-hover`	`#b42318`	`#b42318`
`button.danger.background-pressed`	`#912018`	`#912018`
`button.danger.text`	`#ffffff`	`#ffffff`
`button.disabled.background`	`#ececf0`	`#2c2c33`
`button.disabled.text`	`#a9a9b4`	`#5c5c66`

Field

Token	Light	Dark	Use
`field.background`	`#ffffff`	`#0e0e11`
`field.border`	`#84848f`	`#84848f`
`field.border-focus`	`#4f46e5`	`#818cf8`
`field.border-invalid`	`#b42318`	`#f97066`
`field.text`	`#18181c`	`#f5f5f7`
`field.placeholder`	`#6e6e79`	`#84848f`	Placeholder text is text, so it meets 4.5:1, but it is lighter than a value so the two are not confused.

Badge

Token	Light	Dark	Use
`badge.neutral.background`	`#ececf0`	`#2c2c33`
`badge.neutral.text`	`#5c5c66`	`#a9a9b4`
`badge.accent.background`	`#eef2ff`	`#1e1b4b`
`badge.accent.text`	`#4f46e5`	`#a5b4fc`
`badge.success.background`	`#ecfdf3`	`#053321`
`badge.success.text`	`#067647`	`#47cd89`
`badge.warning.background`	`#fffaeb`	`#4e1d09`
`badge.warning.text`	`#b54708`	`#fdb022`
`badge.danger.background`	`#fef3f2`	`#55160c`
`badge.danger.text`	`#b42318`	`#f97066`

Token	Light	Dark	Use
`banner.success.background`	`#ecfdf3`	`#053321`
`banner.success.accent`	`#067647`	`#47cd89`
`banner.warning.background`	`#fffaeb`	`#4e1d09`
`banner.warning.accent`	`#b54708`	`#fdb022`
`banner.danger.background`	`#fef3f2`	`#55160c`
`banner.danger.accent`	`#b42318`	`#f97066`
`banner.info.background`	`#eff8ff`	`#102a56`
`banner.info.accent`	`#175cd3`	`#53b1fd`
`banner.text`	`#18181c`	`#f5f5f7`

Switch

Token	Light	Dark	Use
`switch.track`	`#84848f`	`#84848f`	Off. It holds 3:1 against the page, so the control is visible before it is on.
`switch.track-on`	`#4f46e5`	`#5b5ef0`
`switch.thumb`	`#ffffff`	`#ffffff`	White in both modes: it sits on the accent fill when on.
`switch.disabled-track`	`#ececf0`	`#2c2c33`
`switch.disabled-thumb`	`#a9a9b4`	`#5c5c66`

Checkbox

Token	Light	Dark	Use
`checkbox.border`	`#84848f`	`#84848f`
`checkbox.background-checked`	`#4f46e5`	`#5b5ef0`
`checkbox.mark`	`#ffffff`	`#ffffff`
`checkbox.disabled-background`	`#ececf0`	`#2c2c33`
`checkbox.disabled-mark`	`#a9a9b4`	`#5c5c66`

Segmented

Token	Light	Dark	Use
`segmented.track`	`#ececf0`	`#2c2c33`
`segmented.text`	`#5c5c66`	`#a9a9b4`
`segmented.selected-background`	`#ffffff`	`#222228`
`segmented.selected-border`	`#c9c9d1`	`#44444c`	A hairline around the selected segment. Together with a faint shadow and the darker label it sets the segment apart from the track.
`segmented.selected-text`	`#18181c`	`#f5f5f7`

Avatar

Token	Light	Dark	Use
`avatar.background`	`#eef2ff`	`#1e1b4b`
`avatar.text`	`#4f46e5`	`#a5b4fc`

Progress

Token	Light	Dark	Use
`progress.track`	`#ececf0`	`#2c2c33`
`progress.fill`	`#4f46e5`	`#a5b4fc`	A mark on a neutral track, so it takes the accent text color, which holds 3:1 against the track in both modes.

List row

Token	Light	Dark	Use
`list-row.background-hover`	`#ececf0`	`#222228`
`list-row.background-pressed`	`#e2e2e8`	`#2c2c33`	Secondary text still has to read on it.

Top bar

Token	Light	Dark	Use
`top-bar.background`	`#f5f5f7`	`#0e0e11`	The same as the page: the bar has no edge of its own.
`top-bar.text`	`#18181c`	`#f5f5f7`
`top-bar.action`	`#4f46e5`	`#a5b4fc`
`top-bar.action-background`	`#ececf0`	`#2c2c33`	The round fill behind the back button.

Tab bar

Token	Light	Dark	Use
`tab-bar.background`	`#ffffff`	`#222228`
`tab-bar.border`	`#e2e2e8`	`#2c2c33`
`tab-bar.text`	`#5c5c66`	`#a9a9b4`
`tab-bar.text-selected`	`#4f46e5`	`#a5b4fc`
`tab-bar.selected-background`	`#eef2ff`	`#1e1b4b`	The pill behind the selected tab. Its shape marks the selection, so color is not the only signal.

Sheet

Token	Light	Dark	Use
`sheet.background`	`#ffffff`	`#222228`
`sheet.handle`	`#84848f`	`#84848f`