fin1te/dsv1.0.0
  1. ds
  2. Overview
  3. Principles

Principles

The rules the two sites follow, and why.

Quiet surfaces

Backgrounds are warm off-whites and near-blacks, separated by hairline rules instead of shadows. Most structure is a 1px line. Cards are the exception, not the layout: fin1te.com lists work as rows with a rule above each one.

One accent

Purple marks what is interactive, selected or in motion: links on hover, the current page, data flowing along a link. If everything is purple nothing is. A page usually has one phrase in the gradient and nowhere else.

Amber means data at rest

The second colour is used sparingly and always for the same things: storage in diagrams, personal work in charts, Rust in tag lists, and the value that improved in a before-and-after. It never replaces the accent for actions.

Mono for metadata

IBM Plex Mono carries dates, counts, versions, kickers and table heads. Mona Sans carries everything a person reads. Headlines use Mona Sans' width axis (105 to 115%) for a slightly wider, engineered look.

Sized in rem, scaled at the root

Every size is in rem. On screens 1400px and wider the root grows to 112.5%, and to 125% at 1800px, so the whole layout scales instead of floating in white space. Diagrams are the exception: SVG coordinates stay fixed and the figure scales as a picture.

Motion explains, it does not decorate

Links flow in the direction data moves. A failing component pulses red. Entrances are short fades. Everything uses one easing curve, and prefers-reduced-motion turns it all off.

Copy

Do
  • Say what it does, then the number: "Cut p99 from 900 ms to 140 ms."
  • Short sentences, plain words, the terms engineers use.
  • Sentence case for titles and buttons.
Don't
  • Marketing words and filler: seamless, robust, unlock, leverage.
  • Em dashes. Use a comma, a colon or a new sentence.
  • Exclamation marks, emoji in UI text.

Performance is part of the look

No client framework. Pages ship HTML and CSS, and JavaScript only where there is behaviour, loaded on first use when it can be (the command palette loads when you press Ctrl+K). Diagrams render to SVG at build time.