Overview

As a developer, I should be able to use standard Tailwind CSS utilities to systematically customize font sizes and colors.

Proposal

Tailwind CSS supports theme customization. The tailwind.config.js file should be updated to create a theme for color and typography that uses a format like the following:

• "Display Large" -> display-large
• "Neutral" -> neutral

For each color, we should use a format like [color]-[token] where [color] is the identifier for content and [token] is a value uniquely identify a color.

(e.g. primary-1 would be the name of the lightest color in the primary set of colors).

So in code, we would be able to write something like the following:

<div className="bg-primary-1">
  <span className="text-primary-1">Text</span>
</div>

Supplementary Information

Type Scale (Headings)

Type Scale (Content)

Color Usage

See the full spec for the style guide here.