Design tokens
Tokens are defined in platform-neutral JSON and generated into CSS, Sass, portable JSON and this documentation. Semantic tokens should be preferred in product and component code.
The current build contains 244 tokens. Its source audit is pinned
to commit 211b72b3f556e54e0131ba4eae968770085608c7 of the previous design-system repository.
Semantic tokens
| Token | CSS custom property | Value |
|---|---|---|
semantic.color.action.primary.background.active |
--est-color-action-primary-background-active |
#000000 |
semantic.color.action.primary.background.default |
--est-color-action-primary-background-default |
#1b1f22 |
semantic.color.action.primary.background.hover |
--est-color-action-primary-background-hover |
#0e0f11 |
semantic.color.action.primary.foreground |
--est-color-action-primary-foreground |
#ffffff |
semantic.color.action.secondary.background |
--est-color-action-secondary-background |
#ffffff |
semantic.color.action.secondary.border |
--est-color-action-secondary-border |
#1b1f22 |
semantic.color.action.secondary.foreground |
--est-color-action-secondary-foreground |
#1b1f22 |
semantic.color.border.default |
--est-color-border-default |
#bbc2c9 |
semantic.color.border.strong |
--est-color-border-strong |
#363d44 |
semantic.color.border.subtle |
--est-color-border-subtle |
#e8ebed |
semantic.color.focus.inner |
--est-color-focus-inner |
#ffffff |
semantic.color.focus.outer |
--est-color-focus-outer |
#363d44 |
semantic.color.link.default |
--est-color-link-default |
#15487a |
semantic.color.link.hover |
--est-color-link-hover |
#113a62 |
semantic.color.status.danger.border |
--est-color-status-danger-border |
#b7133a |
semantic.color.status.danger.foreground |
--est-color-status-danger-foreground |
#b7133a |
semantic.color.status.danger.surface |
--est-color-status-danger-surface |
#f8e7eb |
semantic.color.status.information.border |
--est-color-status-information-border |
#15487a |
semantic.color.status.information.foreground |
--est-color-status-information-foreground |
#15487a |
semantic.color.status.information.surface |
--est-color-status-information-surface |
#e8edf2 |
semantic.color.status.success.border |
--est-color-status-success-border |
#65a346 |
semantic.color.status.success.foreground |
--est-color-status-success-foreground |
#3d622a |
semantic.color.status.success.surface |
--est-color-status-success-surface |
#e0edda |
semantic.color.status.warning.border |
--est-color-status-warning-border |
#ffaf0a |
semantic.color.status.warning.foreground |
--est-color-status-warning-foreground |
#1b1f22 |
semantic.color.status.warning.surface |
--est-color-status-warning-surface |
#fff7e7 |
semantic.color.surface.default |
--est-color-surface-default |
#ffffff |
semantic.color.surface.inverse |
--est-color-surface-inverse |
#1b1f22 |
semantic.color.surface.subtle |
--est-color-surface-subtle |
#f4f5f6 |
semantic.color.surface.warm |
--est-color-surface-warm |
#f2f2f0 |
semantic.color.text.default |
--est-color-text-default |
#1b1f22 |
semantic.color.text.disabled |
--est-color-text-disabled |
#6f7d8b |
semantic.color.text.inverse |
--est-color-text-inverse |
#ffffff |
semantic.color.text.subtle |
--est-color-text-subtle |
#525c66 |
semantic.focus.inner-width |
--est-focus-inner-width |
2px |
semantic.focus.outer-width |
--est-focus-outer-width |
4px |
semantic.focus.radius |
--est-focus-radius |
0.375rem |
semantic.typography.body-small.line-height |
--est-typography-body-small-line-height |
1.5 |
semantic.typography.body-small.size |
--est-typography-body-small-size |
1rem |
semantic.typography.body.family |
--est-typography-body-family |
"Poppins", system-ui, sans-serif |
semantic.typography.body.line-height |
--est-typography-body-line-height |
1.5 |
semantic.typography.body.size |
--est-typography-body-size |
1.0625rem |
semantic.typography.body.weight |
--est-typography-body-weight |
400 |
semantic.typography.heading.1.desktop |
--est-typography-heading-1-desktop |
2.625rem |
semantic.typography.heading.1.mobile |
--est-typography-heading-1-mobile |
2.1875rem |
semantic.typography.heading.2.desktop |
--est-typography-heading-2-desktop |
2.0625rem |
semantic.typography.heading.2.mobile |
--est-typography-heading-2-mobile |
1.6875rem |
semantic.typography.heading.3.desktop |
--est-typography-heading-3-desktop |
1.5625rem |
semantic.typography.heading.3.mobile |
--est-typography-heading-3-mobile |
1.4375rem |
semantic.typography.heading.4 |
--est-typography-heading-4 |
1.3125rem |
semantic.typography.heading.5 |
--est-typography-heading-5 |
1.1875rem |
semantic.typography.heading.6 |
--est-typography-heading-6 |
1.0625rem |
semantic.typography.heading.line-height |
--est-typography-heading-line-height |
1.2 |
semantic.typography.heading.weight |
--est-typography-heading-weight |
600 |
Primitive tokens
Primitives document the available raw decisions. Components should not consume palette values when a semantic token expresses the intended role.
| Token | CSS custom property | Value |
|---|---|---|
primitive.border.width.default |
--est-border-width-default |
1px |
primitive.border.width.focus |
--est-border-width-focus |
4px |
primitive.border.width.strong |
--est-border-width-strong |
2px |
primitive.breakpoint.2xlarge |
--est-breakpoint-2xlarge |
1400px |
primitive.breakpoint.large |
--est-breakpoint-large |
992px |
primitive.breakpoint.medium |
--est-breakpoint-medium |
768px |
primitive.breakpoint.small |
--est-breakpoint-small |
576px |
primitive.breakpoint.xlarge |
--est-breakpoint-xlarge |
1200px |
primitive.color.black |
--est-color-black |
#000000 |
primitive.color.brand.primary.clear-sky-blue.100 |
--est-color-brand-primary-clear-sky-blue-100 |
#eef8f9 |
primitive.color.brand.primary.clear-sky-blue.200 |
--est-color-brand-primary-clear-sky-blue-200 |
#ddf1f3 |
primitive.color.brand.primary.clear-sky-blue.300 |
--est-color-brand-primary-clear-sky-blue-300 |
#cceaed |
primitive.color.brand.primary.clear-sky-blue.400 |
--est-color-brand-primary-clear-sky-blue-400 |
#bbe3e7 |
primitive.color.brand.primary.clear-sky-blue.50 |
--est-color-brand-primary-clear-sky-blue-50 |
#f7fcfc |
primitive.color.brand.primary.clear-sky-blue.500 |
--est-color-brand-primary-clear-sky-blue-500 |
#aadce1 |
primitive.color.brand.primary.clear-sky-blue.600 |
--est-color-brand-primary-clear-sky-blue-600 |
#88b0b4 |
primitive.color.brand.primary.clear-sky-blue.700 |
--est-color-brand-primary-clear-sky-blue-700 |
#668487 |
primitive.color.brand.primary.clear-sky-blue.800 |
--est-color-brand-primary-clear-sky-blue-800 |
#44585a |
primitive.color.brand.primary.clear-sky-blue.900 |
--est-color-brand-primary-clear-sky-blue-900 |
#222c2d |
primitive.color.brand.primary.deep-blue.100 |
--est-color-brand-primary-deep-blue-100 |
#d0dae4 |
primitive.color.brand.primary.deep-blue.200 |
--est-color-brand-primary-deep-blue-200 |
#a1b6ca |
primitive.color.brand.primary.deep-blue.300 |
--est-color-brand-primary-deep-blue-300 |
#7391af |
primitive.color.brand.primary.deep-blue.400 |
--est-color-brand-primary-deep-blue-400 |
#446d95 |
primitive.color.brand.primary.deep-blue.50 |
--est-color-brand-primary-deep-blue-50 |
#e8edf2 |
primitive.color.brand.primary.deep-blue.500 |
--est-color-brand-primary-deep-blue-500 |
#15487a |
primitive.color.brand.primary.deep-blue.600 |
--est-color-brand-primary-deep-blue-600 |
#113a62 |
primitive.color.brand.primary.deep-blue.700 |
--est-color-brand-primary-deep-blue-700 |
#0d2b49 |
primitive.color.brand.primary.deep-blue.800 |
--est-color-brand-primary-deep-blue-800 |
#081d31 |
primitive.color.brand.primary.deep-blue.900 |
--est-color-brand-primary-deep-blue-900 |
#040e18 |
primitive.color.brand.primary.deep-rose.100 |
--est-color-brand-primary-deep-rose-100 |
#f1d0d8 |
primitive.color.brand.primary.deep-rose.200 |
--est-color-brand-primary-deep-rose-200 |
#e2a1b0 |
primitive.color.brand.primary.deep-rose.300 |
--est-color-brand-primary-deep-rose-300 |
#d47189 |
primitive.color.brand.primary.deep-rose.400 |
--est-color-brand-primary-deep-rose-400 |
#c54261 |
primitive.color.brand.primary.deep-rose.50 |
--est-color-brand-primary-deep-rose-50 |
#f8e7eb |
primitive.color.brand.primary.deep-rose.500 |
--est-color-brand-primary-deep-rose-500 |
#b7133a |
primitive.color.brand.primary.deep-rose.600 |
--est-color-brand-primary-deep-rose-600 |
#920f2e |
primitive.color.brand.primary.deep-rose.700 |
--est-color-brand-primary-deep-rose-700 |
#6e0b23 |
primitive.color.brand.primary.deep-rose.800 |
--est-color-brand-primary-deep-rose-800 |
#490817 |
primitive.color.brand.primary.deep-rose.900 |
--est-color-brand-primary-deep-rose-900 |
#25040c |
primitive.color.brand.primary.grassy-green.100 |
--est-color-brand-primary-grassy-green-100 |
#e0edda |
primitive.color.brand.primary.grassy-green.200 |
--est-color-brand-primary-grassy-green-200 |
#c1dab5 |
primitive.color.brand.primary.grassy-green.300 |
--est-color-brand-primary-grassy-green-300 |
#a3c890 |
primitive.color.brand.primary.grassy-green.400 |
--est-color-brand-primary-grassy-green-400 |
#84b56b |
primitive.color.brand.primary.grassy-green.50 |
--est-color-brand-primary-grassy-green-50 |
#f0f6ed |
primitive.color.brand.primary.grassy-green.500 |
--est-color-brand-primary-grassy-green-500 |
#65a346 |
primitive.color.brand.primary.grassy-green.600 |
--est-color-brand-primary-grassy-green-600 |
#518238 |
primitive.color.brand.primary.grassy-green.700 |
--est-color-brand-primary-grassy-green-700 |
#3d622a |
primitive.color.brand.primary.grassy-green.800 |
--est-color-brand-primary-grassy-green-800 |
#28411c |
primitive.color.brand.primary.grassy-green.900 |
--est-color-brand-primary-grassy-green-900 |
#14210e |
primitive.color.brand.primary.honey-yellow.100 |
--est-color-brand-primary-honey-yellow-100 |
#ffefce |
primitive.color.brand.primary.honey-yellow.200 |
--est-color-brand-primary-honey-yellow-200 |
#ffdf9d |
primitive.color.brand.primary.honey-yellow.300 |
--est-color-brand-primary-honey-yellow-300 |
#ffcf6c |
primitive.color.brand.primary.honey-yellow.400 |
--est-color-brand-primary-honey-yellow-400 |
#ffbf3b |
primitive.color.brand.primary.honey-yellow.50 |
--est-color-brand-primary-honey-yellow-50 |
#fff7e7 |
primitive.color.brand.primary.honey-yellow.500 |
--est-color-brand-primary-honey-yellow-500 |
#ffaf0a |
primitive.color.brand.primary.honey-yellow.600 |
--est-color-brand-primary-honey-yellow-600 |
#cc8c08 |
primitive.color.brand.primary.honey-yellow.700 |
--est-color-brand-primary-honey-yellow-700 |
#996906 |
primitive.color.brand.primary.honey-yellow.800 |
--est-color-brand-primary-honey-yellow-800 |
#664604 |
primitive.color.brand.primary.honey-yellow.900 |
--est-color-brand-primary-honey-yellow-900 |
#332302 |
primitive.color.brand.secondary.apple-green.100 |
--est-color-brand-secondary-apple-green-100 |
#f4fae8 |
primitive.color.brand.secondary.apple-green.200 |
--est-color-brand-secondary-apple-green-200 |
#e9f5d0 |
primitive.color.brand.secondary.apple-green.300 |
--est-color-brand-secondary-apple-green-300 |
#ddefb9 |
primitive.color.brand.secondary.apple-green.400 |
--est-color-brand-secondary-apple-green-400 |
#d2eaa1 |
primitive.color.brand.secondary.apple-green.50 |
--est-color-brand-secondary-apple-green-50 |
#f9fcf3 |
primitive.color.brand.secondary.apple-green.500 |
--est-color-brand-secondary-apple-green-500 |
#c7e58a |
primitive.color.brand.secondary.apple-green.600 |
--est-color-brand-secondary-apple-green-600 |
#9fb76e |
primitive.color.brand.secondary.apple-green.700 |
--est-color-brand-secondary-apple-green-700 |
#778953 |
primitive.color.brand.secondary.apple-green.800 |
--est-color-brand-secondary-apple-green-800 |
#505c37 |
primitive.color.brand.secondary.apple-green.900 |
--est-color-brand-secondary-apple-green-900 |
#282e1c |
primitive.color.brand.secondary.blush.100 |
--est-color-brand-secondary-blush-100 |
#fef4f7 |
primitive.color.brand.secondary.blush.200 |
--est-color-brand-secondary-blush-200 |
#fdeaef |
primitive.color.brand.secondary.blush.300 |
--est-color-brand-secondary-blush-300 |
#fcdfe6 |
primitive.color.brand.secondary.blush.400 |
--est-color-brand-secondary-blush-400 |
#fbd5de |
primitive.color.brand.secondary.blush.50 |
--est-color-brand-secondary-blush-50 |
#fffafb |
primitive.color.brand.secondary.blush.500 |
--est-color-brand-secondary-blush-500 |
#facad6 |
primitive.color.brand.secondary.blush.600 |
--est-color-brand-secondary-blush-600 |
#c8a2ab |
primitive.color.brand.secondary.blush.700 |
--est-color-brand-secondary-blush-700 |
#967980 |
primitive.color.brand.secondary.blush.800 |
--est-color-brand-secondary-blush-800 |
#645156 |
primitive.color.brand.secondary.blush.900 |
--est-color-brand-secondary-blush-900 |
#32282b |
primitive.color.brand.secondary.bright-blue.100 |
--est-color-brand-secondary-bright-blue-100 |
#dcf3fb |
primitive.color.brand.secondary.bright-blue.200 |
--est-color-brand-secondary-bright-blue-200 |
#bae7f7 |
primitive.color.brand.secondary.bright-blue.300 |
--est-color-brand-secondary-bright-blue-300 |
#97daf3 |
primitive.color.brand.secondary.bright-blue.400 |
--est-color-brand-secondary-bright-blue-400 |
#75ceef |
primitive.color.brand.secondary.bright-blue.50 |
--est-color-brand-secondary-bright-blue-50 |
#eef9fd |
primitive.color.brand.secondary.bright-blue.500 |
--est-color-brand-secondary-bright-blue-500 |
#52c2eb |
primitive.color.brand.secondary.bright-blue.600 |
--est-color-brand-secondary-bright-blue-600 |
#429bbc |
primitive.color.brand.secondary.bright-blue.700 |
--est-color-brand-secondary-bright-blue-700 |
#31748d |
primitive.color.brand.secondary.bright-blue.800 |
--est-color-brand-secondary-bright-blue-800 |
#214e5e |
primitive.color.brand.secondary.bright-blue.900 |
--est-color-brand-secondary-bright-blue-900 |
#10272f |
primitive.color.brand.secondary.deep-orange.100 |
--est-color-brand-secondary-deep-orange-100 |
#f2d9cc |
primitive.color.brand.secondary.deep-orange.200 |
--est-color-brand-secondary-deep-orange-200 |
#e5b399 |
primitive.color.brand.secondary.deep-orange.300 |
--est-color-brand-secondary-deep-orange-300 |
#d98c66 |
primitive.color.brand.secondary.deep-orange.400 |
--est-color-brand-secondary-deep-orange-400 |
#cc6633 |
primitive.color.brand.secondary.deep-orange.50 |
--est-color-brand-secondary-deep-orange-50 |
#f9ece6 |
primitive.color.brand.secondary.deep-orange.500 |
--est-color-brand-secondary-deep-orange-500 |
#bf4000 |
primitive.color.brand.secondary.deep-orange.600 |
--est-color-brand-secondary-deep-orange-600 |
#993300 |
primitive.color.brand.secondary.deep-orange.700 |
--est-color-brand-secondary-deep-orange-700 |
#732600 |
primitive.color.brand.secondary.deep-orange.800 |
--est-color-brand-secondary-deep-orange-800 |
#4c1a00 |
primitive.color.brand.secondary.deep-orange.900 |
--est-color-brand-secondary-deep-orange-900 |
#260d00 |
primitive.color.brand.secondary.forest-green.100 |
--est-color-brand-secondary-forest-green-100 |
#d2e1db |
primitive.color.brand.secondary.forest-green.200 |
--est-color-brand-secondary-forest-green-200 |
#a4c4b7 |
primitive.color.brand.secondary.forest-green.300 |
--est-color-brand-secondary-forest-green-300 |
#77a692 |
primitive.color.brand.secondary.forest-green.400 |
--est-color-brand-secondary-forest-green-400 |
#49896e |
primitive.color.brand.secondary.forest-green.50 |
--est-color-brand-secondary-forest-green-50 |
#e8f0ed |
primitive.color.brand.secondary.forest-green.500 |
--est-color-brand-secondary-forest-green-500 |
#1c6b4a |
primitive.color.brand.secondary.forest-green.600 |
--est-color-brand-secondary-forest-green-600 |
#16563b |
primitive.color.brand.secondary.forest-green.700 |
--est-color-brand-secondary-forest-green-700 |
#11402c |
primitive.color.brand.secondary.forest-green.800 |
--est-color-brand-secondary-forest-green-800 |
#0b2b1e |
primitive.color.brand.secondary.forest-green.900 |
--est-color-brand-secondary-forest-green-900 |
#06150f |
primitive.color.brand.secondary.light-yellow.100 |
--est-color-brand-secondary-light-yellow-100 |
#fffcf0 |
primitive.color.brand.secondary.light-yellow.200 |
--est-color-brand-secondary-light-yellow-200 |
#fffae0 |
primitive.color.brand.secondary.light-yellow.300 |
--est-color-brand-secondary-light-yellow-300 |
#fff7d1 |
primitive.color.brand.secondary.light-yellow.400 |
--est-color-brand-secondary-light-yellow-400 |
#fff5c1 |
primitive.color.brand.secondary.light-yellow.50 |
--est-color-brand-secondary-light-yellow-50 |
#fffef7 |
primitive.color.brand.secondary.light-yellow.500 |
--est-color-brand-secondary-light-yellow-500 |
#fff2b2 |
primitive.color.brand.secondary.light-yellow.600 |
--est-color-brand-secondary-light-yellow-600 |
#ccc28e |
primitive.color.brand.secondary.light-yellow.700 |
--est-color-brand-secondary-light-yellow-700 |
#99916b |
primitive.color.brand.secondary.light-yellow.800 |
--est-color-brand-secondary-light-yellow-800 |
#666147 |
primitive.color.brand.secondary.light-yellow.900 |
--est-color-brand-secondary-light-yellow-900 |
#333024 |
primitive.color.brand.secondary.rose.100 |
--est-color-brand-secondary-rose-100 |
#fce2e2 |
primitive.color.brand.secondary.rose.200 |
--est-color-brand-secondary-rose-200 |
#fac5c5 |
primitive.color.brand.secondary.rose.300 |
--est-color-brand-secondary-rose-300 |
#f7a7a7 |
primitive.color.brand.secondary.rose.400 |
--est-color-brand-secondary-rose-400 |
#f58a8a |
primitive.color.brand.secondary.rose.50 |
--est-color-brand-secondary-rose-50 |
#fef0f0 |
primitive.color.brand.secondary.rose.500 |
--est-color-brand-secondary-rose-500 |
#f26d6d |
primitive.color.brand.secondary.rose.600 |
--est-color-brand-secondary-rose-600 |
#c25757 |
primitive.color.brand.secondary.rose.700 |
--est-color-brand-secondary-rose-700 |
#914141 |
primitive.color.brand.secondary.rose.800 |
--est-color-brand-secondary-rose-800 |
#612c2c |
primitive.color.brand.secondary.rose.900 |
--est-color-brand-secondary-rose-900 |
#301616 |
primitive.color.grey.100 |
--est-color-grey-100 |
#e8ebed |
primitive.color.grey.200 |
--est-color-grey-200 |
#d2d6db |
primitive.color.grey.300 |
--est-color-grey-300 |
#bbc2c9 |
primitive.color.grey.400 |
--est-color-grey-400 |
#a7b0b9 |
primitive.color.grey.50 |
--est-color-grey-50 |
#f4f5f6 |
primitive.color.grey.500 |
--est-color-grey-500 |
#909ba6 |
primitive.color.grey.600 |
--est-color-grey-600 |
#6f7d8b |
primitive.color.grey.700 |
--est-color-grey-700 |
#525c66 |
primitive.color.grey.800 |
--est-color-grey-800 |
#363d44 |
primitive.color.grey.900 |
--est-color-grey-900 |
#1b1f22 |
primitive.color.grey.950 |
--est-color-grey-950 |
#0e0f11 |
primitive.color.warm-white |
--est-color-warm-white |
#f2f2f0 |
primitive.color.white |
--est-color-white |
#ffffff |
primitive.font.family.mono |
--est-font-family-mono |
"SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace |
primitive.font.family.sans |
--est-font-family-sans |
"Poppins", system-ui, sans-serif |
primitive.font.line-height.body |
--est-font-line-height-body |
1.5 |
primitive.font.line-height.compact |
--est-font-line-height-compact |
1.25 |
primitive.font.line-height.loose |
--est-font-line-height-loose |
2 |
primitive.font.line-height.tight |
--est-font-line-height-tight |
1.2 |
primitive.font.size.100 |
--est-font-size-100 |
0.75rem |
primitive.font.size.1000 |
--est-font-size-1000 |
2.0625rem |
primitive.font.size.1100 |
--est-font-size-1100 |
2.1875rem |
primitive.font.size.1200 |
--est-font-size-1200 |
2.625rem |
primitive.font.size.200 |
--est-font-size-200 |
0.875rem |
primitive.font.size.300 |
--est-font-size-300 |
1rem |
primitive.font.size.400 |
--est-font-size-400 |
1.0625rem |
primitive.font.size.500 |
--est-font-size-500 |
1.1875rem |
primitive.font.size.600 |
--est-font-size-600 |
1.3125rem |
primitive.font.size.700 |
--est-font-size-700 |
1.4375rem |
primitive.font.size.800 |
--est-font-size-800 |
1.5625rem |
primitive.font.size.900 |
--est-font-size-900 |
1.6875rem |
primitive.font.weight.bold |
--est-font-weight-bold |
700 |
primitive.font.weight.light |
--est-font-weight-light |
300 |
primitive.font.weight.medium |
--est-font-weight-medium |
500 |
primitive.font.weight.regular |
--est-font-weight-regular |
400 |
primitive.font.weight.semibold |
--est-font-weight-semibold |
600 |
primitive.motion.duration.disclosure |
--est-motion-duration-disclosure |
350ms |
primitive.motion.duration.fast |
--est-motion-duration-fast |
150ms |
primitive.motion.duration.slow |
--est-motion-duration-slow |
600ms |
primitive.motion.duration.standard |
--est-motion-duration-standard |
200ms |
primitive.motion.easing.ease-in-out |
--est-motion-easing-ease-in-out |
cubic-bezier(0.42, 0, 0.58, 1) |
primitive.motion.easing.linear |
--est-motion-easing-linear |
cubic-bezier(0, 0, 1, 1) |
primitive.radius.2xlarge |
--est-radius-2xlarge |
2rem |
primitive.radius.full |
--est-radius-full |
9999px |
primitive.radius.large |
--est-radius-large |
0.5rem |
primitive.radius.medium |
--est-radius-medium |
0.375rem |
primitive.radius.none |
--est-radius-none |
0px |
primitive.radius.small |
--est-radius-small |
0.25rem |
primitive.radius.xlarge |
--est-radius-xlarge |
1rem |
primitive.spacing.0 |
--est-spacing-0 |
0px |
primitive.spacing.1 |
--est-spacing-1 |
0.25rem |
primitive.spacing.10 |
--est-spacing-10 |
2.5rem |
primitive.spacing.12 |
--est-spacing-12 |
3rem |
primitive.spacing.16 |
--est-spacing-16 |
4rem |
primitive.spacing.2 |
--est-spacing-2 |
0.5rem |
primitive.spacing.20 |
--est-spacing-20 |
5rem |
primitive.spacing.3 |
--est-spacing-3 |
0.75rem |
primitive.spacing.4 |
--est-spacing-4 |
1rem |
primitive.spacing.5 |
--est-spacing-5 |
1.25rem |
primitive.spacing.6 |
--est-spacing-6 |
1.5rem |
primitive.spacing.8 |
--est-spacing-8 |
2rem |
Contrast checks
These combinations are build-time release gates.
| Foreground | Background | Ratio | Minimum |
|---|---|---|---|
semantic.color.text.default |
semantic.color.surface.default |
16.59:1 | 7:1 |
semantic.color.text.subtle |
semantic.color.surface.default |
6.81:1 | 4.5:1 |
semantic.color.link.default |
semantic.color.surface.default |
9.38:1 | 4.5:1 |
semantic.color.action.primary.foreground |
semantic.color.action.primary.background.default |
16.59:1 | 4.5:1 |
semantic.color.status.information.foreground |
semantic.color.status.information.surface |
7.96:1 | 4.5:1 |
semantic.color.status.success.foreground |
semantic.color.status.success.surface |
5.81:1 | 4.5:1 |
semantic.color.status.warning.foreground |
semantic.color.status.warning.surface |
15.57:1 | 4.5:1 |
semantic.color.status.danger.foreground |
semantic.color.status.danger.surface |
5.56:1 | 4.5:1 |