Color

Colors help focus attention and communicate intent.

Figma

Brand

Slate

Red

Orange

Amber

Lime

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Usage in Figma

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

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-amber-200 text-amber-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.