Zmoki Astro Starter
Design system
The living guideline for how Zmoki Astro Starter looks and feels — a bright, warm, minimal system: an ivory canvas, soft white cards, and a single indigo 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, full-bleed 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 Zmoki Astro Starter at starter.zmoki.xyz.
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 — ivory canvas and a single indigo 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 Zmoki Astro Starter sounds. Clear, honest, helpful, human.
View →OG images
Social-share cards — the two card templates, their anatomy, and where they come from.
View →