Tokens
Every design token with light and dark values and contrast.
Naming
Names follow the path category, role, variant, state. The same path is used everywhere: Figma color/content/primary, JSON color.content.primary, CSS --ds-color-content-primary.
Contrast shows the lowest result for each text and border token, in each theme, and the background it was measured on.
All tokens
229 of 229 tokens. Select a token name to copy its CSS variable.
| Preview | Name | Light value | Dark value | Contrast | Description |
|---|---|---|---|---|---|
| #ffffff#FFFFFF | #ffffff#FFFFFFcompact | – | |||
| #000000#000000 | #000000#000000compact | – | |||
| #faf9ff#FAF9FF | #faf9ff#FAF9FFcompact | – | |||
| #f5f4fe#F5F4FE | #f5f4fe#F5F4FEcompact | – | |||
| #edebf9#EDEBF9 | #edebf9#EDEBF9compact | – | |||
| #e4e2f6#E4E2F6 | #e4e2f6#E4E2F6compact | – | |||
| #cec8ed#CEC8ED | #cec8ed#CEC8EDcompact | – | |||
| #b1a8e1#B1A8E1 | #b1a8e1#B1A8E1compact | – | |||
| #9485d3#9485D3 | #9485d3#9485D3compact | – | |||
| #7860c3#7860C3 | #7860c3#7860C3compact | – | |||
| #5e3ab0#5E3AB0 | #5e3ab0#5E3AB0compact | – | |||
| #3c0484#3C0484 | #3c0484#3C0484compact | – | The brand accent. | ||
| #330073#330073 | #330073#330073compact | – | |||
| #20004d#20004D | #20004d#20004Dcompact | – | |||
| #fff8f7#FFF8F7 | #fff8f7#FFF8F7compact | – | |||
| #fff2f0#FFF2F0 | #fff2f0#FFF2F0compact | – | |||
| #fbe8e5#FBE8E5 | #fbe8e5#FBE8E5compact | – | |||
| #f8ddda#F8DDDA | #f8ddda#F8DDDAcompact | – | |||
| #f1c0ba#F1C0BA | #f1c0ba#F1C0BAcompact | – | |||
| #e59b92#E59B92 | #e59b92#E59B92compact | – | |||
| #d67066#D67066 | #d67066#D67066compact | – | |||
| #c3413a#C3413A | #c3413a#C3413Acompact | – | |||
| #a8000f#A8000F | #a8000f#A8000Fcompact | – | |||
| #7d0008#7D0008 | #7d0008#7D0008compact | – | |||
| #580004#580004 | #580004#580004compact | – | |||
| #3b0002#3B0002 | #3b0002#3B0002compact | – | |||
| #fff9f5#FFF9F5 | #fff9f5#FFF9F5compact | – | |||
| #fdf3ec#FDF3EC | #fdf3ec#FDF3ECcompact | – | |||
| #f7eae1#F7EAE1 | #f7eae1#F7EAE1compact | – | |||
| #f4e0d4#F4E0D4 | #f4e0d4#F4E0D4compact | – | |||
| #e9c6ae#E9C6AE | #e9c6ae#E9C6AEcompact | – | |||
| #daa47f#DAA47F | #daa47f#DAA47Fcompact | – | |||
| #c87e47#C87E47 | #c87e47#C87E47compact | – | |||
| #b05a00#B05A00 | #b05a00#B05A00compact | – | |||
| #874300#874300 | #874300#874300compact | – | |||
| #633000#633000 | #633000#633000compact | – | |||
| #461f00#461F00 | #461f00#461F00compact | – | |||
| #2d1200#2D1200 | #2d1200#2D1200compact | – | |||
| #fdfaf0#FDFAF0 | #fdfaf0#FDFAF0compact | – | |||
| #f8f5eb#F8F5EB | #f8f5eb#F8F5EBcompact | – | |||
| #f0ede0#F0EDE0 | #f0ede0#F0EDE0compact | – | |||
| #eae5d2#EAE5D2 | #eae5d2#EAE5D2compact | – | |||
| #d7ceab#D7CEAB | #d7ceab#D7CEABcompact | – | |||
| #c0b178#C0B178 | #c0b178#C0B178compact | – | |||
| #a79139#A79139 | #a79139#A79139compact | – | |||
| #8a7300#8A7300 | #8a7300#8A7300compact | – | |||
| #695700#695700 | #695700#695700compact | – | |||
| #4c3f00#4C3F00 | #4c3f00#4C3F00compact | – | |||
| #352b00#352B00 | #352b00#352B00compact | – | |||
| #211a00#211A00 | #211a00#211A00compact | – | |||
| #f4fdf5#F4FDF5 | #f4fdf5#F4FDF5compact | – | |||
| #eff8f0#EFF8F0 | #eff8f0#EFF8F0compact | – | |||
| #e5f0e7#E5F0E7 | #e5f0e7#E5F0E7compact | – | |||
| #d9eadc#D9EADC | #d9eadc#D9EADCcompact | – | |||
| #b8d7bd#B8D7BD | #b8d7bd#B8D7BDcompact | – | |||
| #8ebf97#8EBF97 | #8ebf97#8EBF97compact | – | |||
| #5da56e#5DA56E | #5da56e#5DA56Ecompact | – | |||
| #1e8b44#1E8B44 | #1e8b44#1E8B44compact | – | |||
| #006b2e#006B2E | #006b2e#006B2Ecompact | – | |||
| #004e20#004E20 | #004e20#004E20compact | – | |||
| #003614#003614 | #003614#003614compact | – | |||
| #00220a#00220A | #00220a#00220Acompact | – | |||
| #f7faff#F7FAFF | #f7faff#F7FAFFcompact | – | |||
| #eff6ff#EFF6FF | #eff6ff#EFF6FFcompact | – | |||
| #e4eefa#E4EEFA | #e4eefa#E4EEFAcompact | – | |||
| #d8e6f8#D8E6F8 | #d8e6f8#D8E6F8compact | – | |||
| #b7d0f1#B7D0F1 | #b7d0f1#B7D0F1compact | – | |||
| #8cb4e8#8CB4E8 | #8cb4e8#8CB4E8compact | – | |||
| #5c94dc#5C94DC | #5c94dc#5C94DCcompact | – | |||
| #2574cf#2574CF | #2574cf#2574CFcompact | – | |||
| #0056aa#0056AA | #0056aa#0056AAcompact | – | |||
| #003e7e#003E7E | #003e7e#003E7Ecompact | – | |||
| #002a59#002A59 | #002a59#002A59compact | – | |||
| #001a3b#001A3B | #001a3b#001A3Bcompact | – | |||
| #fafafd#FAFAFD | #fafafd#FAFAFDcompact | – | |||
| #f5f5f8#F5F5F8 | #f5f5f8#F5F5F8compact | – | |||
| #eeeef1#EEEEF1 | #eeeef1#EEEEF1compact | – | |||
| #e6e6e9#E6E6E9 | #e6e6e9#E6E6E9compact | – | |||
| #d4d3dc#D4D3DC | #d4d3dc#D4D3DCcompact | – | |||
| #bab9c2#BAB9C2 | #bab9c2#BAB9C2compact | – | |||
| #9e9da5#9E9DA5 | #9e9da5#9E9DA5compact | – | |||
| #69686f#69686F | #69686f#69686Fcompact | – | |||
| #4d4c53#4D4C53 | #4d4c53#4D4C53compact | – | |||
| #333239#333239 | #333239#333239compact | – | |||
| #242329#242329 | #242329#242329compact | – | |||
| #18171d#18171D | #18171d#18171Dcompact | – | |||
| #101015#101015 | #101015#101015compact | – | |||
| #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. | ||
| #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. | ||
| #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. | ||
| #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. | ||
| #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 | |||
| #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. | ||
| 0px | 0pxcompact | – | |||
| 4px | 4pxcompact | – | |||
| 8px | 8pxcompact | – | |||
| 12px | 12pxcompact | – | |||
| 16px | 16pxcompact | – | |||
| 20px | 20pxcompact | – | |||
| 24px | 24pxcompact | – | |||
| 32px | 32pxcompact | – | |||
| 40px | 40pxcompact | – | |||
| 48px | 48pxcompact | – | |||
| 0px | 0pxcompact | – | |||
| 2px | 2pxcompact | – | |||
| 4px | 4pxcompact | – | |||
| 6px | 6pxcompact | – | |||
| 8px | 8pxcompact | – | |||
| 12px | 12pxcompact | – | |||
| 9999px | 9999pxcompact | – | Pills and circles. | ||
| 24px | 24pxcompact | – | |||
| 28px | 28pxcompact | – | |||
| 32px | 32pxcompact | – | |||
| 36px | 36pxcompact | – | |||
| 40px | 40pxcompact | – | |||
| 100ms | 100mscompact | – | Small changes: hover, color, opacity. | ||
| 160ms | 160mscompact | – | Most transitions. | ||
| 240ms | 240mscompact | – | Larger movement: drawers, dialogs. | ||
| cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1)compact | – | Elements that change in place. | ||
| cubic-bezier(0, 0, 0, 1) | cubic-bezier(0, 0, 0, 1)compact | – | Elements that appear. | ||
| cubic-bezier(0.3, 0, 1, 1) | cubic-bezier(0.3, 0, 1, 1)compact | – | Elements that leave. | ||
| Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serifcompact | – | Inter, loaded only on /design-system. Use tabular numerals for data. | ||
| ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | ui-monospace, SFMono-Regular, Menlo, Consolas, monospacecompact | – | System monospace for code samples. No font is downloaded. | ||
| 11px | 11pxcompact | – | |||
| 12px | 12pxcompact | – | |||
| 13px | 13pxcompact | – | |||
| 14px | 14pxcompact | – | Body text. | ||
| 16px | 16pxcompact | – | |||
| 18px | 18pxcompact | – | |||
| 20px | 20pxcompact | – | |||
| 24px | 24pxcompact | – | |||
| 32px | 32pxcompact | – | |||
| 16px | 16pxcompact | – | |||
| 16px | 16pxcompact | – | |||
| 18px | 18pxcompact | – | |||
| 20px | 20pxcompact | – | |||
| 24px | 24pxcompact | – | |||
| 24px | 24pxcompact | – | |||
| 26px | 26pxcompact | – | |||
| 30px | 30pxcompact | – | |||
| 38px | 38pxcompact | – | |||
| 400 | 400compact | – | Regular. | ||
| 500 | 500compact | – | Medium. | ||
| 600 | 600compact | – | Semibold. | ||
| 0px 1px 2px 0px #18171D1F | 0px 1px 2px 0px #00000066 | – | Cards that sit slightly above the page. | ||
| 0px 1px 2px 0px #18171D14, 0px 4px 12px 0px #18171D24 | 0px 1px 2px 0px #00000052, 0px 4px 16px 0px #0000008F | – | Menus, popovers and dropdowns. | ||
| 0px 2px 6px 0px #18171D1F, 0px 12px 32px 0px #18171D33 | 0px 2px 6px 0px #00000066, 0px 16px 40px 0px #000000B3 | – | Dialogs and drawers. | ||
| 32pxsize.control.md | 28pxsize.control.smcompact | – | Small controls. 32px, or 28px in compact density. | ||
| 36pxsize.control.lg | 32pxsize.control.mdcompact | – | Default controls. 36px, or 32px in compact density. | ||
| 40pxsize.control.xl | 36pxsize.control.lgcompact | – | Large controls. 40px, or 36px in compact density. |