SURFACE ATLAS
Every surface has a rung.
See how the opaque surfaces step away from the page, which ones share a color, and which components read them. Values follow your current appearance.
Surface ladder · light
Each surface is anchored to a rung measured from the page background. Surfaces on the same rung render the same color.
| Token | Value | Light anchor | Dark anchor | Shares its light rung with |
|---|---|---|---|---|
background | oklch(1 0 0) | base | base | containerpopover |
background-hover | oklch(0.9906 0.002 70) | shade 50 | step 1.6 | No other surface |
background-active | oklch(0.9517 0.002 70) | shade 150 | step 1.6 | control-backgroundnav-item-hovernav-item-activenav-border |
muted | oklch(0.9811 0.002 70) | shade 75 | step 1.6 | container-hovernav-background |
muted-extralight | oklch(0.9924 0.002 70) | step -0.216 | step 0.64 | No other surface |
container | oklch(1 0 0) | base | step 1.6 | backgroundpopover |
container-hover | oklch(0.9811 0.002 70) | shade 75 | step 3.2 | mutednav-background |
container-active | oklch(0.9657 0.002 70) | shade 100 | step 1.6 | popover-hoverpopover-activedisabled |
popover | oklch(1 0 0) | base | step 3.2 | backgroundcontainer |
popover-hover | oklch(0.9657 0.002 70) | shade 100 | step 4.8 | container-activepopover-activedisabled |
popover-active | oklch(0.9657 0.002 70) | shade 100 | step 3.2 | container-activepopover-hoverdisabled |
control-background | oklch(0.9517 0.002 70) | shade 150 | step 3.2 | background-activenav-item-hovernav-item-activenav-border |
control-background-hover | oklch(0.9188 0.002 70) | shade 200 | step 4.8 | No other surface |
nav-background | oklch(0.9811 0.002 70) | shade 75 | step 1.6 | mutedcontainer-hover |
nav-item-hover | oklch(0.9517 0.002 70) | shade 150 | step 3.2 | background-activecontrol-backgroundnav-item-activenav-border |
nav-item-active | oklch(0.9517 0.002 70) | shade 150 | step 3.2 | background-activecontrol-backgroundnav-item-hovernav-border |
nav-border | oklch(0.9517 0.002 70) | shade 150 | step 3.2 | background-activecontrol-backgroundnav-item-hovernav-item-active |
disabled | oklch(0.9657 0.002 70) | shade 100 | step 1.6 | container-activepopover-hoverpopover-active |
border-focus | oklch(0.7876 0.002 70) | shade 400 | step 9.68 | No other surface |
Component tokens
The semantic colors each component part reads, with the stories that show those states.
14 of 14 component parts
| Component | Part | States | Tokens | Source | Stories |
|---|---|---|---|---|---|
| Card | Root | Rest | containercontainer-foregroundborder-default | packages/react/src/components/card/card.tsx | Default, AllVariants |
| Button | Primary variant | Rest, hover, active, disabled | primary-backgroundprimary-background-hoverprimary-background-activeprimary-foregroundprimary-disabled | packages/react/src/components/button/button.tsx | Primary, Disabled, VariantClassesMatchFigmaTokens |
| Button | Outline and dashed variants | Rest, hover, active, disabled | containercontainer-hovercontainer-activeforegroundborder-defaultborder-disabledsecondary-disableddisableddisabled-foreground | packages/react/src/components/button/button.tsx | Outline, Dashed |
| Input | Bordered field | Rest, hover, focus, invalid, disabled | containercontainer-hoverforegroundmuted-foregroundborder-defaultborder-disablederror-borderfocus-defaultfocus-errordisableddisabled-foreground | packages/react/src/components/input/input.tsx | VisualStateTokens, Invalid, Disabled |
| Input | Borderless field | Rest, hover | control-backgroundcontrol-background-hoverforeground | packages/react/src/components/input/input.tsx | BorderlessStates, BorderlessSurfaceComparison |
| InputGroup | Group frame | Rest, hover, focus, invalid, disabled | containercontainer-hovercontrol-backgroundcontrol-background-hoverborder-defaultborder-disablederror-borderfocus-defaultfocus-errordisableddisabled-foreground | packages/react/src/components/input-group/input-group.tsx | VisualStateTokens, BorderlessHoverSurface, Invalid |
| Table | Rows and header | Hover, selected, sticky header, striped rows | background-hovercontrol-backgroundcontrol-background-hovercontainermutedmuted-foregroundborder-default-alphafocus-default | packages/react/src/components/table/table.tsx | SelectableRows, Striped, StickyHeader |
| DropdownMenu | Content and item rows | Open, focus, destructive, separator | popover-alphapopover-hoverpopover-foregroundborder-defaulterror-subtle-foregrounderror-backgrounderror-foregroundborder-default-alphamuted-foreground | packages/react/src/components/dropdown-menu/dropdown-menu.tsx | KeyboardInteraction, WithDestructiveItem |
| Select | Trigger and item rows | Rest, hover, focus, invalid, disabled, checked item | containercontainer-hovercontrol-backgroundcontrol-background-hovermuted-foregroundpopover-alphapopover-hoverpopover-foregroundborder-defaultborder-disablederror-borderfocus-defaultfocus-errordisableddisabled-foreground | packages/react/src/components/select/select.tsx | AllVariants, KeyboardInteraction, InvalidTrigger, Disabled |
| Popover | Floating content | Open | popover-alphapopover-foregroundborder-default | packages/react/src/components/popover/popover.tsx | Default, Placements |
| NavigationMenu | Trigger and flyout | Rest, hover, open | backgroundbackground-hoverforegroundfocus-defaultpopover-alphapopover-hoverpopover-foregroundborder-default | packages/react/src/components/navigation-menu/navigation-menu.tsx | Default, WithoutViewport |
| Menubar | Bar, trigger, floating menu | Rest, focus, open, destructive | containercontainer-hoverforegroundborder-defaultpopover-alphapopover-hoverpopover-foregrounderror-subtle-foregrounderror-backgrounderror-foreground | packages/react/src/components/menubar/menubar.tsx | KeyboardInteraction, WithSubMenu, AllVariants |
| Sidebar | Rail and menu buttons | Rest, hover, active, open | nav-backgroundnav-foregroundnav-muted-foregroundnav-item-hovernav-item-activenav-borderfocus-default | packages/react/src/components/sidebar/sidebar.tsx | Default, InteractiveControls, StylingContracts |
| Command | Dialog content and command item | Rest, selected, separator | popoverpopover-hoverpopover-foregroundborder-defaultborder-focusborder-default-alphamuted-foreground | packages/react/src/components/command/command.tsx | WithDialog, KeyboardInteraction |