Color

Colors help focus attention and communicate intent.

Brand

Slate

Red

Orange

Yellow

Lime

Green

Teal

Cyan

Sky

Blue

Indigo

Purple

Fuchsia

Pink

Rose

Usage in Figma

Colors in Figma are published from Stylus Design Tokens and should be available by default in Figma files within the Scribe workspace.

Usage in code

Any colors in the palette can be used by applying the appropriate Tailwind CSS class to your element. Use the bg- prefix for background colors and text- prefix for text colors.

Colors can be set by passing a color name to `bg` or `text` classnames.

export default () => (
  <div className="flex flex-col gap-4 *:rounded-md *:px-4 *:py-2">
    <div className="bg-brand-200 text-brand-900">
      Colors can be set by passing a color name to `bg` or `text` classnames.
    </div>
    <div className="bg-red-200 text-red-900">
      Colors can be set by passing a color name to `bg` or `text` classnames.
    </div>
    <div className="bg-yellow-200 text-yellow-900">
      Colors can be set by passing a color name to `bg` or `text` classnames.
    </div>
  </div>
);

Opacity

To set the opacity of a color, append the desired opacity value to the color name. For example, bg-brand-200/50 will set the background color to brand-200 with 50% opacity. See Tailwind docs for more info.