Design — MeowKit Docs

A locked design system for this VitePress site. Every page change reads this file before emitting code. Do not regenerate per page — extend or amend this file when the system needs to grow.

Genre

modern-minimal (Cobalt register: cool paper, one electric blue signal accent, grotesk display + neutral body + engineering mono).

Macrostructure family

• Home page (index.md, layout: home): VitePress home layout enriched via layout slots — home-hero-image (Tier-A CSS gate-pipeline visual) and home-features-after (clustered feature grid). No route changes.
• Content pages (guide / reference / workflows / CLI / changelog): Long Document on the stock VitePress doc layout. Typography only — no enrichment.

Theme

Custom, anchored on the existing brand royal blue. OKLCH primitives live in .vitepress/theme/tokens.css (Layer 1); light/dark mappings and component overrides live in .vitepress/theme/custom.css (Layers 2–4).

• --mk-blue-600 (brand) oklch(55% 0.21 263) ≈ #2563EB
• Light paper oklch(98% 0.003 250) (slate-tinted near-white)
• Dark paper oklch(20% 0.03 262) (deep-space navy)
• Ink (light) oklch(13% 0.01 255)
• Ink (dark) oklch(98% 0.003 250)
• Accent discipline: blue ≤ 5% of any viewport. Links, active states, gate nodes, focus rings, the hero name. Never section fills.
• Gradients are banned. Solid brand fills only. Hierarchy comes from weight, spacing, and hairline rules.

Typography

• Display: "Space Grotesk", weights 500/600/700, style normal, tracking −0.02em. Used on: hero name/text, doc h1–h3, feature-cluster heads, feature card titles.
• Body: "Inter", 400/500/600/700 (preserved brand body; Cobalt-canonical).
• Mono: "JetBrains Mono", 400/500 (code, gate-pipeline labels).
• Loaded via Google Fonts links in config.ts head + vitepress/theme-without-fonts.
• Italic headers: never. Emphasis = weight or accent.
• 2+1 rule: Space Grotesk + Inter + JetBrains Mono is the ceiling. No fourth face.

Spacing

4-point --mk-space-* scale in tokens.css. Pages use named tokens, never raw values. Radii: --mk-radius-sm 6px (controls) / --mk-radius-md 10px (cards).

Motion

• Easings: --mk-ease-out cubic-bezier(0.2, 0.8, 0.2, 1); durations 150/250ms.
• Reveal pattern: none — motion-cut. Hover/focus transitions only.
• Animate opacity/border-color/transform only. Reduced-motion: transitions collapse to ≤150ms opacity.

Microinteractions stance

• Silent success; no celebratory motion.
• Focus: :focus-visible ring in brand blue, never animated.
• Card hover: border-color shift only. No lift, no scale, no glow-pulse.

CTA voice

• Primary: solid --mk-blue-600 fill, white text, --mk-radius-pill, weight 600. Hover: --mk-blue-700. Dark mode: --mk-blue-500 fill.
• Secondary: 1px brand border, brand text, transparent fill. Hover: soft brand bg.
• Copy pattern: imperative verb ("Get Started", "How It Works").

Per-page allowances

• Home MAY use Tier-A CSS art (the gate pipeline). Nothing above Tier-B.
• Content pages: typography only. No enrichment, no re-drawn chrome.
• VitePress-owned chrome (nav, sidebar, footer, search) is styled via --vp-* slots only — never rebuilt.

What pages MUST share

• The wordmark/logo and brand blue placement discipline.
• Space Grotesk display + Inter body + JetBrains Mono.
• The CTA voice and radius rhythm.
• Token references only — no inline hex/oklch in component styles.

What pages MAY differ on

• Home uses the enriched slot components; content pages never do.
• Feature-cluster grid density (4/2/1 by breakpoint).

Exports

tokens.css

Canonical copy lives at .vitepress/theme/tokens.css — that file is the export.