| Name | Value | Resolved value | Description |
|---|---|---|---|
| global.borderwidth.none | 0 | ||
| global.borderwidth.XS | {core.dimension.12} | 1 | Buttons, Inputs. Dividing lines and container borders. |
| global.borderwidth.S | {core.dimension.25} | 2 | Buttons. Step flow, Validation bars |
| global.borderwidth.M | {core.dimension.38} | 3 | Focus |
| global.borderwidth.L | {core.dimension.50} | 4 | Focus underline. Dividing lines. |
| global.borderwidth.XL | {core.dimension.75} | 6 | Double Focus Border |
| global.borderwidth.XXL | {core.dimension.100} | 8 |
Global
| Name | Value |
|---|---|
| global.breakpoint.XS | 320 |
| global.breakpoint.S | 600 |
| global.breakpoint.M | 960 |
| global.breakpoint.L | 1260 |
| global.breakpoint.XL | 1600 |
| global.breakpoint.XXL | 1920 |
Aa — global.font.fluid.heading.S
Aa — global.font.fluid.heading.M
Aa — global.font.fluid.heading.L
Aa — global.font.fluid.subheading.M
Aa — global.font.fluid.subheading.L
Aa — global.font.fluid.section.heading.S
Aa — global.font.fluid.section.heading.M
Aa — global.font.fluid.body.regular.S
Aa — global.font.fluid.body.regular.M
Aa — global.font.fluid.body.regular.L
Aa — global.font.fluid.body.medium.S
Aa — global.font.fluid.body.medium.M
Aa — global.font.fluid.body.medium.L
Aa — global.font.fluid.comp.medium.XS
Aa — global.font.fluid.comp.medium.S
Aa — global.font.fluid.comp.medium.M
Aa — global.font.fluid.comp.medium.L
Aa — global.font.fluid.comp.regular.XS
Aa — global.font.fluid.comp.regular.S
Aa — global.font.fluid.comp.regular.M
Aa — global.font.fluid.comp.regular.L
Aa — global.font.fluid.comp.icon.S
Aa — global.font.fluid.comp.icon.M
Aa — global.font.fluid.comp.icon.L
Aa — global.font.fluid.comp.lined.regular.S
Aa — global.font.fluid.comp.lined.regular.M
Aa — global.font.fluid.comp.lined.regular.L
Aa — global.font.fluid.comp.lined.medium.S
Aa — global.font.fluid.comp.lined.medium.M
Aa — global.font.fluid.comp.lined.medium.L
Aa — global.font.fluid.comp.placeholder.XS
Aa — global.font.fluid.comp.placeholder.S
Aa — global.font.fluid.comp.placeholder.M
Aa — global.font.fluid.comp.placeholder.ML
Aa — global.font.fluid.comp.placeholder.L
Aa — global.font.fluid.comp.placeholder.XL
Aa — global.font.fluid.comp.placeholder.XXL
Aa — global.font.static.heading.S
Aa — global.font.static.heading.M
Aa — global.font.static.heading.L
Aa — global.font.static.subheading.M
Aa — global.font.static.subheading.L
Aa — global.font.static.section.heading.S
Aa — global.font.static.section.heading.M
Aa — global.font.static.body.regular.S
Aa — global.font.static.body.regular.M
Aa — global.font.static.body.regular.L
Aa — global.font.static.body.medium.S
Aa — global.font.static.body.medium.M
Aa — global.font.static.body.medium.L
Aa — global.font.static.comp.medium.XS
Aa — global.font.static.comp.medium.S
Aa — global.font.static.comp.medium.M
Aa — global.font.static.comp.medium.L
Aa — global.font.static.comp.regular.XS
Aa — global.font.static.comp.regular.S
Aa — global.font.static.comp.regular.M
Aa — global.font.static.comp.regular.L
Aa — global.font.static.comp.icon.S
Aa — global.font.static.comp.icon.M
Aa — global.font.static.comp.icon.L
Aa — global.font.static.comp.lined.regular.S
Aa — global.font.static.comp.lined.regular.M
Aa — global.font.static.comp.lined.regular.L
Aa — global.font.static.comp.lined.medium.S
Aa — global.font.static.comp.lined.medium.M
Aa — global.font.static.comp.lined.medium.L
Aa — global.font.static.comp.placeholder.XS
Aa — global.font.static.comp.placeholder.S
Aa — global.font.static.comp.placeholder.M
Aa — global.font.static.comp.placeholder.ML
Aa — global.font.static.comp.placeholder.L
Aa — global.font.static.comp.placeholder.XL
Aa — global.font.static.comp.placeholder.XXL
| Name | Value | Resolved value | Description |
|---|---|---|---|
| global.modifier.button.active | 0.30 | 0.3 | Actve modifier used when 15% hover is used |
| global.modifier.button.activeAlt | 0.15 | Actve modifier used when 15% hover is used | |
| global.modifier.button.hover | 0.15 | Hover used on primary buttons | |
| global.modifier.button.hoverAlt | 0.10 | 0.1 | Hover used on primary buttons |
| global.modifier.input.disabledFg | 0.3 | Disabled alpha for buttons | |
| global.modifier.input.disabledBg | 0.05 | less contrast |
| Name | Value | Resolved value | Description |
|---|---|---|---|
| global.radius.none | 0 | Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). | |
| global.radius.container.3XS | {core.dimension.12} | 1 | Validation bar on input components |
| global.radius.container.2XS | {core.dimension.25} | 2 | Pill |
| global.radius.container.XS | {core.dimension.50} | 4 | |
| global.radius.container.S | {core.dimension.75} | 6 | L size loader and tracker corners |
| global.radius.container.M | {core.dimension.100} | 8 | Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners), File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip |
| global.radius.container.L | {core.dimension.200} | 16 | Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card. |
| global.radius.container.XL | {core.dimension.300} | 24 | Card (more rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards |
| global.radius.container.2XL | {core.dimension.400} | 32 | |
| global.radius.container.3XL | {core.dimension.500} | 40 | marketing cards and tiles |
| global.radius.container.4XL | {core.dimension.1000} | 80 | marketing images |
| global.radius.container.circle | 999 | CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch, | |
| global.radius.action.2XS | {core.dimension.12} | 1 | Tab baseline. |
| global.radius.action.XS | {core.dimension.25} | 2 | Link (focus background and underline) |
| global.radius.action.S | {core.dimension.50} | 4 | S & M Checkboxes |
| global.radius.action.M | {core.dimension.100} | 8 | Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input, |
| global.radius.action.L | {core.dimension.200} | 16 | Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners), |
| global.radius.action.XL | {core.dimension.250} | 20 | Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container) |
| global.radius.action.2XL | {core.dimension.300} | 24 | Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container) |
| global.radius.action.circle | 999 | Icon only buttons |
| Name | Value | Resolved value | Description |
|---|---|---|---|
| global.depth.none | {core.depth.none} | [object Object] | |
| global.depth.lvl0 | {core.depth.down-right.0} | [object Object],[object Object] | Card default state |
| global.depth.lvl1 | {core.depth.down-right.1} | [object Object],[object Object] | Card hover state, Popover menus used on split, multiaction, dropdown and action popovers |
| global.depth.lvl2 | {core.depth.down-right.2} | [object Object],[object Object] | Nav Menu |
| global.depth.lvl3 | {core.depth.down-right.3} | [object Object],[object Object] | Dialog, Menu, Sidebar, Card drag state |
| global.depth.stickyB | {core.depth.up-right.1} | [object Object],[object Object] | Sticky footer on dialogs, drawer and sidebar |
| global.depth.stickyL | {core.depth.left.0} | [object Object],[object Object] | Right sticky column in Table. |
| global.depth.stickyR | {core.depth.right.0} | [object Object],[object Object] | Left sticky column in Table. |
| Name | Value | Resolved value |
|---|---|---|
| global.size.none | {core.dimension.0} | 0 |
| global.size.6XS | {core.dimension.25} | 2 |
| global.size.5XS | {core.dimension.50} | 4 |
| global.size.4XS | {core.dimension.100} | 8 |
| global.size.3XS | {core.dimension.200} | 16 |
| global.size.2XS | {core.dimension.250} | 20 |
| global.size.XS | {core.dimension.300} | 24 |
| global.size.S | {core.dimension.400} | 32 |
| global.size.M | {core.dimension.500} | 40 |
| global.size.L | {core.dimension.600} | 48 |
| global.size.XL | {core.dimension.700} | 56 |
| global.size.2XL | {core.dimension.800} | 64 |
| global.size.3XL | {core.dimension.900} | 72 |
| global.size.4XL | {core.dimension.1000} | 80 |
| Name | Value | Resolved value | Description |
|---|---|---|---|
| global.space.none | {core.dimension.0} | 0 | |
| global.space.layout.3XS | {core.dimension.100} | 8 | |
| global.space.layout.2XS | {core.dimension.200} | 16 | |
| global.space.layout.XS | {core.dimension.300} | 24 | |
| global.space.layout.S | {core.dimension.400} | 32 | |
| global.space.layout.M | {core.dimension.500} | 40 | |
| global.space.layout.L | {core.dimension.600} | 48 | |
| global.space.layout.XL | {core.dimension.700} | 56 | |
| global.space.layout.2XL | {core.dimension.800} | 64 | |
| global.space.layout.3XL | {core.dimension.900} | 72 | |
| global.space.layout.4XL | {core.dimension.1000} | 80 | |
| global.space.comp.2XS | {core.dimension.25} | 2 | |
| global.space.comp.XS | {core.dimension.50} | 4 | |
| global.space.comp.S | {core.dimension.100} | 8 | |
| global.space.comp.M | {core.dimension.150} | 12 | Padding inside Medium Inputs |
| global.space.comp.L | {core.dimension.200} | 16 | |
| global.space.comp.XL | {core.dimension.300} | 24 | |
| global.space.comp.2XL | {core.dimension.400} | 32 |