AI KeeperDesign system
Every value on the site comes from a token in styles.css. This page shows each one in use.
Color
White paper, cool grey floor, near-black ink. Cobalt is the brand and the only chromatic accent. Amber is reserved for reclaimable space, as in the app.
Type
Bricolage Grotesque carries headlines with tight tracking and its optical sizing left on. Hanken Grotesk sets everything else. Body copy stays under 34em.
--fs-3xl
--fs-2xl
See where the disk went.
--fs-xl
Background cleanup
--fs-lg
AI Keeper shows which worktrees and build folders are safe to delete.
--fs-base
Each cleanup opens a list of exactly what will be removed and how much space it frees.
14px
Free. Requires macOS 14 or later.
Space and radius
A 4pt scale. Radii step up with the size of the thing: buttons and code blocks 10, windows 26 on a 1360 capture (1.9% of width), plates 28.
Elevation
Shadows are neutral and layered: a one-pixel edge, then offset and blur that double with each layer, so light comes from above. Small for controls, medium for panels and dialogs, large for the app window. Shadows only read on the floor, so surfaces that lift sit on it. App windows also get a hairline edge and an inner top highlight, like AppKit draws.
Components
Buttons lift one pixel on hover and settle on press. One primary action per view.
$ brew trust --tap chungquantin/ai-keeper
$ brew install --cask ai-keeperIndex row
A name and a sentence, set on a ruled line. Used where content is a list of parallel things, in place of a card grid.
Plate
A floor-colored panel with a window cropped into it. The crop shows depth and keeps one screenshot from filling the page.
Rules
- Sentence case everywhere. Buttons say what happens: Download, Copy, View source.
- Headings carry the point. Structure such as rules, rows and plates must mean something.
- One motion on load: the hero window rising into place. Everything else answers a click or hover. Reduced motion turns it off.
- No green. Cobalt for action, amber for space you can reclaim.