What moved
- Neutrals are warm graphite, not an inversion of paper.
- The accent is the same hue, solved to 7:1.
- Hover lightens. The primary label goes dark.
- Shadows only on floating layers; hairlines carry the rest.
Design brief · Mode
Warm graphite, one green.
Slate is a second material, not an inversion of paper. The neutrals stay warm, the accent stays one green, and paper remains the default.
7:1
Accent minimum
10
Mode × theme
4
Accent cap, %
Stone
Warm graphite, not blue-gray
Every neutral keeps R > G > B. A cool slate reads as generic dark UI; natural slate is warm-gray. Text is chalk, never pure white.
- Graphite
- Raised sheet
- Stone fill
- Chalk
- Chalk, softer
- Warm olive
- Warm stone
- Hairline
- Label on green
- Error
- The well
- Well container
- Scrim
Accent
The same green, lifted
Lightness is solved per mode until the accent clears 7:1 on the canvas and on a card. The hue does not change; only its weight moves.
- Ink green, lifted
- Hover, lighter
- Default tag
- Quiet tag
- Green in the well
| Theme | Accent | On bg | On surface |
|---|---|---|---|
| Emerald | #A0C5B9 | 9.36:1 | 8.27:1 |
| Garnet | #D1A3AD | 8.00:1 | 7.07:1 |
| Amethyst | #BCA8CA | 8.03:1 | 7.10:1 |
| Peacock | #97C8CE | 9.60:1 | 8.48:1 |
| Topaz | #CEB697 | 9.01:1 | 7.96:1 |
What flips
Rules that invert with the light
The stance is the same; the direction is not. Hover and elevation are the two places a paper habit reads as a bug on slate.
| Rule | Paper | Slate |
|---|---|---|
| Hover | Darkens | Lightens |
| Primary button | Dark fill, ivory label | Light fill, dark label |
| Dark band | Deeper than the page | Raised sheet above it |
| Elevation | Floating shadow | Surface step plus hairline |
| Body text | Near black | Chalk, never pure white |
| Paper | Falls back to paper |
Mode is not theme
Five accents and two modes are orthogonal: ten gated combinations. Set both on <html>; never mix accents on one page.
Type
The same type, on stone
Nothing about the type changes in slate. Serif display at weight 500, sans body at 17, and the same spacing. Only the ink and the surface move.
Warm graphite, one green.
A typeset page on stone.
A section title without decoration.
A named part of a section.
Body text is a sans at screen size. On slate it sits in chalk, not in pure white, because white blooms against a dark field.
Captions drop to warm olive; meta drops to warm stone.
Section label
Components
Flat on stone too
One primary button in a real view; the extra primary below is disabled so its state is visible. Floating layers keep the shadow and take the hairline.
Buttons
A light fill with a dark label. A dark fill on stone does not read as primary.
Link
The rules sit in DESIGN.md. Links take the lifted green; the underline stays 3px off the text.
Tags
Quiet
Default
Field
The label is chalk; the hint stays olive.
Error
Enter a face.
Code
<html lang="en" data-mode="slate">
--bg: #1A1916;
--accent: #A0C5B9;
--ink: #EDEAE1;Card
Image
figure img takes the hairline.Menu
Shadow plus hairline. A paper shadow alone is invisible here.