Claravine
Design system
The living guideline for how Claravine looks and feels — a bright, warm, minimal system: a warm off-white canvas, soft white cards, and a single green accent. One source of truth for color, type, and components.
Foundations
Before the guideline pages below, the brand is set in three top-level files. A rebrand starts here.
Brand mark
public/brand-mark.svgOne square SVG sets the whole identity. It becomes the nav logo, the favicon set, and the mark on the OG cards. Replace it, then rerun npm run favicons.
Site config
src/site.config.tsEverything personal to the site lives here. The name, domain, nav links, owner, and contact. Right now that is Claravine at www.claravine.com.
Design tokens
src/design-tokens.mjsThe color scales behind every zmoki-* utility, plus the fonts (Noto Sans and Noto Sans Mono). Tailwind and these brand pages read the same file, so nothing drifts.
Color
A warm, minimal token system — warm off-white canvas and a single green accent.
View →Typography
Noto Sans throughout — one clean sans for headings, body, and labels.
View →Forms
Inputs, labels, the action button, focus and error states.
View →Components
Nav, footer, hero, cards, links, and buttons as reusable blocks.
View →Voice & tone
How Claravine sounds. Clear, honest, helpful, human.
View →OG images
Social-share cards — the two card templates, their anatomy, and where they come from.
View →