UNOFFICIAL/EXPERIMENTAL. How every page is shaped. Companion to house-voice.md - that one governs the words, this one the layout. Reference exemplar: <https://hall.kvick.dev/> - a Kubernetes-tool landing page that is simple and good.
Principles
- Narrow prose. Hold reading columns to about 60 characters and centre them, even inside a wide section. Width is for layout, not for text.
- Hairline sections. Separate sections with one thin rule and generous vertical space - not nested boxes or stacked heavy cards.
- Commands as a terminal card. Show every CLI block in a styled terminal - a small title bar plus a monospace body, annotated with
#comments per step. Never a bare code fence. This is the single biggest upgrade for the helm-vs-cub blocks (pattern below). - Two-column hero. Lead with the message on one side and the actual commands (a terminal card) on the other; collapse to one column when narrow.
- Cards in a light grid. Steps and options go in a simple responsive grid with subtle elevation - a thin border and a soft surface, never heavy borders, drop shadows, or glow.
- One accent, two fonts. A neutral body font plus one display font for headings; a single accent colour; restraint everywhere.
- Tasteful motion only. A short fade-in on load is plenty. No glow, no parallax, no flashy effects.
Theme
Keep our light, clean surface - it carries the experimental banner and reads well. Borrow hall's structure, not its dark palette.
The terminal-card pattern
A rounded panel with two parts:
- Title bar - the context for the commands, e.g.
prometheus → monitoring, in muted monospace, with a hairline under it. - Body - monospace, comfortable line-height.
#comments are muted; the$prompt and command are primary text; long commands use\line-continuation so they wrap cleanly.
One card can hold both paths (a # plain Helm block and a # ConfigHub block), so the reader sees the comparison in one frame.
Where to apply, in order
- Get Started (
try.html) - two-column hero (parity message ↔ terminal card), then the two-step explanation, then the cards. Copy in get-started-rewrite-brief.md. - Serverless (
serverless.html) - the same spine; render from serverless-mode.md. - Chart pages - terminal cards for the try commands; move the
Generated at:timestamp out of the headline into the footer (build exhaust never opens a page - voice rule 7). - The homepage hero and journey cards.
How to check
Read a finished page once: is the prose narrow and centred, are commands in terminal cards, are sections separated by a single hairline, is there one accent colour and plenty of whitespace? If any answer is no, it is not in the layout yet.