The following colour shade levels are in use in at least one of the themes
below: 100, 150, 200, 250, 300, 400, 600, 700, 750, 800, 850, and 900.
Display themes as:
Table of Contents
Default Theme
Low Contrast
This is the low contrast mode. This is the default for users who set ‘low’ as their preferred contrast mode in their OS or browser settings. It mostly meets WCAG AA contrast standards, but in rare cases does not (which is acceptable in this case).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Average Contrast
This is the default contrast mode for most users, unless they have defined a specific preference (‘low’, ‘high’, or ‘forced-colors’) in their OS or browser settings. It meets or exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
High Contrast
This is the high contrast mode. This is the default for users who set ‘high’ as their preferred contrast mode in their OS or browser settings. It exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Max Contrast
This is the maximum contrast mode. This is an alternate option for users who want an even higher contrast than the ‘high’ mode, but without enabling ‘forced-colors’ mode. It exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Low Contrast
This is the low contrast mode. This is the default for users who set ‘low’ as their preferred contrast mode in their OS or browser settings. It mostly meets WCAG AA contrast standards, but in rare cases does not (which is acceptable in this case).
Tokens
theme-background = base-250.
theme-background-alt = base-200.
theme-background-primary = purple-200.
theme-background-secondary = turquoise-200.
theme-selection-bg = purple-300
theme-selection-text = base-800
Text Tokens
theme-text = base-700
theme-text-primary = purple-700
theme-text-secondary = turquoise-700
theme-text-active = red-700
theme-text-disabled = base-600
theme-text-grey = base-700
UI Tokens
theme-ui = base-700
theme-ui-primary = purple-700
theme-ui-secondary = turquoise-700
theme-ui-active = red-700
theme-ui-disabled = base-600
theme-ui-grey = base-700
Heading Tokens
theme-heading-1 = purple-600
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-750
theme-heading-6 = purple-750
theme-heading-7 = turquoise-750
theme-heading-8 = turquoise-750
theme-heading-9 = base-750
theme-heading-10 = base-750
Link Tokens
theme-link = purple-700
theme-link-visited = purple-700
theme-link-hover = turquoise-700
theme-link-active = red-700
theme-link-disabled = base-600
theme-link-decoration = purple-700
theme-link-decoration-visited = purple-700
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-700
theme-link-decoration-disabled = base-600
theme-link-icon = base-700
theme-link-icon-visited = base-700
theme-link-icon-hover = turquoise-700
theme-link-icon-active = red-700
theme-link-icon-disabled = base-600
theme-link-outline-hover = turquoise-700
theme-link-outline-active = red-700
theme-link-outline-disabled = base-600
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-700
theme-button-primary-text = base-250
theme-button-primary-ui = base-250
theme-button-primary-bg-hover = turquoise-700
theme-button-primary-text-hover = base-250
theme-button-primary-ui-hover = base-250
theme-button-primary-bg-active = red-700
theme-button-primary-text-active = base-250
theme-button-primary-ui-active = base-250
Secondary Button
theme-button-secondary-bg = turquoise-700
theme-button-secondary-text = base-250
theme-button-secondary-ui = base-250
theme-button-secondary-bg-hover = red-700
theme-button-secondary-text-hover = base-250
theme-button-secondary-ui-hover = base-250
theme-button-secondary-bg-active = purple-700
theme-button-secondary-text-active = base-250
theme-button-secondary-ui-active = base-250
Disabled Button
theme-button-disabled-bg = base-600
theme-button-disabled-text = base-250
theme-button-disabled-ui = base-250
theme-button-disabled-bg-hover = base-600
theme-button-disabled-text-hover = base-250
theme-button-disabled-ui-hover = base-250
theme-button-disabled-bg-active = base-600
theme-button-disabled-text-active = base-250
theme-button-disabled-ui-active = base-250
Input Fields
Shades in Use
Light Mode
Dark Mode
200
800
250
750
300
700
600
400
700
300
750
250
800
200
Average Contrast
This is the default contrast mode for most users, unless they have defined a specific preference (‘low’, ‘high’, or ‘forced-colors’) in their OS or browser settings. It meets or exceeds WCAG AAA contrast standards.
Tokens
theme-background = base-150.
theme-background-alt = base-250.
theme-background-primary = purple-200.
theme-background-secondary = turquoise-200.
theme-selection-bg = purple-300
theme-selection-text = base-800
Text Tokens
theme-text = base-700
theme-text-primary = purple-700
theme-text-secondary = turquoise-700
theme-text-active = red-700
theme-text-disabled = base-600
theme-text-grey = base-700
UI Tokens
theme-ui = base-700
theme-ui-primary = purple-700
theme-ui-secondary = turquoise-700
theme-ui-active = red-700
theme-ui-disabled = base-600
theme-ui-grey = base-700
Heading Tokens
theme-heading-1 = purple-800
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-700
theme-heading-6 = purple-700
theme-heading-7 = turquoise-700
theme-heading-8 = turquoise-700
theme-heading-9 = base-700
theme-heading-10 = base-700
Link Tokens
theme-link = purple-700
theme-link-visited = purple-700
theme-link-hover = turquoise-700
theme-link-active = red-700
theme-link-disabled = base-600
theme-link-decoration = purple-700
theme-link-decoration-visited = purple-700
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-700
theme-link-decoration-disabled = base-600
theme-link-icon = base-700
theme-link-icon-visited = base-700
theme-link-icon-hover = turquoise-700
theme-link-icon-active = red-700
theme-link-icon-disabled = base-600
theme-link-outline-hover = turquoise-700
theme-link-outline-active = red-700
theme-link-outline-disabled = base-600
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-700
theme-button-primary-text = base-150
theme-button-primary-ui = base-150
theme-button-primary-bg-hover = turquoise-700
theme-button-primary-text-hover = base-150
theme-button-primary-ui-hover = base-150
theme-button-primary-bg-active = red-700
theme-button-primary-text-active = base-150
theme-button-primary-ui-active = base-150
Secondary Button
theme-button-secondary-bg = turquoise-700
theme-button-secondary-text = base-150
theme-button-secondary-ui = base-150
theme-button-secondary-bg-hover = red-700
theme-button-secondary-text-hover = base-150
theme-button-secondary-ui-hover = base-150
theme-button-secondary-bg-active = purple-700
theme-button-secondary-text-active = base-150
theme-button-secondary-ui-active = base-150
Disabled Button
theme-button-disabled-bg = base-600
theme-button-disabled-text = base-150
theme-button-disabled-ui = base-150
theme-button-disabled-bg-hover = base-600
theme-button-disabled-text-hover = base-150
theme-button-disabled-ui-hover = base-150
theme-button-disabled-bg-active = base-600
theme-button-disabled-text-active = base-150
theme-button-disabled-ui-active = base-150
Input Fields
Shades in Use
Light Mode
Dark Mode
150
850
200
800
250
750
300
700
600
400
700
300
800
200
High Contrast
This is the high contrast mode. This is the default for users who set ‘high’ as their preferred contrast mode in their OS or browser settings. It exceeds WCAG AAA contrast standards.
Tokens
theme-background = base-100.
theme-background-alt = base-200.
theme-background-primary = purple-150.
theme-background-secondary = turquoise-150.
theme-selection-bg = purple-750
theme-selection-text = base-100
Text Tokens
theme-text = base-850
theme-text-primary = purple-750
theme-text-secondary = turquoise-750
theme-text-active = red-750
theme-text-disabled = base-700
theme-text-grey = base-750
UI Tokens
theme-ui = base-850
theme-ui-primary = purple-750
theme-ui-secondary = turquoise-750
theme-ui-active = red-750
theme-ui-disabled = base-700
theme-ui-grey = base-750
Heading Tokens
theme-heading-1 = purple-800
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-750
theme-heading-6 = purple-750
theme-heading-7 = turquoise-750
theme-heading-8 = turquoise-750
theme-heading-9 = base-750
theme-heading-10 = base-750
Link Tokens
theme-link = purple-750
theme-link-visited = purple-750
theme-link-hover = turquoise-750
theme-link-active = red-750
theme-link-disabled = base-700
theme-link-decoration = purple-750
theme-link-decoration-visited = purple-750
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-750
theme-link-decoration-disabled = base-700
theme-link-icon = base-750
theme-link-icon-visited = base-750
theme-link-icon-hover = turquoise-750
theme-link-icon-active = red-750
theme-link-icon-disabled = base-700
theme-link-outline-hover = turquoise-750
theme-link-outline-active = red-750
theme-link-outline-disabled = base-700
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-750
theme-button-primary-text = base-100
theme-button-primary-ui = base-100
theme-button-primary-bg-hover = turquoise-750
theme-button-primary-text-hover = base-100
theme-button-primary-ui-hover = base-100
theme-button-primary-bg-active = red-750
theme-button-primary-text-active = base-100
theme-button-primary-ui-active = base-100
Secondary Button
theme-button-secondary-bg = turquoise-750
theme-button-secondary-text = base-100
theme-button-secondary-ui = base-100
theme-button-secondary-bg-hover = red-750
theme-button-secondary-text-hover = base-100
theme-button-secondary-ui-hover = base-100
theme-button-secondary-bg-active = purple-750
theme-button-secondary-text-active = base-100
theme-button-secondary-ui-active = base-100
Disabled Button
theme-button-disabled-bg = base-700
theme-button-disabled-text = base-100
theme-button-disabled-ui = base-100
theme-button-disabled-bg-hover = base-700
theme-button-disabled-text-hover = base-100
theme-button-disabled-ui-hover = base-100
theme-button-disabled-bg-active = base-700
theme-button-disabled-text-active = base-100
theme-button-disabled-ui-active = base-100
Input Fields
Shades in Use
Light Mode
Dark Mode
100
900
150
850
200
800
700
300
750
250
800
200
850
150
Max Contrast
This is the maximum contrast mode. This is an alternate option for users who want an even higher contrast than the ‘high’ mode, but without enabling ‘forced-colors’ mode. It exceeds WCAG AAA contrast standards.
Tokens
theme-background = base-100.
theme-background-alt = base-100.
theme-background-primary = purple-100.
theme-background-secondary = turquoise-100.
theme-selection-bg = purple-850
theme-selection-text = base-100
Text Tokens
theme-text = base-900
theme-text-primary = purple-850
theme-text-secondary = turquoise-850
theme-text-active = red-850
theme-text-disabled = base-850
theme-text-grey = base-850
UI Tokens
theme-ui = base-900
theme-ui-primary = purple-850
theme-ui-secondary = turquoise-850
theme-ui-active = red-850
theme-ui-disabled = base-850
theme-ui-grey = base-850
Heading Tokens
theme-heading-1 = purple-850
theme-heading-2 = purple-850
theme-heading-3 = purple-850
theme-heading-4 = purple-850
theme-heading-5 = purple-850
theme-heading-6 = purple-850
theme-heading-7 = turquoise-850
theme-heading-8 = turquoise-850
theme-heading-9 = base-850
theme-heading-10 = base-850
Link Tokens
theme-link = purple-850
theme-link-visited = purple-850
theme-link-hover = turquoise-850
theme-link-active = red-850
theme-link-disabled = base-850
theme-link-decoration = purple-850
theme-link-decoration-visited = purple-850
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-850
theme-link-decoration-disabled = base-850
theme-link-icon = base-850
theme-link-icon-visited = base-850
theme-link-icon-hover = turquoise-850
theme-link-icon-active = red-850
theme-link-icon-disabled = base-850
theme-link-outline-hover = turquoise-850
theme-link-outline-active = red-850
theme-link-outline-disabled = base-850
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-850
theme-button-primary-text = base-100
theme-button-primary-ui = base-100
theme-button-primary-bg-hover = turquoise-850
theme-button-primary-text-hover = base-100
theme-button-primary-ui-hover = base-100
theme-button-primary-bg-active = red-850
theme-button-primary-text-active = base-100
theme-button-primary-ui-active = base-100
Secondary Button
theme-button-secondary-bg = turquoise-850
theme-button-secondary-text = base-100
theme-button-secondary-ui = base-100
theme-button-secondary-bg-hover = red-850
theme-button-secondary-text-hover = base-100
theme-button-secondary-ui-hover = base-100
theme-button-secondary-bg-active = purple-850
theme-button-secondary-text-active = base-100
theme-button-secondary-ui-active = base-100
Disabled Button
theme-button-disabled-bg = base-850
theme-button-disabled-text = base-100
theme-button-disabled-ui = base-100
theme-button-disabled-bg-hover = base-850
theme-button-disabled-text-hover = base-100
theme-button-disabled-ui-hover = base-100
theme-button-disabled-bg-active = base-850
theme-button-disabled-text-active = base-100
theme-button-disabled-ui-active = base-100
Input Fields
Shades in Use
Light Mode
Dark Mode
100
900
850
150
900
100
Low Contrast
This is the low contrast mode. This is the default for users who set ‘low’ as their preferred contrast mode in their OS or browser settings. It mostly meets WCAG AA contrast standards, but in rare cases does not (which is acceptable in this case).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Average Contrast
This is the default contrast mode for most users, unless they have defined a specific preference (‘low’, ‘high’, or ‘forced-colors’) in their OS or browser settings. It meets or exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
High Contrast
This is the high contrast mode. This is the default for users who set ‘high’ as their preferred contrast mode in their OS or browser settings. It exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Max Contrast
This is the maximum contrast mode. This is an alternate option for users who want an even higher contrast than the ‘high’ mode, but without enabling ‘forced-colors’ mode. It exceeds WCAG AAA contrast standards.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis. Nunc pellentesque urna sed metus vulputate, vel maximus magna consectetur. Nulla aliquet, sem id ullamcorper vehicula, ligula ante mattis nisl.
Proin leo mauris, iaculis et est eget, egestas tincidunt metus. Quisque mattis semper semper. Suspendisse dapibus maximus leo, quis facilisis risus auctor et. Nam vitae dolor mi.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget. Praesent condimentum erat et egestas venenatis.
Etiam ullamcorper commodo risus.
In hac habitasse platea dictumst.
In hac habitasse platea dictumst.
At feugiat odio mollis ut.
Mauris a tincidunt mauris.
Aliquam luctus fringilla nunc.
Ut maximus arcu hendrerit in.
Integer vehicula lacus ac congue ullamcorper.
Donec vitae justo vel leo ullamcorper mattis.
Sed hendrerit vel dui in pellentesque.
Nunc elementum tortor quis felis pharetra faucibus.
Fusce mattis, odio at varius pharetra.
Tellus arcu convallis erat, vel blandit nulla sem nec enim.
Proin gravida aliquam purus, at feugiat odio mollis ut.
Convallis nisl vel, ultricies lorem.
Duis hendrerit eu lacus at egestas.
Cras consequat id tortor nec dapibus.
Ut maximus arcu hendrerit in.
Proin vel risus finibus.
Proin gravida aliquam purus.
Phasellus eu nibh at ligula elementum hendrerit ac vitae quam.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Turpis maximus posuere rhoncus, nunc est aliquam ligula, non ultrices felis turpis in sapien. Proin efficitur rhoncus ex auctor faucibus. Maecenas sed ornare ante, vitae consequat tellus. Aliquam eget facilisis nunc.
Cras neque arcu, fermentum non elementum ac, tincidunt ut nibh. Proin blandit, nisl at volutpat pulvinar, massa nisl vulputate risus.
Proin sollicitudin et nibh vitae egestas. Ut ut sapien vitae massa mollis viverra vitae sit amet ante. Donec ultrices ullamcorper facilisis. Vivamus id tincidunt libero, ac ultrices est.
Dolor sit amet consectetur adipisicing elit. Sapiente exercitationem rerum tenetur! Beatae quasi, nobis cumque animi, cum laudantium explicabo corporis impedit et labore tempora aliquam a?
Nulla dui, auctor fringilla neque laoreet sit amet. Mauris fringilla nisi et purus pulvinar euismod. Sed quis magna urna.
background-alt Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-primary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
background-secondary Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio at nibh pharetra condimentum. Mauris id sapien sodales, volutpat turpis.
Etiam ullamcorper commodo risus.
Fusce mattis, odio at varius pharetra, tellus arcu convallis erat, vel blandit nulla sem nec enim.
Etiam ornare ligula eu ipsum eleifend laoreet blandit et diam. Duis cursus eros magna, ac sagittis nibh sodales eget.
Maecenas facilisis sollicitudin nisi, eget pellentesque dui rhoncus condimentum. Vivamus vulputate nisl sit amet vehicula commodo.
Low Contrast
This is the low contrast mode. This is the default for users who set ‘low’ as their preferred contrast mode in their OS or browser settings. It mostly meets WCAG AA contrast standards, but in rare cases does not (which is acceptable in this case).
Tokens
theme-background = base-250.
theme-background-alt = base-200.
theme-background-primary = purple-200.
theme-background-secondary = turquoise-200.
theme-selection-bg = purple-300
theme-selection-text = base-800
Text Tokens
theme-text = base-700
theme-text-primary = purple-700
theme-text-secondary = turquoise-700
theme-text-active = red-700
theme-text-disabled = base-600
theme-text-grey = base-700
UI Tokens
theme-ui = base-700
theme-ui-primary = purple-700
theme-ui-secondary = turquoise-700
theme-ui-active = red-700
theme-ui-disabled = base-600
theme-ui-grey = base-700
Heading Tokens
theme-heading-1 = purple-600
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-750
theme-heading-6 = purple-750
theme-heading-7 = turquoise-750
theme-heading-8 = turquoise-750
theme-heading-9 = base-750
theme-heading-10 = base-750
Link Tokens
theme-link = purple-700
theme-link-visited = purple-700
theme-link-hover = turquoise-700
theme-link-active = red-700
theme-link-disabled = base-600
theme-link-decoration = purple-700
theme-link-decoration-visited = purple-700
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-700
theme-link-decoration-disabled = base-600
theme-link-icon = base-700
theme-link-icon-visited = base-700
theme-link-icon-hover = turquoise-700
theme-link-icon-active = red-700
theme-link-icon-disabled = base-600
theme-link-outline-hover = turquoise-700
theme-link-outline-active = red-700
theme-link-outline-disabled = base-600
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-700
theme-button-primary-text = base-250
theme-button-primary-ui = base-250
theme-button-primary-bg-hover = turquoise-700
theme-button-primary-text-hover = base-250
theme-button-primary-ui-hover = base-250
theme-button-primary-bg-active = red-700
theme-button-primary-text-active = base-250
theme-button-primary-ui-active = base-250
Secondary Button
theme-button-secondary-bg = turquoise-700
theme-button-secondary-text = base-250
theme-button-secondary-ui = base-250
theme-button-secondary-bg-hover = red-700
theme-button-secondary-text-hover = base-250
theme-button-secondary-ui-hover = base-250
theme-button-secondary-bg-active = purple-700
theme-button-secondary-text-active = base-250
theme-button-secondary-ui-active = base-250
Disabled Button
theme-button-disabled-bg = base-600
theme-button-disabled-text = base-250
theme-button-disabled-ui = base-250
theme-button-disabled-bg-hover = base-600
theme-button-disabled-text-hover = base-250
theme-button-disabled-ui-hover = base-250
theme-button-disabled-bg-active = base-600
theme-button-disabled-text-active = base-250
theme-button-disabled-ui-active = base-250
Input Fields
Shades in Use
Light Mode
Dark Mode
200
800
250
750
300
700
600
400
700
300
750
250
800
200
Average Contrast
This is the default contrast mode for most users, unless they have defined a specific preference (‘low’, ‘high’, or ‘forced-colors’) in their OS or browser settings. It meets or exceeds WCAG AAA contrast standards.
Tokens
theme-background = base-150.
theme-background-alt = base-250.
theme-background-primary = purple-200.
theme-background-secondary = turquoise-200.
theme-selection-bg = purple-300
theme-selection-text = base-800
Text Tokens
theme-text = base-700
theme-text-primary = purple-700
theme-text-secondary = turquoise-700
theme-text-active = red-700
theme-text-disabled = base-600
theme-text-grey = base-700
UI Tokens
theme-ui = base-700
theme-ui-primary = purple-700
theme-ui-secondary = turquoise-700
theme-ui-active = red-700
theme-ui-disabled = base-600
theme-ui-grey = base-700
Heading Tokens
theme-heading-1 = purple-800
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-700
theme-heading-6 = purple-700
theme-heading-7 = turquoise-700
theme-heading-8 = turquoise-700
theme-heading-9 = base-700
theme-heading-10 = base-700
Link Tokens
theme-link = purple-700
theme-link-visited = purple-700
theme-link-hover = turquoise-700
theme-link-active = red-700
theme-link-disabled = base-600
theme-link-decoration = purple-700
theme-link-decoration-visited = purple-700
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-700
theme-link-decoration-disabled = base-600
theme-link-icon = base-700
theme-link-icon-visited = base-700
theme-link-icon-hover = turquoise-700
theme-link-icon-active = red-700
theme-link-icon-disabled = base-600
theme-link-outline-hover = turquoise-700
theme-link-outline-active = red-700
theme-link-outline-disabled = base-600
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-700
theme-button-primary-text = base-150
theme-button-primary-ui = base-150
theme-button-primary-bg-hover = turquoise-700
theme-button-primary-text-hover = base-150
theme-button-primary-ui-hover = base-150
theme-button-primary-bg-active = red-700
theme-button-primary-text-active = base-150
theme-button-primary-ui-active = base-150
Secondary Button
theme-button-secondary-bg = turquoise-700
theme-button-secondary-text = base-150
theme-button-secondary-ui = base-150
theme-button-secondary-bg-hover = red-700
theme-button-secondary-text-hover = base-150
theme-button-secondary-ui-hover = base-150
theme-button-secondary-bg-active = purple-700
theme-button-secondary-text-active = base-150
theme-button-secondary-ui-active = base-150
Disabled Button
theme-button-disabled-bg = base-600
theme-button-disabled-text = base-150
theme-button-disabled-ui = base-150
theme-button-disabled-bg-hover = base-600
theme-button-disabled-text-hover = base-150
theme-button-disabled-ui-hover = base-150
theme-button-disabled-bg-active = base-600
theme-button-disabled-text-active = base-150
theme-button-disabled-ui-active = base-150
Input Fields
Shades in Use
Light Mode
Dark Mode
150
850
200
800
250
750
300
700
600
400
700
300
800
200
High Contrast
This is the high contrast mode. This is the default for users who set ‘high’ as their preferred contrast mode in their OS or browser settings. It exceeds WCAG AAA contrast standards.
Tokens
theme-background = base-100.
theme-background-alt = base-200.
theme-background-primary = purple-150.
theme-background-secondary = turquoise-150.
theme-selection-bg = purple-750
theme-selection-text = base-100
Text Tokens
theme-text = base-850
theme-text-primary = purple-750
theme-text-secondary = turquoise-750
theme-text-active = red-750
theme-text-disabled = base-700
theme-text-grey = base-750
UI Tokens
theme-ui = base-850
theme-ui-primary = purple-750
theme-ui-secondary = turquoise-750
theme-ui-active = red-750
theme-ui-disabled = base-700
theme-ui-grey = base-750
Heading Tokens
theme-heading-1 = purple-800
theme-heading-2 = purple-700
theme-heading-3 = purple-700
theme-heading-4 = purple-700
theme-heading-5 = purple-750
theme-heading-6 = purple-750
theme-heading-7 = turquoise-750
theme-heading-8 = turquoise-750
theme-heading-9 = base-750
theme-heading-10 = base-750
Link Tokens
theme-link = purple-750
theme-link-visited = purple-750
theme-link-hover = turquoise-750
theme-link-active = red-750
theme-link-disabled = base-700
theme-link-decoration = purple-750
theme-link-decoration-visited = purple-750
theme-link-decoration-hover = transparent
theme-link-decoration-active = red-750
theme-link-decoration-disabled = base-700
theme-link-icon = base-750
theme-link-icon-visited = base-750
theme-link-icon-hover = turquoise-750
theme-link-icon-active = red-750
theme-link-icon-disabled = base-700
theme-link-outline-hover = turquoise-750
theme-link-outline-active = red-750
theme-link-outline-disabled = base-700
Buttons
Token Values
Primary Button
theme-button-primary-bg = purple-750
theme-button-primary-text = base-100
theme-button-primary-ui = base-100
theme-button-primary-bg-hover = turquoise-750
theme-button-primary-text-hover = base-100
theme-button-primary-ui-hover = base-100
theme-button-primary-bg-active = red-750
theme-button-primary-text-active = base-100
theme-button-primary-ui-active = base-100
Secondary Button
theme-button-secondary-bg = turquoise-750
theme-button-secondary-text = base-100
theme-button-secondary-ui = base-100
theme-button-secondary-bg-hover = red-750
theme-button-secondary-text-hover = base-100
theme-button-secondary-ui-hover = base-100
theme-button-secondary-bg-active = purple-750
theme-button-secondary-text-active = base-100
theme-button-secondary-ui-active = base-100
Disabled Button
theme-button-disabled-bg = base-700
theme-button-disabled-text = base-100
theme-button-disabled-ui = base-100
theme-button-disabled-bg-hover = base-700
theme-button-disabled-text-hover = base-100
theme-button-disabled-ui-hover = base-100
theme-button-disabled-bg-active = base-700
theme-button-disabled-text-active = base-100
theme-button-disabled-ui-active = base-100
Input Fields
Shades in Use
Light Mode
Dark Mode
100
900
150
850
200
800
700
300
750
250
800
200
850
150
Max Contrast
This is the maximum contrast mode. This is an alternate option for users who want an even higher contrast than the ‘high’ mode, but without enabling ‘forced-colors’ mode. It exceeds WCAG AAA contrast standards.