LINK3 · Design Foundations

Primitive colors

226 variables · PRIMITIVE COLORS

Raw palettes: 10 steps per hue plus 10/20/30% opacity variants of steps 300 and 600. Never used directly in designs; the semantic tokens alias them.

brand

16 variables

50#ebf2fe

100#d3e3fd

200#b2cfff

300#90bbff

400#6ca3ff

500#4085f7

600#0f66f5

700#0851c9

800#063d98

900#042967

300-opacity-10#90bbff1a

300-opacity-20#90bbff33

300-opacity-30#90bbff4d

600-opacity-10#0f66f51a

600-opacity-20#0f66f533

600-opacity-30#0f66f54d

neutral

10 variables

50#fafafa

100#e6e6e6

200#cfd0d1

300#b7b8b9

400#9c9d9e

500#7d7f81

600#5d5f61

700#46484a

800#2f3235

900#1b1e21

info

16 variables

50#ebf2fe

100#d3e3fd

200#b2cfff

300#90bbff

400#6ca3ff

500#4085f7

600#0f66f5

700#0851c9

800#063d98

900#042967

300-opacity-10#90bbff1a

300-opacity-20#90bbff33

300-opacity-30#90bbff4d

600-opacity-10#0f66f51a

600-opacity-20#0f66f533

600-opacity-30#0f66f54d

success

16 variables

50#dcfce7

100#bbf7d0

200#86efac

300#4ade80

400#22c55e

500#16a34a

600#15803d

700#166534

800#14532d

900#063b1c

300-opacity-10#4ade801a

300-opacity-20#4ade8033

300-opacity-30#4ade804d

600-opacity-10#15803d1a

600-opacity-20#15803d33

600-opacity-30#15803d4d

warning

16 variables

50#fff6c0

100#ffea8d

200#ffde5b

300#ffcd29

400#ffbf00

500#f0ac00

600#dd8c00

700#cb7300

800#ab5300

900#7b3b00

300-opacity-10#ffcd291a

300-opacity-20#ffcd2933

300-opacity-30#ffcd294d

600-opacity-10#dd8c001a

600-opacity-20#dd8c0033

600-opacity-30#dd8c004d

danger

16 variables

50#ffdbdb

100#ffb8b8

200#ff9393

300#ff6c6c

400#ff4545

500#ff3030

600#d90000

700#bb0000

800#910100

900#690000

300-opacity-10#ff6c6c1a

300-opacity-20#ff6c6c33

300-opacity-30#ff6c6c4d

600-opacity-10#d900001a

600-opacity-20#d9000033

600-opacity-30#d900004d

coral

16 variables

50#fff0eb

100#ffd4c7

200#ffa48a

300#ff7752

400#ff5530

500#f03a10

600#d92a06

700#b32105

800#8a1904

900#611203

300-opacity-10#ff77521a

300-opacity-20#ff775233

300-opacity-30#ff77524d

600-opacity-10#d92a061a

600-opacity-20#d92a0633

600-opacity-30#d92a064d

orange

16 variables

50#fff3e0

100#ffe0ad

200#ffc65c

300#ffad15

400#f59800

500#db8500

600#c07000

700#9c5a00

800#784400

900#552f00

300-opacity-10#ffad151a

300-opacity-20#ffad1533

300-opacity-30#ffad154d

600-opacity-10#c070001a

600-opacity-20#c0700033

600-opacity-30#c070004d

lime

16 variables

50#f0fce0

100#d8f6ad

200#b0ee5c

300#88e215

400#72c800

500#60aa00

600#4f8e00

700#3f7200

800#305800

900#203c00

300-opacity-10#88e2151a

300-opacity-20#88e21533

300-opacity-30#88e2154d

600-opacity-10#4f8e001a

600-opacity-20#4f8e0033

600-opacity-30#4f8e004d

teal

16 variables

50#e0fcf5

100#adf6e6

200#5ceed2

300#15e2ba

400#00cca5

500#00ad8c

600#009076

700#00735f

800#005848

900#003d32

300-opacity-10#15e2ba1a

300-opacity-20#15e2ba33

300-opacity-30#15e2ba4d

600-opacity-10#0090761a

600-opacity-20#00907633

600-opacity-30#0090764d

cyan

16 variables

50#e0f5fc

100#ade4f8

200#5ccef0

300#15b8e5

400#00a4d2

500#008db5

600#007698

700#00607c

800#004a60

900#003444

300-opacity-10#15b8e51a

300-opacity-20#15b8e533

300-opacity-30#15b8e54d

600-opacity-10#0076981a

600-opacity-20#00769833

600-opacity-30#0076984d

indigo

16 variables

50#eaedff

100#ccd4ff

200#9aaaff

300#6880ff

400#3d5cff

500#2040f0

600#1230d8

700#0e26b2

800#0b1d8a

900#081460

300-opacity-10#6880ff1a

300-opacity-20#6880ff33

300-opacity-30#6880ff4d

600-opacity-10#1230d81a

600-opacity-20#1230d833

600-opacity-30#1230d84d

violet

16 variables

50#f8eaff

100#edccff

200#dc9aff

300#ca68ff

400#bb3dff

500#a820f0

600#9012d8

700#750eb2

800#5a0b8a

900#400860

300-opacity-10#ca68ff1a

300-opacity-20#ca68ff33

300-opacity-30#ca68ff4d

600-opacity-10#9012d81a

600-opacity-20#9012d833

600-opacity-30#9012d84d

pink

16 variables

50#ffebf3

100#ffcce2

200#ff99c8

300#ff66ae

400#ff3d98

500#f01e84

600#d80e72

700#b30c5e

800#8a094a

900#600636

300-opacity-10#ff66ae1a

300-opacity-20#ff66ae33

300-opacity-30#ff66ae4d

600-opacity-10#d80e721a

600-opacity-20#d80e7233

600-opacity-30#d80e724d

white & black

8 variables

white#ffffff

black#000000

white-opacity-10#ffffff1a

white-opacity-20#ffffff33

white-opacity-30#ffffff4d

black-opacity-10#0000001a

black-opacity-20#00000033

black-opacity-30#0000004d

Semantic colors

186 variables · SEMANTIC COLORS · Light / Dark

Each token aliases one primitive per mode. Text and icon tokens are shown on surface-base; borders as an outline.

Surface

32 variables

Token	Light	Dark
`surface-base` Default page and card background (white / near-black).	`white`#ffffff	`neutral-900`#1b1e21
`surface-base-subtle` Raised or recessed areas on surface-base; field backgrounds.	`neutral-50`#fafafa	`neutral-800`#2f3235
`surface-base-muted` Stronger neutral fill: toggle-group track, disabled areas, dividers blocks.	`neutral-100`#e6e6e6	`neutral-700`#46484a
`surface-base-inverse` Inverse (dark in light theme) containers: snackbars, tooltips.	`neutral-900`#1b1e21	`white`#ffffff
`surface-base-subtle-inverse` Secondary inverse container.	`neutral-800`#2f3235	`neutral-50`#fafafa
`surface-base-muted-inverse` Tertiary inverse container.	`neutral-700`#46484a	`neutral-100`#e6e6e6
`surface-primary` Solid primary fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`brand-600`#0f66f5	`brand-300`#90bbff
`surface-info` Solid info fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`info-600`#0f66f5	`info-300`#90bbff
`surface-success` Solid success fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`success-600`#15803d	`success-300`#4ade80
`surface-warning` Solid warning fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`warning-800`#ab5300	`warning-200`#ffde5b
`surface-danger` Solid danger fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`danger-600`#d90000	`danger-200`#ff9393
`surface-primary-subtle` Tinted primary container (notifications, chips, highlighted cards). Text: text-base or text-primary-strong.	`brand-100`#d3e3fd	`brand-700`#0851c9
`surface-info-subtle` Tinted info container (notifications, chips, highlighted cards). Text: text-base or text-info-strong.	`info-100`#d3e3fd	`info-700`#0851c9
`surface-success-subtle` Tinted success container (notifications, chips, highlighted cards). Text: text-base or text-success-strong.	`success-100`#bbf7d0	`success-700`#166534
`surface-warning-subtle` Tinted warning container (notifications, chips, highlighted cards). Text: text-base or text-warning-strong.	`warning-100`#ffea8d	`warning-800`#ab5300
`surface-danger-subtle` Tinted danger container (notifications, chips, highlighted cards). Text: text-base or text-danger-strong.	`danger-100`#ffb8b8	`danger-700`#bb0000
`surface-coral` Solid coral fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`coral-600`#d92a06	`coral-200`#ffa48a
`surface-orange` Solid orange fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`orange-700`#9c5a00	`orange-300`#ffad15
`surface-lime` Solid lime fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`lime-700`#3f7200	`lime-300`#88e215
`surface-teal` Solid teal fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`teal-700`#00735f	`teal-300`#15e2ba
`surface-cyan` Solid cyan fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`cyan-600`#007698	`cyan-300`#15b8e5
`surface-indigo` Solid indigo fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`indigo-600`#1230d8	`indigo-200`#9aaaff
`surface-violet` Solid violet fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`violet-600`#9012d8	`violet-200`#dc9aff
`surface-pink` Solid pink fill (badges, strong notifications, decorative blocks). Text: text-base-inverse.	`pink-600`#d80e72	`pink-200`#ff99c8
`surface-coral-subtle` Tinted coral container (notifications, chips, highlighted cards). Text: text-base or text-coral-strong.	`coral-100`#ffd4c7	`coral-700`#b32105
`surface-orange-subtle` Tinted orange container (notifications, chips, highlighted cards). Text: text-base or text-orange-strong.	`orange-100`#ffe0ad	`orange-700`#9c5a00
`surface-lime-subtle` Tinted lime container (notifications, chips, highlighted cards). Text: text-base or text-lime-strong.	`lime-100`#d8f6ad	`lime-700`#3f7200
`surface-teal-subtle` Tinted teal container (notifications, chips, highlighted cards). Text: text-base or text-teal-strong.	`teal-100`#adf6e6	`teal-700`#00735f
`surface-cyan-subtle` Tinted cyan container (notifications, chips, highlighted cards). Text: text-base or text-cyan-strong.	`cyan-100`#ade4f8	`cyan-700`#00607c
`surface-indigo-subtle` Tinted indigo container (notifications, chips, highlighted cards). Text: text-base or text-indigo-strong.	`indigo-100`#ccd4ff	`indigo-700`#0e26b2
`surface-violet-subtle` Tinted violet container (notifications, chips, highlighted cards). Text: text-base or text-violet-strong.	`violet-100`#edccff	`violet-700`#750eb2
`surface-pink-subtle` Tinted pink container (notifications, chips, highlighted cards). Text: text-base or text-pink-strong.	`pink-100`#ffcce2	`pink-700`#b30c5e

Text

32 variables

Token	Light	Dark
`text-base` Primary text on surface-base, surface-base-subtle and *-subtle surfaces.	Aa `neutral-900`#1b1e21	Aa `neutral-50`#fafafa
`text-base-subtle` Secondary text (labels, supporting copy) on surface-base and surface-base-subtle.	Aa `neutral-700`#46484a	Aa `neutral-200`#cfd0d1
`text-base-muted` Tertiary text (metadata, hints) on surface-base.	Aa `neutral-600`#5d5f61	Aa `neutral-300`#b7b8b9
`text-base-inverse` Text on surface-base-inverse and on solid colour fills (interactive-primary, surface-primary, surface-danger…).	Aa `neutral-50`#fafafa	Aa `neutral-900`#1b1e21
`text-base-subtle-inverse` Text on surface-base-inverse and on solid colour fills (interactive-primary, surface-primary, surface-danger…).	Aa `neutral-200`#cfd0d1	Aa `neutral-700`#46484a
`text-base-muted-inverse` Text on surface-base-inverse and on solid colour fills (interactive-primary, surface-primary, surface-danger…).	Aa `neutral-300`#b7b8b9	Aa `neutral-600`#5d5f61
`text-primary` Primary text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `brand-600`#0f66f5	Aa `brand-300`#90bbff
`text-info` Info text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `info-600`#0f66f5	Aa `info-300`#90bbff
`text-success` Success text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `success-600`#15803d	Aa `success-300`#4ade80
`text-warning` Warning text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `warning-800`#ab5300	Aa `warning-200`#ffde5b
`text-danger` Danger text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `danger-600`#d90000	Aa `danger-200`#ff9393
`text-coral` Coral text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `coral-600`#d92a06	Aa `coral-200`#ffa48a
`text-orange` Orange text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `orange-700`#9c5a00	Aa `orange-300`#ffad15
`text-lime` Lime text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `lime-700`#3f7200	Aa `lime-300`#88e215
`text-teal` Teal text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `teal-700`#00735f	Aa `teal-300`#15e2ba
`text-cyan` Cyan text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `cyan-600`#007698	Aa `cyan-300`#15b8e5
`text-indigo` Indigo text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `indigo-600`#1230d8	Aa `indigo-200`#9aaaff
`text-violet` Violet text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `violet-600`#9012d8	Aa `violet-200`#dc9aff
`text-pink` Pink text on surface-base only (not on colour fills or inverse surfaces). text-info is the floating field label on focus.	Aa `pink-600`#d80e72	Aa `pink-200`#ff99c8
`text-primary-strong` Text on surface-primary-subtle only (not on surface-base or solid fills).	Aa `brand-900`#042967	Aa `brand-50`#ebf2fe
`text-info-strong` Text on surface-info-subtle only (not on surface-base or solid fills).	Aa `info-900`#042967	Aa `info-50`#ebf2fe
`text-success-strong` Text on surface-success-subtle only (not on surface-base or solid fills).	Aa `success-900`#063b1c	Aa `success-50`#dcfce7
`text-warning-strong` Text on surface-warning-subtle only (not on surface-base or solid fills).	Aa `warning-900`#7b3b00	Aa `warning-50`#fff6c0
`text-danger-strong` Text on surface-danger-subtle only (not on surface-base or solid fills).	Aa `danger-900`#690000	Aa `danger-50`#ffdbdb
`text-coral-strong` Text on surface-coral-subtle only (not on surface-base or solid fills).	Aa `coral-900`#611203	Aa `coral-50`#fff0eb
`text-orange-strong` Text on surface-orange-subtle only (not on surface-base or solid fills).	Aa `orange-900`#552f00	Aa `orange-50`#fff3e0
`text-lime-strong` Text on surface-lime-subtle only (not on surface-base or solid fills).	Aa `lime-900`#203c00	Aa `lime-50`#f0fce0
`text-teal-strong` Text on surface-teal-subtle only (not on surface-base or solid fills).	Aa `teal-900`#003d32	Aa `teal-50`#e0fcf5
`text-cyan-strong` Text on surface-cyan-subtle only (not on surface-base or solid fills).	Aa `cyan-900`#003444	Aa `cyan-50`#e0f5fc
`text-indigo-strong` Text on surface-indigo-subtle only (not on surface-base or solid fills).	Aa `indigo-900`#081460	Aa `indigo-50`#eaedff
`text-violet-strong` Text on surface-violet-subtle only (not on surface-base or solid fills).	Aa `violet-900`#400860	Aa `violet-50`#f8eaff
`text-pink-strong` Text on surface-pink-subtle only (not on surface-base or solid fills).	Aa `pink-900`#600636	Aa `pink-50`#ffebf3

Icon

19 variables

Token	Light	Dark
`icon-base` Default icon colour on surface-base.	★ `neutral-900`#1b1e21	★ `neutral-50`#fafafa
`icon-base-subtle` Secondary icons, e.g. a field's leading icon.	★ `neutral-600`#5d5f61	★ `neutral-300`#b7b8b9
`icon-base-muted` Decorative, low-emphasis icons.	★ `neutral-500`#7d7f81	★ `neutral-400`#9c9d9e
`icon-base-inverse` Icons on inverse surfaces and solid colour fills.	★ `neutral-50`#fafafa	★ `neutral-900`#1b1e21
`icon-base-subtle-inverse` Icons on inverse surfaces and solid colour fills.	★ `neutral-300`#b7b8b9	★ `neutral-600`#5d5f61
`icon-base-muted-inverse` Icons on inverse surfaces and solid colour fills.	★ `neutral-400`#9c9d9e	★ `neutral-500`#7d7f81
`icon-primary` Primary icons on surface-base.	★ `brand-600`#0f66f5	★ `brand-300`#90bbff
`icon-info` Info icons on surface-base.	★ `info-600`#0f66f5	★ `info-300`#90bbff
`icon-success` Success icons on surface-base.	★ `success-600`#15803d	★ `success-300`#4ade80
`icon-warning` Warning icons on surface-base.	★ `warning-800`#ab5300	★ `warning-200`#ffde5b
`icon-danger` Danger icons on surface-base.	★ `danger-600`#d90000	★ `danger-200`#ff9393
`icon-coral` Coral icons on surface-base.	★ `coral-600`#d92a06	★ `coral-200`#ffa48a
`icon-orange` Orange icons on surface-base.	★ `orange-700`#9c5a00	★ `orange-300`#ffad15
`icon-lime` Lime icons on surface-base.	★ `lime-700`#3f7200	★ `lime-300`#88e215
`icon-teal` Teal icons on surface-base.	★ `teal-700`#00735f	★ `teal-300`#15e2ba
`icon-cyan` Cyan icons on surface-base.	★ `cyan-600`#007698	★ `cyan-300`#15b8e5
`icon-indigo` Indigo icons on surface-base.	★ `indigo-600`#1230d8	★ `indigo-200`#9aaaff
`icon-violet` Violet icons on surface-base.	★ `violet-600`#9012d8	★ `violet-200`#dc9aff
`icon-pink` Pink icons on surface-base.	★ `pink-600`#d80e72	★ `pink-200`#ff99c8

Border

32 variables

Token	Light	Dark
`border-base` Strong neutral border; on surface-base and surface-base-subtle.	`neutral-700`#46484a	`neutral-100`#e6e6e6
`border-base-subtle` Neutral divider/border on surface-base. 2.72:1 in light — decorative separation only, not for control boundaries that carry meaning.	`neutral-400`#9c9d9e	`neutral-500`#7d7f81
`border-base-muted` Hairline divider on surface-base (decorative).	`neutral-200`#cfd0d1	`neutral-700`#46484a
`border-base-inverse` Border on surface-base-inverse and other inverse containers.	`neutral-100`#e6e6e6	`neutral-700`#46484a
`border-base-subtle-inverse` Border on surface-base-inverse and other inverse containers.	`neutral-500`#7d7f81	`neutral-400`#9c9d9e
`border-base-muted-inverse` Border on surface-base-inverse and other inverse containers.	`neutral-700`#46484a	`neutral-200`#cfd0d1
`border-primary` Primary border on surface-base (e.g. error field uses border-danger).	`brand-600`#0f66f5	`brand-300`#90bbff
`border-info` Info border on surface-base (e.g. error field uses border-danger).	`info-600`#0f66f5	`info-300`#90bbff
`border-success` Success border on surface-base (e.g. error field uses border-danger).	`success-600`#15803d	`success-300`#4ade80
`border-warning` Warning border on surface-base (e.g. error field uses border-danger).	`warning-800`#ab5300	`warning-200`#ffde5b
`border-danger` Danger border on surface-base (e.g. error field uses border-danger).	`danger-600`#d90000	`danger-200`#ff9393
`border-primary-subtle` Border of a primary-subtle container (on surface-primary-subtle).	`brand-400`#6ca3ff	`brand-500`#4085f7
`border-info-subtle` Border of a info-subtle container (on surface-info-subtle).	`info-400`#6ca3ff	`info-500`#4085f7
`border-success-subtle` Border of a success-subtle container (on surface-success-subtle).	`success-400`#22c55e	`success-500`#16a34a
`border-warning-subtle` Border of a warning-subtle container (on surface-warning-subtle).	`warning-400`#ffbf00	`warning-600`#dd8c00
`border-danger-subtle` Border of a danger-subtle container (on surface-danger-subtle).	`danger-400`#ff4545	`danger-500`#ff3030
`border-coral` Coral border on surface-base (e.g. error field uses border-danger).	`coral-600`#d92a06	`coral-200`#ffa48a
`border-orange` Orange border on surface-base (e.g. error field uses border-danger).	`orange-700`#9c5a00	`orange-300`#ffad15
`border-lime` Lime border on surface-base (e.g. error field uses border-danger).	`lime-700`#3f7200	`lime-300`#88e215
`border-teal` Teal border on surface-base (e.g. error field uses border-danger).	`teal-700`#00735f	`teal-300`#15e2ba
`border-cyan` Cyan border on surface-base (e.g. error field uses border-danger).	`cyan-600`#007698	`cyan-300`#15b8e5
`border-indigo` Indigo border on surface-base (e.g. error field uses border-danger).	`indigo-600`#1230d8	`indigo-200`#9aaaff
`border-violet` Violet border on surface-base (e.g. error field uses border-danger).	`violet-600`#9012d8	`violet-200`#dc9aff
`border-pink` Pink border on surface-base (e.g. error field uses border-danger).	`pink-600`#d80e72	`pink-200`#ff99c8
`border-coral-subtle` Border of a coral-subtle container (on surface-coral-subtle).	`coral-400`#ff5530	`coral-500`#f03a10
`border-orange-subtle` Border of a orange-subtle container (on surface-orange-subtle).	`orange-400`#f59800	`orange-500`#db8500
`border-lime-subtle` Border of a lime-subtle container (on surface-lime-subtle).	`lime-400`#72c800	`lime-500`#60aa00
`border-teal-subtle` Border of a teal-subtle container (on surface-teal-subtle).	`teal-400`#00cca5	`teal-500`#00ad8c
`border-cyan-subtle` Border of a cyan-subtle container (on surface-cyan-subtle).	`cyan-400`#00a4d2	`cyan-500`#008db5
`border-indigo-subtle` Border of a indigo-subtle container (on surface-indigo-subtle).	`indigo-400`#3d5cff	`indigo-500`#2040f0
`border-violet-subtle` Border of a violet-subtle container (on surface-violet-subtle).	`violet-400`#bb3dff	`violet-500`#a820f0
`border-pink-subtle` Border of a pink-subtle container (on surface-pink-subtle).	`pink-400`#ff3d98	`pink-500`#f01e84

Interactive

22 variables

Token	Light	Dark
`interactive-primary` Primary actions: button fill, outlined stroke and text/outlined label colour — enabled state. Put text-base-inverse on a fill of it.	`brand-600`#0f66f5	`brand-200`#b2cfff
`interactive-primary-hover` Primary actions: button fill, outlined stroke and text/outlined label colour — hover state. Put text-base-inverse on a fill of it.	`brand-700`#0851c9	`brand-300`#90bbff
`interactive-primary-active` Primary actions: button fill, outlined stroke and text/outlined label colour — active state. Put text-base-inverse on a fill of it.	`brand-800`#063d98	`brand-400`#6ca3ff
`interactive-primary-subtle` Primary actions: subtle (tonal) fill — enabled state. Put text-base on it.	`brand-200`#b2cfff	`brand-600`#0f66f5
`interactive-primary-subtle-hover` Primary actions: subtle (tonal) fill — hover state. Put text-base on it.	`brand-300`#90bbff	`brand-700`#0851c9
`interactive-primary-subtle-active` Primary actions: subtle (tonal) fill — active state. Put text-base on it.	`brand-400`#6ca3ff	`brand-800`#063d98
`interactive-base` Neutral/secondary actions: button fill, outlined stroke and text/outlined label colour — enabled state. Put text-base-inverse on a fill of it.	`neutral-700`#46484a	`neutral-50`#fafafa
`interactive-base-hover` Neutral/secondary actions: button fill, outlined stroke and text/outlined label colour — hover state. Put text-base-inverse on a fill of it.	`neutral-800`#2f3235	`neutral-100`#e6e6e6
`interactive-base-active` Neutral/secondary actions: button fill, outlined stroke and text/outlined label colour — active state. Put text-base-inverse on a fill of it.	`neutral-900`#1b1e21	`neutral-200`#cfd0d1
`interactive-base-inverse` Neutral/secondary actions on inverse surfaces: button fill, outlined stroke and text/outlined label colour — enabled state.	`neutral-50`#fafafa	`neutral-700`#46484a
`interactive-base-inverse-hover` Neutral/secondary actions on inverse surfaces: button fill, outlined stroke and text/outlined label colour — hover state.	`neutral-100`#e6e6e6	`neutral-800`#2f3235
`interactive-base-inverse-active` Neutral/secondary actions on inverse surfaces: button fill, outlined stroke and text/outlined label colour — active state.	`neutral-200`#cfd0d1	`neutral-900`#1b1e21
`interactive-danger` Destructive actions: button fill, outlined stroke and text/outlined label colour — enabled state. Put text-base-inverse on a fill of it.	`danger-600`#d90000	`danger-200`#ff9393
`interactive-danger-hover` Destructive actions: button fill, outlined stroke and text/outlined label colour — hover state. Put text-base-inverse on a fill of it.	`danger-700`#bb0000	`danger-300`#ff6c6c
`interactive-danger-active` Destructive actions: button fill, outlined stroke and text/outlined label colour — active state. Put text-base-inverse on a fill of it.	`danger-800`#910100	`danger-400`#ff4545
`interactive-danger-subtle` Destructive actions: subtle (tonal) fill — enabled state. Put text-base on it.	`danger-200`#ff9393	`danger-600`#d90000
`interactive-danger-subtle-hover` Destructive actions: subtle (tonal) fill — hover state. Put text-base on it.	`danger-300`#ff6c6c	`danger-700`#bb0000
`interactive-danger-subtle-active` Destructive actions: subtle (tonal) fill — active state. Put text-base on it.	`danger-400`#ff4545	`danger-800`#910100
`interactive-disabled` Fill of disabled filled controls (10% ink).	`black-opacity-10`#0000001a	`white-opacity-10`#ffffff1a
`interactive-on-disabled` Label, icon and border of any disabled control (30% ink). Exempt from contrast minimums; never use for enabled content.	`black-opacity-30`#0000004d	`white-opacity-30`#ffffff4d
`interactive-inverse-disabled` Disabled fill on inverse surfaces.	`white-opacity-10`#ffffff1a	`black-opacity-10`#0000001a
`interactive-inverse-on-disabled` Disabled content on inverse surfaces.	`white-opacity-30`#ffffff4d	`black-opacity-30`#0000004d

State layers

45 variables

Token	Light	Dark
`state-layers-primary-subtle` Translucent state layer for primary controls: hover (10%). Laid over the control, never used as a solid surface. Also the fill of a selected tab (primary-subtle).	`brand-600-opacity-10`#0f66f51a	`brand-300-opacity-10`#90bbff1a
`state-layers-primary-moderate` Translucent state layer for primary controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`brand-600-opacity-20`#0f66f533	`brand-300-opacity-20`#90bbff33
`state-layers-primary-strong` Translucent state layer for primary controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`brand-600-opacity-30`#0f66f54d	`brand-300-opacity-30`#90bbff4d
`state-layers-base-subtle` Translucent state layer for base controls: hover (10%). Laid over the control, never used as a solid surface.	`black-opacity-10`#0000001a	`white-opacity-10`#ffffff1a
`state-layers-base-moderate` Translucent state layer for base controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`black-opacity-20`#00000033	`white-opacity-20`#ffffff33
`state-layers-base-strong` Translucent state layer for base controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`black-opacity-20`#00000033	`white-opacity-20`#ffffff33
`state-layers-base-inverse-subtle` Translucent state layer for base on inverse surfaces controls: hover (10%). Laid over the control, never used as a solid surface.	`white-opacity-10`#ffffff1a	`black-opacity-10`#0000001a
`state-layers-base-inverse-moderate` Translucent state layer for base on inverse surfaces controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`white-opacity-20`#ffffff33	`black-opacity-20`#00000033
`state-layers-base-inverse-strong` Translucent state layer for base on inverse surfaces controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`white-opacity-20`#ffffff33	`black-opacity-20`#00000033
`state-layers-info-subtle` Translucent state layer for info controls: hover (10%). Laid over the control, never used as a solid surface.	`brand-600-opacity-10`#0f66f51a	`info-300-opacity-10`#90bbff1a
`state-layers-info-moderate` Translucent state layer for info controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`brand-600-opacity-20`#0f66f533	`info-300-opacity-20`#90bbff33
`state-layers-info-strong` Translucent state layer for info controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`brand-600-opacity-30`#0f66f54d	`info-300-opacity-30`#90bbff4d
`state-layers-success-subtle` Translucent state layer for success controls: hover (10%). Laid over the control, never used as a solid surface.	`success-600-opacity-10`#15803d1a	`success-300-opacity-10`#4ade801a
`state-layers-success-moderate` Translucent state layer for success controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`success-600-opacity-20`#15803d33	`success-300-opacity-20`#4ade8033
`state-layers-success-strong` Translucent state layer for success controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`success-600-opacity-30`#15803d4d	`success-300-opacity-30`#4ade804d
`state-layers-layers-warning-subtle` Translucent state layer for warning controls: hover (10%). Laid over the control, never used as a solid surface.	`warning-600-opacity-10`#dd8c001a	`warning-300-opacity-10`#ffcd291a
`state-layers-warning-moderate` Translucent state layer for warning controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`warning-600-opacity-20`#dd8c0033	`warning-300-opacity-20`#ffcd2933
`state-layers-warning-strong` Translucent state layer for warning controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`warning-600-opacity-30`#dd8c004d	`warning-300-opacity-30`#ffcd294d
`state-layers-danger-subtle` Translucent state layer for danger controls: hover (10%). Laid over the control, never used as a solid surface.	`danger-600-opacity-10`#d900001a	`danger-300-opacity-10`#ff6c6c1a
`state-layers-danger-moderate` Translucent state layer for danger controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`danger-600-opacity-20`#d9000033	`danger-300-opacity-20`#ff6c6c33
`state-layers-danger-strong` Translucent state layer for danger controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`danger-600-opacity-30`#d900004d	`danger-300-opacity-30`#ff6c6c4d
`state-layers-coral-subtle` Translucent state layer for coral controls: hover (10%). Laid over the control, never used as a solid surface.	`coral-600-opacity-10`#d92a061a	`coral-300-opacity-10`#ff77521a
`state-layers-coral-moderate` Translucent state layer for coral controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`coral-600-opacity-20`#d92a0633	`coral-300-opacity-20`#ff775233
`state-layers-coral-strong` Translucent state layer for coral controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`coral-600-opacity-30`#d92a064d	`coral-300-opacity-30`#ff77524d
`state-layers-orange-subtle` Translucent state layer for orange controls: hover (10%). Laid over the control, never used as a solid surface.	`orange-600-opacity-10`#c070001a	`orange-300-opacity-10`#ffad151a
`state-layers-orange-moderate` Translucent state layer for orange controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`orange-600-opacity-20`#c0700033	`orange-300-opacity-20`#ffad1533
`state-layers-orange-strong` Translucent state layer for orange controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`orange-600-opacity-30`#c070004d	`orange-300-opacity-30`#ffad154d
`state-layers-lime-subtle` Translucent state layer for lime controls: hover (10%). Laid over the control, never used as a solid surface.	`lime-600-opacity-10`#4f8e001a	`lime-300-opacity-10`#88e2151a
`state-layers-lime-moderate` Translucent state layer for lime controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`lime-600-opacity-20`#4f8e0033	`lime-300-opacity-20`#88e21533
`state-layers-lime-strong` Translucent state layer for lime controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`lime-600-opacity-30`#4f8e004d	`lime-300-opacity-30`#88e2154d
`state-layers-teal-subtle` Translucent state layer for teal controls: hover (10%). Laid over the control, never used as a solid surface.	`teal-600-opacity-10`#0090761a	`teal-300-opacity-10`#15e2ba1a
`state-layers-teal-moderate` Translucent state layer for teal controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`teal-600-opacity-20`#00907633	`teal-300-opacity-20`#15e2ba33
`state-layers-teal-strong` Translucent state layer for teal controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`teal-600-opacity-30`#0090764d	`teal-300-opacity-30`#15e2ba4d
`state-layers-cyan-subtle` Translucent state layer for cyan controls: hover (10%). Laid over the control, never used as a solid surface.	`cyan-600-opacity-10`#0076981a	`cyan-300-opacity-10`#15b8e51a
`state-layers-cyan-moderate` Translucent state layer for cyan controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`cyan-600-opacity-20`#00769833	`cyan-300-opacity-20`#15b8e533
`state-layers-cyan-strong` Translucent state layer for cyan controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`cyan-600-opacity-30`#0076984d	`cyan-300-opacity-30`#15b8e54d
`state-layers-indigo-subtle` Translucent state layer for indigo controls: hover (10%). Laid over the control, never used as a solid surface.	`indigo-600-opacity-10`#1230d81a	`indigo-300-opacity-10`#6880ff1a
`state-layers-indigo-moderate` Translucent state layer for indigo controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`indigo-600-opacity-20`#1230d833	`indigo-300-opacity-20`#6880ff33
`state-layers-indigo-strong` Translucent state layer for indigo controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`indigo-600-opacity-30`#1230d84d	`indigo-300-opacity-30`#6880ff4d
`state-layers-violet-subtle` Translucent state layer for violet controls: hover (10%). Laid over the control, never used as a solid surface.	`violet-600-opacity-10`#9012d81a	`violet-300-opacity-10`#ca68ff1a
`state-layers-violet-moderate` Translucent state layer for violet controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`violet-600-opacity-20`#9012d833	`violet-300-opacity-20`#ca68ff33
`state-layers-violet-strong` Translucent state layer for violet controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`violet-600-opacity-30`#9012d84d	`violet-300-opacity-30`#ca68ff4d
`state-layers-pink-subtle` Translucent state layer for pink controls: hover (10%). Laid over the control, never used as a solid surface.	`pink-600-opacity-10`#d80e721a	`pink-300-opacity-10`#ff66ae1a
`state-layers-pink-moderate` Translucent state layer for pink controls: pressed/active (20%). Laid over the control, never used as a solid surface.	`pink-600-opacity-20`#d80e7233	`pink-300-opacity-20`#ff66ae33
`state-layers-pink-strong` Translucent state layer for pink controls: dragged or strongest emphasis (30%). Laid over the control, never used as a solid surface.	`pink-600-opacity-30`#d80e724d	`pink-300-opacity-30`#ff66ae4d

Focus

4 variables

Token	Light	Dark
`focus-ring` 2px focus ring on every interactive element (buttons, tabs, toggles, checkboxes, fields). Kept independent of the brand palette; ≥3:1 on surface-base in both themes.	`info-600`#0f66f5	`info-50`#ebf2fe
`focus-inset` Inner 2px band inside focus-ring on filled buttons, so the ring stays visible against a same-hue fill.	`brand-50`#ebf2fe	`info-900`#042967
`focus-ring-inverse` Focus ring on inverse or colored surfaces (surface-base-inverse, surface-primary…).	`info-50`#ebf2fe	`info-600`#0f66f5
`focus-inset-inverse` Inner focus band paired with focus-ring-inverse on inverse surfaces.	`info-900`#042967	`brand-50`#ebf2fe

Typography

49 variables · TIPOGRAPHY + 32 text styles

Inter in five roles. Variables hold the raw family, weight, size and line height; text styles combine them.

Font family

5 variables

Aafont-family/displayInter

Aafont-family/headlineInter

Aafont-family/titleInter

Aafont-family/bodyInter

Aafont-family/labelInter

Font weight

15 variables

Token	Value	Weight	Sample
`font-weight/display-strong`	Black	900	Link Aa
`font-weight/display-moderate`	Bold	700	Link Aa
`font-weight/display-sublte`	Medium	500	Link Aa
`font-weight/headline-strong`	Black	900	Link Aa
`font-weight/headline-moderate`	Bold	700	Link Aa
`font-weight/headline-subtle`	Medium	500	Link Aa
`font-weight/title-strong`	Black	900	Link Aa
`font-weight/title-moderate`	Bold	700	Link Aa
`font-weight/title-subtle`	Medium	500	Link Aa
`font-weight/body-strong`	Medium	500	Link Aa
`font-weight/body-moderate`	Regular	400	Link Aa
`font-weight/body-subtle`	Light	300	Link Aa
`font-weight/label-strong`	Bold	700	Link Aa
`font-weight/label-moderate`	Medium	500	Link Aa
`font-weight/label-subtle`	Regular	400	Link Aa

Font size & line height

16 + 12 variables · letter-spacing/M = 0

Token	Size	Line height	Sample
`display-M`	45	42	Link Aa
`display-S`	36	38	Link Aa
`headline-L`	32	34	Link Aa
`headline-M`	28	30	Link Aa
`headline-S`	24	26	Link Aa
`title-L`	20	24	Link Aa
`title-M`	16	20	Link Aa
`title-S`	14	16	Link Aa
`body-L`	16	24	Link Aa
`body-M`	14	20	Link Aa
`body-S`	12	16	Link Aa
`body-XS`	10	12	Link Aa
`label-L`	16	auto	Link Aa
`label-M`	14	auto	Link Aa
`label-S`	12	auto	Link Aa
`label-XS`	10	auto	Link Aa

Text styles

32 styles built from the variables above

Style	Size	Line h.	Weight	Sample
`display-M-moderate`	45px	42px	700	42
`display-M-subtle`	45px	42px	500	42
`display-S-moderate`	36px	38px	700	42
`display-S-subtle`	36px	38px	500	42
`headline-L-moderate`	32px	34px	700	Resum del mes
`headline-L-subtle`	32px	34px	500	Resum del mes
`headline-M-moderate`	28px	30px	700	Resum del mes
`headline-M-subtle` Figma style is set to Bold, same as -moderate (likely unfinished). Kept exactly as in the file.	28px	30px	700	Resum del mes
`headline-S-moderate`	24px	26px	700	Resum del mes
`headline-S-subtle` Figma style is set to Bold, same as -moderate (likely unfinished). Kept exactly as in the file.	24px	26px	700	Resum del mes
`title-L-moderate`	20px	24px	700	Detalls del pagament
`title-L-subtle`	20px	24px	500	Detalls del pagament
`title-M-moderate`	16px	20px	700	Detalls del pagament
`title-M-subtle`	16px	20px	500	Detalls del pagament
`title-S-moderate`	14px	16px	700	Detalls del pagament
`title-S-subtle`	14px	16px	500	Detalls del pagament
`body-L-strong`	16px	24px	500	Revisa les dades abans de continuar amb el pagament.
`body-L-moderate`	16px	24px	400	Revisa les dades abans de continuar amb el pagament.
`body-M-strong`	14px	20px	500	Revisa les dades abans de continuar amb el pagament.
`body-M-moderate`	14px	20px	400	Revisa les dades abans de continuar amb el pagament.
`body-S-strong`	12px	16px	500	Revisa les dades abans de continuar amb el pagament.
`body-S-moderate`	12px	16px	400	Revisa les dades abans de continuar amb el pagament.
`body-XS-moderate`	10px	12px	500	Revisa les dades abans de continuar amb el pagament.
`body-XS-subtle`	10px	12px	400	Revisa les dades abans de continuar amb el pagament.
`label-L-moderate`	16px	auto	500	Desar canvis
`label-L-strong`	16px	auto	700	Desar canvis
`label-M-moderate`	14px	auto	500	Desar canvis
`label-M-strong`	14px	auto	700	Desar canvis
`label-S-moderate`	12px	auto	500	Desar canvis
`label-S-strong`	12px	auto	700	Desar canvis
`label-XS-moderate`	10px	auto	500	Desar canvis
`label-XS-strong`	10px	auto	700	Desar canvis

Spacing

22 variables · SPACING · Desktop / Tablet / Mobile

Named by use. Highlighted values change between modes.

layout

Page margin and 12-column grid gutter. Change on Mobile.

Token	Desktop	Tablet	Mobile	Scale (×4)
`layout-grid-gap`	20	20	16
`page-inset`	24	24	16

inset

Padding inside a component or container.

Token	Desktop	Tablet	Mobile
`inset-XL`	24	24	24
`inset-L`	16	16	16
`inset-M`	12	12	12
`inset-S`	8	8	8
`inset-XS`	4	4	4
`inset-none`	0	0	0

section-gap

Space between page sections.

Token	Desktop	Tablet	Mobile	Scale (×4)
`section-gap-M`	24	24	24
`section-gap-S`	16	16	16

stack

Vertical space between stacked elements.

Token	Desktop	Tablet	Mobile
`stack-XL`	24	24	24
`stack-L`	16	16	16
`stack-M`	12	12	12
`stack-S`	8	8	8
`stack-XS`	4	4	4
`stack-none`	0	0	0

gap

Space between inline siblings.

Token	Desktop	Tablet	Mobile
`gap-XL`	24	24	24
`gap-L`	16	16	16
`gap-M`	12	12	12
`gap-S`	8	8	8
`gap-XS`	4	4	4
`gap-none`	0	0	0

Border radius

9 variables · BORDER RADIUS

radius-full (1000) makes pills.

radius-XS4px

radius-S8px

radius-M12px

radius-L16px

radius-XL20px

radius-2XL28px

radius-3XL32px

radius-4XL48px

radius-full1000px

Icon sizes

6 variables · ICONS

Material Icons Round glyph sizes.

staricon-size-2XS8px

staricon-size-XS12px

staricon-size-S16px

staricon-size-M20px

staricon-size-L24px

staricon-size-XL32px

Pictogram

3 variables · PICTOGRAM

Boxes for pictograms and illustrations.

pictogram-S48px

pictogram-M64px

pictogram-L96px

Elevation

5 effect styles

Two soft black shadows each. Same in Light and Dark.

elevation-1Cards resting on surface-base.

elevation-2Raised cards, sticky bars.

elevation-3Menus, popovers.

elevation-4FAB (Elevation/4).

elevation-5Dialogs, modal sheets.