Design tokens · envUI Docs

Each token is a CSS custom property on every envUI theme boundary. Use the semantic names in application styles; the values change with the theme, the contrast and the scale.

Color roles

Token	Light	Dark	Light high contrast	Dark high contrast
`--env-color-bg-accent-emphasis`The fill of accent primary actions, as the primary emphasis fill is of the main one: saturated with white labels in light, soft with dark labels in dark; paired with fg.on-emphasis.	`#9948b6`	`#dab0ec`	`#6d1888`	`#f2d3ff`
`--env-color-bg-accent-emphasis-hover`An accent primary action under the pointer: a grade further from its label, darker in light and lighter in dark.	`#83319f`	`#eec6ff`	`#63047d`	`#f7e4ff`
`--env-color-bg-accent-emphasis-pressed`An accent primary action while pressed: in light a grade past its hover, further from its label. In dark, where lightening further would turn the soft fill nearly white, it is instead a small step deeper than rest, still clear of its dark label, so it reads as pressed rather than highlighted.	`#6d1888`	`#d29ee7`	`#57006e`	`#faedff`
`--env-color-bg-accent-muted`The translucent accent tint of soft accent badges in dark and at high contrast; in light they take color.bg.accent.soft.	`#8e3caa1f`	`#dab0ec24`	`#63047d14`	`#f2d3ff1a`
`--env-color-bg-accent-soft`The tint of a soft accent badge: in light the accent purple at 5%, so the purple text keeps 4.5:1 over it; in dark and at high contrast it is color.bg.accent.muted.	`#8e3caa0d`	`#dab0ec24`	`#63047d14`	`#f2d3ff1a`
`--env-color-bg-accent-solid`A solid accent fill, such as a solid accent badge; paired with fg.on-emphasis.	`#8e3caa`	`#dab0ec`	`#63047d`	`#f2d3ff`
`--env-color-bg-accent-strong`The accent purple of accent actions, such as Button's accent tone, in both themes; paired with fg.on-strong.	`#9948b6`	`#9948b6`	`#6d1888`	`#6d1888`
`--env-color-bg-accent-strong-hover`An accent action under the pointer.	`#83319f`	`#83319f`	`#63047d`	`#63047d`
`--env-color-bg-accent-strong-pressed`An accent action while pressed.	`#6d1888`	`#6d1888`	`#57006e`	`#57006e`
`--env-color-bg-accent-subtle`Controls in the accent tone without a fill at rest: transparent, as color.bg.neutral.subtle is.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-accent-subtle-hover`The state layer of a control without a fill in the accent tone under the pointer, and the tonal fill of an accent badge: the accent text color at 14%.	`#8e3caa24`	`#dab0ec2b`	`#63047d24`	`#f7e4ff24`
`--env-color-bg-accent-subtle-pressed`The accent state layer while pressed: the accent text color at 22%.	`#8e3caa38`	`#dab0ec40`	`#63047d38`	`#f7e4ff38`
`--env-color-bg-avatar`The default fill, the powder hue: the fill of an avatar whose hue nothing sets.	`#c0e2f6`	`#1a466f`	`#c0e2f6`	`#04335b`
`--env-color-bg-avatar-blush`The blush pink fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#ffd3d4`	`#732c30`	`#ffd3d4`	`#5e181f`
`--env-color-bg-avatar-butter`The butter yellow fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#efdca4`	`#73501f`	`#efdca4`	`#472c00`
`--env-color-bg-avatar-oat`The warm oat fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#e7dbce`	`#5a4a3e`	`#e7dbce`	`#3d2f23`
`--env-color-bg-avatar-orchid`The orchid fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#fad2ec`	`#683052`	`#fad2ec`	`#531e3f`
`--env-color-bg-avatar-periwinkle`The periwinkle fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#dadaff`	`#413c78`	`#dadaff`	`#302964`
`--env-color-bg-avatar-powder`The powder blue fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#c0e2f6`	`#1a466f`	`#c0e2f6`	`#04335b`
`--env-color-bg-avatar-sage`The sage fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#cee4c3`	`#395432`	`#cee4c3`	`#1d3817`
`--env-color-bg-avatar-seafoam`The seafoam fill, one of the hues an avatar takes from its name: a pastel, and a deep shade in dark.	`#b8e7de`	`#004c4b`	`#b8e7de`	`#003837`
`--env-color-bg-backdrop`The backdrop behind dialogs and the command palette: the dark page color at 32% in light, which sets the page back without turning it gray, and black at 70% in dark, where the page color would not darken it and less would barely dim the dark page.	`#1f1f2252`	`#000000b3`	`#1f1f2252`	`#000000b3`
`--env-color-bg-backdrop-muted`The lighter backdrop behind a sheet that leaves the page usable, such as a supporting pane over its main pane: the dark page color at 20% in light and black at 30% in dark.	`#1f1f2233`	`#0000004d`	`#1f1f2233`	`#0000004d`
`--env-color-bg-danger-emphasis`A solid danger fill, such as a solid danger badge, and the fill of destructive primary actions: a saturated red with white labels in every theme, so in dark, beside the soft primary and accent fills with their dark labels, a destructive action is the deepest and weightiest fill rather than a third pastel; paired with fg.on-strong.	`#b72b20`	`#bf3e33`	`#7a0200`	`#8d0200`
`--env-color-bg-danger-emphasis-hover`A destructive primary action under the pointer: darker in light, as every primary hovers there, and a grade lighter in dark, as every dark primary hovers, still 4.5:1 to its white label.	`#9f0300`	`#c64e43`	`#6b0100`	`#9f0300`
`--env-color-bg-danger-emphasis-pressed`A destructive primary action while pressed: in light a grade past its hover, further from its label; in dark a small step deeper than rest, as every dark primary presses, so it reads as pressed rather than highlighted.	`#7a0200`	`#b72b20`	`#5a0100`	`#7a0200`
`--env-color-bg-danger-muted`The translucent danger tint of badges and alerts: a light red in light, rather than the danger text color, which would lie at the page's own lightness and barely part from it.	`#f8aca647`	`#ce5e532e`	`#7a020014`	`#ffd3cf1a`
`--env-color-bg-danger-strong`A strong danger fill in both themes; paired with fg.on-strong. Toasts take the neutral strong fill, their tone in the icon.	`#b72b20`	`#b72b20`	`#8d0200`	`#8d0200`
`--env-color-bg-danger-strong-hover`A control on the strong danger fill under the pointer: lighter, at the lightest grade that keeps white labels at 4.5:1.	`#c64e43`	`#c64e43`	`#7a0200`	`#7a0200`
`--env-color-bg-danger-strong-pressed`A control on the strong danger fill while pressed. It can’t lighten further without its white label falling below 4.5:1, so it settles halfway back.	`#bf3e33`	`#bf3e33`	`#6b0100`	`#6b0100`
`--env-color-bg-danger-subtle`Controls in the danger tone without a fill at rest, such as an alert’s dismiss button: transparent, as color.bg.neutral.subtle is.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-danger-subtle-hover`The state layer of a control without a fill in the danger tone, such as an error alert’s dismiss button, under the pointer: the danger text color at 14%, in every theme and at high contrast.	`#b72b2024`	`#ce5e5338`	`#7a020024`	`#ffe4e224`
`--env-color-bg-danger-subtle-pressed`The danger state layer while pressed: the danger text color at 22%.	`#b72b2038`	`#ce5e534d`	`#7a020038`	`#ffe4e238`
`--env-color-bg-default`The default surface: Surface, panes, navigation and sheets. A step above the page in every theme.	`#f4f4f6`	`#28292b`	`#f8f8fa`	`#28292b`
`--env-color-bg-default-hover`An interactive default surface, such as a card or a list row, under the pointer.	`#e7e7e9`	`#383a3d`	`#eaeaec`	`#303234`
`--env-color-bg-default-pressed`An interactive default surface while pressed. Muted text and an inset focus ring keep their minimums on it.	`#dddddf`	`#424447`	`#e0e0e2`	`#383a3d`
`--env-color-bg-done-emphasis`A solid done fill; paired with fg.on-emphasis.	`#4e627e`	`#aac1dd`	`#253650`	`#d2dff0`
`--env-color-bg-done-muted`The translucent done tint of badges.	`#4e627e1f`	`#aac1dd2b`	`#25365014`	`#d2dff01a`
`--env-color-bg-field`A well that keeps a fill of its own, such as the color picker's value button and code and references in rich text. Text fields have none: they take the background of what they sit on.	`#ffffff`	`#1e1f21`	`#ffffff`	`#1e1f21`
`--env-color-bg-info-strong`A strong information fill in both themes; paired with fg.on-strong. Toasts take the neutral strong fill, their tone in the icon.	`#2c61a6`	`#2c61a6`	`#094285`	`#094285`
`--env-color-bg-info-strong-hover`A control on the strong information fill under the pointer. Its white label keeps 4.5:1.	`#376cb2`	`#376cb2`	`#003878`	`#003878`
`--env-color-bg-info-strong-pressed`A control on the strong information fill while pressed. Its white label keeps 4.5:1.	`#4177be`	`#4177be`	`#003068`	`#003068`
`--env-color-bg-inset`The page color at half strength, which leans a pill on a button’s fill back toward the page instead of adding another fill, as a diff stat in a tab does.	`#ffffff80`	`#1e1f2180`	`#ffffff80`	`#1e1f2180`
`--env-color-bg-list-item`The fill of a list item: the muted surface in both themes and at high contrast, so items stand apart from the page and from a surface.	`#ffffff`	`#303234`	`#ffffff`	`#343638`
`--env-color-bg-list-item-hover`A list item under the pointer.	`#f1f1f3`	`#424447`	`#f1f1f3`	`#383a3d`
`--env-color-bg-list-item-pressed`A list item while pressed.	`#e3e3e6`	`#4b4d51`	`#e3e3e6`	`#424447`
`--env-color-bg-muted`The filled surface: Surface background="muted", cards, list and radio rows. A step above the default surface in every theme, white in light, so cards stand apart from a pane; the raised surface takes the same fill.	`#ffffff`	`#303234`	`#ffffff`	`#343638`
`--env-color-bg-muted-hover`An interactive muted surface under the pointer.	`#f1f1f3`	`#424447`	`#f1f1f3`	`#383a3d`
`--env-color-bg-muted-pressed`An interactive muted surface while pressed.	`#e3e3e6`	`#4b4d51`	`#e3e3e6`	`#424447`
`--env-color-bg-navigation`A navigation item that isn’t selected, at rest: no fill, over the navigation’s own background.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-navigation-hover`A navigation item that isn’t selected, under the pointer: a cool gray in every theme, a step quieter than the selection, so the hovered item never reads as the current one.	`#dfe1e5`	`#424447`	`#d4d4d6`	`#383a3d`
`--env-color-bg-navigation-pressed`A navigation item that isn’t selected, while pressed: two grades deeper than the hover in light. Its label and an inset focus ring keep their minimums on it.	`#d8dade`	`#4b4d51`	`#ceced0`	`#424447`
`--env-color-bg-neutral-emphasis`A solid neutral fill, such as a solid neutral badge; paired with fg.on-emphasis.	`#616164`	`#bdbfc3`	`#39393d`	`#dbdde1`
`--env-color-bg-neutral-muted`The translucent neutral fill of secondary buttons, chips, switch tracks and skeletons: a layer of the text color, so it keeps its tone on every surface.	`#1f1f221a`	`#e8eaee20`	`#1f1f220f`	`#e8eaee14`
`--env-color-bg-neutral-muted-hover`The neutral fill under the pointer.	`#1f1f222e`	`#e8eaee33`	`#1f1f222b`	`#e8eaee1f`
`--env-color-bg-neutral-muted-pressed`The neutral fill while pressed.	`#1f1f2242`	`#e8eaee47`	`#1f1f2240`	`#e8eaee26`
`--env-color-bg-neutral-strong`The dark neutral fill of tooltips and toasts in both themes; paired with fg.on-strong, and a toast’s tone icon with fg.{success\|info\|danger}-on-strong.	`#434346`	`#424447`	`#434346`	`#424447`
`--env-color-bg-neutral-strong-hover`A control on the strong neutral fill under the pointer.	`#616164`	`#5d6166`	`#313134`	`#303234`
`--env-color-bg-neutral-strong-pressed`A control on the strong neutral fill while pressed.	`#757578`	`#72767b`	`#29292c`	`#28292b`
`--env-color-bg-neutral-subtle`Controls without a fill at rest, such as quiet buttons, inactive tabs and menubar triggers.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-neutral-subtle-hover`The state layer over a control without a fill, under the pointer.	`#1f1f2214`	`#e8eaee14`	`#1f1f220f`	`#e8eaee0f`
`--env-color-bg-neutral-subtle-pressed`The state layer over a control without a fill, while pressed.	`#1f1f221f`	`#e8eaee1f`	`#1f1f2214`	`#e8eaee14`
`--env-color-bg-page`The page behind all content: the app frame, title bars and Surface background="page". Below the default surface in every theme, so the panes and cards on it part from it; the deepest surface in light, where nothing deeper keeps edges and focus rings at 3:1.	`#eaeaec`	`#1e1f21`	`#f1f1f3`	`#1e1f21`
`--env-color-bg-page-hover`An interactive page-colored surface under the pointer.	`#dddddf`	`#2c2d30`	`#e3e3e6`	`#28292b`
`--env-color-bg-page-pressed`An interactive page-colored surface while pressed.	`#d4d4d6`	`#383a3d`	`#dadadc`	`#303234`
`--env-color-bg-popup`Popups over the page: menus, Select lists, popovers, the composer. They take elevation 2. In light white, as the raised surfaces are, its soft shadow keeping its edge over a white card or table; in dark a step lighter than the page.	`#ffffff`	`#343638`	`#f5f5f7`	`#303234`
`--env-color-bg-popup-hover`A highlighted row in a popup.	`#e0e0e2`	`#424447`	`#e7e7e9`	`#383a3d`
`--env-color-bg-popup-pressed`A pressed row in a popup.	`#d7d7d9`	`#4b4d51`	`#dddddf`	`#424447`
`--env-color-bg-primary-emphasis`The primary fill of primary actions, chosen radios and the chosen calendar day; paired with fg.on-emphasis. In dark and at high contrast, checked checkboxes, switches that are on, sliders, meters and spinners take it too: a soft blue with dark marks at 4.5:1.	`#1872e7`	`#9fc1f8`	`#00408f`	`#b5cffb`
`--env-color-bg-primary-emphasis-hover`A primary action under the pointer: a grade further from its label, darker in light and lighter in dark, so the label gains contrast.	`#005cc8`	`#bfd5fb`	`#00377c`	`#cddefc`
`--env-color-bg-primary-emphasis-pressed`A primary action while pressed: in light a grade past its hover, further from its label. In dark, where lightening further would turn the soft fill nearly white, it is instead a small step deeper than rest, still clear of its dark label, so it reads as pressed rather than highlighted.	`#004aa2`	`#8ab3f5`	`#002f6d`	`#e0ebfd`
`--env-color-bg-primary-muted`The translucent primary tint of info alerts, and of soft primary badges in dark and at high contrast; in light they take color.bg.primary.soft. An application may put a container in it, with links in fg.link-on-muted.	`#005cc81f`	`#347eea26`	`#00377c14`	`#cddefc1a`
`--env-color-bg-primary-soft`The tint of a soft primary badge. In light it is the primary blue at 5%, fainter than color.bg.primary.muted, so the blue text keeps 4.5:1 over it on list rows and muted surfaces; in dark and at high contrast it is color.bg.primary.muted.	`#005cc80d`	`#347eea26`	`#00377c14`	`#cddefc1a`
`--env-color-bg-primary-solid`A solid primary fill, such as a solid primary badge or a navigation item's count, a grade deeper than the emphasis fill in light; paired with fg.on-emphasis.	`#005cc8`	`#9fc1f8`	`#00377c`	`#cddefc`
`--env-color-bg-primary-strong`The saturated primary fill of checked checkboxes, switches that are on, sliders, meters and spinners in the light theme at standard contrast, with white marks, the check and the thumb, at 3:1. The dark theme and high contrast put those controls on the emphasis fill instead; in dark this fill, which keeps 3:1 against the surfaces, would put white text below 4.5:1.	`#1872e7`	`#4b8bec`	`#00408f`	`#00408f`
`--env-color-bg-primary-strong-hover`A checked control under the pointer.	`#005cc8`	`#347eea`	`#00377c`	`#00377c`
`--env-color-bg-primary-strong-pressed`A checked control while pressed.	`#004aa2`	`#1872e7`	`#002f6d`	`#002f6d`
`--env-color-bg-primary-subtle`Controls in the primary tone without a fill at rest, such as an alert’s dismiss button: transparent, as color.bg.neutral.subtle is.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-primary-subtle-hover`The state layer of a control without a fill in the primary tone, such as an info alert’s dismiss button, under the pointer: the primary text color at 14%, in every theme and at high contrast.	`#005cc824`	`#347eea33`	`#00377c24`	`#e0ebfd24`
`--env-color-bg-primary-subtle-pressed`The primary state layer while pressed: the primary text color at 22%.	`#005cc838`	`#347eea47`	`#00377c38`	`#e0ebfd38`
`--env-color-bg-raised`A raised surface: Surface background="raised", tables, docked panels and the pager. A step above the default surface in every theme, with the filled surface’s fill: white in light, so it lifts off the page and the panes.	`#ffffff`	`#303234`	`#ffffff`	`#343638`
`--env-color-bg-raised-hover`An interactive raised surface under the pointer.	`#f1f1f3`	`#424447`	`#f1f1f3`	`#383a3d`
`--env-color-bg-raised-pressed`An interactive raised surface while pressed.	`#e3e3e6`	`#4b4d51`	`#e3e3e6`	`#424447`
`--env-color-bg-recessed`A recessed surface: a well that what it holds rises out of, such as a stage for a preview or a drop area, and Surface background="recessed". Below the default surface in every theme: in dark a shade deeper than the page too; in light between the page and the panes, since a gray deeper than the page would take edges and focus rings below 3:1. Everything measured on the page keeps its minimum on it.	`#f1f1f3`	`#191a1b`	`#f8f8fa`	`#191a1b`
`--env-color-bg-recessed-hover`An interactive recessed surface under the pointer.	`#e3e3e6`	`#28292b`	`#eaeaec`	`#28292b`
`--env-color-bg-recessed-pressed`An interactive recessed surface while pressed.	`#dadadc`	`#343638`	`#e0e0e2`	`#343638`
`--env-color-bg-row-hover`The state layer over a tree or table row under the pointer: clear over the row's surface, and a step below the selection, so the selected row always reads strongest.	`#1f1f2212`	`#e8eaee2e`	`#1f1f220f`	`#e8eaee0f`
`--env-color-bg-row-pressed`The state layer over a tree or table row while pressed, a step stronger than its hover.	`#1f1f221c`	`#e8eaee33`	`#1f1f2214`	`#e8eaee14`
`--env-color-bg-selected`Selected navigation items, tree and table rows, Select options and drop targets; paired with fg.on-selected. A blue tint in light and a blue-gray in dark, distinct from the other items around it, at rest and under the pointer: ΔEOK 0.03 or more, 0.04 at high contrast.	`#d7e5fd`	`#293a55`	`#c8dbfc`	`#1d2e47`
`--env-color-bg-selected-hover`A selected item under the pointer: visibly deeper than the selection, and distinct from an unselected item under the pointer.	`#cddefc`	`#33445f`	`#bfd5fb`	`#253650`
`--env-color-bg-selected-pressed`A selected item while pressed. Muted text and an inset focus ring keep their minimums on it.	`#c8dbfc`	`#3c4e69`	`#bad2fb`	`#293a55`
`--env-color-bg-success-emphasis`A solid success fill; paired with fg.on-emphasis.	`#176f35`	`#7ad197`	`#00441a`	`#98f0b5`
`--env-color-bg-success-muted`The translucent success tint of badges and alerts: a light green in light, rather than the success text color, which would lie at the page's own lightness and barely part from it.	`#6dc38933`	`#3c90562e`	`#00441a14`	`#98f0b51a`
`--env-color-bg-success-strong`A strong teal success fill in both themes; paired with fg.on-strong. Toasts take the neutral strong fill, their tone in the icon.	`#236d52`	`#236d52`	`#004e37`	`#004e37`
`--env-color-bg-success-strong-hover`A control on the strong success fill under the pointer. Its white label keeps 4.5:1.	`#2f775c`	`#2f775c`	`#00432e`	`#00432e`
`--env-color-bg-success-strong-pressed`A control on the strong success fill while pressed. Its white label keeps 4.5:1.	`#3b8266`	`#3b8266`	`#003a28`	`#003a28`
`--env-color-bg-success-subtle`Controls in the success tone without a fill at rest, such as an alert’s dismiss button: transparent, as color.bg.neutral.subtle is.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-success-subtle-hover`The state layer of a control without a fill in the success tone, such as a success alert’s dismiss button, under the pointer: the success text color at 14%, in every theme and at high contrast.	`#176f3524`	`#3c905638`	`#00441a24`	`#a5fdc124`
`--env-color-bg-success-subtle-pressed`The success state layer while pressed: the success text color at 22%.	`#176f3538`	`#3c90564d`	`#00441a38`	`#a5fdc138`
`--env-color-bg-warning-emphasis`A solid warning fill; paired with fg.on-emphasis.	`#8a5504`	`#ebb750`	`#553200`	`#ffd890`
`--env-color-bg-warning-muted`The translucent warning tint of badges and alerts: a clean light amber rather than the warning text color, which would turn a light surface tan.	`#ffd0783d`	`#a06a1833`	`#ffd0783d`	`#ffd8901a`
`--env-color-bg-warning-subtle`Controls in the warning tone without a fill at rest, such as an alert’s dismiss button: transparent, as color.bg.neutral.subtle is.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-color-bg-warning-subtle-hover`The stronger warning tint, which fills a warning alert and a soft badge and lies under a control without a fill in the warning tone, such as a warning alert’s dismiss button, under the pointer: a light amber at 36% in light, at either contrast, so a light surface takes a clean amber rather than tan; the warning text color at 17% in dark, and 14% at high contrast.	`#ffd0785c`	`#a06a1842`	`#ffd0785c`	`#ffe8be24`
`--env-color-bg-warning-subtle-pressed`The warning state layer while pressed: the light amber at 50% in light, at either contrast; the warning text color at 25% in dark, and 22% at high contrast.	`#ffd07880`	`#a06a185c`	`#ffd07880`	`#ffe8be38`
`--env-color-border-accent`A decorative edge in the accent tone, around an outlined accent badge: the accent text color at 55%.	`#8e3caa8c`	`#dab0ec8c`	`#63047d8c`	`#f7e4ff8c`
`--env-color-border-danger`A decorative edge in the danger tone, around an outlined badge and a message that failed to send: the danger text color at 55%, in every theme and at high contrast.	`#b72b208c`	`#f8aca68c`	`#7a02008c`	`#ffe4e28c`
`--env-color-border-danger-emphasis`The border of an invalid field.	`#b72b20`	`#f8aca6`	`#7a0200`	`#ffe4e2`
`--env-color-border-danger-emphasis-hover`An invalid field border, and a destructive outline button's edge, under the pointer: darker, as the active field border steps.	`#9f0300`	`#e68c84`	`#6b0100`	`#ffedeb`
`--env-color-border-danger-emphasis-pressed`An invalid field border, and a destructive outline button's edge, while pressed.	`#7a0200`	`#d66d63`	`#5a0100`	`#fff6f5`
`--env-color-border-danger-muted`The faint edge of an error alert: the danger text color at 28%, in every theme and at high contrast.	`#b72b2047`	`#f8aca647`	`#7a020047`	`#ffe4e247`
`--env-color-border-danger-strong`The edge of the strong danger fill where it floats. In light the fill is dark on a light page, so its edge is the fill a step darker, about 1.3:1 from it: it reads as the fill’s own edge rather than a light halo, and still sets the fill apart from a surface of its color. High contrast keeps that step, from the darker high-contrast fill, far above 4.5:1 on the page. In dark, where the fill is lighter than the page as every popup is, it is the popup edge, elevation.2.border, and color.border.default at high contrast. A dark edge, unlike the 0.7 alias color.border-strong, which is the light divider color, border.muted.	`#9f0300`	`#686b70`	`#6b0100`	`#a1a4a9`
`--env-color-border-default`The boundary of a control that has no other edge: outlined fields and buttons, the track of a switch that is off. At least 3:1 on every surface.	`#808083`	`#898c91`	`#6b6b6e`	`#a1a4a9`
`--env-color-border-default-hover`A control boundary under the pointer.	`#757578`	`#95989c`	`#616164`	`#afb1b6`
`--env-color-border-default-pressed`A control boundary while pressed.	`#6b6b6e`	`#a1a4a9`	`#57575a`	`#bdbfc3`
`--env-color-border-done`A decorative edge in the done tone, around an outlined badge: the done text color at 55%, in every theme and at high contrast.	`#4e627e8c`	`#aac1dd8c`	`#2536508c`	`#deecfd8c`
`--env-color-border-focus`Focus rings: at least 3:1 against what they are drawn on.	`#0366da`	`#9fc1f8`	`#0053b5`	`#b5cffb`
`--env-color-border-info-strong`The edge of the strong information fill where it floats. In light the fill is dark on a light page, so its edge is the fill a step darker, about 1.3:1 from it: it reads as the fill’s own edge rather than a light halo, and still sets the fill apart from a surface of its color. High contrast keeps that step, from the darker high-contrast fill, far above 4.5:1 on the page. In dark, where the fill is lighter than the page as every popup is, it is the popup edge, elevation.2.border, and color.border.default at high contrast. A dark edge, unlike the 0.7 alias color.border-strong, which is the light divider color, border.muted.	`#174d90`	`#686b70`	`#003068`	`#a1a4a9`
`--env-color-border-media`A neutral inner edge that defines content of any color, such as the color picker’s area: black at 5% in both themes.	`#0000000d`	`#0000000d`	`#0000000d`	`#0000000d`
`--env-color-border-muted`The hairlines between the items of one list, across its full width: table rows, Markdown rules, menu separators and accordion items; and decorative edges that are not a control’s only boundary: quote bars, keyboard keys and color swatches. Regions separate by space and background instead. A floating layer takes its own, clearer edge, elevation.{level}.border.	`#d1d1d3`	`#5d6166`	`#6b6b6e`	`#a1a4a9`
`--env-color-border-muted-hover`A decorative outline under the pointer, such as a resize handle or a pager link.	`#bfbfc1`	`#7d8185`	`#616164`	`#afb1b6`
`--env-color-border-muted-pressed`A decorative outline while pressed.	`#a4a4a7`	`#95989c`	`#57575a`	`#bdbfc3`
`--env-color-border-neutral`A decorative edge in the neutral tone, around an outlined badge: the muted text color at 55%, in every theme and at high contrast.	`#6161648c`	`#bdbfc38c`	`#3131348c`	`#e8eaee8c`
`--env-color-border-neutral-strong`The edge of the strong neutral fill where it floats, on tooltips and toasts. In light the fill is dark on a light page, so its edge is the fill a step darker, about 1.3:1 from it: it reads as the fill’s own edge rather than a light halo, and still sets the fill apart from a surface of its color. High contrast keeps that step, from the darker high-contrast fill, far above 4.5:1 on the page. In dark, where the fill is lighter than the page as every popup is, it is the popup edge, elevation.2.border, and color.border.default at high contrast. A dark edge, unlike the 0.7 alias color.border-strong, which is the light divider color, border.muted.	`#313134`	`#686b70`	`#313134`	`#a1a4a9`
`--env-color-border-primary`A decorative edge in the primary tone, around an outlined primary badge: the primary text color at 55%, in every theme and at high contrast.	`#005cc88c`	`#9fc1f88c`	`#00377c8c`	`#e0ebfd8c`
`--env-color-border-primary-emphasis`The active border and label of a focused field, and today’s ring in a calendar.	`#1872e7`	`#9fc1f8`	`#00408f`	`#b5cffb`
`--env-color-border-primary-emphasis-hover`An active field border under the pointer.	`#005cc8`	`#8ab3f5`	`#00377c`	`#cddefc`
`--env-color-border-primary-emphasis-pressed`An active field border while pressed.	`#00408f`	`#75a5f2`	`#002f6d`	`#e0ebfd`
`--env-color-border-primary-muted`The faint edge of an info alert: the primary text color at 28%, in every theme and at high contrast.	`#005cc847`	`#9fc1f847`	`#00377c47`	`#e0ebfd47`
`--env-color-border-success`A decorative edge in the success tone, around an outlined badge: the success text color at 55%, in every theme and at high contrast.	`#176f358c`	`#7ad1978c`	`#00441a8c`	`#a5fdc18c`
`--env-color-border-success-muted`The faint edge of a success alert: the success text color at 28%, in every theme and at high contrast.	`#176f3547`	`#7ad19747`	`#00441a47`	`#a5fdc147`
`--env-color-border-success-strong`The edge of the strong success fill where it floats. In light the fill is dark on a light page, so its edge is the fill a step darker, about 1.3:1 from it: it reads as the fill’s own edge rather than a light halo, and still sets the fill apart from a surface of its color. High contrast keeps that step, from the darker high-contrast fill, far above 4.5:1 on the page. In dark, where the fill is lighter than the page as every popup is, it is the popup edge, elevation.2.border, and color.border.default at high contrast. A dark edge, unlike the 0.7 alias color.border-strong, which is the light divider color, border.muted.	`#03593f`	`#686b70`	`#003a28`	`#a1a4a9`
`--env-color-border-warning`A decorative edge in the warning tone, around an outlined badge: the warning text color at 55%, in every theme and at high contrast.	`#8a55048c`	`#ebb7508c`	`#5532008c`	`#ffe8be8c`
`--env-color-border-warning-muted`The faint edge of a warning alert: the warning text color at 28%, in every theme and at high contrast.	`#8a550447`	`#ebb75047`	`#55320047`	`#ffe8be47`
`--env-color-fg-accent`Accent text and icons: the purple of an accent badge.	`#83319f`	`#dab0ec`	`#63047d`	`#f7e4ff`
`--env-color-fg-avatar`The default initials, on the powder fill.	`#39648d`	`#9fc4dc`	`#0f3b64`	`#d3efff`
`--env-color-fg-avatar-figure`The default figure, on the powder fill.	`#39648d`	`#9fc4dc`	`#0f3b64`	`#d3efff`
`--env-color-fg-avatar-figure-blush`The default figure on the blush fill, the shade of its initials.	`#924c4f`	`#e6b2b4`	`#682227`	`#ffe4e5`
`--env-color-fg-avatar-figure-butter`The default figure on the butter fill, the shade of its initials.	`#7c5b2a`	`#efdca4`	`#523300`	`#fde9b1`
`--env-color-fg-avatar-figure-oat`The default figure on the oat fill, the shade of its initials.	`#6e5e51`	`#d8ccbf`	`#46372b`	`#f5e8db`
`--env-color-fg-avatar-figure-orchid`The default figure on the orchid fill, the shade of its initials.	`#864f70`	`#deb3ce`	`#5d2648`	`#ffe2f5`
`--env-color-fg-avatar-figure-periwinkle`The default figure on the periwinkle fill, the shade of its initials.	`#5d5a96`	`#bcbbe6`	`#38326d`	`#e8e9ff`
`--env-color-fg-avatar-figure-powder`The default figure on the powder fill, the shade of its initials.	`#39648d`	`#9fc4dc`	`#0f3b64`	`#d3efff`
`--env-color-fg-avatar-figure-sage`The default figure on the sage fill, the shade of its initials.	`#4d6845`	`#bed4b3`	`#26401f`	`#dbf1d0`
`--env-color-fg-avatar-figure-seafoam`The default figure on the seafoam fill, the shade of its initials.	`#266b68`	`#97c9c1`	`#004140`	`#c5f4eb`
`--env-color-fg-avatar-blush`The initials on the blush fill.	`#924c4f`	`#e6b2b4`	`#682227`	`#ffe4e5`
`--env-color-fg-avatar-butter`The initials on the butter fill.	`#7c5b2a`	`#efdca4`	`#523300`	`#fde9b1`
`--env-color-fg-avatar-oat`The initials on the oat fill.	`#6e5e51`	`#d8ccbf`	`#46372b`	`#f5e8db`
`--env-color-fg-avatar-orchid`The initials on the orchid fill.	`#864f70`	`#deb3ce`	`#5d2648`	`#ffe2f5`
`--env-color-fg-avatar-periwinkle`The initials on the periwinkle fill.	`#5d5a96`	`#bcbbe6`	`#38326d`	`#e8e9ff`
`--env-color-fg-avatar-powder`The initials on the powder fill.	`#39648d`	`#9fc4dc`	`#0f3b64`	`#d3efff`
`--env-color-fg-avatar-sage`The initials on the sage fill.	`#4d6845`	`#bed4b3`	`#26401f`	`#dbf1d0`
`--env-color-fg-avatar-seafoam`The initials on the seafoam fill.	`#266b68`	`#97c9c1`	`#004140`	`#c5f4eb`
`--env-color-fg-control`The labels of navigation items, secondary buttons and Select options, the values of meters and sliders, and the thumb of a switch that is off.	`#434346`	`#e8eaee`	`#29292c`	`#eff1f5`
`--env-color-fg-danger`Danger text and icons, and field errors.	`#ac190f`	`#f8aca6`	`#7a0200`	`#ffe4e2`
`--env-color-fg-danger-on-strong`A danger toast’s icon, on the neutral strong fill of toasts in both themes, at 3:1 on its tinted disc.	`#f8aca6`	`#f8aca6`	`#ffd3cf`	`#ffd3cf`
`--env-color-fg-danger-hover`A danger text button under the pointer: a grade darker in light and in dark, as a link is.	`#9f0300`	`#ee9c95`	`#6b0100`	`#ffedeb`
`--env-color-fg-danger-pressed`A danger text button while pressed: a grade past its hover.	`#7a0200`	`#e68c84`	`#5a0100`	`#fff6f5`
`--env-color-fg-default`Body text and the labels of rows, fields and choice controls.	`#1f1f22`	`#e8eaee`	`#131315`	`#f6f8fc`
`--env-color-fg-disabled`The label, value and icon of a control that is disabled: quieter than muted text yet still readable, so a disabled control reads as unavailable rather than missing; its fill or outline quiets more. Disabled controls are exempt from the contrast minimums.	`#808083`	`#898c91`	`#57575a`	`#a1a4a9`
`--env-color-fg-done`Done text and icons.	`#455874`	`#aac1dd`	`#253650`	`#deecfd`
`--env-color-fg-info-on-strong`An information toast’s icon, on the neutral strong fill of toasts in both themes, at 3:1 on its tinted disc.	`#9fc1f8`	`#9fc1f8`	`#cddefc`	`#cddefc`
`--env-color-fg-link`Links and text buttons: at least 4.5:1 on every surface and row.	`#0053b5`	`#9fc1f8`	`#00377c`	`#e0ebfd`
`--env-color-fg-link-on-muted`Links and text buttons on a tint, where fg.link falls below 4.5:1: inside alerts, on bg.primary.muted, and in list rows and interactive table rows under the pointer or pressed. In light it is a grade darker than fg.link and darkens on hover and press; in dark it is a grade lighter than fg.link, so it keeps 4.5:1 on a hovered or pressed row, and lightens on hover and press, where fg.link darkens. Alerts and those rows point fg.link at it; an application puts it on bg.brand-muted.	`#0053b5`	`#b5cffb`	`#00377c`	`#e0ebfd`
`--env-color-fg-link-on-muted-hover`A link on a tint under the pointer.	`#004aa2`	`#cddefc`	`#002f6d`	`#eaf2ff`
`--env-color-fg-link-on-muted-pressed`A link on a tint while pressed.	`#00408f`	`#dbe8fd`	`#00275c`	`#f4f8ff`
`--env-color-fg-link-hover`A link under the pointer.	`#004aa2`	`#8ab3f5`	`#002f6d`	`#eaf2ff`
`--env-color-fg-link-pressed`A link while pressed: a grade past its hover in light.	`#00377c`	`#75a5f2`	`#00275c`	`#f4f8ff`
`--env-color-fg-muted`Supporting text, icons, field labels, descriptions and placeholders, row details, unchecked checkbox rings: every former synonym (muted, quiet, icon, field label, hint, placeholder, row detail).	`#4d4d50`	`#bdbfc3`	`#313134`	`#e8eaee`
`--env-color-fg-muted-hover`Muted text that responds to the pointer, such as a Disclosure summary, gains contrast.	`#434346`	`#ccced2`	`#29292c`	`#eff1f5`
`--env-color-fg-muted-pressed`Muted text while pressed.	`#39393d`	`#dbdde1`	`#1f1f22`	`#f6f8fc`
`--env-color-fg-on-emphasis`Text and icons on the emphasis fills: white in light, dark in dark.	`#ffffff`	`#1e1f21`	`#ffffff`	`#121315`
`--env-color-fg-on-selected`Text and indicators on bg.selected and its states.	`#0053b5`	`#b5cffb`	`#002f6d`	`#cddefc`
`--env-color-fg-on-strong`White in both themes, on the strong fills: labels at 4.5:1 on the danger, accent, neutral, success and information fills, at rest, hovered and pressed; marks at 3:1 on the primary strong fill.	`#ffffff`	`#ffffff`	`#ffffff`	`#ffffff`
`--env-color-fg-primary`Primary text and icons: the primary tone, outlined button labels, the selected tab, a field's focused label, the icon of a pager link.	`#0053b5`	`#9fc1f8`	`#00377c`	`#e0ebfd`
`--env-color-fg-rating-star`The filled stars and the filled half of a half star: a clear gold.	`#dea846`	`#ebb750`	`#553200`	`#ffe8be`
`--env-color-fg-success`Success text and icons.	`#02652b`	`#7ad197`	`#00441a`	`#a5fdc1`
`--env-color-fg-success-on-strong`A success toast’s icon, on the neutral strong fill of toasts in both themes, at 3:1 on its tinted disc.	`#7ad197`	`#7ad197`	`#98f0b5`	`#98f0b5`
`--env-color-fg-warning`Warning text and icons.	`#7e4b00`	`#ebb750`	`#553200`	`#ffe8be`

Elevation

Token	Light	Dark	Light high contrast	Dark high contrast
`--env-elevation-0-border`The edge of a level-0 layer, which lies in the page: none.	`transparent`	`transparent`	`transparent`	`transparent`
`--env-elevation-1-border`The edge of a level-1 layer, the same as every level's: where a floating layer is solid, the edge and its fill set it apart.	`#b1b1b4`	`#686b70`	`#6b6b6e`	`#a1a4a9`
`--env-elevation-2-border`The edge of menus, Select and Combobox lists, popovers, hover cards, pickers, rich text suggestions, docked panels and drag images: about 2:1 against a popup's own fill and the page, and at least 1.6:1 against every surface it floats over.	`#b1b1b4`	`#686b70`	`#6b6b6e`	`#a1a4a9`
`--env-elevation-3-border`The edge of dialogs, sheets and the command palette where they are solid: in light the default border's gray, a step stronger than level 2's, as the light backdrop dims the page to about level 2's gray; in dark the same as level 2's. A dialog and the palette otherwise part by their fill and the popups' soft shadow, a sheet by its fill.	`#808083`	`#686b70`	`#131315`	`#a1a4a9`

Typography

Token	Comfortable	Compact
`--env-font-family`envUI's typeface, Geist, which the package ships, falling back to the system's sans-serif.	`'envUI Geist', sans-serif`	`'envUI Geist', sans-serif`
`--env-font-size-body`Running text: Text's body variant and a type role's default, 15 px in the comfortable scale.	`0.9375rem`	`0.8125rem`
`--env-font-size-body-sm`Supporting text: Text's body-sm and caption variants, 14 px in the comfortable scale.	`0.875rem`	`0.75rem`
`--env-font-size-caption`Captions, a menu's group labels and other small secondary text.	`0.75rem`	`0.6875rem`
`--env-font-size-headline`A page's heading: Text's headline variant, 22 px in the comfortable scale: a clear step above a section's title.	`1.375rem`	`1.25rem`
`--env-font-size-label`The label of a control, and the text of menu, tree and option rows.	`0.875rem`	`0.8125rem`
`--env-font-size-label-sm`A label inside a field at the control height, such as a combobox chip's.	`0.8125rem`	`0.75rem`
`--env-font-size-title`A section's heading: Text's title variant, 18 px in the comfortable scale: a step above body text in size as well as weight.	`1.125rem`	`1rem`
`--env-font-weight-body`The weight of running text, which the body type roles take: regular.	`400`	`400`
`--env-font-weight-medium`Medium, 500: headings, labels that lead and emphasis in a row.	`500`	`500`
`--env-font-weight-regular`Regular, 400: running text and most labels.	`400`	`400`
`--env-font-weight-semibold`Semibold, 600: the strongest emphasis in a small space, such as today in a calendar.	`600`	`600`
`--env-type-body`Running text: Text's body variant, regular.	`font-family: 'envUI Geist', sans-serif; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.4em`	`font-family: 'envUI Geist', sans-serif; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.4em`
`--env-type-body-sm`Supporting text: Text's body-sm and caption variants, regular.	`font-family: 'envUI Geist', sans-serif; font-size: 0.875rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.4em`	`font-family: 'envUI Geist', sans-serif; font-size: 0.875rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.4em`
`--env-type-display`Display text, Text's display variant: medium, 1.75 to 2.75 rem with the window, set tight.	`500 clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem) / 1.1 'envUI Geist', sans-serif`	`500 clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem) / 1.1 'envUI Geist', sans-serif`
`--env-type-headline`A page's heading: Text's headline variant, medium, its lines tighter than body text's and its letters a touch closer, as larger type wants.	`font-family: 'envUI Geist', sans-serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.0125rem; line-height: 1.3em`	`font-family: 'envUI Geist', sans-serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.0125rem; line-height: 1.3em`
`--env-type-title`A section's heading: Text's title variant, medium, its lines a little tighter than body text's and its letters a touch closer.	`font-family: 'envUI Geist', sans-serif; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.00625rem; line-height: 1.35em`	`font-family: 'envUI Geist', sans-serif; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.00625rem; line-height: 1.35em`

Spacing

Token	Comfortable	Compact
`--env-space-1`Spacing step 1: 4 px, the same in both scales.	`0.25rem`	`0.25rem`
`--env-space-2`Spacing step 2: 8 px in the comfortable scale, 6 px in compact.	`0.5rem`	`0.375rem`
`--env-space-3`Spacing step 3: 12 px in the comfortable scale, 10 px in compact.	`0.75rem`	`0.625rem`
`--env-space-4`Spacing step 4: 16 px in the comfortable scale, 12 px in compact.	`1rem`	`0.75rem`
`--env-space-5`Spacing step 5: 24 px in the comfortable scale, 20 px in compact.	`1.5rem`	`1.25rem`
`--env-space-6`Spacing step 6: 32 px in the comfortable scale, 26 px in compact.	`2rem`	`1.625rem`
`--env-space-7`Spacing step 7: 40 px in the comfortable scale, 32 px in compact.	`2.5rem`	`2rem`
`--env-space-8`Spacing step 8: 48 px in the comfortable scale, 38 px in compact.	`3rem`	`2.375rem`
`--env-space-9`Spacing step 9: 64 px in the comfortable scale, 52 px in compact.	`4rem`	`3.25rem`

Corners

Token	Comfortable	Compact
`--env-radius-full`The full corner of a pill, such as a button, a field, a badge or a navigation item: half the tallest single-line control, the large control height or the touch height, whichever is more, so anything taller keeps the same corners and becomes a rounded rectangle.	`calc(max(3rem, 2.75rem) / 2)`	`calc(max(3rem, 2.75rem) / 2)`
`--env-radius-lg`Medium corners: fields, tables, alerts and other blocks.	`1rem`	`0.75rem`
`--env-radius-md`Corners between sm and lg, such as a navigation item's indicator.	`0.75rem`	`0.625rem`
`--env-radius-none`Square corners.	`0rem`	`0rem`
`--env-radius-row-inner`The corners where connected rows meet: small, so the rows read as one block.	`0.5rem`	`0.5rem`
`--env-radius-row-outer`The outer corners of connected rows, the first row's top and the last row's bottom: a surface's.	`1.75rem`	`1.75rem`
`--env-radius-row-single`A row that stands alone, with the outer corners on every side.	`1.75rem`	`1.75rem`
`--env-radius-sm`Small corners: buttons in a group, chips, menu rows, list rows inside a surface.	`0.5rem`	`0.375rem`
`--env-radius-surface`The rounded corners of surfaces, dialogs and popups.	`1.75rem`	`1.75rem`
`--env-radius-xl`The largest corners of the scale.	`1.75rem`	`1.375rem`
`--env-radius-xs`The smallest corners, such as a checkbox's box and a color swatch.	`0.25rem`	`0.1875rem`

Sizes

Token	Comfortable	Compact
`--env-control-border-width`The hairline border of controls and fields, which stays 1 px in both scales.	`1px`	`1px`
`--env-control-font-size`The text of a control and of a field's value: the body size, and 1 rem under a coarse pointer, where smaller text makes touch browsers zoom into a focused field.	`0.9375rem`	`0.9375rem`
`--env-control-gap`The space between a control's icon and its label.	`0.4375rem`	`0.375rem`
`--env-control-height`The height a control takes when it sets no size: md, unless a container sets it to another control height for what it holds, as a table cell does with sm.	`2.5rem`	`2.5rem`
`--env-control-height-lg`The large control height, for a control of size lg, such as a prominent call to action.	`3rem`	`2.75rem`
`--env-control-height-md`The medium control height, every control's default size.	`2.5rem`	`2.25rem`
`--env-control-height-sm`The small control height: a control of size sm, the actions in a table cell, a title bar or a panel header.	`2rem`	`1.75rem`
`--env-control-height-touch`The height every control grows to under a coarse pointer, whatever the scale, and the width of a button: its own box is its hit area. Rows grow to it too.	`2.75rem`	`2.75rem`
`--env-control-icon-size`The icon in a control. 1 rem in both scales: icons never get smaller than this.	`1rem`	`1rem`
`--env-control-target-min`The smallest a pressable target may be in either dimension, in both scales: WCAG 2.2's 24 px minimum. A control smaller than its size, such as a segment inside a small rail or an action inside a small field, keeps at least this.	`1.5rem`	`1.5rem`
`--env-icon-size-lg`A leading icon in a large row, such as a list item's.	`1.25rem`	`1.125rem`
`--env-icon-size-md`An icon beside body text, such as in a tree or a select trigger.	`1.125rem`	`1rem`
`--env-icon-size-sm`A small icon, such as inside a control: the control's icon size, 1 rem.	`1rem`	`1rem`
`--env-picture-size-lg`A picture beside a name with a second line, such as an account header.	`3rem`	`3rem`
`--env-picture-size-md`A picture beside a name in a list, a comment or a toolbar: an avatar's default size.	`2rem`	`2rem`
`--env-picture-size-sm`A small picture, beside compact text such as a combobox option or the application's name in a top bar.	`1.5rem`	`1.5rem`
`--env-picture-size-xl`The largest picture, such as on a profile page or a sign-in screen.	`5.5rem`	`5.5rem`
`--env-row-content-height`The line a tree row reserves for its label and icon, 20 px in both scales; the row's density adds its block padding around it.	`1.25rem`	`1.25rem`
`--env-row-height`The day of a calendar, and the base of a popup's row: a menu's, a select's or a combobox's rows are a quarter rem taller.	`2.25rem`	`1.75rem`
`--env-row-padding-block-lg`Row density lg.	`0.75rem`	`0.375rem`
`--env-row-padding-block-md`Row density md: the default of tables and lists.	`0.5rem`	`0.25rem`
`--env-row-padding-block-sm`Row density sm: a tree's default.	`0.25rem`	`0.125rem`
`--env-row-padding-block-xs`Row density xs: the block padding of each row of a data component, such as a table, a tree or a list.	`0.125rem`	`0rem`
`--env-row-padding-inline`Text in rows keeps clear of the large outer corners, whether a row stands alone or is connected.	`1.5rem`	`1.25rem`
`--env-title-bar-height`A window title bar drawn by the application, which holds controls of size sm.	`2.5rem`	`2rem`
`--env-tree-row-padding-block-lg`A tree row's block padding at density lg: the row density's in the comfortable scale.	`0.75rem`	`0.4375rem`
`--env-tree-row-padding-block-md`A tree row's block padding at density md: the row density's in the comfortable scale.	`0.5rem`	`0.3125rem`
`--env-tree-row-padding-block-sm`A tree row's block padding at density sm, its default, so that a row is as tall as a menu row in either scale: the row density's in the comfortable scale.	`0.25rem`	`0.25rem`

Motion

Token	Comfortable	Compact
`--env-motion-duration-fast`A small change, such as a state layer, a color under the pointer or a tooltip: 120 ms.	`0.12s`	`0.12s`
`--env-motion-duration-medium`A part that opens, moves or fades in, such as a popup or a field's floating label: 160 ms.	`0.16s`	`0.16s`
`--env-motion-duration-slow`A larger movement, such as a sheet sliding in or a dialog's backdrop: 240 ms.	`0.24s`	`0.24s`
`--env-motion-ease`The standard easing of a change on screen, which speeds up and then settles.	`cubic-bezier(0.45, 0, 0.2, 1)`	`cubic-bezier(0.45, 0, 0.2, 1)`
`--env-motion-ease-enter`Elements entering, their fade included, and feedback under the pointer start at once and decelerate into place.	`cubic-bezier(0.05, 0.7, 0.1, 1)`	`cubic-bezier(0.05, 0.7, 0.1, 1)`
`--env-motion-ease-exit`Leaving elements accelerate away.	`cubic-bezier(0.4, 0, 1, 1)`	`cubic-bezier(0.4, 0, 1, 1)`

States

Token	Comfortable	Compact
`--env-state-disabled-opacity`The opacity of a disabled control, which keeps its colors: 48%.	`0.48`	`0.48`
`--env-state-focus-opacity`The state layer of keyboard focus, under the focus ring: 10% of the content color.	`0.1`	`0.1`
`--env-state-hover-opacity`The state layer under the pointer: 8% of the content color over the container.	`0.08`	`0.08`
`--env-state-pressed-opacity`The state layer while pressed: 10% of the content color over the container.	`0.1`	`0.1`

Other tokens

Token	Comfortable	Compact
`--env-badge-count-height`The height, and the least width, of a counter badge and a diff stat.	`1.25rem`	`1rem`
`--env-line-height-body`The line height of a theme boundary's text, which an application may set: 1.4 times the font size.	`1.4`	`1.4`
`--env-top-bar-height`TopBar's height: a single row that holds controls of the control height with space around them.	`3.25rem`	`2.625rem`
`--env-viewport-gutter`The least space between the window's edge and a dialog, the command palette or rich text suggestions: 0.75 to 1 rem, with the window.	`clamp(0.75rem, 2vw, 1rem)`	`clamp(0.75rem, 2vw, 1rem)`
`--env-window-class-expanded`52.5 rem: where expanded starts, such as a tablet held sideways.	`52.5rem`	`52.5rem`
`--env-window-class-large`75 rem: where large starts, such as a desktop window.	`75rem`	`75rem`
`--env-window-class-medium`37.5 rem: where medium starts, such as a tablet held upright or a narrow desktop window; narrower is compact, such as a phone.	`37.5rem`	`37.5rem`
`--env-z-backdrop`The backdrop behind a modal layer, which covers the page and the frame.	`90`	`90`
`--env-z-base`The flow of a page or a component; a part drawn behind its siblings takes calc(var(--env-z-base) - 1).	`0`	`0`
`--env-z-modal`Modal layers over their backdrop: dialogs, sheets and the command palette.	`100`	`100`
`--env-z-popup`Popups anchored to a control, also inside a modal layer: menus, popovers, hover cards, the lists of Select and Combobox, and suggestions.	`110`	`110`
`--env-z-raised`A part raised over its siblings inside a component or a region: a sticky table header, a resize handle, the hovered avatar of a group.	`1`	`1`
`--env-z-sticky`Sticky parts that content scrolls under: a sticky TopBar or PageHeader.	`20`	`20`
`--env-z-supporting-pane`A supporting pane that opens over its main pane as a sheet, and the backdrop behind it, above the sticky parts.	`30`	`30`
`--env-z-toast`Notifications, above the popups and modal layers they report on.	`120`	`120`
`--env-z-tooltip`Tooltips, above everything they can describe.	`130`	`130`