Updated
Colors
Ten primitive ramps feed 120 semantic roles across light and dark. Bind a component to the role and the value follows the mode, the platform and the code.
Updated
On this page
How do color tokens work?
Primitives hold raw values, semantic roles point at primitives, and components bind to roles. The arrow runs one way, so one edit to a primitive reaches every component that uses it.
Foundations are the raw color values that power the entire system. Every token, every component color and every light and dark mapping traces back to a foundation variable.
Each hue follows a consistent 50 to 950 scale, giving you 11 shades from near-white to near-black. Gray adds a 0 step and a 150 step, so it carries 13. The naming is predictable: blue-500 is always the midpoint, blue-50 is the lightest tint, blue-950 is the deepest shade. Every hue uses the same logic, so once you learn one, you know them all.
Foundations holds 154 colors: 112 ramp steps and 42 alpha steps. Every hex was read from the Figma file on October 2, 2026.
Neutrals
Gray
Gray runs from 0 to 950 with an extra 150 step, and gray-500 is #8E8E93.
Neutral shades carry structure. Backgrounds, text, borders, dividers. They stay out of the way so your color decisions land where they matter.
- gray-50#F4F5F5
- gray-100#E9E9EA
- gray-200#D1D1D6
- gray-300#C7C7CC
- gray-400#AEAEB2
- gray-500#8E8E93
- gray-600#636366
- gray-700#48484A
- gray-800#2F2F31
- gray-900#242427
- gray-950#0E0E0F
- gray-0#FFFFFF
- gray-150#DEDEE0
Vibrants
Blue
Blue runs from 50 to 950, and blue-500 is #155DFC.
Trust, reliability, focus. Blue is a safe default for primary actions in digital products. It reads well across cultures and carries minimal emotional baggage.
- blue-50#EFF6FF
- blue-100#DBEAFE
- blue-200#BEDBFF
- blue-300#82BFFF
- blue-400#2B7FFF
- blue-500#155DFC
- blue-600#1447E6
- blue-700#193CB8
- blue-800#1C398E
- blue-900#0D2673
- blue-950#132150
Red
Red runs from 50 to 950, and red-500 is #FB2C36.
Urgency and attention. Red triggers an immediate response. Use it sparingly and intentionally. In UI, it works best when reserved for moments that genuinely need the user to stop and pay attention.
- red-50#FEF2F2
- red-100#FFE2E2
- red-200#FFC9C9
- red-300#FFA2A2
- red-400#FF6467
- red-500#FB2C36
- red-600#E7000B
- red-700#C10007
- red-800#9F0712
- red-900#82181A
- red-950#460809
Orange
Orange runs from 50 to 950, and orange-500 is #FF6900.
Energy without alarm. Orange sits between red's urgency and yellow's warmth: it draws attention without triggering anxiety. A strong choice for caution signals or bold secondary accents.
- orange-50#FFF7ED
- orange-100#FFEDD4
- orange-200#FFD6A7
- orange-300#FFB86A
- orange-400#FF8904
- orange-500#FF6900
- orange-600#F54900
- orange-700#CA3500
- orange-800#9F2D00
- orange-900#7E2A0C
- orange-950#441306
Yellow
Yellow runs from 50 to 950, and yellow-500 is #FE9A00.
Optimism, warmth, visibility. Yellow carries high luminance, which makes it useful for highlights and attention markers. Handle it with care on light backgrounds: contrast can drop quickly.
- yellow-50#FFFBEB
- yellow-100#FEF3C6
- yellow-200#FEE685
- yellow-300#FFD230
- yellow-400#FFB900
- yellow-500#FE9A00
- yellow-600#E17100
- yellow-700#BB4D00
- yellow-800#973C00
- yellow-900#7B3306
- yellow-950#461901
Green
Green runs from 50 to 950, and green-500 is #22C55E.
Progress, safety, confirmation. Green signals "go" in most interfaces: it reassures users that things are working as expected. The natural pick for positive feedback and completed states.
- green-50#F0FDF4
- green-100#DCFCE7
- green-200#BBF7D0
- green-300#86EFAC
- green-400#4ADE80
- green-500#22C55E
- green-600#16A34A
- green-700#15803D
- green-800#166534
- green-900#14532D
- green-950#09361B
Purple
Purple runs from 50 to 950, and purple-500 is #7D52F4.
Creativity, premium, distinction. Purple stands apart from the typical blue-green UI palette, making it effective for feature highlights, premium tiers, or brands that want to feel different without being loud.
- purple-50#EFEBFF
- purple-100#DCD5FF
- purple-200#CAC0FF
- purple-300#A897FF
- purple-400#8C71F6
- purple-500#7D52F4
- purple-600#693EE0
- purple-700#5B2CC9
- purple-800#4C25A7
- purple-900#3D1D86
- purple-950#351A75
Sky
Sky runs from 50 to 950, and sky-500 is #47C2FF.
Calm, clarity, openness. A cooler, softer alternative to primary blue. Sky works well for informational contexts where you want color without weight: tooltips, info banners, secondary surfaces.
- sky-50#EBF8FF
- sky-100#D5F1FF
- sky-200#C0EAFF
- sky-300#97DCFF
- sky-400#68CDFF
- sky-500#47C2FF
- sky-600#35ADE9
- sky-700#2597D0
- sky-800#1F7EAD
- sky-900#18658B
- sky-950#124B68
Pink
Pink runs from 50 to 950, and pink-500 is #FB4BA3.
Playfulness, warmth, approachability. Pink softens digital interfaces without losing energy. It works for lifestyle products, social features, or anywhere your brand leans expressive. Bolder shades carry confidence. Lighter tints feel inviting.
- pink-50#FFEBF4
- pink-100#FFD5EA
- pink-200#FFC0DF
- pink-300#FF97CB
- pink-400#FF68B3
- pink-500#FB4BA3
- pink-600#E9358F
- pink-700#D0257A
- pink-800#AD1F66
- pink-900#8B1852
- pink-950#68123D
Teal
Teal runs from 50 to 950, and teal-500 is #22D3BB.
Balance, sophistication, modernity. Teal bridges blue's trust with green's calm. A strong choice for products in health, finance, or sustainability, or anywhere you need a cool accent that isn't blue.
- teal-50#E4FBF8
- teal-100#D0FBF5
- teal-200#C2F5EE
- teal-300#84EBDD
- teal-400#3FDEC9
- teal-500#22D3BB
- teal-600#1DAF9C
- teal-700#178C7D
- teal-800#1A7569
- teal-900#16645A
- teal-950#0B463E
Where does alpha live?
In the token, never in the paint. Figma re-derives a paint's opacity from the bound variable when a component is instanced, so a paint set to 20 percent over an opaque token renders solid.
Every hue also includes three alpha (transparent) variants at 10%, 16%, and 24% opacity. Use these for overlays, hover states, pressed states, and subtle tinted backgrounds where you need a color to blend with whatever sits underneath.
- White 10%#FFFFFF
- White 16%#FFFFFF
- White 24%#FFFFFF
- White 72%#FFFFFF
- White 88%#FFFFFF
- White 92%#FFFFFF
- Black 10%#030712
- Black 16%#030712
- Black 24%#030712
- Gray 10%#6A7282
- Gray 16%#6A7282
- Gray 24%#6A7282
- Gray 900 55%#242426
- Gray 900 72%#242426
- Gray 900 88%#242426
- Blue 10%#2B7FFF
- Blue 16%#2B7FFF
- Blue 24%#2B7FFF
- Red 10%#FB2C36
- Red 16%#FB2C36
- Red 24%#FB2C36
- Orange 10%#FF6900
- Orange 16%#FF6900
- Orange 24%#FF6900
- Yellow 10%#FE9A00
- Yellow 16%#FE9A00
- Yellow 24%#FE9A00
- Green 10%#22C55E
- Green 16%#22C55E
- Green 24%#22C55E
- Purple 10%#7D52F4
- Purple 16%#7D52F4
- Purple 24%#7D52F4
- Sky 10%#47C2FF
- Sky 16%#47C2FF
- Sky 24%#47C2FF
- Pink 10%#FB4BA3
- Pink 16%#FB4BA3
- Pink 24%#FB4BA3
- Teal 10%#22D3BB
- Teal 16%#22D3BB
- Teal 24%#22D3BB
Each tile is painted over a split ground, white on the left and static-black-950 on the right, so a translucent value reads translucent against both. Beside the nine hues, the file carries 13 alpha sets in all: black and gray at 10, 16 and 24 percent, white also at 72, 88 and 92, and gray-900 at 55, 72 and 88. They back the glass layers and the tinted status fills.
Which role should I bind a layer to?
Bind to the role that names its job. A role says what a color is for, so the decision gets made once and every component inherits it. Each swatch is cut on the diagonal, Light above the cut and Dark below it, and where a role holds the same value in both modes the cut disappears.
Backgrounds
bg/raised is the surface of anything that floats above the page: sheets, dialogs, menus, pickers and toasts. In Light it matches bg/white-0. In Dark it lifts to #242427 so the surface separates from the page. bg/glass and bg/glass-thick carry the alpha in the token, because a glass effect over an opaque fill renders flat.
- bg/
white-0Light #FFFFFFDark #0E0E0F - bg/
weak-50Light #F4F5F5Dark #242427 - bg/
soft-100Light #E9E9EADark #48484A - bg/
sub-200Light #D1D1D6Dark #636366 - bg/
sub-300Light #C7C7CCDark #8E8E93 - bg/
surface-800Light #2F2F31Dark #D1D1D6 - bg/
surface-topLight #DEDEE0Dark #48484A - bg/
strong-950Light #0E0E0FDark #FFFFFF - bg/
raisedLight #FFFFFFDark #242427 - bg/
elevatedLight #FFFFFFDark #48484A - bg/
elevated-1Light #E9E9EADark #2F2F31 - bg/
elevated-2Light #D1D1D6Dark #48484A - bg/
grouped-canvasLight #F4F5F5Dark #0E0E0F - bg/
grouped-cellLight #FFFFFFDark #242427 - bg/
glassLight #FFFFFF at 72%Dark #242426 at 55% - bg/
glass-thickLight #FFFFFF at 92%Dark #242426 at 88% - bg/
scrimLight #000000 at 40%Dark #000000 at 48%
Text
- text/
strong-950Light #0E0E0FDark #FFFFFF - text/
sub-700Light #48484ADark #C7C7CC - text/
soft-500Light #8E8E93Dark #AEAEB2 - text/
disabled-400Light #AEAEB2Dark #8E8E93 - text/
white-0Light #FFFFFFDark #0E0E0F - text/
on-color/ strongLight #FFFFFFDark #FFFFFF - text/
on-color/ subtleLight #FFFFFF at 88%Dark #FFFFFF at 88%
Foreground, icons
- fg/
strong-950Light #0E0E0FDark #FFFFFF - fg/
sub-700Light #48484ADark #C7C7CC - fg/
soft-500Light #8E8E93Dark #AEAEB2 - fg/
disabled-400Light #AEAEB2Dark #8E8E93 - fg/
white-0Light #FFFFFFDark #0E0E0F - icon/
on-colorLight #FFFFFFDark #FFFFFF
Borders
- border/
soft-100Light #E9E9EADark #2F2F31 - border/
sub-200Light #D1D1D6Dark #48484A - border/
strong-950Light #0E0E0FDark #FFFFFF - border/
white-0Light #FFFFFFDark #0E0E0F
Brand
brand/alpha-10, 16 and 24 tint a surface. brand/alpha-48 and brand/alpha-72 are the two strongest steps of the Heatmap intensity ramp in the Chart components.
- brand/
baseLight #155DFCDark #2B7FFF - brand/
darkLight #193CB8Dark #82BFFF - brand/
darkerLight #1C398EDark #BEDBFF - brand/
lightLight #DBEAFEDark #0D2673 - brand/
lighterLight #EFF6FFDark #132150 - brand/
alpha-10Light #2B7FFF at 10%Dark #2B7FFF at 10% - brand/
alpha-16Light #2B7FFF at 16%Dark #2B7FFF at 16% - brand/
alpha-24Light #2B7FFF at 24%Dark #2B7FFF at 24% - brand/
alpha-48Light #2B7FFF at 48%Dark #2B7FFF at 48% - brand/
alpha-72Light #2B7FFF at 72%Dark #2B7FFF at 72% - brand/
pressedLight #193CB8Dark #155DFC
State, base steps
- state/
error/ base-500Light #FB2C36Dark #FB2C36 - state/
error/ dark-700Light #C10007Dark #FFA2A2 - state/
warning/ base-500Light #FF6900Dark #F54900 - state/
success/ base-500Light #22C55EDark #16A34A - state/
information/ base-500Light #155DFCDark #155DFC - state/
away/ base-500Light #FE9A00Dark #E17100 - state/
feature/ base-500Light #7D52F4Dark #693EE0 - state/
highlighted/ base-500Light #FB4BA3Dark #E9358F - state/
stable/ base-500Light #22D3BBDark #1DAF9C - state/
verified/ base-500Light #47C2FFDark #35ADE9 - state/
faded/ base-500Light #8E8E93Dark #636366
State, tint and dark steps
Every status family has the same four steps. lighter-50 is a quiet fill, light-200 a stronger tint, base-500 the signal and dark-950 the text that sits on a tint. In Dark, lighter-50 and light-200 point at an alpha of 16 and 24 percent, so a tint stays translucent. state/pressed/on-strong is the press layer for a control on a strong surface.
- state/
error/ lighter-50Light #FEF2F2Dark #FB2C36 at 16% - state/
error/ light-200Light #FFC9C9Dark #FB2C36 at 24% - state/
error/ dark-950Light #460809Dark #FFA2A2 - state/
warning/ lighter-50Light #FFF7EDDark #FF6900 at 16% - state/
warning/ light-200Light #FFD6A7Dark #FF6900 at 24% - state/
warning/ dark-950Light #441306Dark #FFB86A - state/
success/ lighter-50Light #F0FDF4Dark #22C55E at 16% - state/
success/ light-200Light #BBF7D0Dark #22C55E at 24% - state/
success/ dark-950Light #09361BDark #86EFAC - state/
information/ lighter-50Light #EFF6FFDark #2B7FFF at 16% - state/
information/ light-200Light #BEDBFFDark #2B7FFF at 24% - state/
information/ dark-950Light #132150Dark #82BFFF - state/
away/ lighter-50Light #FFFBEBDark #FE9A00 at 16% - state/
away/ light-200Light #FEE685Dark #FE9A00 at 24% - state/
away/ dark-950Light #461901Dark #FFD230 - state/
feature/ lighter-50Light #EFEBFFDark #7D52F4 at 16% - state/
feature/ light-200Light #CAC0FFDark #7D52F4 at 24% - state/
feature/ dark-950Light #351A75Dark #A897FF - state/
highlighted/ lighter-50Light #FFEBF4Dark #FB4BA3 at 16% - state/
highlighted/ light-200Light #FFC0DFDark #FB4BA3 at 24% - state/
highlighted/ dark-950Light #68123DDark #FF97CB - state/
stable/ lighter-50Light #E4FBF8Dark #22D3BB at 16% - state/
stable/ light-200Light #C2F5EEDark #22D3BB at 24% - state/
stable/ dark-950Light #0B463EDark #84EBDD - state/
verified/ lighter-50Light #EBF8FFDark #47C2FF at 16% - state/
verified/ light-200Light #C0EAFFDark #47C2FF at 24% - state/
verified/ dark-950Light #124B68Dark #97DCFF - state/
faded/ lighter-50Light #F4F5F5Dark #6A7282 at 16% - state/
faded/ light-200Light #D1D1D6Dark #6A7282 at 24% - state/
faded/ dark-950Light #0E0E0FDark #C7C7CC - state/
pressed/ on-strongLight #FFFFFF at 10%Dark #030712 at 10%
Static, never switch
Alpha lives in the token, never in the paint. Figma re-derives paint opacity from the bound variable when a component is instanced, so a paint set to 20 percent over an opaque token renders solid. The two Facebook blues are for the Social Button and are the same in both modes.
- static/
static-white-0Light #FFFFFFDark #FFFFFF - static/
static-black-950Light #0E0E0FDark #0E0E0F - static/
static-black-1000Light #000000Dark #000000 - static/
static-white-alpha-20Light #FFFFFF at 20%Dark #FFFFFF at 20% - static/
static-white-alpha-25Light #FFFFFF at 25%Dark #FFFFFF at 25% - static/
static-white-alpha-40Light #FFFFFF at 40%Dark #FFFFFF at 40% - static/
static-white-alpha-45Light #FFFFFF at 45%Dark #FFFFFF at 45% - static/
static-white-alpha-60Light #FFFFFF at 60%Dark #FFFFFF at 60% - static/
static-white-alpha-70Light #FFFFFF at 70%Dark #FFFFFF at 70% - static/
static-black-alpha-20Light #000000 at 20%Dark #000000 at 20% - static/
static-black-alpha-40Light #000000 at 40%Dark #000000 at 40% - static/
static-black-alpha-60Light #000000 at 60%Dark #000000 at 60% - static/
static-facebook-blueLight #1877F2Dark #1877F2 - static/
static-facebook-blue-pressedLight #106BE1Dark #106BE1
Chart
chart/series-1 to 4 are the four series: brand blue, purple, teal and amber. Past four categories, group the rest into chart/muted. chart/soft draws de-emphasized data, such as inactive bars and the series you compare against.
- chart/
series-1Light #155DFCDark #2B7FFF - chart/
series-2Light #7D52F4Dark #693EE0 - chart/
series-3Light #22D3BBDark #1DAF9C - chart/
series-4Light #FE9A00Dark #E17100 - chart/
mutedLight #D1D1D6Dark #6A7282 at 24% - chart/
softLight #DEDEE0Dark #6A7282 at 24%
Glass
The colors behind Liquid Glass. The glass/* tokens are used inside the Liquid Glass effect styles and by controls that sit on glass. glass/edge and glass/rim hold Apple measured values. glass/tint-clear, glass/tint-regular and glass/tint-tinted are the three tint levels.
- glass/
fillLight #030712 at 10%Dark #FFFFFF at 16% - glass/
fill-strongLight #030712 at 24%Dark #FFFFFF at 24% - glass/
separatorLight #030712 at 10%Dark #FFFFFF at 10% - glass/
borderLight #FFFFFF at 50%Dark #FFFFFF at 12% - glass/
edgeLight #DBDBDBDark #A6A6A6 - glass/
edge-shadeLight #000000 at 8%Dark #000000 at 50% - glass/
rimLight #282828Dark #1A1A1A - glass/
rim-lightLight #FFFFFF at 75%Dark #FFFFFF at 28% - glass/
shadowLight #000000 at 25%Dark #000000 at 45% - glass/
liftLight #000000 at 4%Dark #000000 at 24% - glass/
tint-clearLight #FFFFFF at 6%Dark #FFFFFF at 8% - glass/
tint-regularLight #FFFFFF at 32%Dark #4D4D52 at 45% - glass/
tint-tintedLight #F7F7FA at 86%Dark #38383D at 86%
Of the 190 Color Tokens variables, 120 are Appetite UI roles, grouped here the way the Figma collection is grouped. The rest are left out: mode/name, annotation/*, which is a redline layer for Figma documentation boards, and the 67 platform/ios and platform/m3 mirrors, which belong to the Platform Bridge, iOS and Material 3 pages.
The Color Tokens collection holds 190 variables, read from the Figma file on October 2, 2026.
How does dark mode work in the token system?
In Dark a role changes which primitive it points at, and keeps its name. text/strong-950 points at gray/950 in Light and at gray/0 in Dark, so the token inverts on its own and no component needs a dark variant.
Color Tokens carries two modes, Light and Dark. Foundations carries one.
One asymmetry is worth knowing. In Light the light-200 and lighter-50 steps of a status family alias solid ramp steps, 200 and 50. In Dark they alias alpha-24 and alpha-16 of the same hue. A tinted surface therefore stays translucent on a dark ground, and a soft error banner reads as a tint in Dark.
| Token | Light | Dark |
|---|---|---|
state/error/light-200 | #FFC9C9Light resolves to red/200 | #FB2C36 at 24%Dark resolves to red alpha 24 |
state/error/lighter-50 | #FEF2F2Light resolves to red/50 | #FB2C36 at 16%Dark resolves to red alpha 16 |
state/warning/light-200 | #FFD6A7Light resolves to orange/200 | #FF6900 at 24%Dark resolves to orange alpha 24 |
state/warning/lighter-50 | #FFF7EDLight resolves to orange/50 | #FF6900 at 16%Dark resolves to orange alpha 16 |
state/success/light-200 | #BBF7D0Light resolves to green/200 | #22C55E at 24%Dark resolves to green alpha 24 |
state/success/lighter-50 | #F0FDF4Light resolves to green/50 | #22C55E at 16%Dark resolves to green alpha 16 |
state/information/light-200 | #BEDBFFLight resolves to blue/200 | #2B7FFF at 24%Dark resolves to blue alpha 24 |
state/information/lighter-50 | #EFF6FFLight resolves to blue/50 | #2B7FFF at 16%Dark resolves to blue alpha 16 |
The same pattern runs through away, feature, highlighted, stable, verified and faded. The Tokens section below lists all ten families.
Tokens
The Appetite UI semantic set, resolved. The small line under each hex names what the value lands on: a Foundations step, an alpha of one, direct where the role holds a raw hex and a ramp edit will not reach it, or fixed value where the role must never switch. Copy the token name. The hex is there for reference.
Tokens, backgrounds
| Token | Light | Dark |
|---|---|---|
bg/white-0 | #FFFFFFLight resolves to gray/0 | #0E0E0FDark resolves to gray/950 |
bg/weak-50 | #F4F5F5Light resolves to gray/50 | #242427Dark resolves to gray/900 |
bg/soft-100 | #E9E9EALight resolves to gray/100 | #48484ADark resolves to gray/700 |
bg/sub-200 | #D1D1D6Light resolves to gray/200 | #636366Dark resolves to gray/600 |
bg/sub-300 | #C7C7CCLight resolves to gray/300 | #8E8E93Dark resolves to gray/500 |
bg/surface-800 | #2F2F31Light resolves to gray/800 | #D1D1D6Dark resolves to gray/200 |
bg/surface-top | #DEDEE0Light resolves to gray/150 | #48484ADark resolves to gray/700 |
bg/strong-950 | #0E0E0FLight resolves to gray/950 | #FFFFFFDark resolves to gray/0 |
bg/raised | #FFFFFFLight resolves to gray/0 | #242427Dark resolves to gray/900 |
bg/elevated | #FFFFFFLight resolves to direct | #48484ADark resolves to direct |
bg/elevated-1 | #E9E9EALight resolves to gray/100 | #2F2F31Dark resolves to gray/800 |
bg/elevated-2 | #D1D1D6Light resolves to gray/200 | #48484ADark resolves to gray/700 |
bg/grouped-canvas | #F4F5F5Light resolves to direct | #0E0E0FDark resolves to direct |
bg/grouped-cell | #FFFFFFLight resolves to direct | #242427Dark resolves to direct |
bg/glass | #FFFFFF at 72%Light resolves to white/alpha-72 | #242426 at 55%Dark resolves to gray-900/alpha-55 |
bg/glass-thick | #FFFFFF at 92%Light resolves to white/alpha-92 | #242426 at 88%Dark resolves to gray-900/alpha-88 |
bg/scrim | #000000 at 40%Light resolves to direct | #000000 at 48%Dark resolves to direct |
Tokens, text
| Token | Light | Dark |
|---|---|---|
text/strong-950 | #0E0E0FLight resolves to gray/950 | #FFFFFFDark resolves to gray/0 |
text/sub-700 | #48484ALight resolves to gray/700 | #C7C7CCDark resolves to gray/300 |
text/soft-500 | #8E8E93Light resolves to gray/500 | #AEAEB2Dark resolves to gray/400 |
text/disabled-400 | #AEAEB2Light resolves to gray/400 | #8E8E93Dark resolves to gray/500 |
text/white-0 | #FFFFFFLight resolves to gray/0 | #0E0E0FDark resolves to gray/950 |
text/on-color/strong | #FFFFFFLight resolves to static-white-0 | #FFFFFFDark resolves to static-white-0 |
text/on-color/subtle | #FFFFFF at 88%Light resolves to white/alpha-88 | #FFFFFF at 88%Dark resolves to white/alpha-88 |
Tokens, foreground, icons
| Token | Light | Dark |
|---|---|---|
fg/strong-950 | #0E0E0FLight resolves to gray/950 | #FFFFFFDark resolves to gray/0 |
fg/sub-700 | #48484ALight resolves to gray/700 | #C7C7CCDark resolves to gray/300 |
fg/soft-500 | #8E8E93Light resolves to gray/500 | #AEAEB2Dark resolves to gray/400 |
fg/disabled-400 | #AEAEB2Light resolves to gray/400 | #8E8E93Dark resolves to gray/500 |
fg/white-0 | #FFFFFFLight resolves to gray/0 | #0E0E0FDark resolves to gray/950 |
icon/on-color | #FFFFFFLight resolves to static-white-0 | #FFFFFFDark resolves to static-white-0 |
Tokens, borders
| Token | Light | Dark |
|---|---|---|
border/soft-100 | #E9E9EALight resolves to gray/100 | #2F2F31Dark resolves to gray/800 |
border/sub-200 | #D1D1D6Light resolves to gray/200 | #48484ADark resolves to gray/700 |
border/strong-950 | #0E0E0FLight resolves to gray/950 | #FFFFFFDark resolves to gray/0 |
border/white-0 | #FFFFFFLight resolves to gray/0 | #0E0E0FDark resolves to gray/950 |
Tokens, brand
| Token | Light | Dark |
|---|---|---|
brand/base | #155DFCLight resolves to blue/500 | #2B7FFFDark resolves to blue/400 |
brand/dark | #193CB8Light resolves to blue/700 | #82BFFFDark resolves to blue/300 |
brand/darker | #1C398ELight resolves to blue/800 | #BEDBFFDark resolves to blue/200 |
brand/light | #DBEAFELight resolves to blue/100 | #0D2673Dark resolves to blue/900 |
brand/lighter | #EFF6FFLight resolves to blue/50 | #132150Dark resolves to blue/950 |
brand/alpha-10 | #2B7FFF at 10%Light resolves to blue alpha on 2B7FFF | #2B7FFF at 10%Dark resolves to blue alpha on 2B7FFF |
brand/alpha-16 | #2B7FFF at 16%Light resolves to blue alpha on 2B7FFF | #2B7FFF at 16%Dark resolves to blue alpha on 2B7FFF |
brand/alpha-24 | #2B7FFF at 24%Light resolves to blue alpha on 2B7FFF | #2B7FFF at 24%Dark resolves to blue alpha on 2B7FFF |
brand/alpha-48 | #2B7FFF at 48%Light resolves to direct | #2B7FFF at 48%Dark resolves to direct |
brand/alpha-72 | #2B7FFF at 72%Light resolves to direct | #2B7FFF at 72%Dark resolves to direct |
brand/pressed | #193CB8Light resolves to blue/700 | #155DFCDark resolves to blue/500 |
Tokens, state, base steps
| Token | Light | Dark |
|---|---|---|
state/error/base-500 | #FB2C36Light resolves to red/500 | #FB2C36Dark resolves to red/500 |
state/error/dark-700 | #C10007Light resolves to red/700 | #FFA2A2Dark resolves to red/300 |
state/warning/base-500 | #FF6900Light resolves to orange/500 | #F54900Dark resolves to orange/600 |
state/success/base-500 | #22C55ELight resolves to green/500 | #16A34ADark resolves to green/600 |
state/information/base-500 | #155DFCLight resolves to blue/500 | #155DFCDark resolves to blue/500 |
state/away/base-500 | #FE9A00Light resolves to yellow/500 | #E17100Dark resolves to yellow/600 |
state/feature/base-500 | #7D52F4Light resolves to purple/500 | #693EE0Dark resolves to purple/600 |
state/highlighted/base-500 | #FB4BA3Light resolves to pink/500 | #E9358FDark resolves to pink/600 |
state/stable/base-500 | #22D3BBLight resolves to teal/500 | #1DAF9CDark resolves to teal/600 |
state/verified/base-500 | #47C2FFLight resolves to sky/500 | #35ADE9Dark resolves to sky/600 |
state/faded/base-500 | #8E8E93Light resolves to gray/500 | #636366Dark resolves to gray/600 |
Tokens, state, tint and dark steps
| Token | Light | Dark |
|---|---|---|
state/error/lighter-50 | #FEF2F2Light resolves to red/50 | #FB2C36 at 16%Dark resolves to red/alpha-16 |
state/error/light-200 | #FFC9C9Light resolves to red/200 | #FB2C36 at 24%Dark resolves to red/alpha-24 |
state/error/dark-950 | #460809Light resolves to red/950 | #FFA2A2Dark resolves to red/300 |
state/warning/lighter-50 | #FFF7EDLight resolves to orange/50 | #FF6900 at 16%Dark resolves to orange/alpha-16 |
state/warning/light-200 | #FFD6A7Light resolves to orange/200 | #FF6900 at 24%Dark resolves to orange/alpha-24 |
state/warning/dark-950 | #441306Light resolves to orange/950 | #FFB86ADark resolves to orange/300 |
state/success/lighter-50 | #F0FDF4Light resolves to green/50 | #22C55E at 16%Dark resolves to green/alpha-16 |
state/success/light-200 | #BBF7D0Light resolves to green/200 | #22C55E at 24%Dark resolves to green/alpha-24 |
state/success/dark-950 | #09361BLight resolves to green/950 | #86EFACDark resolves to green/300 |
state/information/lighter-50 | #EFF6FFLight resolves to blue/50 | #2B7FFF at 16%Dark resolves to blue/alpha-16 |
state/information/light-200 | #BEDBFFLight resolves to blue/200 | #2B7FFF at 24%Dark resolves to blue/alpha-24 |
state/information/dark-950 | #132150Light resolves to blue/950 | #82BFFFDark resolves to blue/300 |
state/away/lighter-50 | #FFFBEBLight resolves to yellow/50 | #FE9A00 at 16%Dark resolves to yellow/alpha-16 |
state/away/light-200 | #FEE685Light resolves to yellow/200 | #FE9A00 at 24%Dark resolves to yellow/alpha-24 |
state/away/dark-950 | #461901Light resolves to yellow/950 | #FFD230Dark resolves to yellow/300 |
state/feature/lighter-50 | #EFEBFFLight resolves to purple/50 | #7D52F4 at 16%Dark resolves to purple/alpha-16 |
state/feature/light-200 | #CAC0FFLight resolves to purple/200 | #7D52F4 at 24%Dark resolves to purple/alpha-24 |
state/feature/dark-950 | #351A75Light resolves to purple/950 | #A897FFDark resolves to purple/300 |
state/highlighted/lighter-50 | #FFEBF4Light resolves to pink/50 | #FB4BA3 at 16%Dark resolves to pink/alpha-16 |
state/highlighted/light-200 | #FFC0DFLight resolves to pink/200 | #FB4BA3 at 24%Dark resolves to pink/alpha-24 |
state/highlighted/dark-950 | #68123DLight resolves to pink/950 | #FF97CBDark resolves to pink/300 |
state/stable/lighter-50 | #E4FBF8Light resolves to teal/50 | #22D3BB at 16%Dark resolves to teal/alpha-16 |
state/stable/light-200 | #C2F5EELight resolves to teal/200 | #22D3BB at 24%Dark resolves to teal/alpha-24 |
state/stable/dark-950 | #0B463ELight resolves to teal/950 | #84EBDDDark resolves to teal/300 |
state/verified/lighter-50 | #EBF8FFLight resolves to sky/50 | #47C2FF at 16%Dark resolves to sky/alpha-16 |
state/verified/light-200 | #C0EAFFLight resolves to sky/200 | #47C2FF at 24%Dark resolves to sky/alpha-24 |
state/verified/dark-950 | #124B68Light resolves to sky/950 | #97DCFFDark resolves to sky/300 |
state/faded/lighter-50 | #F4F5F5Light resolves to gray/50 | #6A7282 at 16%Dark resolves to gray/alpha-16 |
state/faded/light-200 | #D1D1D6Light resolves to gray/200 | #6A7282 at 24%Dark resolves to gray/alpha-24 |
state/faded/dark-950 | #0E0E0FLight resolves to gray/950 | #C7C7CCDark resolves to gray/300 |
state/pressed/on-strong | #FFFFFF at 10%Light resolves to white/alpha-10 | #030712 at 10%Dark resolves to black/alpha-10 |
Tokens, static, never switch
| Token | Light | Dark |
|---|---|---|
static/static-white-0 | #FFFFFFLight resolves to fixed value | #FFFFFFDark resolves to fixed value |
static/static-black-950 | #0E0E0FLight resolves to fixed value | #0E0E0FDark resolves to fixed value |
static/static-black-1000 | #000000Light resolves to fixed value | #000000Dark resolves to fixed value |
static/static-white-alpha-20 | #FFFFFF at 20%Light resolves to fixed value | #FFFFFF at 20%Dark resolves to fixed value |
static/static-white-alpha-25 | #FFFFFF at 25%Light resolves to fixed value | #FFFFFF at 25%Dark resolves to fixed value |
static/static-white-alpha-40 | #FFFFFF at 40%Light resolves to fixed value | #FFFFFF at 40%Dark resolves to fixed value |
static/static-white-alpha-45 | #FFFFFF at 45%Light resolves to fixed value | #FFFFFF at 45%Dark resolves to fixed value |
static/static-white-alpha-60 | #FFFFFF at 60%Light resolves to fixed value | #FFFFFF at 60%Dark resolves to fixed value |
static/static-white-alpha-70 | #FFFFFF at 70%Light resolves to fixed value | #FFFFFF at 70%Dark resolves to fixed value |
static/static-black-alpha-20 | #000000 at 20%Light resolves to fixed value | #000000 at 20%Dark resolves to fixed value |
static/static-black-alpha-40 | #000000 at 40%Light resolves to fixed value | #000000 at 40%Dark resolves to fixed value |
static/static-black-alpha-60 | #000000 at 60%Light resolves to fixed value | #000000 at 60%Dark resolves to fixed value |
static/static-facebook-blue | #1877F2Light resolves to fixed value | #1877F2Dark resolves to fixed value |
static/static-facebook-blue-pressed | #106BE1Light resolves to fixed value | #106BE1Dark resolves to fixed value |
Tokens, chart
| Token | Light | Dark |
|---|---|---|
chart/series-1 | #155DFCLight resolves to brand/base, blue/500 | #2B7FFFDark resolves to brand/base, blue/400 |
chart/series-2 | #7D52F4Light resolves to state/feature/base-500, purple/500 | #693EE0Dark resolves to state/feature/base-500, purple/600 |
chart/series-3 | #22D3BBLight resolves to state/stable/base-500, teal/500 | #1DAF9CDark resolves to state/stable/base-500, teal/600 |
chart/series-4 | #FE9A00Light resolves to state/away/base-500, yellow/500 | #E17100Dark resolves to state/away/base-500, yellow/600 |
chart/muted | #D1D1D6Light resolves to state/faded/light-200, gray/200 | #6A7282 at 24%Dark resolves to state/faded/light-200, gray/alpha-24 |
chart/soft | #DEDEE0Light resolves to gray/150 | #6A7282 at 24%Dark resolves to gray/alpha-24 |
Tokens, glass
| Token | Light | Dark |
|---|---|---|
glass/fill | #030712 at 10%Light resolves to black/alpha-10 | #FFFFFF at 16%Dark resolves to white/alpha-16 |
glass/fill-strong | #030712 at 24%Light resolves to black/alpha-24 | #FFFFFF at 24%Dark resolves to white/alpha-24 |
glass/separator | #030712 at 10%Light resolves to black/alpha-10 | #FFFFFF at 10%Dark resolves to white/alpha-10 |
glass/border | #FFFFFF at 50%Light resolves to direct | #FFFFFF at 12%Dark resolves to direct |
glass/edge | #DBDBDBLight resolves to direct | #A6A6A6Dark resolves to direct |
glass/edge-shade | #000000 at 8%Light resolves to direct | #000000 at 50%Dark resolves to direct |
glass/rim | #282828Light resolves to direct | #1A1A1ADark resolves to direct |
glass/rim-light | #FFFFFF at 75%Light resolves to direct | #FFFFFF at 28%Dark resolves to direct |
glass/shadow | #000000 at 25%Light resolves to direct | #000000 at 45%Dark resolves to direct |
glass/lift | #000000 at 4%Light resolves to direct | #000000 at 24%Dark resolves to direct |
glass/tint-clear | #FFFFFF at 6%Light resolves to direct | #FFFFFF at 8%Dark resolves to direct |
glass/tint-regular | #FFFFFF at 32%Light resolves to direct | #4D4D52 at 45%Dark resolves to direct |
glass/tint-tinted | #F7F7FA at 86%Light resolves to direct | #38383D at 86%Dark resolves to direct |
A value carrying a percentage is an alpha role, drawn over the ground it sits on: white in Light, near black in Dark.