Brand
Every project under derby.io inherits this board. The point is that it travels: a docs site, a web app, and a Streamlit dashboard that only lets you set a handful of colors should all read as the same family.
The portable minimum
Five values. Copy src/styles/tokens.css whole when you can; when you cannot, take these and stop. They sit in a marked block at the top of that file.
- Board
--d-board · #edf0efThe ground. Every surface starts here. - Ink
--d-ink · #15181aAll structure and body text. - Frame
--d-frame · #1b1f22Headers, rails, footers. - Red
--d-red · #d93a2bThe signal. The .io, focus rings, one accent. - Archivo
--d-fontThe working face, 400 to 800.
The marker set
Four inks, one per project, assigned when it goes on the board and never changed after — the color is part of how people recognize the tool. Each ink is dark enough to carry its text at 4.5:1 as a field, which is why a magnet can be a solid slab of it.
- Red
#d93a2b4.57:1 on white - Blue
#1f5fc46.01:1 on white - Yellow
#e8a6008.40:1 on ink - Green
#16713f6.06:1 on white
The same ink is not safe as text on the board. A field puts white or ink on the color; text puts the color on --d-board, which is a different measurement and mostly a failing one. For any text, label, or link, use the -ink variant:
#d93a2b3.99:1--d-red-ink5.82:1#1f5fc45.24:1--d-blue-ink6.77:1#e8a6001.85:1--d-yellow-ink5.68:1#16713f5.28:1--d-green-ink5.28:1
Currently assigned:
- Between the Whistles
betweenthewhistles.derby.io - tape
tape.derby.io - statsbook
statsbook.derby.io - statslab
statslab.derby.io
The rules
- The wordmark is fixed
- Archivo 800, tracking −0.04em, always lowercase. The .io always takes Red. It is silkscreened onto the frame — never drawn in marker, never recolored, never set in another face.
- A subdomain writes its name beside it
- tape.derby.io, not derbyTape. The project name stays lowercase and keeps its own marker color. Between the Whistles is the exception that proves it: a display name may be words, but the address stays flat and lowercase.
- The ground is cold
- Board white is a porcelain white with green in it, not paper and not cream. Warming the ground is the single fastest way to stop looking like derby.io.
- Color identifies, it never explains
- A marker color tells you which project you are looking at and what state it is in. It never carries meaning alone — state is also written in words, so the board survives grayscale, projection, and colorblindness.
- The hand is drawn, not a font
- The chisel hand is generated in src/lib/chisel.js by sweeping letter skeletons along a flat nib, so no handwriting webfont ships. Use it only for things a person wrote: a board title, a tally, an annotation. Never a heading style, never a label, never a control, never a paragraph.
- Say what is true
- Nothing is described as usable until it is. Status is stated plainly, unbuilt addresses are marked as not resolving, and anything unwritten ships as a visible placeholder rather than invented copy.