Design System & Page Specifications: Refiner 4.0/5.0

Design governance is the difference between "it looks fine" and "it looks like it was built by the same team." We shipped a design specification that defines every visual decision — so no session improvises.

The dual philosophy problem

HavenWizards has two audiences looking at the same product. Public visitors want editorial storytelling — they are evaluating whether to partner with us or enroll in a workshop. Admin users want task efficiency — they are managing content, tracking metrics, processing applications.

One design system cannot serve both with the same visual language. Consumer pages need delight and discovery. Admin pages need clarity and confidence. So we declared the philosophy per-page in each PAGE_SPEC:

• Consumer pages (homepage, ventures, insights): "Make every scroll feel like discovering something you did not know you needed"
• Admin pages (CMS, dashboard, settings): "Make every task feel obvious and every decision feel confident"

What the spec covers

10 component specifications (cards, badges, nav patterns, form elements, interactive widgets). 5 public page designs (homepage, ventures, insights, team, build log) — each with visual direction, section rhythm, and responsive breakpoints at 375px, 768px, and 1280px. 4 admin CMS pages. A full token system: colors, 4px spacing grid, typography scale, elevation shadows, and motion timing curves.

Refiner: 4.0/5.0

Four remediations before the score hit GOOD: typography hierarchy had inconsistent weight rules across heading levels. Motion tokens existed but had no prefers-reduced-motion fallbacks. Two page specs were missing tablet breakpoints. Icons above 24px were rendering without containers — floating naked, which is an AI-signature visual pattern we auto-reject.

All four fixed. 4.0 out of 5.0. Proceed to development.