Foundation
Colour
Colour tokens and swatches from your token file.
Colour Primitives
| Token | Reference | |
|---|---|---|
| Blue-116 | #34657f | |
| Blue-40 | #003e51 | |
| Blue-714 | #d6dde1 | |
| Earth-117 | #89532f | |
| Earth-263 | #d17500 | |
| Earth-287 | #e57200 | |
| Earth-462 | #eaaa00 | |
| Earth-841 | #fbebc8 | |
| Earth-902 | #fff2e1 | |
| Green-215 | #708573 | |
| Green-692 | #d2dbd5 | |
| Green-83 | #205c40 | |
| Neutral-130 | #65665c | |
| Neutral-14 | #231f20 | |
| Neutral-16 | #484848 | |
| Neutral-184 | #777777 | |
| Neutral-402 | #aaaaaa | |
| Neutral-511 | #c4bcb7 | |
| Neutral-797 | #eae6e5 | |
| Neutral-972 | #fffbfa | |
| Neutral-Transparent | #00000000 | |
| Purple-18 | #2e1a47 | |
| Purple-61 | #5e366e | |
| Red-131 | #b33d26 | |
| Red-45 | #6b2517 | |
| Red-666 | #ffc9ba | |
| Red-74 | #892f1d | |
| Red-771 | #f4dfda |
Action colors
| Token | Reference | |
|---|---|---|
| sg-primary-fill-default | Red-131#b33d26 | |
| sg-primary-fill-focus | Red-45#6b2517 | |
| sg-primary-fill-hover | Red-45#6b2517 | |
| sg-primary-fill-pressed | Red-74#892f1d | |
| sg-primary-stroke-inner-focus | Earth-263#d17500 | |
| sg-primary-stroke-outer-focus | Earth-902#fff2e1 | |
| sg-primary-text-default | Neutral-972#fffbfa | |
| sg-primary-text-focus | Neutral-972#fffbfa | |
| sg-primary-text-hover | Neutral-972#fffbfa | |
| sg-primary-text-pressed | Neutral-972#fffbfa | |
| sg-secondary-fill-default | Red-771#f4dfda | |
| sg-secondary-fill-focus | Red-666#ffc9ba | |
| sg-secondary-fill-hover | Red-666#ffc9ba | |
| sg-secondary-fill-pressed | Red-771#f4dfda | |
| sg-secondary-stroke-inner-focus | Earth-263#d17500 | |
| sg-secondary-stroke-outer-focus | Earth-902#fff2e1 | |
| sg-secondary-text-default | Red-131#b33d26 | |
| sg-secondary-text-focus | Red-74#892f1d | |
| sg-secondary-text-hover | Red-74#892f1d | |
| sg-secondary-text-pressed | Red-131#b33d26 | |
| sg-tertiary-fill-default | Neutral-Transparent#00000000 | |
| sg-tertiary-fill-focus | Neutral-Transparent#00000000 | |
| sg-tertiary-fill-hover | Neutral-Transparent#00000000 | |
| sg-tertiary-fill-pressed | Neutral-Transparent#00000000 | |
| sg-tertiary-stroke-default | Neutral-130#65665c | |
| sg-tertiary-stroke-hover | Red-131#b33d26 | |
| sg-tertiary-stroke-inner-focus | Earth-263#d17500 | |
| sg-tertiary-stroke-outer-focus | Earth-902#fff2e1 | |
| sg-tertiary-stroke-pressed | Neutral-16#484848 | |
| sg-tertiary-text-default | Neutral-130#65665c | |
| sg-tertiary-text-focus | Red-131#b33d26 | |
| sg-tertiary-text-hover | Red-131#b33d26 | |
| sg-tertiary-text-pressed | Neutral-16#484848 | |
| sg-textlink-icon-fill-default | Red-131#b33d26 | |
| sg-textlink-icon-fill-focus | Red-45#6b2517 | |
| sg-textlink-icon-fill-hover | Red-45#6b2517 | |
| sg-textlink-icon-fill-pressed | Red-74#892f1d | |
| sg-textlink-stroke-default | Neutral-Transparent#00000000 | |
| sg-textlink-stroke-focus | Neutral-Transparent#00000000 | |
| sg-textlink-stroke-hover | Red-45#6b2517 | |
| sg-textlink-stroke-inner-focus | Earth-263#d17500 | |
| sg-textlink-stroke-outer-focus | Earth-902#fff2e1 | |
| sg-textlink-stroke-pressed | Neutral-Transparent#00000000 | |
| sg-textlink-text-default | Neutral-14#231f20 | |
| sg-textlink-text-focus | Red-45#6b2517 | |
| sg-textlink-text-hover | Red-45#6b2517 | |
| sg-textlink-text-pressed | Red-74#892f1d |
Accent colors
| Token | Reference | |
|---|---|---|
| sg-accent-dark | Neutral-14#231f20 | |
| sg-accent-light | Neutral-511#c4bcb7 | |
| sg-accent-medium | Neutral-184#777777 | |
| sg-accent-warm | Earth-902#fff2e1 |
Text Colours
| Token | Reference | |
|---|---|---|
| sg-text-body-0 | Neutral-972#fffbfa | |
| sg-text-body-10 | Neutral-797#eae6e5 | |
| sg-text-body-20 | Neutral-402#aaaaaa | |
| sg-text-body-40 | Neutral-184#777777 | |
| sg-text-body-80 | Neutral-130#65665c | |
| sg-text-body-90 | Neutral-16#484848 | |
| sg-text-heading-heading | Neutral-14#231f20 | |
| sg-text-heading-subheading | Neutral-16#484848 |
Background
| Token | Reference | |
|---|---|---|
| sg-bg-accent | Red-131#b33d26 | |
| sg-bg-cream | Neutral-797#eae6e5 | |
| sg-bg-dark | Neutral-14#231f20 | |
| sg-bg-default | Neutral-972#fffbfa | |
| sg-bg-warm | Earth-902#fff2e1 |
Border
| Token | Reference | |
|---|---|---|
| sg-border-dark | Neutral-14#231f20 | |
| sg-border-light | Neutral-511#c4bcb7 | |
| sg-border-lightest | Neutral-797#eae6e5 |
Selection colors
| Token | Reference | |
|---|---|---|
| sg-selection-fill-active | Red-131#b33d26 | |
| sg-selection-fill-default | Neutral-972#fffbfa | |
| sg-selection-fill-focus | Red-771#f4dfda | |
| sg-selection-fill-hover | Red-771#f4dfda | |
| sg-selection-fill-inactive | Neutral-511#c4bcb7 | |
| sg-selection-stroke-active | Red-131#b33d26 | |
| sg-selection-stroke-default | Neutral-184#777777 | |
| sg-selection-stroke-hover | Red-74#892f1d | |
| sg-selection-stroke-inactive | Neutral-511#c4bcb7 | |
| sg-selection-stroke-inner-focus | Earth-263#d17500 | |
| sg-selection-stroke-outer-focus | Earth-902#fff2e1 | |
| sg-selection-text-active | Neutral-972#fffbfa | |
| sg-selection-text-default | Neutral-130#65665c | |
| sg-selection-text-default-dark | Neutral-16#484848 | |
| sg-selection-text-hover | Red-74#892f1d | |
| sg-selection-text-inactive | Neutral-16#484848 |
Alert
| Token | Reference | |
|---|---|---|
| sg-bg-alert-default | Green-83#205c40 | |
| sg-bg-alert-light | Green-692#d2dbd5 |