Color
Color ramps and semantic color tokens for light and dark themes.
How to use color
- Start neutral. Most of the screen is surfaces, text and borders.
- Brand color is for primary actions, selection, focus and links, not decoration.
- Status colors (positive, negative, caution, info) only carry meaning.
- Signal colors only show signal levels, always with a text label.
- Use semantic tokens, never primitives, so both themes keep working.
Components use semantic colors only. Primitive ramps are listed for reference. Every semantic color has a light and a dark value, and every text and border pair is checked for contrast on each build.
Ramps
All ramps use the same lightness steps, so step 500 of one hue is as light as step 500 of another. The brand ramp is generated from the accent #3C0484, kept at brand 700. Gray has one extra dark step, 950, for dark surfaces.
brand
- 25#faf9ff
- 50#f5f4fe
- 75#edebf9
- 100#e4e2f6
- 200#cec8ed
- 300#b1a8e1
- 400#9485d3
- 500#7860c3
- 600#5e3ab0
- 700#3c0484
- 800#330073
- 900#20004d
gray
- 25#fafafd
- 50#f5f5f8
- 75#eeeef1
- 100#e6e6e9
- 200#d4d3dc
- 300#bab9c2
- 400#9e9da5
- 500#69686f
- 600#4d4c53
- 700#333239
- 800#242329
- 900#18171d
- 950#101015
red
- 25#fff8f7
- 50#fff2f0
- 75#fbe8e5
- 100#f8ddda
- 200#f1c0ba
- 300#e59b92
- 400#d67066
- 500#c3413a
- 600#a8000f
- 700#7d0008
- 800#580004
- 900#3b0002
orange
- 25#fff9f5
- 50#fdf3ec
- 75#f7eae1
- 100#f4e0d4
- 200#e9c6ae
- 300#daa47f
- 400#c87e47
- 500#b05a00
- 600#874300
- 700#633000
- 800#461f00
- 900#2d1200
yellow
- 25#fdfaf0
- 50#f8f5eb
- 75#f0ede0
- 100#eae5d2
- 200#d7ceab
- 300#c0b178
- 400#a79139
- 500#8a7300
- 600#695700
- 700#4c3f00
- 800#352b00
- 900#211a00
green
- 25#f4fdf5
- 50#eff8f0
- 75#e5f0e7
- 100#d9eadc
- 200#b8d7bd
- 300#8ebf97
- 400#5da56e
- 500#1e8b44
- 600#006b2e
- 700#004e20
- 800#003614
- 900#00220a
blue
- 25#f7faff
- 50#eff6ff
- 75#e4eefa
- 100#d8e6f8
- 200#b7d0f1
- 300#8cb4e8
- 400#5c94dc
- 500#2574cf
- 600#0056aa
- 700#003e7e
- 800#002a59
- 900#001a3b
Surface colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #fafafdgray.25 | #101015gray.950 | – | Page background. The lowest layer. | ||
| #ffffffwhite | #18171dgray.900 | Light 5.51:1 lowest, on background.neutral.boldDark 6.63:1 lowest, on background.neutral.bold | Panels, cards and the sidebar. | ||
| #f5f5f8gray.50 | #242329gray.800 | – | Sunken areas, table headers and hovered rows. | ||
| #ffffffwhite | #242329gray.800 | – | Menus, popovers and dropdowns. Use with shadow.dropdown. | ||
| #ffffffwhite | #333239gray.700 | – | Dialogs. Use with shadow.modal. | ||
| #242329gray.800 | #e6e6e9gray.100 | – | Tooltips and other high-emphasis surfaces. Use content.inverse on it. | ||
| rgba(24, 23, 29, 0.5607843137254902)#18171D8F | rgba(0, 0, 0, 0.6392156862745098)#000000A3 | – | Scrim behind dialogs and drawers. |
Content colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #18171dgray.900 | #f5f5f8gray.50 | Light 12.00:1 lowest, on background.neutral.pressedDark 7.80:1 lowest, on background.neutral.hover | Body text and headings. | ||
| #4d4c53gray.600 | #d4d3dcgray.200 | Light 5.72:1 lowest, on background.neutral.pressedDark 5.72:1 lowest, on background.neutral.hover | Supporting text, labels and table headers. | ||
| #69686fgray.500 | #9e9da5gray.400 | Light 5.06:1 lowest, on surface.2Dark 4.72:1 lowest, on surface.4 | Hints, placeholders and metadata. Still passes 4.5:1. | ||
| #9e9da5gray.400 | #4d4c53gray.600 | – | Text in disabled controls. Exempt from contrast rules. | ||
| #ffffffwhite | #18171dgray.900 | Light 13.61:1 lowest, on background.checked.defaultDark 5.56:1 lowest, on background.checked.default | Text on surface.inverse. | ||
| #ffffffwhite | #ffffffwhite | Light 6.68:1 lowest, on background.positive.defaultDark 4.93:1 lowest, on background.brand.hover | Text on solid brand, negative, positive and info backgrounds. White in both themes. | ||
| #3c0484brand.700 | #b1a8e1brand.300 | Light 10.70:1 lowest, on background.brand.selectedDark 5.77:1 lowest, on surface.4 | Brand-colored text and icons. | ||
| #5e3ab0brand.600 | #b1a8e1brand.300 | Light 7.13:1 lowest, on surface.2Dark 5.77:1 lowest, on surface.4 | Links. Always underlined too. | ||
| #006b2egreen.600 | #8ebf97green.300 | Light 6.14:1 lowest, on surface.2Dark 6.07:1 lowest, on surface.4 | Success text and icons. | ||
| #a8000fred.600 | #e59b92red.300 | Light 5.30:1 lowest, on background.neutral.pressedDark 5.70:1 lowest, on surface.4 | Error text and icons. | ||
| #874300orange.600 | #daa47forange.300 | Light 6.78:1 lowest, on background.caution.subtleDark 5.80:1 lowest, on surface.4 | Warning text and icons. | ||
| #0056aablue.600 | #8cb4e8blue.300 | Light 6.63:1 lowest, on background.info.subtleDark 5.92:1 lowest, on surface.4 | Informational text and icons. |
Background colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #3c0484brand.700 | #5e3ab0brand.600 | – | Primary buttons and other bold brand fills. | ||
| #330073brand.800 | #7860c3brand.500 | – | Hovered brand fill. Darker than default. | ||
| #20004dbrand.900 | #3c0484brand.700 | – | Pressed brand fill. Darker than hover. | ||
| #e4e2f6brand.100 | #20004dbrand.900 | – | Selected items such as rows, options and tabs. | ||
| #e6e6e9gray.100 | #242329gray.800 | – | Disabled brand controls. | ||
| #edebf9brand.75 | #330073brand.800 | – | Light brand tint. | ||
| #f5f4febrand.50 | #20004dbrand.900 | – | Lighter brand tint. | ||
| #faf9ffbrand.25 | #20004dbrand.900 | – | Lightest brand tint. | ||
| #eeeef1gray.75 | #333239gray.700 | – | Secondary buttons and neutral fills. | ||
| #e6e6e9gray.100 | #4d4c53gray.600 | – | Hovered neutral fill. | ||
| #d4d3dcgray.200 | #242329gray.800 | – | Pressed neutral fill. | ||
| #e6e6e9gray.100 | #333239gray.700 | – | Selected neutral items. | ||
| #f5f5f8gray.50 | #242329gray.800 | – | Disabled neutral controls. | ||
| #eeeef1gray.75 | #242329gray.800 | – | Light neutral tint. | ||
| #f5f5f8gray.50 | #18171dgray.900 | – | Lighter neutral tint. | ||
| #fafafdgray.25 | #18171dgray.900 | – | Lightest neutral tint, for example striped rows. | ||
| #69686fgray.500 | #9e9da5gray.400 | Light 5.06:1 lowest, on surface.2Dark 4.72:1 lowest, on surface.4 | Strong neutral fill, such as the track of a switch that is off. Passes 3:1 on every surface. | ||
| #006b2egreen.600 | #006b2egreen.600 | – | Bold success fill. | ||
| #eff8f0green.50 | #00220agreen.900 | – | Success message background. | ||
| #a8000fred.600 | #a8000fred.600 | – | Bold error fill and destructive buttons. | ||
| #7d0008red.700 | #c3413ared.500 | – | Hovered negative fill, for destructive buttons. Darker than default. | ||
| #580004red.800 | #7d0008red.700 | – | Pressed negative fill. Darker than hover. | ||
| #fff2f0red.50 | #3b0002red.900 | – | Error message background. | ||
| #b05a00orange.500 | #c87e47orange.400 | – | Bold warning fill for indicators. Do not put text on it. | ||
| #fdf3ecorange.50 | #2d1200orange.900 | – | Warning message background. | ||
| #0056aablue.600 | #0056aablue.600 | – | Bold information fill. | ||
| #eff6ffblue.50 | #001a3bblue.900 | – | Information message background. | ||
| #ffffffwhite | #101015gray.950 | – | Fill of text inputs, selects, comboboxes, checkboxes and radios. | ||
| #f5f5f8gray.50 | #18171dgray.900 | – | Hovered input fill. | ||
| #3c0484brand.700 | #9485d3brand.400 | Light 12.51:1 lowest, on background.input.hoverDark 3.96:1 lowest, on surface.4 | Fill of a checked checkbox, a selected radio and a switch that is on. Use content.inverse for the mark. | ||
| #330073brand.800 | #b1a8e1brand.300 | Light 13.90:1 lowest, on background.input.hoverDark 5.77:1 lowest, on surface.4 | Hovered checked control. |
Border colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #69686fgray.500 | #9e9da5gray.400 | Light 5.06:1 lowest, on surface.2Dark 4.72:1 lowest, on surface.4 | Control outlines, such as inputs and checkboxes. Passes 3:1. | ||
| #d4d3dcgray.200 | #333239gray.700 | – | Card and container outlines. Decorative. | ||
| #e6e6e9gray.100 | #242329gray.800 | – | Dividers. Decorative. | ||
| #3c0484brand.700 | #9485d3brand.400 | Light 12.51:1 lowest, on surface.2Dark 3.96:1 lowest, on surface.4 | Brand outlines and selected controls. | ||
| #5e3ab0brand.600 | #b1a8e1brand.300 | Light 7.13:1 lowest, on surface.2Dark 5.77:1 lowest, on surface.4 | Focus rings. | ||
| #006b2egreen.600 | #5da56egreen.400 | Light 6.14:1 lowest, on surface.2Dark 4.27:1 lowest, on surface.4 | Success outlines. | ||
| #a8000fred.600 | #d67066red.400 | Light 7.22:1 lowest, on surface.2Dark 3.85:1 lowest, on surface.4 | Error outlines, such as invalid inputs. | ||
| #d4d3dcgray.200 | #333239gray.700 | – | Outlines of disabled controls. Exempt from contrast rules. |
Signal colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #fff8f7red.25 | #3b0002red.900 | – | |||
| #c3413ared.500 | #c3413ared.500 | Light 5.08:1 lowest, on surface.1Dark 3.51:1 lowest, on surface.1 | |||
| #7d0008red.700 | #f1c0bared.200 | Light 10.68:1 lowest, on signal.negative.low.backgroundDark 10.94:1 lowest, on signal.negative.low.background | |||
| #fff2f0red.50 | #580004red.800 | – | |||
| #a8000fred.600 | #d67066red.400 | Light 7.86:1 lowest, on surface.1Dark 5.40:1 lowest, on surface.1 | |||
| #7d0008red.700 | #f1c0bared.200 | Light 10.24:1 lowest, on signal.negative.medium.backgroundDark 9.17:1 lowest, on signal.negative.medium.background | |||
| #f8dddared.100 | #7d0008red.700 | – | |||
| #7d0008red.700 | #e59b92red.300 | Light 11.20:1 lowest, on surface.1Dark 8.00:1 lowest, on surface.1 | |||
| #580004red.800 | #f8dddared.100 | Light 11.54:1 lowest, on signal.negative.high.backgroundDark 8.72:1 lowest, on signal.negative.high.background | |||
| #a8000fred.600 | #a8000fred.600 | – | |||
| #580004red.800 | #f1c0bared.200 | Light 14.82:1 lowest, on surface.1Dark 11.02:1 lowest, on surface.1 | |||
| #ffffffwhite | #ffffffwhite | Light 7.86:1 lowest, on signal.negative.major.backgroundDark 7.86:1 lowest, on signal.negative.major.background | |||
| #f4fdf5green.25 | #00220agreen.900 | – | |||
| #1e8b44green.500 | #1e8b44green.500 | Light 4.35:1 lowest, on surface.1Dark 4.10:1 lowest, on surface.1 | |||
| #004e20green.700 | #b8d7bdgreen.200 | Light 9.58:1 lowest, on signal.positive.low.backgroundDark 10.94:1 lowest, on signal.positive.low.background | |||
| #eff8f0green.50 | #003614green.800 | – | |||
| #006b2egreen.600 | #5da56egreen.400 | Light 6.68:1 lowest, on surface.1Dark 6.00:1 lowest, on surface.1 | |||
| #004e20green.700 | #b8d7bdgreen.200 | Light 9.17:1 lowest, on signal.positive.medium.backgroundDark 8.77:1 lowest, on signal.positive.medium.background | |||
| #d9eadcgreen.100 | #004e20green.700 | – | |||
| #004e20green.700 | #8ebf97green.300 | Light 9.95:1 lowest, on surface.1Dark 8.52:1 lowest, on surface.1 | |||
| #003614green.800 | #d9eadcgreen.100 | Light 10.89:1 lowest, on signal.positive.high.backgroundDark 7.94:1 lowest, on signal.positive.high.background | |||
| #006b2egreen.600 | #006b2egreen.600 | – | |||
| #003614green.800 | #b8d7bdgreen.200 | Light 13.66:1 lowest, on surface.1Dark 11.44:1 lowest, on surface.1 | |||
| #ffffffwhite | #ffffffwhite | Light 6.68:1 lowest, on signal.positive.major.backgroundDark 6.68:1 lowest, on signal.positive.major.background |
AI colors
Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #edebf9brand.75 | #20004dbrand.900 | – | Background of labels that mark AI-generated content. | ||
| #3c0484brand.700 | #cec8edbrand.200 | Light 11.57:1 lowest, on ai.label-backgroundDark 11.22:1 lowest, on ai.label-background | Text and icon on AI labels. | ||
| #7860c3brand.500 | #9485d3brand.400 | Light 4.53:1 lowest, on surface.2Dark 3.96:1 lowest, on surface.4 | Outline around AI-generated content. |