[{"data":1,"prerenderedAt":539},["ShallowReactive",2],{"$fDXCRkYE0n1YKF3tfmJ3dEuDsbwww5Q62tUpbaSYaa6c":3},{"newThing":4,"project":5,"cycle":8,"sections":19,"threads":531,"otherDocs":535,"images":536,"archiveItems":537,"links":538},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":4,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":4,"imageCount":17,"artifactCount":18,"lastActivity":15,"hasPickup":16,"hasInitialPrompt":16},"c17",17,"c17.design-cleanup","design-cleanup","Applying Design to the Design Site","archived","2026-09-11",false,0,1,[20,34,44,54,499],{"key":21,"title":22,"empty":16,"ast":23},"why","Why",{"type":24,"children":25},"root",[26],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","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.",{"key":35,"title":36,"empty":16,"ast":37},"objective","Objective",{"type":24,"children":38},[39],{"type":27,"tag":28,"props":40,"children":41},{},[42],{"type":32,"value":43},"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.",{"key":45,"title":46,"empty":16,"ast":47},"scope","Scope",{"type":24,"children":48},[49],{"type":27,"tag":28,"props":50,"children":51},{},[52],{"type":32,"value":53},"Open-ended. Steps will be defined as the cycle progresses — each step takes a design from Figma\u002FIllustrator and implements it in the site.",{"key":55,"title":56,"empty":16,"ast":57},"key-changes","Key Changes",{"type":24,"children":58},[59,68,142,150,197,205,305,313,337,345,409,417,464,472],{"type":27,"tag":28,"props":60,"children":61},{},[62],{"type":27,"tag":63,"props":64,"children":65},"strong",{},[66],{"type":32,"value":67},"Component detail page — three-state view mode:",{"type":27,"tag":69,"props":70,"children":71},"ul",{},[72,85,90,95,100],{"type":27,"tag":73,"props":74,"children":75},"li",{},[76,78],{"type":32,"value":77},"Added full\u002Fwork\u002Ffocus toggle to ",{"type":27,"tag":79,"props":80,"children":82},"code",{"className":81},[],[83],{"type":32,"value":84},"[group]\u002F[component].vue",{"type":27,"tag":73,"props":86,"children":87},{},[88],{"type":32,"value":89},"Full: header + breadcrumb + DevCanvas (admin at top) + documentation sections",{"type":27,"tag":73,"props":91,"children":92},{},[93],{"type":32,"value":94},"Work: DevCanvas only (admin at top), no header or docs",{"type":27,"tag":73,"props":96,"children":97},{},[98],{"type":32,"value":99},"Focus: DevCanvas only (admin at bottom), no header or docs",{"type":27,"tag":73,"props":101,"children":102},{},[103,105,111,113,119,120,126,128,134,136],{"type":32,"value":104},"Custom icons (",{"type":27,"tag":79,"props":106,"children":108},{"className":107},[],[109],{"type":32,"value":110},"icon-full",{"type":32,"value":112},", ",{"type":27,"tag":79,"props":114,"children":116},{"className":115},[],[117],{"type":32,"value":118},"icon-mid",{"type":32,"value":112},{"type":27,"tag":79,"props":121,"children":123},{"className":122},[],[124],{"type":32,"value":125},"icon-focus",{"type":32,"value":127},") designed in Illustrator, loaded via ",{"type":27,"tag":79,"props":129,"children":131},{"className":130},[],[132],{"type":32,"value":133},"UxIcon",{"type":32,"value":135}," from ",{"type":27,"tag":79,"props":137,"children":139},{"className":138},[],[140],{"type":32,"value":141},"app\u002Fassets\u002Fsvg-icons\u002F",{"type":27,"tag":28,"props":143,"children":144},{},[145],{"type":27,"tag":63,"props":146,"children":147},{},[148],{"type":32,"value":149},"Usage example redesign:",{"type":27,"tag":69,"props":151,"children":152},{},[153,158,171,184],{"type":27,"tag":73,"props":154,"children":155},{},[156],{"type":32,"value":157},"Multi-line format with one prop per line, all props shown",{"type":27,"tag":73,"props":159,"children":160},{},[161,163,169],{"type":32,"value":162},"Aligned ",{"type":27,"tag":79,"props":164,"children":166},{"className":165},[],[167],{"type":32,"value":168},"=",{"type":32,"value":170}," signs padded to longest prop name",{"type":27,"tag":73,"props":172,"children":173},{},[174,176,182],{"type":32,"value":175},"Non-string types (Boolean, Number, Array, Object, Function) get ",{"type":27,"tag":79,"props":177,"children":179},{"className":178},[],[180],{"type":32,"value":181},":",{"type":32,"value":183}," binding prefix",{"type":27,"tag":73,"props":185,"children":186},{},[187,189,195],{"type":32,"value":188},"Undefined\u002Fnull bound props show prop name as value (e.g., ",{"type":27,"tag":79,"props":190,"children":192},{"className":191},[],[193],{"type":32,"value":194},":val = \"val\"",{"type":32,"value":196},")",{"type":27,"tag":28,"props":198,"children":199},{},[200],{"type":27,"tag":63,"props":201,"children":202},{},[203],{"type":32,"value":204},"Persistent UI preferences:",{"type":27,"tag":69,"props":206,"children":207},{},[208,245,274,294],{"type":27,"tag":73,"props":209,"children":210},{},[211,213,219,221,227,229,235,237,243],{"type":32,"value":212},"Created ",{"type":27,"tag":79,"props":214,"children":216},{"className":215},[],[217],{"type":32,"value":218},"app\u002Fcomposables\u002FusePreference.ts",{"type":32,"value":220}," — SSR-safe composable that syncs a ",{"type":27,"tag":79,"props":222,"children":224},{"className":223},[],[225],{"type":32,"value":226},"ref",{"type":32,"value":228}," to ",{"type":27,"tag":79,"props":230,"children":232},{"className":231},[],[233],{"type":32,"value":234},"localStorage",{"type":32,"value":236}," with ",{"type":27,"tag":79,"props":238,"children":240},{"className":239},[],[241],{"type":32,"value":242},"qd:",{"type":32,"value":244}," key prefix",{"type":27,"tag":73,"props":246,"children":247},{},[248,250,256,258,264,266,272],{"type":32,"value":249},"Uses ",{"type":27,"tag":79,"props":251,"children":253},{"className":252},[],[254],{"type":32,"value":255},"useState",{"type":32,"value":257}," + ",{"type":27,"tag":79,"props":259,"children":261},{"className":260},[],[262],{"type":32,"value":263},"onMounted",{"type":32,"value":265}," read + ",{"type":27,"tag":79,"props":267,"children":269},{"className":268},[],[270],{"type":32,"value":271},"watch",{"type":32,"value":273}," write — no new dependencies",{"type":27,"tag":73,"props":275,"children":276},{},[277,279,285,287,293],{"type":32,"value":278},"Applied to component detail page view mode (",{"type":27,"tag":79,"props":280,"children":282},{"className":281},[],[283],{"type":32,"value":284},"qd:component-view-mode",{"type":32,"value":286},") and components index layout (",{"type":27,"tag":79,"props":288,"children":290},{"className":289},[],[291],{"type":32,"value":292},"qd:components-index-view",{"type":32,"value":196},{"type":27,"tag":73,"props":295,"children":296},{},[297,299],{"type":32,"value":298},"Reusable for any future string preference via ",{"type":27,"tag":79,"props":300,"children":302},{"className":301},[],[303],{"type":32,"value":304},"usePreference('key', 'default')",{"type":27,"tag":28,"props":306,"children":307},{},[308],{"type":27,"tag":63,"props":309,"children":310},{},[311],{"type":32,"value":312},"UxIcon demo — full icon gallery:",{"type":27,"tag":69,"props":314,"children":315},{},[316,321,326],{"type":27,"tag":73,"props":317,"children":318},{},[319],{"type":32,"value":320},"Replaced placeholder message with a grid showing all 26 layer icons and 3 app-specific icons",{"type":27,"tag":73,"props":322,"children":323},{},[324],{"type":32,"value":325},"Each icon renders with its ID label underneath",{"type":27,"tag":73,"props":327,"children":328},{},[329,335],{"type":27,"tag":79,"props":330,"children":332},{"className":331},[],[333],{"type":32,"value":334},"filled",{"type":32,"value":336}," toggle in adminProps to switch between stroke and fill rendering modes",{"type":27,"tag":28,"props":338,"children":339},{},[340],{"type":27,"tag":63,"props":341,"children":342},{},[343],{"type":32,"value":344},"UxStretchBox demo + bug fix:",{"type":27,"tag":69,"props":346,"children":347},{},[348,368,381],{"type":27,"tag":73,"props":349,"children":350},{},[351,353,359,361,367],{"type":32,"value":352},"Updated demo: white card with ",{"type":27,"tag":79,"props":354,"children":356},{"className":355},[],[357],{"type":32,"value":358},"shadow-lg",{"type":32,"value":360}," wrapping the StretchBox (shadow container outside ",{"type":27,"tag":79,"props":362,"children":364},{"className":363},[],[365],{"type":32,"value":366},"overflow-hidden",{"type":32,"value":196},{"type":27,"tag":73,"props":369,"children":370},{},[371,373,379],{"type":32,"value":372},"Fixed layer bug: ",{"type":27,"tag":79,"props":374,"children":376},{"className":375},[],[377],{"type":32,"value":378},"_height-override",{"type":32,"value":380}," class was added after first animation but never removed on subsequent triggers, causing instant snap instead of smooth transition",{"type":27,"tag":73,"props":382,"children":383},{},[384,386,391,393,399,401,407],{"type":32,"value":385},"Fix: remove ",{"type":27,"tag":79,"props":387,"children":389},{"className":388},[],[390],{"type":32,"value":378},{"type":32,"value":392}," at the start of ",{"type":27,"tag":79,"props":394,"children":396},{"className":395},[],[397],{"type":32,"value":398},"onWatchPropChange",{"type":32,"value":400}," so ",{"type":27,"tag":79,"props":402,"children":404},{"className":403},[],[405],{"type":32,"value":406},"v-bind(contentHeight)",{"type":32,"value":408}," can drive the CSS transition again",{"type":27,"tag":28,"props":410,"children":411},{},[412],{"type":27,"tag":63,"props":413,"children":414},{},[415],{"type":32,"value":416},"Architecture precedent research:",{"type":27,"tag":69,"props":418,"children":419},{},[420,425,438,451],{"type":27,"tag":73,"props":421,"children":422},{},[423],{"type":32,"value":424},"Researched 15+ major design systems to document precedent for the separated library + documentation site pattern",{"type":27,"tag":73,"props":426,"children":427},{},[428,430,436],{"type":32,"value":429},"New file: ",{"type":27,"tag":79,"props":431,"children":433},{"className":432},[],[434],{"type":32,"value":435},"brand\u002Farchitecture_precedent.md",{"type":32,"value":437}," — 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)",{"type":27,"tag":73,"props":439,"children":440},{},[441,443,449],{"type":32,"value":442},"Updated ",{"type":27,"tag":79,"props":444,"children":446},{"className":445},[],[447],{"type":32,"value":448},"brand\u002Fcomponent_philosophy.md",{"type":32,"value":450}," — expanded precedent paragraph (line 131) to name 8 systems with link to full survey",{"type":27,"tag":73,"props":452,"children":453},{},[454,456,462],{"type":32,"value":455},"Added \"A proven pattern\" section to ",{"type":27,"tag":79,"props":457,"children":459},{"className":458},[],[460],{"type":32,"value":461},"\u002Flayer",{"type":32,"value":463}," page with two-column card layout (separate repos vs. monorepo) and Vue\u002FNuxt ecosystem callout",{"type":27,"tag":28,"props":465,"children":466},{},[467],{"type":27,"tag":63,"props":468,"children":469},{},[470],{"type":32,"value":471},"Figma capture:",{"type":27,"tag":69,"props":473,"children":474},{},[475,494],{"type":27,"tag":73,"props":476,"children":477},{},[478,480,486,488],{"type":32,"value":479},"Added capture script to ",{"type":27,"tag":79,"props":481,"children":483},{"className":482},[],[484],{"type":32,"value":485},"app.vue",{"type":32,"value":487}," via ",{"type":27,"tag":79,"props":489,"children":491},{"className":490},[],[492],{"type":32,"value":493},"useHead",{"type":27,"tag":73,"props":495,"children":496},{},[497],{"type":32,"value":498},"Sent SecurityPolicyCard component page to Qpoint Prose Components Figma file",{"key":500,"title":501,"empty":16,"ast":502},"outcome","Outcome",{"type":24,"children":503},[504],{"type":27,"tag":28,"props":505,"children":506},{},[507,509,515,517,522,524,529],{"type":32,"value":508},"Applied the Qpoint visual identity to the design site in discrete steps: a three-state (full\u002Fwork\u002Ffocus) component detail view backed by a new SSR-safe ",{"type":27,"tag":79,"props":510,"children":512},{"className":511},[],[513],{"type":32,"value":514},"usePreference",{"type":32,"value":516}," composable, a redesigned multi-line usage-example format, and a full UxIcon gallery. Fixed a real layer bug (UxStretchBox stale ",{"type":27,"tag":79,"props":518,"children":520},{"className":519},[],[521],{"type":32,"value":378},{"type":32,"value":523}," class breaking repeat transitions) and produced ",{"type":27,"tag":79,"props":525,"children":527},{"className":526},[],[528],{"type":32,"value":435},{"type":32,"value":530},", 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).",[532],{"name":533,"prompt":534,"plan":4},"c17-initial","c17-initial-prompt.md",[],[],[],[],1789151089336]