The 7 design rules behind Keel's visual identity

Open ten SaaS landing pages built in the last two years and you'll see the same gradient blob, the same glass panel, the same Inter at five different weights. None of it is wrong exactly, it's just become the default so thoroughly that a product wearing it doesn't read as designed, it reads as unstyled. Keel's visual identity exists to not be that, and we wrote the rules down so the decision survives past the first page anyone builds.

The rules, briefly

1. Warm, not clinical. A cream-and-olive light mode and a near-black dark mode, never the blue-grey neutral that every dashboard defaults to.
2. Two typefaces with a job each. Hanken Grotesk for reading, JetBrains Mono for anything that's a label, a value, or code. Instrument Serif italic is a seasoning, not a base, used sparingly as an accent word.
3. Hairlines over shadows for structure. Borders do the work of separating sections; shadows are reserved for things that are actually raised, like cards and dropdowns.
4. No decorative gradients. Color appears with intent, an accent dot, a soft tinted background, never a blob behind the hero just to fill space.
5. Mono labels, sentence-case headings. Eyebrows and badges are uppercase tracked-out mono; actual headings stay in normal sentence case, never shouting.
6. Motion confirms, it doesn't perform. A 1px lift and a border darken on hover, a fade-in on scroll, nothing that exists purely to look impressive in a demo GIF.
7. Restraint on every page. A serif accent budget of two to three words per page keeps the one expressive flourish from becoming wallpaper.

Why bother writing this down

A design system that lives only in one person's head decays the moment someone else touches the codebase. Buyers extend Keel for months after they get it, long after the rules were fresh in anyone's memory. DESIGN.md exists so the seventh new page someone builds still looks like it belongs next to the first one.