Brand & styles

Colors

The brand palette and colors with a purpose.

Brand palette

The web app’s green brand scale. Swatches read the current CSS variables, including any theme overrides.

--brand-50

--brand-100

--brand-200

--brand-300

--brand-400

--brand-500

--brand-600

--brand-700

--brand-800

--brand-900

--brand-950

View code

<div className="bg-brand-500" />
/* CSS */
color: var(--brand-500);

Use semantic colors for product interfaces. Primary is the shared action color; brand colors are a separate palette.

--primary

--secondary

--background

--foreground

--muted

--destructive

View code

<div className="bg-background text-foreground">
  <p className="text-muted-foreground">Supporting text</p>
  <Button>Primary action</Button>
</div>