---
layout: simple
title: Colors
section: Guide
---

### Primary Color Palette
{% colorswatch color-primary-dark %}
{% colorswatch color-primary-dark-shadow %}
{% colorswatch color-primary-medium %}
{% colorswatch color-primary-medium-light %}
{% colorswatch color-primary-light %}
{% colorswatch color-primary-sky-blue-medium %}
{% colorswatch color-primary-sky-blue-light %}

### Secondary Color Palette
{% colorswatch color-secondary-medium %}
{% colorswatch color-secondary-light %}
{% colorswatch color-tomato %}
{% colorswatch color-kelley-green %}
{% colorswatch color-marigold %}

### Base Color Palette (Achromatic)
{% colorswatch color-base-100 %}
{% colorswatch color-base-90 %}
{% colorswatch color-base-80 %}
{% colorswatch color-base-70 %}
{% colorswatch color-base-60 %}
{% colorswatch color-base-50 %}
{% colorswatch color-base-40 %}
{% colorswatch color-base-30 %}
{% colorswatch color-base-20 %}
{% colorswatch color-base-0 %}

### Attention Color Palette
{% colorswatch color-attention-error %}

### Typography Color Palette
{% colorswatch color-text-dark %}
{% colorswatch color-text-medium %}
{% colorswatch color-text-light %}
{% colorswatch color-text-white %}
{% colorswatch color-text-accent-dark %}
{% colorswatch color-text-accent-medium %}
{% colorswatch color-text-accent-light %}

### Typography Aliases
{% colorswatch color-text-default %}
{% colorswatch color-text-disabled %}
{% colorswatch color-text-link %}


### Status Color Palette
{% colorswatch color-status-notstarted %}
{% colorswatch color-status-notstarted-light %}
{% colorswatch color-status-inprogress %}
{% colorswatch color-status-inprogress-light %}
{% colorswatch color-status-onhold %}
{% colorswatch color-status-onhold-light %}
{% colorswatch color-status-overdue %}
{% colorswatch color-status-overdue-light %}
{% colorswatch color-status-complete %}
{% colorswatch color-status-complete-light %}


### Color Gradients
{% colorswatch color-tomato %}
{% colorswatch color-tomato-300 %}
{% colorswatch color-tomato-400 %}
{% colorswatch color-tomato-500 %}
{% colorswatch color-kelley-green %}
{% colorswatch color-kelley-green-300 %}
{% colorswatch color-kelley-green-400 %}
{% colorswatch color-kelley-green-500 %}
{% colorswatch color-marigold %}
{% colorswatch color-marigold-300 %}
{% colorswatch color-marigold-400 %}
{% colorswatch color-marigold-500 %}
{% colorswatch color-primary-medium %}
{% colorswatch color-primary-medium-300 %}
{% colorswatch color-primary-medium-400 %}
{% colorswatch color-primary-medium-500 %}


### Colors With Transparency Palette
{% colorswatch color-base-90-40 %}
{% colorswatch color-primary-dark-05-over-white %}
{% colorswatch color-primary-dark-08-over-white %}
{% colorswatch color-primary-dark-24-over-white %}
{% colorswatch color-primary-light-40-over-white %}
{% colorswatch color-primary-light-56-over-white %}
{% colorswatch color-primary-dark-40-over-white %}

{% colorswatch color-primary-dark-05 %}
{% colorswatch color-primary-dark-08 %}
{% colorswatch color-primary-dark-24 %}
{% colorswatch color-primary-dark-40 %}
{% colorswatch color-primary-dark-48 %}
{% colorswatch color-primary-medium-48 %}
{% colorswatch color-primary-medium-40 %}
{% colorswatch color-primary-medium-light-56 %}
{% colorswatch color-primary-light-40 %}
{% colorswatch color-primary-light-54 %}
{% colorswatch color-primary-sky-blue-light-60 %}
{% colorswatch color-tomato-48 %}
{% colorswatch color-tomato-08 %}
{% colorswatch color-kelley-green-48 %}
{% colorswatch color-kelley-green-08 %}
{% colorswatch color-marigold-48 %}
{% colorswatch color-marigold-08 %}