Foundations
Colour
Colour has a two-tier scale: core ramps (raw hex values) and semantic roles that reference a core colour and switch per theme. Semantic tokens are theme-aware — the same token points at a different core step in light vs dark.
Core colour
primary
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-primary-75 | #f2f7ff | |
--moments-core-colour-primary-100 | #ebf3ff | |
--moments-core-colour-primary-200 | #cce0ff | |
--moments-core-colour-primary-300 | #9dc4fe | |
--moments-core-colour-primary-400 | #4c94ff | |
--moments-core-colour-primary-500 | #0066ff | |
--moments-core-colour-primary-600 | #005ce5 | |
--moments-core-colour-primary-700 | #004ec2 | |
--moments-core-colour-primary-800 | #0043a8 | |
--moments-core-colour-primary-900 | #002f75 | |
--moments-core-colour-primary-950 | #001a42 |
eclipse-alpha
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-eclipse-alpha-4 | #0707070a | |
--moments-core-colour-eclipse-alpha-8 | #07070714 | |
--moments-core-colour-eclipse-alpha-20 | #07070733 | |
--moments-core-colour-eclipse-alpha-60 | #07070799 |
neutral
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-neutral-50 | #fffcf7 | |
--moments-core-colour-neutral-75 | #f7f5f0 | |
--moments-core-colour-neutral-100 | #f2efeb | |
--moments-core-colour-neutral-200 | #ebe8e4 | |
--moments-core-colour-neutral-300 | #d4d1cd | |
--moments-core-colour-neutral-400 | #bab8b5 | |
--moments-core-colour-neutral-500 | #989795 | |
--moments-core-colour-neutral-600 | #61605e | |
--moments-core-colour-neutral-700 | #403f3e | |
--moments-core-colour-neutral-800 | #2e2d2d | |
--moments-core-colour-neutral-900 | #1a1919 | |
--moments-core-colour-neutral-950 | #070707 |
global
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-global-white | #ffffff | |
--moments-core-colour-global-black | #000000 | |
--moments-core-colour-global-transparent | #ffffff00 |
error
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-error-75 | #ffebeb | |
--moments-core-colour-error-100 | #ffe2e2 | |
--moments-core-colour-error-200 | #ffc9c9 | |
--moments-core-colour-error-300 | #ffa2a2 | |
--moments-core-colour-error-400 | #ff6467 | |
--moments-core-colour-error-500 | #fb2c36 | |
--moments-core-colour-error-600 | #e7000b | |
--moments-core-colour-error-700 | #c10006 | |
--moments-core-colour-error-800 | #9f0712 | |
--moments-core-colour-error-900 | #82181a | |
--moments-core-colour-error-950 | #460809 |
success
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-success-75 | #e3fff1 | |
--moments-core-colour-success-100 | #d0fae5 | |
--moments-core-colour-success-200 | #94f7cc | |
--moments-core-colour-success-300 | #59dea4 | |
--moments-core-colour-success-400 | #27c480 | |
--moments-core-colour-success-500 | #00ab61 | |
--moments-core-colour-success-600 | #009152 | |
--moments-core-colour-success-700 | #007844 | |
--moments-core-colour-success-800 | #005e35 | |
--moments-core-colour-success-900 | #004527 | |
--moments-core-colour-success-950 | #002b19 |
secondary
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-secondary-75 | #fff5e3 | |
--moments-core-colour-secondary-100 | #ffebcc | |
--moments-core-colour-secondary-200 | #ffd899 | |
--moments-core-colour-secondary-300 | #ffb459 | |
--moments-core-colour-secondary-400 | #ff9633 | |
--moments-core-colour-secondary-500 | #f76700 | |
--moments-core-colour-secondary-600 | #d95a00 | |
--moments-core-colour-secondary-700 | #bf5000 | |
--moments-core-colour-secondary-800 | #994000 | |
--moments-core-colour-secondary-900 | #592500 | |
--moments-core-colour-secondary-950 | #401b00 |
info
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-info-75 | #f2f7ff | |
--moments-core-colour-info-100 | #ebf3ff | |
--moments-core-colour-info-200 | #cce0ff | |
--moments-core-colour-info-300 | #9dc4fe | |
--moments-core-colour-info-400 | #4c94ff | |
--moments-core-colour-info-500 | #0066ff | |
--moments-core-colour-info-600 | #005ce5 | |
--moments-core-colour-info-700 | #004ec2 | |
--moments-core-colour-info-800 | #0043a8 | |
--moments-core-colour-info-900 | #002f75 | |
--moments-core-colour-info-950 | #001a42 |
alert
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-alert-75 | #fff5e3 | |
--moments-core-colour-alert-100 | #ffebcc | |
--moments-core-colour-alert-200 | #ffd899 | |
--moments-core-colour-alert-300 | #ffb459 | |
--moments-core-colour-alert-400 | #ff9633 | |
--moments-core-colour-alert-500 | #f76700 | |
--moments-core-colour-alert-600 | #d95a00 | |
--moments-core-colour-alert-700 | #bf5000 | |
--moments-core-colour-alert-800 | #994000 | |
--moments-core-colour-alert-900 | #592500 | |
--moments-core-colour-alert-950 | #401b00 |
tertiary
| Swatch | Token | Value |
|---|---|---|
--moments-core-colour-tertiary-75 | #f4f7f6 | |
--moments-core-colour-tertiary-100 | #e8eeec | |
--moments-core-colour-tertiary-200 | #d3dcd9 | |
--moments-core-colour-tertiary-300 | #bcc8c4 | |
--moments-core-colour-tertiary-400 | #a4b3ae | |
--moments-core-colour-tertiary-500 | #8b9d97 | |
--moments-core-colour-tertiary-600 | #728680 | |
--moments-core-colour-tertiary-700 | #5b6e68 | |
--moments-core-colour-tertiary-800 | #455651 | |
--moments-core-colour-tertiary-900 | #2f3c39 | |
--moments-core-colour-tertiary-950 | #1d2623 |
Semantic colour
Each semantic role below shows the core token it resolves to in light and dark themes (with the resolved value).
supportive feedback
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-supportive-feedback-error-lighter | --moments-core-colour-error-200 #ffc9c9 | --moments-core-colour-error-800 #9f0712 |
--moments-semantic-colour-supportive-feedback-error-light | --moments-core-colour-error-300 #ffa2a2 | --moments-core-colour-error-700 #c10006 |
--moments-semantic-colour-supportive-feedback-error-default | --moments-core-colour-error-600 #e7000b | --moments-core-colour-error-600 #e7000b |
--moments-semantic-colour-supportive-feedback-error-lightest | --moments-core-colour-error-75 #ffebeb | --moments-core-colour-error-950 #460809 |
--moments-semantic-colour-supportive-feedback-error-strong | --moments-core-colour-error-700 #c10006 | --moments-core-colour-error-75 #ffebeb |
--moments-semantic-colour-supportive-feedback-warning-default | --moments-core-colour-alert-500 #f76700 | --moments-core-colour-secondary-400 #ff9633 |
--moments-semantic-colour-supportive-feedback-warning-lighter | --moments-core-colour-alert-200 #ffd899 | --moments-core-colour-secondary-800 #994000 |
--moments-semantic-colour-supportive-feedback-warning-lightest | --moments-core-colour-alert-75 #fff5e3 | --moments-core-colour-alert-950 #401b00 |
--moments-semantic-colour-supportive-feedback-warning-strongest | --moments-core-colour-alert-800 #994000 | --moments-core-colour-alert-75 #fff5e3 |
--moments-semantic-colour-supportive-feedback-success-light | --moments-core-colour-success-300 #59dea4 | --moments-core-colour-success-700 #007844 |
--moments-semantic-colour-supportive-feedback-success-default | --moments-core-colour-success-700 #007844 | --moments-core-colour-success-500 #00ab61 |
--moments-semantic-colour-supportive-feedback-success-lighter | --moments-core-colour-success-200 #94f7cc | --moments-core-colour-success-800 #005e35 |
--moments-semantic-colour-supportive-feedback-success-lightest | --moments-core-colour-success-100 #d0fae5 | --moments-core-colour-success-950 #002b19 |
--moments-semantic-colour-supportive-feedback-success-strongest | --moments-core-colour-success-900 #004527 | --moments-core-colour-success-75 #e3fff1 |
--moments-semantic-colour-supportive-feedback-info-lightest | --moments-core-colour-info-100 #ebf3ff | --moments-core-colour-primary-950 #001a42 |
--moments-semantic-colour-supportive-feedback-info-default | --moments-core-colour-info-600 #005ce5 | --moments-core-colour-primary-600 #005ce5 |
--moments-semantic-colour-supportive-feedback-info-light | --moments-core-colour-info-300 #9dc4fe | --moments-core-colour-primary-700 #004ec2 |
--moments-semantic-colour-supportive-feedback-info-lighter | --moments-core-colour-info-200 #cce0ff | --moments-core-colour-primary-800 #0043a8 |
--moments-semantic-colour-supportive-feedback-info-strongest | --moments-core-colour-info-900 #002f75 | --moments-core-colour-info-100 #ebf3ff |
container background
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-container-background-base-default | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-black #000000 |
--moments-semantic-colour-container-background-base-strong | --moments-core-colour-neutral-50 #fffcf7 | --moments-core-colour-neutral-950 #070707 |
--moments-semantic-colour-container-background-base-stronger | --moments-core-colour-neutral-75 #f7f5f0 | --moments-core-colour-neutral-900 #1a1919 |
--moments-semantic-colour-container-background-base-strongest | --moments-core-colour-neutral-100 #f2efeb | --moments-core-colour-neutral-800 #2e2d2d |
--moments-semantic-colour-container-background-base-disabled | --moments-core-colour-neutral-100 #f2efeb | --moments-core-colour-neutral-900 #1a1919 |
--moments-semantic-colour-container-background-base-transparent | --moments-core-colour-global-transparent #ffffff00 | --moments-core-colour-global-transparent #ffffff00 |
--moments-semantic-colour-container-background-inverse-default | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-container-background-accent-default | --moments-core-colour-primary-500 #0066ff | --moments-core-colour-primary-600 #005ce5 |
--moments-semantic-colour-container-background-accent-lightest | --moments-core-colour-primary-100 #ebf3ff | --moments-core-colour-primary-900 #002f75 |
--moments-semantic-colour-container-background-accent-disabled | --moments-core-colour-neutral-100 #f2efeb | --moments-core-colour-neutral-900 #1a1919 |
page background
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-page-background-base-lightest | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-black #000000 |
--moments-semantic-colour-page-background-base-default | --moments-core-colour-neutral-50 #fffcf7 | --moments-core-colour-neutral-950 #070707 |
--moments-semantic-colour-page-background-base-strong | --moments-core-colour-secondary-75 #fff5e3 | --moments-core-colour-neutral-800 #2e2d2d |
--moments-semantic-colour-page-background-inverse-default | --moments-core-colour-global-black #000000 | --moments-core-colour-global-white #ffffff |
border
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-border-base-strongest | --moments-core-colour-neutral-800 #2e2d2d | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-border-base-strong | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-border-base-default | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-border-base-light | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-border-base-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-border-accent-default | --moments-core-colour-primary-500 #0066ff | --moments-core-colour-primary-600 #005ce5 |
--moments-semantic-colour-border-accent-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-border-inverse-default | --moments-core-colour-global-white #ffffff | --moments-core-colour-neutral-950 #070707 |
reactive
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-reactive-base-hover | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-reactive-base-pressed | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-reactive-accent-hover | --moments-core-colour-primary-700 #004ec2 | --moments-core-colour-primary-500 #0066ff |
--moments-semantic-colour-reactive-accent-pressed | --moments-core-colour-primary-800 #0043a8 | --moments-core-colour-primary-400 #4c94ff |
--moments-semantic-colour-reactive-inverse-hover | --moments-core-colour-global-white #ffffff | --moments-core-colour-neutral-950 #070707 |
--moments-semantic-colour-reactive-inverse-pressed | --moments-core-colour-global-white #ffffff | --moments-core-colour-neutral-950 #070707 |
text
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-text-base-strongest | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-text-base-default | --moments-core-colour-neutral-800 #2e2d2d | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-text-base-lighter | --moments-core-colour-neutral-600 #61605e | --moments-core-colour-neutral-300 #d4d1cd |
--moments-semantic-colour-text-base-lightest | --moments-core-colour-neutral-500 #989795 | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-text-base-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-text-base-on-dark | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-text-inverse-default | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-black #000000 |
--moments-semantic-colour-text-accent-strongest | --moments-core-colour-primary-900 #002f75 | --moments-core-colour-primary-200 #cce0ff |
--moments-semantic-colour-text-accent-default | --moments-core-colour-primary-500 #0066ff | --moments-core-colour-primary-600 #005ce5 |
--moments-semantic-colour-text-accent-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
icon
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-icon-base-default | --moments-core-colour-neutral-800 #2e2d2d | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-icon-base-lighter | --moments-core-colour-neutral-600 #61605e | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-icon-base-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
--moments-semantic-colour-icon-base-on-dark | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-icon-base-strongest | --moments-core-colour-neutral-950 #070707 | --moments-core-colour-global-white #ffffff |
--moments-semantic-colour-icon-inverse-default | --moments-core-colour-global-white #ffffff | --moments-core-colour-global-black #000000 |
--moments-semantic-colour-icon-accent-strongest | --moments-core-colour-primary-900 #002f75 | --moments-core-colour-primary-200 #cce0ff |
--moments-semantic-colour-icon-accent-default | --moments-core-colour-primary-500 #0066ff | --moments-core-colour-primary-600 #005ce5 |
--moments-semantic-colour-icon-accent-disabled | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-600 #61605e |
categorical
| Semantic token | Light → core | Dark → core |
|---|---|---|
--moments-semantic-colour-categorical-grey-default | --moments-core-colour-neutral-400 #bab8b5 | --moments-core-colour-neutral-700 #403f3e |
--moments-semantic-colour-categorical-blue-lighter | --moments-core-colour-primary-200 #cce0ff | --moments-core-colour-primary-800 #0043a8 |
--moments-semantic-colour-categorical-green-lighter | --moments-core-colour-success-200 #94f7cc | --moments-core-colour-success-800 #005e35 |
--moments-semantic-colour-categorical-orange-lighter | --moments-core-colour-alert-200 #ffd899 | --moments-core-colour-alert-800 #994000 |
--moments-semantic-colour-categorical-red-lighter | --moments-core-colour-error-200 #ffc9c9 | --moments-core-colour-error-900 #82181a |
--moments-semantic-colour-categorical-red-default | --moments-core-colour-error-600 #e7000b | --moments-core-colour-error-600 #e7000b |