skip to content

Palette

primary

  • $t-a-palette-primary-medium-blue

    #025e8d
    A blue color for the theme
Swatch Name Value Description
$t-a-palette-primary-medium-blue #025e8d A blue color for the theme

information

  • $t-a-palette-information-red

    #be1818
    Primary color for the information theme

  • $t-a-palette-information-orange

    #f58220
    Secondary color for the information theme

  • $t-a-palette-information-blue

    #0070a8
    Tertiary color for the information theme

  • $t-a-palette-information-green

    #00a69d
    Primary green color for the theme
Swatch Name Value Description
$t-a-palette-information-red #be1818 Primary color for the information theme
$t-a-palette-information-orange #f58220 Secondary color for the information theme
$t-a-palette-information-blue #0070a8 Tertiary color for the information theme
$t-a-palette-information-green #00a69d Primary green color for the theme

interaction

  • $t-a-palette-interaction-hover

    #01324b
    Primary hover color for the theme

  • $t-a-palette-interaction-visited

    #785ba7
    Primary visited color for the theme

  • $t-a-palette-interaction-focus

    #0088cc
    Primary focus color for the theme
Swatch Name Value Description
$t-a-palette-interaction-hover #01324b Primary hover color for the theme
$t-a-palette-interaction-visited #785ba7 Primary visited color for the theme
$t-a-palette-interaction-focus #0088cc Primary focus color for the theme

default

  • $t-a-palette-default-blue-light-400

    #0088cc
    A blue color for the theme

  • $t-a-palette-default-blue-medium-600

    #0070a8
    A blue color for the theme

  • $t-a-palette-default-blue-medium-700

    #025e8d
    A blue color for the theme

  • $t-a-palette-default-blue-dark-900

    #01324b
    A blue color for the theme

  • $t-a-palette-default-blue-lighter

    #f0f7fc
    A color for the theme

  • $t-a-palette-default-blue-light

    #c5e0f4
    A color for the theme

  • $t-a-palette-default-orange-light

    #f58220
    A Orange color for the theme

  • $t-a-palette-default-orange-medium

    #c75301
    A Orange color for the theme

  • $t-a-palette-default-orange-dark

    #b74616
    A Orange color for the theme (open access)

  • $t-a-palette-default-green-light

    #00a69d
    A green color for the theme

  • $t-a-palette-default-green-medium

    #007373
    A green color for the theme

  • $t-a-palette-default-purple-medium

    #785ba7
    A purple color for the theme

  • $t-a-palette-default-yellow-medium

    #ffcc00
    A yellow color for the theme

  • $t-a-palette-default-red

    #ff0000
    A red color for the theme

  • $t-a-palette-default-red-medium

    #be1818
    A red color for the theme

  • $t-a-palette-default-greyscale-200

    #f8f8f8
    A color for the theme

  • $t-a-palette-default-greyscale-300

    #f3f3f3
    A color for the theme

  • $t-a-palette-default-greyscale-400

    #dadada
    A color for the theme

  • $t-a-palette-default-greyscale-500

    #999999
    A color for the theme

  • $t-a-palette-default-greyscale-600

    #666666
    A color for the theme

  • $t-a-palette-default-greyscale-700

    #555555
    A color for the theme

  • $t-a-palette-default-greyscale-800

    #222222
    A color for the theme

  • $t-a-palette-default-black

    #000000
    Primary black color for the theme

  • $t-a-palette-default-white

    #ffffff
    Primary white color for the theme
Swatch Name Value Description
$t-a-palette-default-blue-light-400 #0088cc A blue color for the theme
$t-a-palette-default-blue-medium-600 #0070a8 A blue color for the theme
$t-a-palette-default-blue-medium-700 #025e8d A blue color for the theme
$t-a-palette-default-blue-dark-900 #01324b A blue color for the theme
$t-a-palette-default-blue-lighter #f0f7fc A color for the theme
$t-a-palette-default-blue-light #c5e0f4 A color for the theme
$t-a-palette-default-orange-light #f58220 A Orange color for the theme
$t-a-palette-default-orange-medium #c75301 A Orange color for the theme
$t-a-palette-default-orange-dark #b74616 A Orange color for the theme (open access)
$t-a-palette-default-green-light #00a69d A green color for the theme
$t-a-palette-default-green-medium #007373 A green color for the theme
$t-a-palette-default-purple-medium #785ba7 A purple color for the theme
$t-a-palette-default-yellow-medium #ffcc00 A yellow color for the theme
$t-a-palette-default-red #ff0000 A red color for the theme
$t-a-palette-default-red-medium #be1818 A red color for the theme
$t-a-palette-default-greyscale-200 #f8f8f8 A color for the theme
$t-a-palette-default-greyscale-300 #f3f3f3 A color for the theme
$t-a-palette-default-greyscale-400 #dadada A color for the theme
$t-a-palette-default-greyscale-500 #999999 A color for the theme
$t-a-palette-default-greyscale-600 #666666 A color for the theme
$t-a-palette-default-greyscale-700 #555555 A color for the theme
$t-a-palette-default-greyscale-800 #222222 A color for the theme
$t-a-palette-default-black #000000 Primary black color for the theme
$t-a-palette-default-white #ffffff Primary white color for the theme

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the #ask-elements Slack channel.