1. Art direction
- Deep chroma black canvas (
#06070b), never flat pure black. - One accent mood doing one job — a few percent of the surface.
- One light wash from the top-right; panels defined by hairlines, not stacks of shadows.
- Type trio only: Fraunces display, Instrument Sans body, IBM Plex Mono meta/code.
- Signature mark: the mood dot/orb — reserved for brand pip and living attention, not bullet decoration everywhere.
Checkable: remove accent → hierarchy still holds; cover logo → still recognisably Glim via type + depth + companion behaviour.
2. Colour
bg · canvas · contrast n/aink · 17.8:1 on bg · AA passdim · 8.02:1 · AA passfaint · 5.34:1 · AA pass for normal text fixedmood · 13.06:1 · primary actionNeutrals dominate (~75%+). Misuse: mood as full-bleed gradient wallpaper; thinking violet for errors; talking pink for chrome.
3. Alpha / emphasis ladder
Hairline .08 · control border .13 · mood wash .16. Readable ink must not rely on low-alpha greys — floor for readable UI chrome opacity ≈ 0.55 equivalent contrast.
4. Type
Give your software a glim.
Body — Instrument Sans 15.5–18px, leading ~1.6.
Eyebrow · IBM Plex Mono
Floors: product UI 13px · marketing body 15px · hero line uses display clamp. Two weights per family is enough.
5. Shape
Read surfaces → radius 14px. Act controls → radius 10px. Pill badges → 20px. Signature circle reserved for mood pip / companion orb — do not use perfect circles as generic bullets.
6. Depth & lighting
Light enters from top-right via mood-soft wash. No stacked card shadows.
7. Motion
| Token | Value | Purpose |
|---|---|---|
dur-fast | 160ms | border/color hover |
dur | 280ms | panel / bubble |
ease | cubic-bezier(.22,1,.36,1) | decelerate like an arc |
Signature: proximity lean, react() pulse, say() caret. Ceremony: first real reply after configure — rare. Reduced motion: kill transforms and caret blink; keep state colour.
8. Imagery & data viz
- Photography: almost none — product is the creature stage + honest UI chrome.
- Proof assets: real captures only (
proof-states.gif,og.png). - Never: fake dashboards, invented spark lines, stock laughing-laptop photos.
- If plotting later: soft density fields over hard grid certainty.
9. Signature element
If it cannot tie to behaviour, cut it.
Icons
Site prop icons are minimal dots/spans today — not a full set. Future icons: one stroke weight, round caps, arcs/ellipses preferred; at most one filled shape (the mood pip meaning).