Applying Design to the Design Site

The design site has served as a functional documentation and showcase tool across 16 cycles, but its visual presentation remains utilitarian. The Qpoint brand identity — Swiss-modern aesthetic, grape-anchored color, generous whitespace, deliberate typographic hierarchy — is well-defined in brand files and tokens but hasn't been intentionally applied to the site itself.

Apply the Qpoint visual identity to the design site in iterative steps. Much of the design work happens in Figma and Adobe Illustrator, with code changes following as designs are finalized.

Open-ended. Steps will be defined as the cycle progresses — each step takes a design from Figma/Illustrator and implements it in the site.

Component detail page — three-state view mode:

• Added full/work/focus toggle to [group]/[component].vue
• Full: header + breadcrumb + DevCanvas (admin at top) + documentation sections
• Work: DevCanvas only (admin at top), no header or docs
• Focus: DevCanvas only (admin at bottom), no header or docs
• Custom icons (icon-full, icon-mid, icon-focus) designed in Illustrator, loaded via UxIcon from app/assets/svg-icons/

Usage example redesign:

• Multi-line format with one prop per line, all props shown
• Aligned = signs padded to longest prop name
• Non-string types (Boolean, Number, Array, Object, Function) get : binding prefix
• Undefined/null bound props show prop name as value (e.g., :val = "val")

Persistent UI preferences:

• Created app/composables/usePreference.ts — SSR-safe composable that syncs a ref to localStorage with qd: key prefix
• Uses useState + onMounted read + watch write — no new dependencies
• Applied to component detail page view mode (qd:component-view-mode) and components index layout (qd:components-index-view)
• Reusable for any future string preference via usePreference('key', 'default')

UxIcon demo — full icon gallery:

• Replaced placeholder message with a grid showing all 26 layer icons and 3 app-specific icons
• Each icon renders with its ID label underneath
• filled toggle in adminProps to switch between stroke and fill rendering modes

UxStretchBox demo + bug fix:

• Updated demo: white card with shadow-lg wrapping the StretchBox (shadow container outside overflow-hidden)
• Fixed layer bug: _height-override class was added after first animation but never removed on subsequent triggers, causing instant snap instead of smooth transition
• Fix: remove _height-override at the start of onWatchPropChange so v-bind(contentHeight) can drive the CSS transition again

Architecture precedent research:

• Researched 15+ major design systems to document precedent for the separated library + documentation site pattern
• New file: brand/architecture_precedent.md — full survey covering separate-repo systems (Tailwind, Carbon, Radix, Primer), monorepo-with-separate-package systems (Vuetify, PrimeVue, Nuxt UI, Polaris, MUI, shadcn), and what makes Qpoint's approach distinctive (brand knowledge base + MCP server)
• Updated brand/component_philosophy.md — expanded precedent paragraph (line 131) to name 8 systems with link to full survey
• Added "A proven pattern" section to /layer page with two-column card layout (separate repos vs. monorepo) and Vue/Nuxt ecosystem callout

Figma capture:

• Added capture script to app.vue via useHead
• Sent SecurityPolicyCard component page to Qpoint Prose Components Figma file

Applied the Qpoint visual identity to the design site in discrete steps: a three-state (full/work/focus) component detail view backed by a new SSR-safe usePreference composable, a redesigned multi-line usage-example format, and a full UxIcon gallery. Fixed a real layer bug (UxStretchBox stale _height-override class breaking repeat transitions) and produced brand/architecture_precedent.md, a 15+ design-system survey documenting precedent for the separated library + docs-site pattern. Intentionally open-ended; closed in the c69 sweep — the site has since been rebuilt on the layer (c48) and re-themed (c52).