---
title: Colors
description: Appetite UI color tokens for Figma: ten primitive ramps, 120 semantic roles in light and dark, and the alpha, chart and Liquid Glass tokens.
group: Foundations
source: https://www.appetiteui.com/docs/colors
dateModified: 2026-10-08
---

# Colors

Updated: October 8, 2026.

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.

## 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.

## 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 runs 0 to 950, and gray-500 is #8E8E93. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| gray-0 | #FFFFFF |
| gray-50 | #F4F5F5 |
| gray-100 | #E9E9EA |
| gray-150 | #DEDEE0 |
| 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 |

## 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 runs 50 to 950, and blue-500 is #155DFC. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and red-500 is #FB2C36. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and orange-500 is #FF6900. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and yellow-500 is #FE9A00. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and green-500 is #22C55E. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and purple-500 is #7D52F4. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and sky-500 is #47C2FF. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and pink-500 is #FB4BA3. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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 runs 50 to 950, and teal-500 is #22D3BB. The primitives are the same in light and dark.

| Token | Hex |
| --- | --- |
| 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.

| Alpha set | Base | Opacities |
| --- | --- | --- |
| White | #FFFFFF | 10%, 16%, 24%, 72%, 88%, 92% |
| Black | #030712 | 10%, 16%, 24% |
| Gray | #6A7282 | 10%, 16%, 24% |
| Gray 900 | #242426 | 55%, 72%, 88% |
| Blue | #2B7FFF | 10%, 16%, 24% |
| Red | #FB2C36 | 10%, 16%, 24% |
| Orange | #FF6900 | 10%, 16%, 24% |
| Yellow | #FE9A00 | 10%, 16%, 24% |
| Green | #22C55E | 10%, 16%, 24% |
| Purple | #7D52F4 | 10%, 16%, 24% |
| Sky | #47C2FF | 10%, 16%, 24% |
| Pink | #FB4BA3 | 10%, 16%, 24% |
| Teal | #22D3BB | 10%, 16%, 24% |

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.

Static alpha tokens cover the values a design needs without a hue: static-white-alpha at 20, 25, 40, 45, 60 and 70, and static-black-alpha at 20, 40 and 60. brand/alpha-48 and brand/alpha-72 are the two strongest steps of the Heatmap ramp.

## 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.

| Token | Light | Dark |
| --- | --- | --- |
| bg/white-0 | #FFFFFF | #0E0E0F |
| bg/weak-50 | #F4F5F5 | #242427 |
| bg/soft-100 | #E9E9EA | #48484A |
| bg/sub-200 | #D1D1D6 | #636366 |
| bg/sub-300 | #C7C7CC | #8E8E93 |
| bg/surface-800 | #2F2F31 | #D1D1D6 |
| bg/surface-top | #DEDEE0 | #48484A |
| bg/strong-950 | #0E0E0F | #FFFFFF |
| bg/raised | #FFFFFF | #242427 |
| bg/elevated | #FFFFFF | #48484A |
| bg/elevated-1 | #E9E9EA | #2F2F31 |
| bg/elevated-2 | #D1D1D6 | #48484A |
| bg/grouped-canvas | #F4F5F5 | #0E0E0F |
| bg/grouped-cell | #FFFFFF | #242427 |
| bg/glass | #FFFFFF at 72% | #242426 at 55% |
| bg/glass-thick | #FFFFFF at 92% | #242426 at 88% |
| bg/scrim | #000000 at 40% | #000000 at 48% |

### Text

| Token | Light | Dark |
| --- | --- | --- |
| text/strong-950 | #0E0E0F | #FFFFFF |
| text/sub-700 | #48484A | #C7C7CC |
| text/soft-500 | #8E8E93 | #AEAEB2 |
| text/disabled-400 | #AEAEB2 | #8E8E93 |
| text/white-0 | #FFFFFF | #0E0E0F |
| text/on-color/strong | #FFFFFF | #FFFFFF |
| text/on-color/subtle | #FFFFFF at 88% | #FFFFFF at 88% |

### Foreground, icons

| Token | Light | Dark |
| --- | --- | --- |
| fg/strong-950 | #0E0E0F | #FFFFFF |
| fg/sub-700 | #48484A | #C7C7CC |
| fg/soft-500 | #8E8E93 | #AEAEB2 |
| fg/disabled-400 | #AEAEB2 | #8E8E93 |
| fg/white-0 | #FFFFFF | #0E0E0F |
| icon/on-color | #FFFFFF | #FFFFFF |

### Borders

| Token | Light | Dark |
| --- | --- | --- |
| border/soft-100 | #E9E9EA | #2F2F31 |
| border/sub-200 | #D1D1D6 | #48484A |
| border/strong-950 | #0E0E0F | #FFFFFF |
| border/white-0 | #FFFFFF | #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.

| Token | Light | Dark |
| --- | --- | --- |
| brand/base | #155DFC | #2B7FFF |
| brand/dark | #193CB8 | #82BFFF |
| brand/darker | #1C398E | #BEDBFF |
| brand/light | #DBEAFE | #0D2673 |
| brand/lighter | #EFF6FF | #132150 |
| brand/alpha-10 | #2B7FFF at 10% | #2B7FFF at 10% |
| brand/alpha-16 | #2B7FFF at 16% | #2B7FFF at 16% |
| brand/alpha-24 | #2B7FFF at 24% | #2B7FFF at 24% |
| brand/alpha-48 | #2B7FFF at 48% | #2B7FFF at 48% |
| brand/alpha-72 | #2B7FFF at 72% | #2B7FFF at 72% |
| brand/pressed | #193CB8 | #155DFC |

### State, base steps

| Token | Light | Dark |
| --- | --- | --- |
| state/error/base-500 | #FB2C36 | #FB2C36 |
| state/error/dark-700 | #C10007 | #FFA2A2 |
| state/warning/base-500 | #FF6900 | #F54900 |
| state/success/base-500 | #22C55E | #16A34A |
| state/information/base-500 | #155DFC | #155DFC |
| state/away/base-500 | #FE9A00 | #E17100 |
| state/feature/base-500 | #7D52F4 | #693EE0 |
| state/highlighted/base-500 | #FB4BA3 | #E9358F |
| state/stable/base-500 | #22D3BB | #1DAF9C |
| state/verified/base-500 | #47C2FF | #35ADE9 |
| state/faded/base-500 | #8E8E93 | #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.

| Token | Light | Dark |
| --- | --- | --- |
| state/error/lighter-50 | #FEF2F2 | #FB2C36 at 16% |
| state/error/light-200 | #FFC9C9 | #FB2C36 at 24% |
| state/error/dark-950 | #460809 | #FFA2A2 |
| state/warning/lighter-50 | #FFF7ED | #FF6900 at 16% |
| state/warning/light-200 | #FFD6A7 | #FF6900 at 24% |
| state/warning/dark-950 | #441306 | #FFB86A |
| state/success/lighter-50 | #F0FDF4 | #22C55E at 16% |
| state/success/light-200 | #BBF7D0 | #22C55E at 24% |
| state/success/dark-950 | #09361B | #86EFAC |
| state/information/lighter-50 | #EFF6FF | #2B7FFF at 16% |
| state/information/light-200 | #BEDBFF | #2B7FFF at 24% |
| state/information/dark-950 | #132150 | #82BFFF |
| state/away/lighter-50 | #FFFBEB | #FE9A00 at 16% |
| state/away/light-200 | #FEE685 | #FE9A00 at 24% |
| state/away/dark-950 | #461901 | #FFD230 |
| state/feature/lighter-50 | #EFEBFF | #7D52F4 at 16% |
| state/feature/light-200 | #CAC0FF | #7D52F4 at 24% |
| state/feature/dark-950 | #351A75 | #A897FF |
| state/highlighted/lighter-50 | #FFEBF4 | #FB4BA3 at 16% |
| state/highlighted/light-200 | #FFC0DF | #FB4BA3 at 24% |
| state/highlighted/dark-950 | #68123D | #FF97CB |
| state/stable/lighter-50 | #E4FBF8 | #22D3BB at 16% |
| state/stable/light-200 | #C2F5EE | #22D3BB at 24% |
| state/stable/dark-950 | #0B463E | #84EBDD |
| state/verified/lighter-50 | #EBF8FF | #47C2FF at 16% |
| state/verified/light-200 | #C0EAFF | #47C2FF at 24% |
| state/verified/dark-950 | #124B68 | #97DCFF |
| state/faded/lighter-50 | #F4F5F5 | #6A7282 at 16% |
| state/faded/light-200 | #D1D1D6 | #6A7282 at 24% |
| state/faded/dark-950 | #0E0E0F | #C7C7CC |
| state/pressed/on-strong | #FFFFFF at 10% | #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.

| Token | Light | Dark |
| --- | --- | --- |
| static/static-white-0 | #FFFFFF | #FFFFFF |
| static/static-black-950 | #0E0E0F | #0E0E0F |
| static/static-black-1000 | #000000 | #000000 |
| static/static-white-alpha-20 | #FFFFFF at 20% | #FFFFFF at 20% |
| static/static-white-alpha-25 | #FFFFFF at 25% | #FFFFFF at 25% |
| static/static-white-alpha-40 | #FFFFFF at 40% | #FFFFFF at 40% |
| static/static-white-alpha-45 | #FFFFFF at 45% | #FFFFFF at 45% |
| static/static-white-alpha-60 | #FFFFFF at 60% | #FFFFFF at 60% |
| static/static-white-alpha-70 | #FFFFFF at 70% | #FFFFFF at 70% |
| static/static-black-alpha-20 | #000000 at 20% | #000000 at 20% |
| static/static-black-alpha-40 | #000000 at 40% | #000000 at 40% |
| static/static-black-alpha-60 | #000000 at 60% | #000000 at 60% |
| static/static-facebook-blue | #1877F2 | #1877F2 |
| static/static-facebook-blue-pressed | #106BE1 | #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.

| Token | Light | Dark |
| --- | --- | --- |
| chart/series-1 | #155DFC | #2B7FFF |
| chart/series-2 | #7D52F4 | #693EE0 |
| chart/series-3 | #22D3BB | #1DAF9C |
| chart/series-4 | #FE9A00 | #E17100 |
| chart/muted | #D1D1D6 | #6A7282 at 24% |
| chart/soft | #DEDEE0 | #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.

| Token | Light | Dark |
| --- | --- | --- |
| glass/fill | #030712 at 10% | #FFFFFF at 16% |
| glass/fill-strong | #030712 at 24% | #FFFFFF at 24% |
| glass/separator | #030712 at 10% | #FFFFFF at 10% |
| glass/border | #FFFFFF at 50% | #FFFFFF at 12% |
| glass/edge | #DBDBDB | #A6A6A6 |
| glass/edge-shade | #000000 at 8% | #000000 at 50% |
| glass/rim | #282828 | #1A1A1A |
| glass/rim-light | #FFFFFF at 75% | #FFFFFF at 28% |
| glass/shadow | #000000 at 25% | #000000 at 45% |
| glass/lift | #000000 at 4% | #000000 at 24% |
| glass/tint-clear | #FFFFFF at 6% | #FFFFFF at 8% |
| glass/tint-regular | #FFFFFF at 32% | #4D4D52 at 45% |
| glass/tint-tinted | #F7F7FA at 86% | #38383D at 86% |

Chart holds the four series colors and two neutrals for de-emphasized data. bg/raised is the surface of sheets, dialogs, menus, pickers and toasts, and in Dark it lifts to #242427. Glass is the family behind Liquid Glass in its Clear, Regular and Tinted levels, with bg/glass-thick for surfaces that carry content. state/pressed/on-strong is the press layer on a strong surface.

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.

Tinted status steps and what each mode resolves them to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| state/error/light-200 | #FFC9C9 | red/200 | #FB2C36 at 24% | red alpha 24 |
| state/error/lighter-50 | #FEF2F2 | red/50 | #FB2C36 at 16% | red alpha 16 |
| state/warning/light-200 | #FFD6A7 | orange/200 | #FF6900 at 24% | orange alpha 24 |
| state/warning/lighter-50 | #FFF7ED | orange/50 | #FF6900 at 16% | orange alpha 16 |
| state/success/light-200 | #BBF7D0 | green/200 | #22C55E at 24% | green alpha 24 |
| state/success/lighter-50 | #F0FDF4 | green/50 | #22C55E at 16% | green alpha 16 |
| state/information/light-200 | #BEDBFF | blue/200 | #2B7FFF at 24% | blue alpha 24 |
| state/information/lighter-50 | #EFF6FF | blue/50 | #2B7FFF at 16% | 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.

### Backgrounds, resolved

Backgrounds roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| bg/white-0 | #FFFFFF | gray/0 | #0E0E0F | gray/950 |
| bg/weak-50 | #F4F5F5 | gray/50 | #242427 | gray/900 |
| bg/soft-100 | #E9E9EA | gray/100 | #48484A | gray/700 |
| bg/sub-200 | #D1D1D6 | gray/200 | #636366 | gray/600 |
| bg/sub-300 | #C7C7CC | gray/300 | #8E8E93 | gray/500 |
| bg/surface-800 | #2F2F31 | gray/800 | #D1D1D6 | gray/200 |
| bg/surface-top | #DEDEE0 | gray/150 | #48484A | gray/700 |
| bg/strong-950 | #0E0E0F | gray/950 | #FFFFFF | gray/0 |
| bg/raised | #FFFFFF | gray/0 | #242427 | gray/900 |
| bg/elevated | #FFFFFF | direct | #48484A | direct |
| bg/elevated-1 | #E9E9EA | gray/100 | #2F2F31 | gray/800 |
| bg/elevated-2 | #D1D1D6 | gray/200 | #48484A | gray/700 |
| bg/grouped-canvas | #F4F5F5 | direct | #0E0E0F | direct |
| bg/grouped-cell | #FFFFFF | direct | #242427 | direct |
| bg/glass | #FFFFFF at 72% | white/alpha-72 | #242426 at 55% | gray-900/alpha-55 |
| bg/glass-thick | #FFFFFF at 92% | white/alpha-92 | #242426 at 88% | gray-900/alpha-88 |
| bg/scrim | #000000 at 40% | direct | #000000 at 48% | direct |

### Text, resolved

Text roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| text/strong-950 | #0E0E0F | gray/950 | #FFFFFF | gray/0 |
| text/sub-700 | #48484A | gray/700 | #C7C7CC | gray/300 |
| text/soft-500 | #8E8E93 | gray/500 | #AEAEB2 | gray/400 |
| text/disabled-400 | #AEAEB2 | gray/400 | #8E8E93 | gray/500 |
| text/white-0 | #FFFFFF | gray/0 | #0E0E0F | gray/950 |
| text/on-color/strong | #FFFFFF | static-white-0 | #FFFFFF | static-white-0 |
| text/on-color/subtle | #FFFFFF at 88% | white/alpha-88 | #FFFFFF at 88% | white/alpha-88 |

### Foreground, icons, resolved

Foreground, icons roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| fg/strong-950 | #0E0E0F | gray/950 | #FFFFFF | gray/0 |
| fg/sub-700 | #48484A | gray/700 | #C7C7CC | gray/300 |
| fg/soft-500 | #8E8E93 | gray/500 | #AEAEB2 | gray/400 |
| fg/disabled-400 | #AEAEB2 | gray/400 | #8E8E93 | gray/500 |
| fg/white-0 | #FFFFFF | gray/0 | #0E0E0F | gray/950 |
| icon/on-color | #FFFFFF | static-white-0 | #FFFFFF | static-white-0 |

### Borders, resolved

Borders roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| border/soft-100 | #E9E9EA | gray/100 | #2F2F31 | gray/800 |
| border/sub-200 | #D1D1D6 | gray/200 | #48484A | gray/700 |
| border/strong-950 | #0E0E0F | gray/950 | #FFFFFF | gray/0 |
| border/white-0 | #FFFFFF | gray/0 | #0E0E0F | gray/950 |

### Brand, resolved

Brand roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| brand/base | #155DFC | blue/500 | #2B7FFF | blue/400 |
| brand/dark | #193CB8 | blue/700 | #82BFFF | blue/300 |
| brand/darker | #1C398E | blue/800 | #BEDBFF | blue/200 |
| brand/light | #DBEAFE | blue/100 | #0D2673 | blue/900 |
| brand/lighter | #EFF6FF | blue/50 | #132150 | blue/950 |
| brand/alpha-10 | #2B7FFF at 10% | blue alpha on 2B7FFF | #2B7FFF at 10% | blue alpha on 2B7FFF |
| brand/alpha-16 | #2B7FFF at 16% | blue alpha on 2B7FFF | #2B7FFF at 16% | blue alpha on 2B7FFF |
| brand/alpha-24 | #2B7FFF at 24% | blue alpha on 2B7FFF | #2B7FFF at 24% | blue alpha on 2B7FFF |
| brand/alpha-48 | #2B7FFF at 48% | direct | #2B7FFF at 48% | direct |
| brand/alpha-72 | #2B7FFF at 72% | direct | #2B7FFF at 72% | direct |
| brand/pressed | #193CB8 | blue/700 | #155DFC | blue/500 |

### State, base steps, resolved

State, base steps roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| state/error/base-500 | #FB2C36 | red/500 | #FB2C36 | red/500 |
| state/error/dark-700 | #C10007 | red/700 | #FFA2A2 | red/300 |
| state/warning/base-500 | #FF6900 | orange/500 | #F54900 | orange/600 |
| state/success/base-500 | #22C55E | green/500 | #16A34A | green/600 |
| state/information/base-500 | #155DFC | blue/500 | #155DFC | blue/500 |
| state/away/base-500 | #FE9A00 | yellow/500 | #E17100 | yellow/600 |
| state/feature/base-500 | #7D52F4 | purple/500 | #693EE0 | purple/600 |
| state/highlighted/base-500 | #FB4BA3 | pink/500 | #E9358F | pink/600 |
| state/stable/base-500 | #22D3BB | teal/500 | #1DAF9C | teal/600 |
| state/verified/base-500 | #47C2FF | sky/500 | #35ADE9 | sky/600 |
| state/faded/base-500 | #8E8E93 | gray/500 | #636366 | gray/600 |

### State, tint and dark steps, resolved

State, tint and dark steps roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| state/error/lighter-50 | #FEF2F2 | red/50 | #FB2C36 at 16% | red/alpha-16 |
| state/error/light-200 | #FFC9C9 | red/200 | #FB2C36 at 24% | red/alpha-24 |
| state/error/dark-950 | #460809 | red/950 | #FFA2A2 | red/300 |
| state/warning/lighter-50 | #FFF7ED | orange/50 | #FF6900 at 16% | orange/alpha-16 |
| state/warning/light-200 | #FFD6A7 | orange/200 | #FF6900 at 24% | orange/alpha-24 |
| state/warning/dark-950 | #441306 | orange/950 | #FFB86A | orange/300 |
| state/success/lighter-50 | #F0FDF4 | green/50 | #22C55E at 16% | green/alpha-16 |
| state/success/light-200 | #BBF7D0 | green/200 | #22C55E at 24% | green/alpha-24 |
| state/success/dark-950 | #09361B | green/950 | #86EFAC | green/300 |
| state/information/lighter-50 | #EFF6FF | blue/50 | #2B7FFF at 16% | blue/alpha-16 |
| state/information/light-200 | #BEDBFF | blue/200 | #2B7FFF at 24% | blue/alpha-24 |
| state/information/dark-950 | #132150 | blue/950 | #82BFFF | blue/300 |
| state/away/lighter-50 | #FFFBEB | yellow/50 | #FE9A00 at 16% | yellow/alpha-16 |
| state/away/light-200 | #FEE685 | yellow/200 | #FE9A00 at 24% | yellow/alpha-24 |
| state/away/dark-950 | #461901 | yellow/950 | #FFD230 | yellow/300 |
| state/feature/lighter-50 | #EFEBFF | purple/50 | #7D52F4 at 16% | purple/alpha-16 |
| state/feature/light-200 | #CAC0FF | purple/200 | #7D52F4 at 24% | purple/alpha-24 |
| state/feature/dark-950 | #351A75 | purple/950 | #A897FF | purple/300 |
| state/highlighted/lighter-50 | #FFEBF4 | pink/50 | #FB4BA3 at 16% | pink/alpha-16 |
| state/highlighted/light-200 | #FFC0DF | pink/200 | #FB4BA3 at 24% | pink/alpha-24 |
| state/highlighted/dark-950 | #68123D | pink/950 | #FF97CB | pink/300 |
| state/stable/lighter-50 | #E4FBF8 | teal/50 | #22D3BB at 16% | teal/alpha-16 |
| state/stable/light-200 | #C2F5EE | teal/200 | #22D3BB at 24% | teal/alpha-24 |
| state/stable/dark-950 | #0B463E | teal/950 | #84EBDD | teal/300 |
| state/verified/lighter-50 | #EBF8FF | sky/50 | #47C2FF at 16% | sky/alpha-16 |
| state/verified/light-200 | #C0EAFF | sky/200 | #47C2FF at 24% | sky/alpha-24 |
| state/verified/dark-950 | #124B68 | sky/950 | #97DCFF | sky/300 |
| state/faded/lighter-50 | #F4F5F5 | gray/50 | #6A7282 at 16% | gray/alpha-16 |
| state/faded/light-200 | #D1D1D6 | gray/200 | #6A7282 at 24% | gray/alpha-24 |
| state/faded/dark-950 | #0E0E0F | gray/950 | #C7C7CC | gray/300 |
| state/pressed/on-strong | #FFFFFF at 10% | white/alpha-10 | #030712 at 10% | black/alpha-10 |

### Static, never switch, resolved

Static, never switch roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| static/static-white-0 | #FFFFFF | fixed value | #FFFFFF | fixed value |
| static/static-black-950 | #0E0E0F | fixed value | #0E0E0F | fixed value |
| static/static-black-1000 | #000000 | fixed value | #000000 | fixed value |
| static/static-white-alpha-20 | #FFFFFF at 20% | fixed value | #FFFFFF at 20% | fixed value |
| static/static-white-alpha-25 | #FFFFFF at 25% | fixed value | #FFFFFF at 25% | fixed value |
| static/static-white-alpha-40 | #FFFFFF at 40% | fixed value | #FFFFFF at 40% | fixed value |
| static/static-white-alpha-45 | #FFFFFF at 45% | fixed value | #FFFFFF at 45% | fixed value |
| static/static-white-alpha-60 | #FFFFFF at 60% | fixed value | #FFFFFF at 60% | fixed value |
| static/static-white-alpha-70 | #FFFFFF at 70% | fixed value | #FFFFFF at 70% | fixed value |
| static/static-black-alpha-20 | #000000 at 20% | fixed value | #000000 at 20% | fixed value |
| static/static-black-alpha-40 | #000000 at 40% | fixed value | #000000 at 40% | fixed value |
| static/static-black-alpha-60 | #000000 at 60% | fixed value | #000000 at 60% | fixed value |
| static/static-facebook-blue | #1877F2 | fixed value | #1877F2 | fixed value |
| static/static-facebook-blue-pressed | #106BE1 | fixed value | #106BE1 | fixed value |

### Chart, resolved

Chart roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| chart/series-1 | #155DFC | brand/base, blue/500 | #2B7FFF | brand/base, blue/400 |
| chart/series-2 | #7D52F4 | state/feature/base-500, purple/500 | #693EE0 | state/feature/base-500, purple/600 |
| chart/series-3 | #22D3BB | state/stable/base-500, teal/500 | #1DAF9C | state/stable/base-500, teal/600 |
| chart/series-4 | #FE9A00 | state/away/base-500, yellow/500 | #E17100 | state/away/base-500, yellow/600 |
| chart/muted | #D1D1D6 | state/faded/light-200, gray/200 | #6A7282 at 24% | state/faded/light-200, gray/alpha-24 |
| chart/soft | #DEDEE0 | gray/150 | #6A7282 at 24% | gray/alpha-24 |

### Glass, resolved

Glass roles and what each value resolves to.

| Token | Light | Light resolves to | Dark | Dark resolves to |
| --- | --- | --- | --- | --- |
| glass/fill | #030712 at 10% | black/alpha-10 | #FFFFFF at 16% | white/alpha-16 |
| glass/fill-strong | #030712 at 24% | black/alpha-24 | #FFFFFF at 24% | white/alpha-24 |
| glass/separator | #030712 at 10% | black/alpha-10 | #FFFFFF at 10% | white/alpha-10 |
| glass/border | #FFFFFF at 50% | direct | #FFFFFF at 12% | direct |
| glass/edge | #DBDBDB | direct | #A6A6A6 | direct |
| glass/edge-shade | #000000 at 8% | direct | #000000 at 50% | direct |
| glass/rim | #282828 | direct | #1A1A1A | direct |
| glass/rim-light | #FFFFFF at 75% | direct | #FFFFFF at 28% | direct |
| glass/shadow | #000000 at 25% | direct | #000000 at 45% | direct |
| glass/lift | #000000 at 4% | direct | #000000 at 24% | direct |
| glass/tint-clear | #FFFFFF at 6% | direct | #FFFFFF at 8% | direct |
| glass/tint-regular | #FFFFFF at 32% | direct | #4D4D52 at 45% | direct |
| glass/tint-tinted | #F7F7FA at 86% | direct | #38383D at 86% | direct |

A value carrying a percentage is an alpha role, drawn over the ground it sits on: white in Light, near black in Dark.

[How to rebrand a mobile app in Figma with variables](https://www.appetiteui.com/blog/rebrand-mobile-app-figma-variables) and [Dark mode with Figma variables, not duplicate frames](https://www.appetiteui.com/blog/dark-mode-figma-variables).

## In the screens and the glossary

- Glossary: [Design tokens](https://www.appetiteui.com/academy/glossary/design-tokens)
- Glossary: [Semantic tokens](https://www.appetiteui.com/academy/glossary/semantic-tokens)
- Glossary: [Variable modes](https://www.appetiteui.com/academy/glossary/variable-modes)
- Glossary: [Dark mode](https://www.appetiteui.com/academy/glossary/dark-mode)