Skip to content
Tokens

Colour

One accent, a neutral ramp, and status colours that only appear inside components. Every swatch renders from its CSS custom property.

Gray ramp

Eleven steps, 50 to 950. Surfaces, borders and text are all built from these.

Roles

Primary

Solid actions and primary emphasis.

#111827

Secondary

Quiet, secondary actions.

#f3f4f6

Muted

Recessed fields and metadata.

Draft · not yet published

#f3f4f6

Accent

Hover and selected surfaces.

Selected row

#e5e7eb

Destructive

Irreversible, destructive actions.

#dc2626

Border

Hairlines, dividers, field edges.

Material name

#e5e7eb

Brand

Material Bank's yellow is the default. To use your own brand, redefine these four variables after the stylesheet import and give Logo your own mark.

Highlights and brand fills.

--color-brand

Faint brand-tinted surfaces.

--color-brand-soft

Brand borders, rings and icons.

--color-brand-accent

Text on a brand fill.

--color-brand-foreground

app/globals.css

@import "@instruments/materia-ui/styles";

:root {
  --color-brand: #0055ff;
  --color-brand-soft: #eef3ff;
  --color-brand-accent: #0040c0;
  --color-brand-foreground: #ffffff;
}

.dark {
  --color-brand-soft: var(--color-surface-1);
}
import { Logo } from "@instruments/materia-ui/components/logo";

// Shapes in a 48×48 viewBox, filled with currentColor.
<Logo label="Acme" mark={<path d="M8 40 24 8l16 32z" fill="currentColor" />} />

Overlays

Translucent black and white over a material photograph.