Slate

Slate is built to be read — contrast and style first. It holds up where it counts: on your desktop, in your documents, on your site, on a screen in a meeting. The palette that shows up to your presentation dressed for the occasion.

Light

Default — diagrams on a clean white ground.

Core

Spectrum

Dark

Accents lift, grays deepen, contrast holds.

Core

Spectrum

In context

The same colors, doing the work.

Spectrum, side by side

Categorical colors earn their keep when neighbors stay distinct. The number under each is its contrast against the canvas — 3:1 is the readability threshold for graphics.

Red
4.7:1
Orange
3.3:1
Yellow
2.4:1
Green
3.6:1
Blue
5.3:1
Purple
5.4:1
Teal
3.8:1
Cyan
3.2:1
Gray
3.5:1
Red
6.0:1
Orange
7.2:1
Yellow
9.4:1
Green
7.1:1
Blue
5.8:1
Purple
5.6:1
Teal
6.8:1
Cyan
7.2:1
Gray
6.6:1

Semantic roles at work

Quarterly review

Slate keeps surfaces quiet so the content carries the message — primary for the one action that matters, accent for a single highlight.

Primary action Accent a link
light
Quarterly review

Slate keeps surfaces quiet so the content carries the message — primary for the one action that matters, accent for a single highlight.

Primary action Accent a link
dark

Set in Inter

The same typeface renders this page and your content.

Weights

Built to be readRegular · 400
Built to be readMedium · 500
Built to be readSemibold · 600
Built to be readBold · 700

Scale

Clarity at a glance

Clarity at a glance

Clarity at a glance

Clarity at a glance

Clarity at a glance

In paragraphs

Sphinx of black quartz, judge my vow.

Inter was drawn for screens — open apertures, a tall x-height, and unambiguous letterforms that hold their shape from a 48-point headline down to an 11-point caption. It is the quiet default that lets the diagram, not the lettering, speak.

Figures

0123456789
1,284.50
932.07
48,610.00
Tabular figures — columns stay aligned in tables and axes.
0123456789
1,284.50
932.07
48,610.00
Proportional figures — natural spacing for running text.

As a code theme

The spectrum, mapped to syntax.
// Slate makes a calm syntax theme
const palette = {
name: "Slate",
contrast: 4.6,
ready: true,
};
 
function render(theme) {
return theme.colors.map((c) => c.hex);
}
// Slate makes a calm syntax theme
const palette = {
name: "Slate",
contrast: 4.6,
ready: true,
};
 
function render(theme) {
return theme.colors.map((c) => c.hex);
}

Keywords, strings, numbers, and identifiers each take a spectrum hue — distinct, but never loud.

Free to use · attribution appreciated, not required