Core

Updated May 12, 2026

Core tokens represent the raw values of visual attributes.

Token	Value	Description
core.color.AI.dull.aqua	#149197
core.color.AI.dull.lilac	#a87cfb
core.color.AI.dull.pea	#13a038
core.color.AI.vibrant.aqua	#00d6de
core.color.AI.vibrant.lilac	#9d60ff
core.color.AI.vibrant.pea	#00d639
core.color.azure.5	#f5f8ff
core.color.azure.10	#e4eeff
core.color.azure.20	#58a2ff
core.color.azure.30	#008ef4
core.color.azure.40	#007fd9	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.azure.60	#0071c3	Base status color for light surface. AAA txt on white.
core.color.azure.70	#0063ad
core.color.azure.80	#00528f
core.color.azure.90	#001932
core.color.azure.95	#000b1c
core.color.blush.5	#fff5f6
core.color.blush.10	#ffe8ea
core.color.blush.20	#ff728d
core.color.blush.30	#ff3e6a
core.color.blush.40	#f50059	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.blush.60	#db004e	Base status color for light surface. AA txt on white. Color taken from brand portal.
core.color.blush.70	#c40044
core.color.blush.80	#a30037
core.color.blush.90	#3c000f
core.color.blush.95	#1e0005
core.color.brand.5	#e0ffe2
core.color.brand.10	#b7ffbd
core.color.brand.20	#8fff98
core.color.brand.30	#46fb5e
core.color.brand.40	#00f142
core.color.brand.50	#00d639	Sage Logo color Primary buttons on dark backgrounds
core.color.brand.60	#00811f	Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.
core.color.brand.70	#007219
core.color.brand.80	#005e14
core.color.brand.90	#001e03
core.color.brand.95	#001001
core.color.emerald.5	#eefcef
core.color.emerald.10	#d1f6d6
core.color.emerald.20	#30b843
core.color.emerald.30	#1ba12b
core.color.emerald.40	#019127	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.emerald.60	#00811f	Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.
core.color.emerald.70	#007219
core.color.emerald.80	#005e14
core.color.emerald.90	#001f03
core.color.emerald.95	#001001
core.color.flamingo.5	#fff5fa
core.color.flamingo.10	#fee8f5
core.color.flamingo.20	#f571c7
core.color.flamingo.30	#e84db5
core.color.flamingo.40	#d046a4	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.flamingo.60	#c72699	Base status color for light surface. AAA txt on white.
core.color.flamingo.70	#b02086
core.color.flamingo.80	#921a6e
core.color.flamingo.90	#350426
core.color.flamingo.95	#1e0115
core.color.gold.5	#fff8e0	Outer focus border.
core.color.gold.10	#ffedb8	Outer focus border.
core.color.gold.20	#ffd274	Outer focus border.
core.color.gold.30	#ffca35	Outer focus border.
core.color.gold.40	#ffbf22
core.color.gold.50	#ffb500
core.color.gold.60	#9f7000
core.color.gold.70	#926709
core.color.gold.80	#885e00
core.color.gold.90	#231500
core.color.gold.95	#120900
core.color.lime.5	#f6f9f0
core.color.lime.10	#e8f1d4
core.color.lime.20	#92aa3c
core.color.lime.30	#7d9428
core.color.lime.40	#718524	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.lime.60	#627600	Base status color for light surface. AAA txt on white.
core.color.lime.70	#576900
core.color.lime.80	#475600
core.color.lime.90	#141a00
core.color.lime.95	#0a0e00
core.color.petrol.5	#e8fcfc
core.color.petrol.10	#c8f5f5
core.color.petrol.20	#25b2b0
core.color.petrol.30	#009b99
core.color.petrol.40	#008b8a	Alternative colour with no semantic meaning. Used in progress tracker on dark. Luminosity 51.9
core.color.petrol.60	#007c7b	Alternative colour with no semantic meaning. Used in progress tracker on light. Luminosity 46.8.
core.color.petrol.70	#006d6c
core.color.petrol.80	#005a59
core.color.petrol.90	#001c1c
core.color.petrol.95	#000e0e
core.color.pewter.5	#f4f9fc
core.color.pewter.10	#e4eff5
core.color.pewter.20	#80a5bd
core.color.pewter.30	#738ea0
core.color.pewter.40	#6b7f8d	old action minor 500. (Pure navy is #00293F)
core.color.pewter.60	#527386	old action minor 500. (Pure navy is #00293F)
core.color.pewter.70	#486576
core.color.pewter.80	#3a5462
core.color.pewter.90	#101a20
core.color.pewter.95	#050a0e
core.color.plum.5	#f9f6ff

core.color.plum.10	#f3ebfe
core.color.plum.20	#b190e8
core.color.plum.30	#a375dd
core.color.plum.40	#9463d7	Ligthness 51.9, 4.5:1 against #0E0E0E.
core.color.plum.60	#8f4bd7	Ligthness 51.9, 4.5:1 against #0E0E0E.
core.color.plum.70	#803ec5
core.color.plum.80	#6a32a6
core.color.plum.90	#220c3a
core.color.plum.95	#10041f
core.color.smoke.5	#f8f8f8
core.color.smoke.10	#eeeeee
core.color.smoke.20	#a0a0a0
core.color.smoke.30	#8b8b8b
core.color.smoke.40	#7c7c7c	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.smoke.50	#747474
core.color.smoke.60	#6f6f6f	Base status color for light surface. AA txt on white. Luminosity 46.8.
core.color.smoke.70	#616161
core.color.smoke.80	#505050
core.color.smoke.90	#181818
core.color.smoke.95	#0b0b0b
core.color.storm.5	#f4f5f6
core.color.storm.10	#e8eaec
core.color.storm.15	#dde0e3
core.color.storm.20	#d1d6da
core.color.storm.25	#c6ccd1
core.color.storm.30	#bac1c7
core.color.storm.35	#afb7be
core.color.storm.40	#a3adb5	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.storm.45	#98a2ab	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.storm.50	#8c98a2
core.color.storm.55	#818e99
core.color.storm.60	#75838f	Base status color for light surface. AA txt on white. Luminosity 46.8.
core.color.storm.65	#6a7986	Base status color for light surface. AA txt on white. Luminosity 46.8.
core.color.storm.70	#5e6f7d
core.color.storm.75	#536574
core.color.storm.80	#475a6a
core.color.storm.85	#3c5061
core.color.storm.90	#304658
core.color.storm.95	#253b4e
core.color.tangerine.5	#fff7eb
core.color.tangerine.10	#ffeaca
core.color.tangerine.20	#f68029
core.color.tangerine.30	#e5631c
core.color.tangerine.40	#e24300	Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.
core.color.tangerine.60	#d64309	Base status color for light surface. AA txt on white. Not taken from brand portal as previous orange wasn't accessible.
core.color.tangerine.70	#b33400
core.color.tangerine.80	#952a00
core.color.tangerine.90	#360900
core.color.tangerine.95	#1d0300
core.color.black	#000000	Base color for different txt opacities. Used as a mixer in the mid theming layer for hover states, active states etc. Dividers and table headers. Base color for secondary, Tertiary and Subtle buttons. Base color for Input borders. Focus internal border.
core.color.transparent	rgba(0, 0, 0, 0.0000)	For transparent backgrounds and borders.
core.color.white	#ffffff	Surface backgrounds. Text colors on buttons and on dark backgrounds. Used as a mixer in the mid theming layer for hover states, active states etc.

<code class="language-json">{
  "core": {
    "color": {
      "AI": {
        "dull": {
          "aqua": {
            "$type": "color",
            "$value": "#149197"
          },
          "lilac": {
            "$type": "color",
            "$value": "#a87cfb"
          },
          "pea": {
            "$type": "color",
            "$value": "#13a038"
          }
        },
        "vibrant": {
          "aqua": {
            "$type": "color",
            "$value": "#00d6de"
          },
          "lilac": {
            "$type": "color",
            "$value": "#9d60ff"
          },
          "pea": {
            "$type": "color",
            "$value": "#00d639"
          }
        }
      },
      "azure": {
        "5": {
          "$type": "color",
          "$value": "#f5f8ff"
        },
        "10": {
          "$type": "color",
          "$value": "#e4eeff"
        },
        "20": {
          "$type": "color",
          "$value": "#58a2ff"
        },
        "30": {
          "$type": "color",
          "$value": "#008ef4"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#007fd9"
        },
        "60": {
          "$description": "Base status color for light surface. AAA txt on white.",
          "$type": "color",
          "$value": "#0071c3"
        },
        "70": {
          "$type": "color",
          "$value": "#0063ad"
        },
        "80": {
          "$type": "color",
          "$value": "#00528f"
        },
        "90": {
          "$type": "color",
          "$value": "#001932"
        },
        "95": {
          "$type": "color",
          "$value": "#000b1c"
        }
      },
      "blush": {
        "5": {
          "$type": "color",
          "$value": "#fff5f6"
        },
        "10": {
          "$type": "color",
          "$value": "#ffe8ea"
        },
        "20": {
          "$type": "color",
          "$value": "#ff728d"
        },
        "30": {
          "$type": "color",
          "$value": "#ff3e6a"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#f50059"
        },
        "60": {
          "$description": "Base status color for light surface. AA txt on white. Color taken from brand portal.",
          "$type": "color",
          "$value": "#db004e"
        },
        "70": {
          "$type": "color",
          "$value": "#c40044"
        },
        "80": {
          "$type": "color",
          "$value": "#a30037"
        },
        "90": {
          "$type": "color",
          "$value": "#3c000f"
        },
        "95": {
          "$type": "color",
          "$value": "#1e0005"
        }
      },
      "brand": {
        "5": {
          "$type": "color",
          "$value": "#e0ffe2"
        },
        "10": {
          "$type": "color",
          "$value": "#b7ffbd"
        },
        "20": {
          "$type": "color",
          "$value": "#8fff98"
        },
        "30": {
          "$type": "color",
          "$value": "#46fb5e"
        },
        "40": {
          "$type": "color",
          "$value": "#00f142"
        },
        "50": {
          "$description": "Sage Logo color Primary buttons on dark backgrounds",
          "$type": "color",
          "$value": "#00d639"
        },
        "60": {
          "$description": "Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.",
          "$type": "color",
          "$value": "#00811f"
        },
        "70": {
          "$type": "color",
          "$value": "#007219"
        },
        "80": {
          "$type": "color",
          "$value": "#005e14"
        },
        "90": {
          "$type": "color",
          "$value": "#001e03"
        },
        "95": {
          "$type": "color",
          "$value": "#001001"
        }
      },
      "emerald": {
        "5": {
          "$type": "color",
          "$value": "#eefcef"
        },
        "10": {
          "$type": "color",
          "$value": "#d1f6d6"
        },
        "20": {
          "$type": "color",
          "$value": "#30b843"
        },
        "30": {
          "$type": "color",
          "$value": "#1ba12b"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#019127"
        },
        "60": {
          "$description": "Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.",
          "$type": "color",
          "$value": "#00811f"
        },
        "70": {
          "$type": "color",
          "$value": "#007219"
        },
        "80": {
          "$type": "color",
          "$value": "#005e14"
        },
        "90": {
          "$type": "color",
          "$value": "#001f03"
        },
        "95": {
          "$type": "color",
          "$value": "#001001"
        }
      },
      "flamingo": {
        "5": {
          "$type": "color",
          "$value": "#fff5fa"
        },
        "10": {
          "$type": "color",
          "$value": "#fee8f5"
        },
        "20": {
          "$type": "color",
          "$value": "#f571c7"
        },
        "30": {
          "$type": "color",
          "$value": "#e84db5"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#d046a4"
        },
        "60": {
          "$description": "Base status color for light surface. AAA txt on white.",
          "$type": "color",
          "$value": "#c72699"
        },
        "70": {
          "$type": "color",
          "$value": "#b02086"
        },
        "80": {
          "$type": "color",
          "$value": "#921a6e"
        },
        "90": {
          "$type": "color",
          "$value": "#350426"
        },
        "95": {
          "$type": "color",
          "$value": "#1e0115"
        }
      },
      "gold": {
        "5": {
          "$description": "Outer focus border.",
          "$type": "color",
          "$value": "#fff8e0"
        },
        "10": {
          "$description": "Outer focus border.",
          "$type": "color",
          "$value": "#ffedb8"
        },
        "20": {
          "$description": "Outer focus border.",
          "$type": "color",
          "$value": "#ffd274"
        },
        "30": {
          "$description": "Outer focus border.",
          "$type": "color",
          "$value": "#ffca35"
        },
        "40": {
          "$type": "color",
          "$value": "#ffbf22"
        },
        "50": {
          "$type": "color",
          "$value": "#ffb500"
        },
        "60": {
          "$type": "color",
          "$value": "#9f7000"
        },
        "70": {
          "$type": "color",
          "$value": "#926709"
        },
        "80": {
          "$type": "color",
          "$value": "#885e00"
        },
        "90": {
          "$type": "color",
          "$value": "#231500"
        },
        "95": {
          "$type": "color",
          "$value": "#120900"
        }
      },
      "lime": {
        "5": {
          "$type": "color",
          "$value": "#f6f9f0"
        },
        "10": {
          "$type": "color",
          "$value": "#e8f1d4"
        },
        "20": {
          "$type": "color",
          "$value": "#92aa3c"
        },
        "30": {
          "$type": "color",
          "$value": "#7d9428"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#718524"
        },
        "60": {
          "$description": "Base status color for light surface. AAA txt on white.",
          "$type": "color",
          "$value": "#627600"
        },
        "70": {
          "$type": "color",
          "$value": "#576900"
        },
        "80": {
          "$type": "color",
          "$value": "#475600"
        },
        "90": {
          "$type": "color",
          "$value": "#141a00"
        },
        "95": {
          "$type": "color",
          "$value": "#0a0e00"
        }
      },
      "petrol": {
        "5": {
          "$type": "color",
          "$value": "#e8fcfc"
        },
        "10": {
          "$type": "color",
          "$value": "#c8f5f5"
        },
        "20": {
          "$type": "color",
          "$value": "#25b2b0"
        },
        "30": {
          "$type": "color",
          "$value": "#009b99"
        },
        "40": {
          "$description": "Alternative colour with no semantic meaning. Used in progress tracker on dark. Luminosity 51.9",
          "$type": "color",
          "$value": "#008b8a"
        },
        "60": {
          "$description": "Alternative colour with no semantic meaning. Used in progress tracker on light. Luminosity 46.8.",
          "$type": "color",
          "$value": "#007c7b"
        },
        "70": {
          "$type": "color",
          "$value": "#006d6c"
        },
        "80": {
          "$type": "color",
          "$value": "#005a59"
        },
        "90": {
          "$type": "color",
          "$value": "#001c1c"
        },
        "95": {
          "$type": "color",
          "$value": "#000e0e"
        }
      },
      "pewter": {
        "5": {
          "$type": "color",
          "$value": "#f4f9fc"
        },
        "10": {
          "$type": "color",
          "$value": "#e4eff5"
        },
        "20": {
          "$type": "color",
          "$value": "#80a5bd"
        },
        "30": {
          "$type": "color",
          "$value": "#738ea0"
        },
        "40": {
          "$description": "old action minor 500. (Pure navy is #00293F)",
          "$type": "color",
          "$value": "#6b7f8d"
        },
        "60": {
          "$description": "old action minor 500. (Pure navy is #00293F)",
          "$type": "color",
          "$value": "#527386"
        },
        "70": {
          "$type": "color",
          "$value": "#486576"
        },
        "80": {
          "$type": "color",
          "$value": "#3a5462"
        },
        "90": {
          "$type": "color",
          "$value": "#101a20"
        },
        "95": {
          "$type": "color",
          "$value": "#050a0e"
        }
      },
      "plum": {
        "5": {
          "$type": "color",
          "$value": "#f9f6ff"
        },
        "10": {
          "$type": "color",
          "$value": "#f3ebfe"
        },
        "20": {
          "$type": "color",
          "$value": "#b190e8"
        },
        "30": {
          "$type": "color",
          "$value": "#a375dd"
        },
        "40": {
          "$description": "Ligthness 51.9, 4.5:1 against #0E0E0E.",
          "$type": "color",
          "$value": "#9463d7"
        },
        "60": {
          "$description": "Ligthness 51.9, 4.5:1 against #0E0E0E.",
          "$type": "color",
          "$value": "#8f4bd7"
        },
        "70": {
          "$type": "color",
          "$value": "#803ec5"
        },
        "80": {
          "$type": "color",
          "$value": "#6a32a6"
        },
        "90": {
          "$type": "color",
          "$value": "#220c3a"
        },
        "95": {
          "$type": "color",
          "$value": "#10041f"
        }
      },
      "smoke": {
        "5": {
          "$type": "color",
          "$value": "#f8f8f8"
        },
        "10": {
          "$type": "color",
          "$value": "#eeeeee"
        },
        "20": {
          "$type": "color",
          "$value": "#a0a0a0"
        },
        "30": {
          "$type": "color",
          "$value": "#8b8b8b"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#7c7c7c"
        },
        "50": {
          "$type": "color",
          "$value": "#747474"
        },
        "60": {
          "$description": "Base status color for light surface. AA txt on white. Luminosity 46.8.",
          "$type": "color",
          "$value": "#6f6f6f"
        },
        "70": {
          "$type": "color",
          "$value": "#616161"
        },
        "80": {
          "$type": "color",
          "$value": "#505050"
        },
        "90": {
          "$type": "color",
          "$value": "#181818"
        },
        "95": {
          "$type": "color",
          "$value": "#0b0b0b"
        }
      },
      "storm": {
        "5": {
          "$type": "color",
          "$value": "#f4f5f6"
        },
        "10": {
          "$type": "color",
          "$value": "#e8eaec"
        },
        "15": {
          "$type": "color",
          "$value": "#dde0e3"
        },
        "20": {
          "$type": "color",
          "$value": "#d1d6da"
        },
        "25": {
          "$type": "color",
          "$value": "#c6ccd1"
        },
        "30": {
          "$type": "color",
          "$value": "#bac1c7"
        },
        "35": {
          "$type": "color",
          "$value": "#afb7be"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#a3adb5"
        },
        "45": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#98a2ab"
        },
        "50": {
          "$type": "color",
          "$value": "#8c98a2"
        },
        "55": {
          "$type": "color",
          "$value": "#818e99"
        },
        "60": {
          "$description": "Base status color for light surface. AA txt on white. Luminosity 46.8.",
          "$type": "color",
          "$value": "#75838f"
        },
        "65": {
          "$description": "Base status color for light surface. AA txt on white. Luminosity 46.8.",
          "$type": "color",
          "$value": "#6a7986"
        },
        "70": {
          "$type": "color",
          "$value": "#5e6f7d"
        },
        "75": {
          "$type": "color",
          "$value": "#536574"
        },
        "80": {
          "$type": "color",
          "$value": "#475a6a"
        },
        "85": {
          "$type": "color",
          "$value": "#3c5061"
        },
        "90": {
          "$type": "color",
          "$value": "#304658"
        },
        "95": {
          "$type": "color",
          "$value": "#253b4e"
        }
      },
      "tangerine": {
        "5": {
          "$type": "color",
          "$value": "#fff7eb"
        },
        "10": {
          "$type": "color",
          "$value": "#ffeaca"
        },
        "20": {
          "$type": "color",
          "$value": "#f68029"
        },
        "30": {
          "$type": "color",
          "$value": "#e5631c"
        },
        "40": {
          "$description": "Base status color for dark surfaces. AA txt  on dark. Luminosity 51.9.",
          "$type": "color",
          "$value": "#e24300"
        },
        "60": {
          "$description": "Base status color for light surface. AA txt on white. Not taken from brand portal as previous orange wasn't accessible.",
          "$type": "color",
          "$value": "#d64309"
        },
        "70": {
          "$type": "color",
          "$value": "#b33400"
        },
        "80": {
          "$type": "color",
          "$value": "#952a00"
        },
        "90": {
          "$type": "color",
          "$value": "#360900"
        },
        "95": {
          "$type": "color",
          "$value": "#1d0300"
        }
      },
      "black": {
        "$description": "Base color for different txt opacities. Used as a mixer in the mid theming layer for hover states, active states etc. Dividers and table headers. Base color for secondary, Tertiary and Subtle buttons. Base color for Input borders. Focus internal border.",
        "$type": "color",
        "$value": "#000000"
      },
      "transparent": {
        "$description": "For transparent backgrounds and borders.",
        "$type": "color",
        "$value": "rgba(0, 0, 0, 0.0000)"
      },
      "white": {
        "$description": "Surface backgrounds. Text colors on buttons and on dark backgrounds. Used as a mixer in the mid theming layer for hover states, active states etc.",
        "$type": "color",
        "$value": "#ffffff"
      }
    }
  }
}</code>

Depth Documentation

Dimension tokens are passed into size, space and radius mid layer tokens. They use an 8 pixel multiplier that is defined by the {core.dimension.base token}.

Dimension Documentation

Core type scale tokens are created using the Utopian design system responsive type calculator.
Raw clamp values tell the browser to interpolate between two scales, based on the current viewport width.
For more information on this approach, read this article on fluid typography.

Font Family Documentation

Font Size Documentation

Font Weight Documentation

Line Height Documentation

Pragraph Spacing Documentation

Date	Changes
January 2026	Remove old core breakpoint tokens as global ones supercede these.
January 2025	Primitive token tables updated.
November 2024	Primitive token tables added.