Tokens
Every color, size and timing, by what it is for.
118 tokens shown
Surfaces
What things sit on.
#f9fafe · #1a1a20
The page behind everything.
#ffffff · #232329
Cards, panels and inputs.
#f3f3f9 · #1e1e24
Wells and the area behind a card.
#ffffff · #2c2c33
Menus and pop-ups that float above the page.
#19191e · #000000
The dark veil behind a dialog.
#ebebf1 · #2f2f35
A row when the pointer is over it.
Lines and focus
Edges and the outline that shows where you are.
#e4e4ea · #35353b
Thin borders around cards and fields.
#c7c7cd · #4c4c54
Borders that need more weight, such as a focused field.
#27272d · #f0f0f6
The outline around whatever the keyboard is on.
Text
Three weights of text. Contrast is measured against the page.
#27272d · #f0f0f6
Main text.
- Light 14.2:1AA
- Dark 15.3:1AA
#525257 · #bcbdc5
Secondary text, such as descriptions.
- Light 7.4:1AA
- Dark 9.3:1AA
#68696e · #9b9ca4
Hints, labels and captions.
- Light 5.3:1AA
- Dark 6.3:1AA
Actions and the AI mark
Dark ink is the main action. Lime is only ever a fill, never text.
#4a41c8 · #6159e0
Main buttons and selected states.
#ffffff · #ffffff
Text on the main action color.
- Light 7.3:1AA
- Dark 5.2:1AA
#39329e · #7373e7
The main button when the pointer is over it.
#ebedfc · #272846
A quiet background for a selected item.
#4a41c8 · #b8b4ff
Text on the quiet background.
- Light 6.3:1AA
- Dark 7.4:1AA
#c1c5ff · #c2ef72
The AI mark and one positive highlight.
#27272d · #0c0c0d
Text on lime. Always dark.
- Light 9.0:1AA
- Dark 14.8:1AA
#afb2ff · #b2e255
Lime when the pointer is over it.
#edefff · #282841
A pale lime wash behind small markers.
#e4e7ff · #60724b
The lime wash when the pointer is over it.
#f7f8ff · #333833
A fainter lime wash for a whole column or area.
#d9dcff · #7d9758
A border around something the AI made.
Needs a person
Amber means one thing: a person has to act. Nothing else uses it.
#c97b4a · #e09468
The dot and border that call for a person.
#f8ebe1 · #3a281c
Background of a request that needs a person.
#8f4f26 · #efb28c
Text on that background.
- Light 5.4:1AA
- Dark 7.6:1AA
#e9c3ae · #725346
Border of a request that needs a person.
Status
Success, error and information. Each ships with an icon and a word, never color alone.
#5f9a14 · #8cc63f
Something worked.
#eef6da · #232e17
Background for a success message.
#3f6a0b · #b4de78
Text on it.
- Light 5.7:1AA
- Dark 9.3:1AA
#b84a42 · #ea7a72
Something failed or will delete.
#f9e9e7 · #3a1f1d
Background for an error message.
#8e2f28 · #f3a7a1
Text on it.
- Light 6.9:1AA
- Dark 7.8:1AA
#ffffff · #24282c
Text on a solid danger button.
- Light 5.1:1AA
- Dark 5.3:1AA
#5a7691 · #86a5c0
Neutral information.
#e9eef3 · #1f2a34
Background for a note.
#35506a · #aac3d8
Text on it.
- Light 7.2:1AA
- Dark 8.0:1AA
#bdd7aa · #4a5f3a
Border of a success box.
#e8b7b1 · #6d4546
Border of an error box.
#e9c3ae · #725346
Border of a warning box.
#bac6d2 · #485361
Border of a note.
States
Hover, selected, pressed and disabled each have their own color, so a chosen item never looks like one the pointer is passing over. Disabled is one look everywhere; a whole disabled row fades by --disabled-opacity.
#eaedfb · #282939
A chosen row, option or range.
#a5adeb · #3c3d76
Border of a chosen item when it needs one.
#e0e0e1 · #3a3a40
A button while it is held down.
#f3f3f9 · #1e1e24
Background of a control that cannot be used yet.
#949497 · #797980
Its text and icon.
#e4e4ea · #35353b
Its border.
Inverse and on pictures
A dark surface on a light page, and the reverse in dark mode. Overlay and glass sit on top of pictures and video.
#27272d · #f0f0f6
Tooltips, value labels and small badges.
#f9fafe · #1a1a20
Text on it.
- Light 14.2:1AA
- Dark 15.3:1AA
#b4b4b9 · #525259
Quieter text on it.
#26262d · #f0f0f6
See-through dark controls and captions on video.
#ffffff · #232329
Frosted labels on pictures.
Direction
Up and down for prices, profit and loss, and any number that moves. Not the same as success and error. Always shown with an arrow or a sign. For readers who cannot tell green from red, set data-direction="cb" on the root element to get blue and orange.
#0b8a6f · #2fb594
A value went up or is a gain.
#e4f4f0 · #0e2b26
Background for an up value, such as a gain row.
#0b7a63 · #3ed3b0
Text for an up value.
- Light 4.6:1AA
- Dark 8.0:1AA
#d6303f · #f0525f
A value went down or is a loss.
#fdeaec · #3a1a1f
Background for a down value.
#c4283a · #ff7480
Text for a down value.
- Light 4.9:1AA
- Dark 6.0:1AA
Unsure and celebrate
Two reserved roles. Unsure is a calm neutral for "not fully sure" and "partly done"; it is not a warning. Celebrate is used for exactly one thing, a goal fully reached, and never for decoration. Always with words.
#6b6b7d · #a9a9bd
Not fully sure, or partly done.
#eeedf5 · #25252f
Background for an unsure chip.
#575768 · #c4c4d6
Text on it.
- Light 6.1:1AA
- Dark 8.8:1AA
#b6832f · #d4a24f
A goal fully reached. One place per product.
#f7efdc · #2f2614
Background for it.
#85590f · #e6c07a
Text on it.
- Light 5.3:1AA
- Dark 8.7:1AA
Code
Always dark, in both themes.
#1f2326 · #121416
Background of code and commands.
#ecebe4 · #ecebe4
Code text.
- Light 13.2:1AA
- Dark 15.4:1AA
Chart colors
Checked so people with color-blindness can tell them apart. Use them in this order.
#2a6fbf · #4a8cd8
Series 1, in a fixed order.
#c2455f · #d85874
Series 2, in a fixed order.
#008c9e · #12a0a8
Series 3, in a fixed order.
#6f8f10 · #82a420
Series 4, in a fixed order.
#8a3d93 · #a862b8
Series 5, in a fixed order.
#9a9d98 · #7d8185
Everything else, grouped as Other.
#94b6df · #3a64a0
Low to high amounts, step 1 of 5.
#6693cb · #4f7fc0
Low to high amounts, step 2 of 5.
#3a74b8 · #6e9ed8
Low to high amounts, step 3 of 5.
#235a9a · #98bdec
Low to high amounts, step 4 of 5.
#14406d · #c4daf6
Low to high amounts, step 5 of 5.
#c2455f · #d85874
Below the middle.
#e4e1d6 · #3a3f45
The middle.
#2a6fbf · #4a8cd8
Above the middle.
#e4e4ea · #35353b
Faint grid lines.
#68696e · #9b9ca4
Axis lines and labels.
Text sizes and widths
The one type scale, three sizes that grow a little on large screens, and page widths.
clamp(2.25rem, 2vw + 1.5rem, 3.25rem)
Page headings.
clamp(1.625rem, 1vw + 1.25rem, 2rem)
Section headings.
clamp(1.25rem, .5vw + 1.1rem, 1.5rem)
Card and block titles.
.625rem
Tiny capital labels.
.6875rem
Badges and counts.
.75rem
Captions and helper text.
.8125rem
Buttons and list rows.
.875rem
Interface text and fields.
.9375rem
Chat answers and long reading.
1rem
Card titles and intro lines.
1.0625rem
Large intro lines.
1.125rem
Panel and dialog titles.
1.25rem
Small page sections.
1.375rem
Section headings.
1.625rem
Page headings on phones.
1.875rem
Page headings.
2rem
Big headings.
2.5rem
Hero headings.
3rem
Display titles.
768px
Width of a conversation.
680px
Width of the start screen.
1120px
Width of a full page.
72ch
Longest comfortable line of text.
Timing and easing
How long things take and how they speed up and slow down.
70ms
Color changes you should not notice.
.15s
Hover and press.
.22s
Things appearing.
.38s
Panels sliding in.
cubic-bezier(.2, 0, 0, 1)
Things arriving: fast, then settling.
cubic-bezier(.4, 0, 1, 1)
Things leaving: slow, then quick.
cubic-bezier(.2, 0, .38, .9)
Things that move and stay on screen.
cubic-bezier(.32, .72, 0, 1)
A sheet or drawer sliding over the page.
cubic-bezier(.16, 1, .3, 1)
A card or view arriving, with a long soft landing.
When someone turns off motion in their device settings, these all drop to zero.
Shadows
Used sparingly, to lift floating things.
0 1px 2px #24282c0d
A card that can be picked up.
0 6px 20px #24282c12, 0 1px 2px #24282c0a
Menus and hovered cards.
0 16px 40px #24282c1f, 0 2px 6px #24282c0d
Drawers and large pop-ups.
Corners
Four roles. They follow the corner shape chosen from the Theme button: Round, Soft or Sharp.
- --radius-control
- --radius-field
- --radius-card
- --radius-overlay