Core

core.color.black

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.

#000000rgb(0, 0, 0)

core.color.white

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.

#FFFFFFrgb(255, 255, 255)

core.color.transparent

For transparent backgrounds and borders.

rgba(0,0,0,0)

core.color.AI.dull.pea

#13a038rgb(19, 160, 56)

core.color.AI.dull.aqua

#149197rgb(20, 145, 151)

core.color.AI.dull.lilac

#a87cfbrgb(168, 124, 251)

core.color.AI.vibrant.pea

#00d639rgb(0, 214, 57)

core.color.AI.vibrant.aqua

#00d6dergb(0, 214, 222)

core.color.AI.vibrant.lilac

#9d60ffrgb(157, 96, 255)

core.color.azure.5

#f5f8ffrgb(245, 248, 255)

core.color.azure.10

#e4eeffrgb(228, 238, 255)

core.color.azure.20

#58a2ffrgb(88, 162, 255)

core.color.azure.30

#008ef4rgb(0, 142, 244)

core.color.azure.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#007fd9rgb(0, 127, 217)

core.color.azure.60

Base status color for light surface. AAA txt on white.

#0071c3rgb(0, 113, 195)

core.color.azure.70

#0063adrgb(0, 99, 173)

core.color.azure.80

#00528frgb(0, 82, 143)

core.color.azure.90

#001932rgb(0, 25, 50)

core.color.azure.95

#000b1crgb(0, 11, 28)

core.color.brand.5

#e0ffe2rgb(224, 255, 226)

core.color.brand.10

#b7ffbdrgb(183, 255, 189)

core.color.brand.20

#8fff98rgb(143, 255, 152)

core.color.brand.30

#46fb5ergb(70, 251, 94)

core.color.brand.40

#00f142rgb(0, 241, 66)

core.color.brand.50

Sage Logo color Primary buttons on dark backgrounds

#00d639rgb(0, 214, 57)

core.color.brand.60

Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.

#00811frgb(0, 129, 31)

core.color.brand.70

#007219rgb(0, 114, 25)

core.color.brand.80

#005e14rgb(0, 94, 20)

core.color.brand.90

#001e03rgb(0, 30, 3)

core.color.brand.95

#001001rgb(0, 16, 1)

core.color.blush.5

#fff5f6rgb(255, 245, 246)

core.color.blush.10

#ffe8eargb(255, 232, 234)

core.color.blush.20

#ff728drgb(255, 114, 141)

core.color.blush.30

#ff3e6argb(255, 62, 106)

core.color.blush.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#f50059rgb(245, 0, 89)

core.color.blush.60

Base status color for light surface. AA txt on white. Color taken from brand portal.

#db004ergb(219, 0, 78)

core.color.blush.70

#c40044rgb(196, 0, 68)

core.color.blush.80

#a30037rgb(163, 0, 55)

core.color.blush.90

#3c000frgb(60, 0, 15)

core.color.blush.95

#1e0005rgb(30, 0, 5)

core.color.tangerine.5

#fff7ebrgb(255, 247, 235)

core.color.tangerine.10

#ffeacargb(255, 234, 202)

core.color.tangerine.20

#f68029rgb(246, 128, 41)

core.color.tangerine.30

#e5631crgb(229, 99, 28)

core.color.tangerine.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#e24300rgb(226, 67, 0)

core.color.tangerine.60

Base status color for light surface. AA txt on white. Not taken from brand portal as previous orange wasn't accessible.

#d64309rgb(214, 67, 9)

core.color.tangerine.70

#b33400rgb(179, 52, 0)

core.color.tangerine.80

#952a00rgb(149, 42, 0)

core.color.tangerine.90

#360900rgb(54, 9, 0)

core.color.tangerine.95

#1d0300rgb(29, 3, 0)

core.color.emerald.5

#EEFCEFrgb(238, 252, 239)

core.color.emerald.10

#D1F6D6rgb(209, 246, 214)

core.color.emerald.20

#30b843rgb(48, 184, 67)

core.color.emerald.30

#1BA12Brgb(27, 161, 43)

core.color.emerald.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#019127rgb(1, 145, 39)

core.color.emerald.60

Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8.

#00811Frgb(0, 129, 31)

core.color.emerald.70

#007219rgb(0, 114, 25)

core.color.emerald.80

#005e14rgb(0, 94, 20)

core.color.emerald.90

#001f03rgb(0, 31, 3)

core.color.emerald.95

#001001rgb(0, 16, 1)

core.color.flamingo.5

#fff5fargb(255, 245, 250)

core.color.flamingo.10

#fee8f5rgb(254, 232, 245)

core.color.flamingo.20

#f571c7rgb(245, 113, 199)

core.color.flamingo.30

#E84DB5rgb(232, 77, 181)

core.color.flamingo.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#d046a4rgb(208, 70, 164)

core.color.flamingo.60

Base status color for light surface. AAA txt on white.

#c72699rgb(199, 38, 153)

core.color.flamingo.70

#b02086rgb(176, 32, 134)

core.color.flamingo.80

#921a6ergb(146, 26, 110)

core.color.flamingo.90

#350426rgb(53, 4, 38)

core.color.flamingo.95

#1e0115rgb(30, 1, 21)

core.color.gold.5

Outer focus border.

#fff8e0rgb(255, 248, 224)

core.color.gold.10

Outer focus border.

#ffedb8rgb(255, 237, 184)

core.color.gold.20

Outer focus border.

#ffd274rgb(255, 210, 116)

core.color.gold.30

Outer focus border.

#ffca35rgb(255, 202, 53)

core.color.gold.40

#ffbf22rgb(255, 191, 34)

core.color.gold.50

#FFB500rgb(255, 181, 0)

core.color.gold.60

#9f7000rgb(159, 112, 0)

core.color.gold.70

#926709rgb(146, 103, 9)

core.color.gold.80

#885e00rgb(136, 94, 0)

core.color.gold.90

#231500rgb(35, 21, 0)

core.color.gold.95

#120900rgb(18, 9, 0)

core.color.lime.5

#f6f9f0rgb(246, 249, 240)

core.color.lime.10

#e8f1d4rgb(232, 241, 212)

core.color.lime.20

#92aa3crgb(146, 170, 60)

core.color.lime.30

#7d9428rgb(125, 148, 40)

core.color.lime.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#718524rgb(113, 133, 36)

core.color.lime.60

Base status color for light surface. AAA txt on white.

#627600rgb(98, 118, 0)

core.color.lime.70

#576900rgb(87, 105, 0)

core.color.lime.80

#475600rgb(71, 86, 0)

core.color.lime.90

#141a00rgb(20, 26, 0)

core.color.lime.95

#0a0e00rgb(10, 14, 0)

core.color.plum.5

#f9f6ffrgb(249, 246, 255)

core.color.plum.10

#F3EBFErgb(243, 235, 254)

core.color.plum.20

#b190e8rgb(177, 144, 232)

core.color.plum.30

#a375ddrgb(163, 117, 221)

core.color.plum.40

Ligthness 51.9, 4.5:1 against #0E0E0E.

#9463d7rgb(148, 99, 215)

core.color.plum.60

Ligthness 51.9, 4.5:1 against #0E0E0E.

#8f4bd7rgb(143, 75, 215)

core.color.plum.70

#803ec5rgb(128, 62, 197)

core.color.plum.80

#6a32a6rgb(106, 50, 166)

core.color.plum.90

#220c3argb(34, 12, 58)

core.color.plum.95

#10041frgb(16, 4, 31)

core.color.pewter.5

#f4f9fcrgb(244, 249, 252)

core.color.pewter.10

#e4eff5rgb(228, 239, 245)

core.color.pewter.20

#80a5bdrgb(128, 165, 189)

core.color.pewter.30

#738ea0rgb(115, 142, 160)

core.color.pewter.40

old action minor 500. (Pure navy is #00293F)

#6b7f8drgb(107, 127, 141)

core.color.pewter.60

old action minor 500. (Pure navy is #00293F)

#527386rgb(82, 115, 134)

core.color.pewter.70

#486576rgb(72, 101, 118)

core.color.pewter.80

#3a5462rgb(58, 84, 98)

core.color.pewter.90

#101a20rgb(16, 26, 32)

core.color.pewter.95

#050a0ergb(5, 10, 14)

core.color.smoke.5

#f8f8f8rgb(248, 248, 248)

core.color.smoke.10

#eeeeeergb(238, 238, 238)

core.color.smoke.20

#a0a0a0rgb(160, 160, 160)

core.color.smoke.30

#8b8b8brgb(139, 139, 139)

core.color.smoke.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#7c7c7crgb(124, 124, 124)

core.color.smoke.50

#747474rgb(116, 116, 116)

core.color.smoke.60

Base status color for light surface. AA txt on white. Luminosity 46.8.

#6f6f6frgb(111, 111, 111)

core.color.smoke.70

#616161rgb(97, 97, 97)

core.color.smoke.80

#505050rgb(80, 80, 80)

core.color.smoke.90

#181818rgb(24, 24, 24)

core.color.smoke.95

#0b0b0brgb(11, 11, 11)

core.color.petrol.5

#E8FCFCrgb(232, 252, 252)

core.color.petrol.10

#C8F5F5rgb(200, 245, 245)

core.color.petrol.20

#25B2B0rgb(37, 178, 176)

core.color.petrol.30

#009B99rgb(0, 155, 153)

core.color.petrol.40

Alternative colour with no semantic meaning. Used in progress tracker on dark. Luminosity 51.9

#008B8Argb(0, 139, 138)

core.color.petrol.60

Alternative colour with no semantic meaning. Used in progress tracker on light. Luminosity 46.8.

#007C7Brgb(0, 124, 123)

core.color.petrol.70

#006D6Crgb(0, 109, 108)

core.color.petrol.80

#005A59rgb(0, 90, 89)

core.color.petrol.90

#001C1Crgb(0, 28, 28)

core.color.petrol.95

#000E0Ergb(0, 14, 14)

core.color.storm.5

#f4f5f6rgb(244, 245, 246)

core.color.storm.10

#e8eaecrgb(232, 234, 236)

core.color.storm.15

#dde0e3rgb(221, 224, 227)

core.color.storm.20

#d1d6dargb(209, 214, 218)

core.color.storm.25

#c6ccd1rgb(198, 204, 209)

core.color.storm.30

#bac1c7rgb(186, 193, 199)

core.color.storm.35

#afb7bergb(175, 183, 190)

core.color.storm.40

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#a3adb5rgb(163, 173, 181)

core.color.storm.45

Base status color for dark surfaces. AA txt on dark. Luminosity 51.9.

#98a2abrgb(152, 162, 171)

core.color.storm.50

#8c98a2rgb(140, 152, 162)

core.color.storm.55

#818e99rgb(129, 142, 153)

core.color.storm.60

Base status color for light surface. AA txt on white. Luminosity 46.8.

#75838frgb(117, 131, 143)

core.color.storm.65

Base status color for light surface. AA txt on white. Luminosity 46.8.

#6a7986rgb(106, 121, 134)

core.color.storm.70

#5e6f7drgb(94, 111, 125)

core.color.storm.75

#536574rgb(83, 101, 116)

core.color.storm.80

#475a6argb(71, 90, 106)

core.color.storm.85

#3c5061rgb(60, 80, 97)

core.color.storm.90

#304658rgb(48, 70, 88)

core.color.storm.95

#253b4ergb(37, 59, 78)

Name	Value	Description
core.size.SCALE	8	SCALE is the base-scale of all size-related tokens (size, space, dimension). It's set to 8px as this is our default multiplier used across the majority of components. If you change it, it will change all size-related tokens.

Name	Value	Resolved value
core.dimension.0	{core.dimension.base} * 0	0
core.dimension.12	{core.dimension.base} * 12.5	1
core.dimension.25	{core.dimension.base} * 25	2
core.dimension.38	{core.dimension.base} * 37.5	3
core.dimension.50	{core.dimension.base} * 50	4
core.dimension.62	{core.dimension.base} * 62.5	5
core.dimension.75	{core.dimension.base} * 75	6
core.dimension.100	{core.dimension.base} * 100	8
core.dimension.125	{core.dimension.base} * 125	10
core.dimension.150	{core.dimension.base} * 150	12
core.dimension.175	{core.dimension.base} * 175	14
core.dimension.200	{core.dimension.base} * 200	16
core.dimension.250	{core.dimension.base} * 250	20
core.dimension.300	{core.dimension.base} * 300	24
core.dimension.350	{core.dimension.base} * 350	28
core.dimension.400	{core.dimension.base} * 400	32
core.dimension.450	{core.dimension.base} * 450	36
core.dimension.500	{core.dimension.base} * 500	40
core.dimension.550	{core.dimension.base} * 550	44
core.dimension.600	{core.dimension.base} * 600	48
core.dimension.650	{core.dimension.base} * 650	52
core.dimension.700	{core.dimension.base} * 700	56
core.dimension.750	{core.dimension.base} * 750	60
core.dimension.800	{core.dimension.base} * 800	64
core.dimension.850	{core.dimension.base} * 850	68
core.dimension.900	{core.dimension.base} * 900	72
core.dimension.950	{core.dimension.base} * 950	76
core.dimension.1000	{core.dimension.base} * 1000	80
core.dimension.1300	{core.dimension.base} * 1300	104
core.dimension.1500	{core.dimension.base} * 1500	120
core.dimension.1600	{core.dimension.base} * 1600	128
core.dimension.2000	{core.dimension.base} * 2000	160
core.dimension.2500	{core.dimension.base} * 2500	200
core.dimension.3000	{core.dimension.base} * 3000	240
core.dimension.3600	{core.dimension.base} * 3600	288
core.dimension.4000	{core.dimension.base} * 4000	320
core.dimension.7000	{core.dimension.base} * 7000	560
core.dimension.9500	{core.dimension.base} * 9500	760
core.dimension.base	{core.size.SCALE} / 100	0.08

Name	Value
core.fontWeights.regular	Regular
core.fontWeights.medium	Medium
core.fontWeights.bold	Bold
core.fontWeights.black	Black

Name	Value	Description
core.lineHeights.300	100%	For components where space is tight
core.lineHeights.400	125%	For headings
core.lineHeights.500	150%	For body and components

Name	Value
core.depth.none	[object Object]
core.depth.down-right.0	[object Object],[object Object]
core.depth.down-right.1	[object Object],[object Object]
core.depth.down-right.2	[object Object],[object Object]
core.depth.down-right.3	[object Object],[object Object]
core.depth.inner.1	[object Object]
core.depth.left.0	[object Object],[object Object]
core.depth.right.0	[object Object],[object Object]
core.depth.up-right.1	[object Object],[object Object]
core.depth.up-right.3	[object Object],[object Object]
core.depth.solid.border	[object Object]

Name	Value	Description
core.fontSize.static.small.stepMinus2	12
core.fontSize.static.small.stepMinus1	13
core.fontSize.static.small.step0	14
core.fontSize.static.small.step1	16
core.fontSize.static.small.step2	17
core.fontSize.static.small.step3	19
core.fontSize.static.small.step4	21
core.fontSize.static.small.step5	23
core.fontSize.static.small.step6	25
core.fontSize.static.small.step7	27
core.fontSize.static.small.step8	30
core.fontSize.static.small.step9	33
core.fontSize.static.small.step10	36
core.fontSize.static.large.stepMinus2	12
core.fontSize.static.large.stepMinus1	13
core.fontSize.static.large.step0	14
core.fontSize.static.large.step1	16
core.fontSize.static.large.step2	18
core.fontSize.static.large.step3	21
core.fontSize.static.large.step4	24
core.fontSize.static.large.step5	27
core.fontSize.static.large.step6	30
core.fontSize.static.large.step7	35
core.fontSize.static.large.step8	40
core.fontSize.static.large.step9	46
core.fontSize.static.large.step10	52
core.fontSize.fluid.stepMinus2	clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)	Small Viewports: 11.57, Large Viewports: 10.77
core.fontSize.fluid.stepMinus1	clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)	Small Viewports: 12.73, Large Viewports: 12.28
core.fontSize.fluid.step0	clamp(0.875rem, 0.875rem + 0vw, 0.875rem)	Small Viewports: 14, Large Viewports: 14
core.fontSize.fluid.step1	clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)	Small Viewports: 15.40, Large Viewports: 15.96
core.fontSize.fluid.step2	clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)	Small Viewports: 16.94, Large Viewports: 18.91
core.fontSize.fluid.step3	clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)	Small Viewports: 18.63, Large Viewports: 20.74
core.fontSize.fluid.step4	clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)	Small Viewports: 20.50, Large Viewports: 23.65
core.fontSize.fluid.step5	clamp(1.4092rem, 1.3173rem + 0.4592vw, 1.6847rem)	Small Viewports: 22.55, Large Viewports: 26.96
core.fontSize.fluid.step6	clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)	Small Viewports: 25.39, Large Viewports: 38.98
core.fontSize.fluid.step7	clamp(1.7051rem, 1.5437rem + 0.8073vw, 2.1895rem)	Small Viewports: 27.28, Large Viewports: 35.03
core.fontSize.fluid.step8	clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)	Small Viewports: 30.01 Large Viewports: 39.94
core.fontSize.fluid.step9	clamp(2.0632rem, 1.8025rem + 1.3038vw, 2.8455rem)	Small Viewports: 33.01, Large Viewports: 45.53
core.fontSize.fluid.step10	clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)	Small Viewports: 36.31, Large Viewports: 51.90
core.fontSize.icon.step0	20px	Small viewports: 20px, Large viewports: 20px.

Name	Value	Description
core.txtDecoration.underline	underline	used for links

Name	Value	Resolved value
core.paragraphSpacing.0	0
core.paragraphSpacing.150	{core.dimension.150}	12
core.paragraphSpacing.200	{core.dimension.200}	16
core.paragraphSpacing.250	{core.dimension.250}	20
core.paragraphSpacing.300	{core.dimension.300}	24
core.paragraphSpacing.400	{core.dimension.400}	32

Name	Value	Description
core.fontFamilies.sage-icons	sage-icons
core.fontFamilies.heading	Sage UI
core.fontFamilies.subheading	Sage UI
core.fontFamilies.body	Sage UI
core.fontFamilies.component	Sage UI	Used in componentry such as tables, buttons, inputs etc.
core.fontFamilies.other	Open Sans	Fallback for when Sage fonts cannot load.