Foundations

Colour

A tokenised colour system replaces raw values with named tokens, creating a single source of truth that ensures consistency, supports theming, and simplifies scaling across platforms.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

The colour system is implemented using NativeWind styling and a colour scheme generated with Tailwind CSS. For more information, refer to the NativeWind documentation on colours.

NativeWind Docs

Tailwind Colour Generator

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Design Tokens

Design tokens for colour in a design system are reusable variables that define consistent colour values across a product's UI, ensuring visual coherence and easy theming.

This scalable, flexible Design System seamlessly integrates with existing products, empowering rapid design iteration and a smooth transition to production.

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Neutral

Copied

950

#0F0F0F

Copied

900

#1C1C1C

Copied

800

#363636

Copied

700

#525252

Copied

600

#6B6B6B

Copied

500

#878787

Copied

400

#A1A1A1

Copied

300

#BDBDBD

Copied

200

#D6D6D6

Copied

100

#F2F2F2

Copied

50

#FFFFFF

Colour

Neutral 950

Neutral 900

Neutral 800

Neutral 700

Neutral 600

Neutral 500

Neutral 400

Neutral 300

Neutral 200

Neutral 100

Neutral 50

HSL

0 0% 5.88%;

0 0% 10.98%;

0 0% 21.18%;

0 0% 32.16%;

0 0% 41.96%;

0 0% 52.94%;

0 0% 63.14%;

0 0% 74.12%;

0 0% 83.92%;

0 0% 94.9%;

0 0% 100%;

Ref Token

--ref-neutral-950

--ref-neutral-900

--ref-neutral-800

--ref-neutral-700

--ref-neutral-600

--ref-neutral-500

--ref-neutral-400

--ref-neutral-300

--ref-neutral-200

--ref-neutral-100

--ref-neutral-50

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Secondary

Copied

950

#201650

Copied

900

#332689

Copied

800

#3B25AE

Copied

700

#492AD8

Copied

600

#5536F5

Copied

500

#5B4CFF

Copied

400

#7675FF

Copied

300

#9CA4FF

Copied

200

#C2C9FF

Copied

100

#DDE1FF

Copied

50

#ECEFFF

Colour

Secondary 950

Secondary 900

Secondary 800

Secondary 700

Secondary 600

Secondary 500

Secondary 400

Secondary 300

Secondary 200

Secondary 100

Secondary 50

HSL

250.34 56.86% 20%;

247.88 56.57% 34.31%;

249.64 64.93% 41.37%;

250.69 69.05% 50.59%;

249.74 90.52% 58.63%;

245.03 100% 64.9%;

240.43 100% 72.94%;

235.15 100% 80.59%;

233.11 100% 88.04%;

232.94 100% 93.33%;

230.53 100% 96.27%;

Ref Token

--ref-secondary-950

--ref-secondary-900

--ref-secondary-800

--ref-secondary-700

--ref-secondary-600

--ref-secondary-500

--ref-secondary-400

--ref-secondary-300

--ref-secondary-200

--ref-secondary-100

--ref-secondary-50

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Information

Copied

950

#142D57

Copied

900

#19488F

Copied

800

#1753B6

Copied

700

#1467E1

Copied

600

#1B7EF5

Copied

500

#2E9BFF

Copied

400

#59BCFF

Copied

300

#8ED5FF

Copied

200

#BCE5FF

Copied

100

#D9EFFF

Copied

50

#EEF8FF

Colour

Information 950

Information 900

Information 800

Information 700

Information 600

Information 500

Information 400

Information 300

Information 200

Information 100

Information 50

HSL

217.61 62.62% 20.98%;

216.1 70.24% 32.94%;

217.36 77.56% 40.2%;

215.71 83.67% 48.04%;

212.75 91.6% 53.33%;

208.71 100% 59.02%;

204.22 100% 67.45%;

202.3 100% 77.84%;

203.28 100% 86.86%;

205.26 100% 92.55%;

204.71 100% 96.67%;

Ref Token

--ref-information-950

--ref-information-900

--ref-information-800

--ref-information-700

--ref-information-600

--ref-information-500

--ref-information-400

--ref-information-300

--ref-information-200

--ref-information-100

--ref-information-50

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Success

Copied

950

#05291C

Copied

900

#0B4932

Copied

800

#0C593A

Copied

700

#0C7047

Copied

600

#108B57

Copied

500

#1CAB6B

Copied

400

#40C786

Copied

300

#77DEA9

Copied

200

#ADEDC9

Copied

100

#D4F7E1

Copied

50

#EDFCF3

Colour

Success 950

Success 900

Success 800

Success 700

Success 600

Success 500

Success 400

Success 300

Success 200

Success 100

Success 50

HSL

158.33 78.26% 9.02%

157.74 73.81% 16.47%

155.84 76.24% 19.8%

155.4 80.65% 24.31%

154.63 79.35% 30.39%

153.15 71.86% 39.02%

151.11 54.66% 51.57%

149.13 60.95% 66.86%

146.25 64% 80.39%

142.29 68.63% 90%

144 71.43% 95.88%

Ref Token

--ref-success-950

--ref-success-900

--ref-success-800

--ref-success-700

--ref-success-600

--ref-success-500

--ref-success-400

--ref-success-300

--ref-success-200

--ref-success-100

--ref-success-50

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Warning

Copied

950

#421506

Copied

900

#732D14

Copied

800

#8C3614

Copied

700

#AC4511

Copied

600

#CF6410

Copied

500

#EA8716

Copied

400

#F1A92E

Copied

300

#F4C055

Copied

200

#F9E0A4

Copied

100

#FBECCA

Copied

50

#FEF8EC

Colour

Warning 950

Warning 900

Warning 800

Warning 700

Warning 600

Warning 500

Warning 400

Warning 300

Warning 200

Warning 100

Warning 50

HSL

15 83.33% 14.12%;

15.79 70.37% 26.47%;

17 75% 31.37%;

20.13 82.01% 37.06%;

26.39 85.65% 43.73%;

31.98 83.46% 50.2%;

37.85 87.44% 56.27%;

40.38 87.85% 64.51%;

42.35 87.63% 80.98%;

41.63 85.96% 88.82%;

40 90% 96.08%;

Ref Token

--ref-warning-950

--ref-warning-900

--ref-warning-800

--ref-warning-700

--ref-warning-600

--ref-warning-500

--ref-warning-400

--ref-warning-300

--ref-warning-200

--ref-warning-100

--ref-warning-50

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Error

Copied

950

#420D0D

Copied

900

#7A2222

Copied

800

#922222

Copied

700

#B12424

Copied

600

#D23030

Copied

500

#E64D4D

Copied

400

#F17878

Copied

300

#F7A6A6

Copied

200

#FBCDCD

Copied

100

#FCE4E4

Copied

50

#FDF3F3

Colour

Error 950

Error 900

Error 800

Error 700

Error 600

Error 500

Error 400

Error 300

Error 200

Error 100

Error 50

HSL

0 67.09% 15.49%;

0 56.41% 30.59%;

0 62.22% 35.29%;

0 66.2% 41.76%;

0 64.29% 50.59%;

0 75.37% 60.2%;

0 81.21% 70.78%;

0 83.51% 80.98%;

0 85.19% 89.41%;

0 80% 94.12%;

0 71.43% 97.25%;

Ref Token

--ref-error-950

--ref-error-900

--ref-error-800

--ref-error-700

--ref-error-600

--ref-error-500

--ref-error-400

--ref-error-300

--ref-error-200

--ref-error-100

--ref-error-50

Surface

Surface colour tokens in UI design represent the background colours of components and layers, helping define depth, hierarchy, and visual structure in an interface.

This scalable, flexible Design System seamlessly integrates with existing products, empowering rapid design iteration and a smooth transition to production.

System Token

--sys-surface-neutral-0

--sys-surface-neutral-1

--sys-surface-neutral-2

--sys-surface-neutral-3

--sys-surface-neutral-4

--sys-surface-neutral-5

Token Light

var(--ref-neutral-50)

var(--ref-neutral-100)

var(--ref-neutral-200)

var(--ref-neutral-800)

var(--ref-neutral-900)

var(--ref-neutral-950)

Token Dark

var(--ref-neutral-950)

var(--ref-neutral-900)

var(--ref-neutral-800)

var(--ref-neutral-200)

var(--ref-neutral-100)

var(--ref-neutral-50)

Secondary

Secondary (brand) colour tokens support the primary brand palette by adding flexibility for accents, highlights, or differentiation across components while maintaining brand identity.

This scalable, flexible Design System seamlessly integrates with existing products, empowering rapid design iteration and a smooth transition to production.

System Token

--sys-surface-secondary-1

--sys-surface-secondary-2

--sys-surface-secondary-3

--sys-surface-secondary-4

--sys-surface-secondary-5

Token Light

var(--ref-secondary-50)

var(--ref-secondary-100)

var(--ref-secondary-300)

var(--ref-secondary-500)

var(--ref-secondary-700)

Token Dark

var(--ref-secondary-50)

var(--ref-secondary-100)

var(--ref-secondary-300)

var(--ref-secondary-500)

var(--ref-secondary-700)

Border

Border colour tokens in a design system define consistent colours for UI element outlines, helping maintain visual clarity, structure, and hierarchy across components.

This scalable, flexible Design System seamlessly integrates with existing products, empowering rapid design iteration and a smooth transition to production.

System Token

--sys-border-1

--sys-border-2

--sys-border-3

--sys-border-4

--sys-border-5

--sys-border-6

Token Light

var(--ref-neutral-900)

var(--ref-neutral-800)

var(--ref-neutral-600)

var(--ref-neutral-300)

var(--ref-neutral-200)

var(--ref-secondary-500)

Token Dark

var(--ref-neutral-200)

var(--ref-neutral-300)

var(--ref-neutral-600)

var(--ref-neutral-800)

var(--ref-secondary-300)

Text

Text colour tokens in a design system define consistent colour values for typography, ensuring readability, accessibility, and visual harmony across the interface.

This scalable, flexible Design System seamlessly integrates with existing products, empowering rapid design iteration and a smooth transition to production.

System Token

--sys-text-body

--sys-text-black

--sys-text-white

--sys-text-neutral-1

--sys-text-neutral-2

--sys-text-neutral-3

--sys-text-neutral-4

--sys-text-body-inverse

--sys-text-disabled

--sys-text-secondary

Token Light

var(--ref-neutral-950)

var(--ref-neutral-50)

var(-ref-neutral-50)

var(--ref-neutral-300)

var(--ref-neutral-600)

var(--ref-neutral-900)

var(--ref-neutral-50)

var(--ref-neutral-400)

var(--ref-secondary-500)

Token Dark

var(--ref-neutral-50)

var(--ref-neutral-950)

var(--ref-neutral-50)

var(--ref-neutral-900)

var(--ref-neutral-600)

var(--ref-neutral-300)

var(--ref-neutral-50)

var(--ref-neutral-950)

var(--ref-neutral-800)

var(--ref-secondary-300)

NativeWind Config

@layer base {
  :root {
    /* Neutral Tokens */
    --ref-neutral-950: 0 0% 5.88%;
    --ref-neutral-900: 0 0% 10.98%;
    --ref-neutral-800: 0 0% 21.18%;
    --ref-neutral-700: 0 0% 32.16%;
    --ref-neutral-600: 0 0% 41.96%;
    --ref-neutral-500: 0 0% 52.94%;
    --ref-neutral-400: 0 0% 63.14%;
    --ref-neutral-300: 0 0% 74.12%;
    --ref-neutral-200: 0 0% 83.92%;
    --ref-neutral-100: 0 0% 94.9%;
    --ref-neutral-50: 0 0% 100%;
    
    /* Secondary Tokens */
    --ref-secondary-950: 250.34 56.86% 20%;
    --ref-secondary-900: 247.88 56.57% 34.31%;
    --ref-secondary-800: 249.64 64.93% 41.37%;
    --ref-secondary-700: 250.69 69.05% 50.59%;
    --ref-secondary-600: 249.74 90.52% 58.63%;
    --ref-secondary-500: 245.03 100% 64.9%;
    --ref-secondary-400: 240.43 100% 72.94%;
    --ref-secondary-300: 235.15 100% 80.59%;
    --ref-secondary-200: 233.11 100% 88.04%;
    --ref-secondary-100: 232.94 100% 93.33%;
    --ref-secondary-50: 230.53 100% 96.27%;
        
    /* Information Tokens */
    --ref-information-950: 217.61 62.62% 20.98%;
    --ref-information-900: 216.1 70.24% 32.94%;
    --ref-information-800: 217.36 77.56% 40.2%;
    --ref-information-700: 215.71 83.67% 48.04%;
    --ref-information-600: 212.75 91.6% 53.33%;
    --ref-information-500: 208.71 100% 59.02%;
    --ref-information-400: 204.22 100% 67.45%;
    --ref-information-300: 202.3 100% 77.84%;
    --ref-information-200: 203.28 100% 86.86%;
    --ref-information-100: 205.26 100% 92.55%;
    --ref-information-50: 204.71 100% 96.67%;
    
    /* Success Tokens */
    --ref-success-950: 158.33 78.26% 9.02%;
    --ref-success-900: 157.74 73.81% 16.47%;
    --ref-success-800: 155.84 76.24% 19.8%;
    --ref-success-700: 155.4 80.65% 24.31%;
    --ref-success-600: 154.63 79.35% 30.39%;
    --ref-success-500: 153.15 71.86% 39.02%;
    --ref-success-400: 151.11 54.66% 51.57%;
    --ref-success-300: 149.13 60.95% 66.86%;
    --ref-success-200: 146.25 64% 80.39%;
    --ref-success-100: 142.29 68.63% 90%;
    --ref-success-50: 144 71.43% 95.88%;
    
    /* Warning Tokens */
    --ref-warning-950: 15 83.33% 14.12%;
    --ref-warning-900: 15.79 70.37% 26.47%;
    --ref-warning-800: 17 75% 31.37%;
    --ref-warning-700: 20.13 82.01% 37.06%;
    --ref-warning-600: 26.39 85.65% 43.73%;
    --ref-warning-500: 31.98 83.46% 50.2%;
    --ref-warning-400: 37.85 87.44% 56.27%;
    --ref-warning-300: 40.38 87.85% 64.51%;
    --ref-warning-200: 42.35 87.63% 80.98%;
    --ref-warning-100: 41.63 85.96% 88.82%;
    --ref-warning-50: 40 90% 96.08%;
    
    /* Error Tokens */
    --ref-error-950: 0 67.09% 15.49%;
    --ref-error-900: 0 56.41% 30.59%;
    --ref-error-800: 0 62.22% 35.29%;
    --ref-error-700: 0 66.2% 41.76%;
    --ref-error-600: 0 64.29% 50.59%;
    --ref-error-500: 0 75.37% 60.2%;
    --ref-error-400: 0 81.21% 70.78%;
    --ref-error-300: 0 83.51% 80.98%;
    --ref-error-200: 0 85.19% 89.41%;
    --ref-error-100: 0 80% 94.12%;
    --ref-error-50: 0 71.43% 97.25%;

    /* Scrim Tokens */
    --ref-scrim-light: 100 100% 100% / 80%;
    --ref-scrim-dark: 0 0% 0% / 80%;

    /* System Tokens */
    --sys-surface-neutral-0: var(--ref-neutral-50);
    --sys-surface-neutral-1: var(--ref-neutral-100);
    --sys-surface-neutral-2: var(--ref-neutral-200);
    --sys-surface-neutral-3: var(--ref-neutral-800);
    --sys-surface-neutral-4: var(--ref-neutral-900);
    --sys-surface-neutral-5: var(--ref-neutral-950);
    --sys-surface-disabled: var(--ref-neutral-200);
    --sys-surface-scrim: var(--ref-neutral-100) / 50%;
    --sys-surface-card: var(--ref-neutral-50);
    --sys-surface-black: var(--ref-neutral-950);
    --sys-surface-white: var(--ref-neutral-50);
    --sys-surface-secondary-1: var(--ref-secondary-50);
    --sys-surface-secondary-2: var(--ref-secondary-100);
    --sys-surface-secondary-3: var(--ref-secondary-300);
    --sys-surface-secondary-4: var(--ref-secondary-500);
    --sys-surface-secondary-5: var(--ref-secondary-700);
    --sys-secondary-pressed: var(--ref-secondary-100);
    --sys-text-white: var(--ref-neutral-50);
    --sys-text-black: var(--ref-neutral-950);
    --sys-text-body: var(--ref-neutral-950);
    --sys-text-body-inverse: var(--ref-neutral-50);
    --sys-text-secondary: var(--ref-secondary-500);
    --sys-text-primary: var(--ref-secondary-500);
    --sys-text-neutral-1: var(--ref-neutral-50);
    --sys-text-neutral-2: var(--ref-neutral-300);
    --sys-text-neutral-3: var(--ref-neutral-600);
    --sys-text-neutral-4: var(--ref-neutral-900);
    --sys-text-disabled: var(--ref-neutral-400);
    --sys-scrim: hsl(0deg 0% 100% / 80%);
    --sys-border-1: var(--ref-neutral-900);
    --sys-border-2: var(--ref-neutral-800);
    --sys-border-3: var(--ref-neutral-600);
    --sys-border-4: var(--ref-neutral-300);
    --sys-border-5: var(--ref-neutral-200);
    --sys-border-6: var(--ref-secondary-500);
    --sys-border-information: var(--ref-information-400);
    --sys-border-success: var(--ref-success-400);
    --sys-border-warning: var(--ref-warning-400);
    --sys-border-error: var(--ref-error-400);
    --sys-fn-generic: var(--ref-neutral-50);
    --sys-fn-error: var(--ref-error-200);
    --sys-fn-error-text: var(--ref-error-800);
    --sys-fn-success: var(--ref-success-200);
    --sys-fn-success-text: var(--ref-success-900);
    --sys-fn-warning: var(--ref-warning-200);
    --sys-fn-warning-text: var(--ref-warning-900);
    --sys-fn-information: var(--ref-information-200);
    --sys-fn-information-text: var(--ref-information-800);

    /* Scrim Tokens */
    --sys-scrim: var(--ref-scrim-light);

    /* App Tokens */
    --sys-appbg: var(--ref-neutral-50);

    /* Service Card Tokens */
    --sys-service-card: var(--ref-service-card-light);
    --sys-service-card-alt: var(--ref-neutral-50);

    /* Radio Tokens */
    --sys-radio: var(--ref-secondary-700);

    /* Focus Tokens */
    --sys-focus: var(--ref-secondary-600);

    /* Divider Tokens */
    --sys-divider-decorative: var(--ref-neutral-300);
    --sys-divider-default: var(--ref-neutral-600);

    --sys-border-default: var(--ref-neutral-400);

    /* Form Tokens */
    --sys-form-default: var(--ref-neutral-400);
    --sys-form-disabled: var(--ref-neutral-200);
    --sys-form-error: var(--ref-error-500);
    --sys-form-success: var(--ref-success-500);
    --sys-form-active: var(--ref-secondary-500);

    --sys-alt-text: var(--ref-neutral-500);
    --sys-subhead-text: var(--ref-neutral-500);
  }

  .dark:root {
    /* New Tokens */
    --sys-surface-neutral-0: var(--ref-neutral-950);
    --sys-surface-neutral-1: var(--ref-neutral-900);
    --sys-surface-neutral-2: var(--ref-neutral-800);
    --sys-surface-neutral-3: var(--ref-neutral-200);
    --sys-surface-neutral-4: var(--ref-neutral-100);
    --sys-surface-neutral-5: var(--ref-neutral-50);
    --sys-surface-disabled: var(--ref-neutral-950);
    --sys-surface-scrim: var(--ref-neutral-100) / 50%;
    --sys-surface-card: var(--ref-neutral-900);
    --sys-surface-black: var(--ref-neutral-950);
    --sys-surface-white: var(--ref-neutral-50);
    --sys-surface-secondary-1: var(--ref-secondary-50);
    --sys-surface-secondary-2: var(--ref-secondary-100);
    --sys-surface-secondary-3: var(--ref-secondary-300);
    --sys-surface-secondary-4: var(--ref-secondary-500);
    --sys-surface-secondary-5: var(--ref-secondary-700);
    --sys-secondary-pressed: var(--ref-secondary-950);
    --sys-fn-generic: var(--ref-neutral-950);
    --sys-fn-error: var(--ref-error-950);
    --sys-fn-error-text: var(--ref-error-400);
    --sys-text-white: var(--ref-neutral-50);
    --sys-text-black: var(--ref-neutral-950);
    --sys-text-body: var(--ref-neutral-50);
    --sys-text-body-inverse: var(--ref-neutral-950);
    --sys-text-secondary: var(--ref-secondary-300);
    --sys-text-neutral-1: var(--ref-neutral-900);
    --sys-text-neutral-2: var(--ref-neutral-600);
    --sys-text-neutral-3: var(--ref-neutral-300);
    --sys-text-neutral-4: var(--ref-neutral-50);
    --sys-text-disabled: var(--ref-neutral-800);
    --xs---8: 8px;
    --md---16: 16px;
    --sm---12: 12px;
    --lg---24: 24px;
    --border-width-sm: nullpx;
    --sys-scrim: hsl(0deg 0% 6% / 80%);
    --sys-border-1: var(--ref-neutral-200);
    --sys-border-2: var(--ref-neutral-300);
    --sys-border-3: var(--ref-neutral-600);
    --sys-border-4: var(--ref-neutral-800);
    --sys-border-5: var(--ref-neutral-800);
    --sys-border-6: var(--ref-secondary-300);
    --sys-border-information: var(--ref-information-800);
    --sys-border-success: var(--ref-success-800);
    --sys-border-warning: var(--ref-warning-800);
    --sys-border-error: var(--ref-error-800);
    --border-width-0: nullpx;
    --border-width-sm: nullpx;
    --border-width-md: nullpx;
    --border-width-lg: nullpx;
    --sys-fn-success: var(--ref-success-950);
    --sys-fn-success-text: var(--ref-success-400);
    --sys-fn-warning: var(--ref-warning-950);
    --sys-fn-warning-text: var(--ref-warning-400);
    --sys-fn-information: var(--ref-information-950);
    --sys-fn-information-text: var(--ref-information-400);

    /* Focus Tokens */
    --sys-focus: var(--ref-secondary-600);

    /* Scrim Tokens */
    --sys-scrim: var(--ref-scrim-dark);

    /* App Tokens */
    --sys-appbg: var(--ref-neutral-950);

    /* Service Card Tokens */
    --sys-service-card: var(--ref-neutral-900);
    --sys-service-card-alt: var(--ref-neutral-800);

    /* Radio Tokens */
    --sys-radio: var(--ref-secondary-600);

    /* Divider Tokens */
    --sys-divider-decorative: var(--ref-neutral-800);
    --sys-divider-default: var(--ref-neutral-300);

    --sys-border-default: var(--ref-neutral-700);

    /* Form Tokens */
    --sys-form-default: var(--ref-neutral-700);
    --sys-form-disabled: var(--ref-neutral-800);
    --sys-form-error: var(--ref-error-400);
    --sys-form-success: var(--ref-success-400);
    --sys-form-active: var(--ref-secondary-400);
    --sys-alt-text: var(--ref-neutral-400);
    --sys-subhead-text: var(--ref-neutral-400);
  }
}

Installation

Blur