Objectuve Docs

Appearance

v4.17 — Design System Facelift ​

The design_system app — the site that documents the Objectuve brand — now actually embodies it.

Summary ​

Before this milestone, design_system was the canonical publisher of every brand token consumed by admin_dashboard and ionic_frontend, but it was the least polished of Objectuve's static sites: anemic page headers, no inner-page heroes, placeholder emoji "icons" (~10, XP, 🎯) standing in for real iconography on BrandOverview, 12 text-only cards on the Components gallery instead of live previews, flat uniform cards everywhere, and entry-only motion. Rich token data, barebones presentation.

This milestone reused the proven admin_dashboard facelift design language (glassmorphism, ambient backdrop, entrance/lift motion, chips, gradient buttons) rather than inventing a new one, and applied it across the whole app in four phases: a foundation phase that established the shared polish vocabulary and shell, then three build-out phases (BrandOverview, the Components gallery, and the eight remaining foundation pages) that consumed it. The non-negotiable guardrail — never fork design_system/css/tokens.css or tailwind-tokens.cjs, the single source of truth both consuming apps import — held for all four phases, diff-verified empty at every merge.

design_system now matches the admin_dashboard polish bar it was modeled on, and every page that documents a brand pattern (color, typography, spacing, shadows, gradients, icons, animation, dark mode, live components) demonstrates that pattern using the pattern itself.

Goal ​

Bring the design_system app up to — ideally past — the admin dashboard's polish bar, so the site that documents the Objectuve brand actually embodies it. Reuse the proven admin facelift design language (glassmorphism, ambient backdrop, entrance/lift motion, chips, gradient buttons, primitives) rather than inventing a new one.

Scope — What Shipped ​

  • New polish vocabulary in design_system/src/main.css: .ambient-stage, .glass/.glass-sub, .card-e1–.card-e3 elevation ladder, .lift hover, .fade-up + .stagger-1–6 entrance motion, .chip/.chip-* variants, .btn-primary/.btn-accent/.btn-ghost, .section-head, .page-header/.page-hero, .gold-shimmer-text — all composed from hsl(var(--token)) reads, none introducing a new color/spacing/radius source.
  • Three new src/components/ui/* primitives: GlassPanel, SectionHead, Chip.
  • Redesigned PageHeader.vue (eyebrow label + icon + gradient-hairline rule + per-page accent-tinted radial wash) and an ambient/glass AppShell.vue shell.
  • BrandOverview.vue rebuilt: hero, pillar cards with real Lucide iconography (Timer, Trophy, Compass) replacing the old ~10/XP/🎯 placeholders, restyled tone-of-voice and We-Are/We're-Not rows.
  • Components.vue gallery rebuilt: all 12 previously text-only placeholder cards now render live component previews / real thumbnails; Storybook CTA retained.
  • All 8 remaining foundation pages (Colors, Typography, Spacing, Shadows, Gradients, Icons, Animations, DarkMode) lifted onto the new header/hero/card treatment; search/filter added to Colors and Icons with graceful empty states; DarkMode's token table gained real color swatches beside each HSL value; reduced-motion-safe stagger/scroll-reveal entrance motion throughout.
  • Shared gallery cards upgraded to the new elevation vocabulary: ColorSwatch, GradientCard, ShadowCard, IconGrid, DarkModeCompare, TypographyScale, SpacingGrid, AnimationDemo.
  • design_system/README.md updated with the polish vocabulary reference table, the three new primitives, and the "never fork tokens.css" guardrail language; a pointer added from root DESIGN.md.
  • Post-ship fix (OBJ-1786): corrected SectionHead.vue rendering its title as a <p> instead of a heading tag, and a mislabeled ActionHub gallery-card caption.

Phases ​

PhaseNameStatusPlansHighlights
1Foundation — polish vocabulary + shell + PageHeaderShipped1Establishes the shared vocabulary and primitives every later phase builds on; Desi UI-SPEC gates all Codi work
2BrandOverview — hero + pillars + toneShipped1Real Lucide iconography replaces emoji/text placeholders
3Components gallery — live previewsShipped112 placeholder cards → live rendered previews; Desi ran an optional spot-check ahead of the build
4Foundation pages polish + motion + filters + docsShipped18 pages lifted to the new bar, search/filter, real DarkMode swatches, motion, plus this milestone's docs

Key Decisions ​

  • Reuse the admin facelift language, don't invent a new one — the milestone explicitly scoped itself to porting the proven admin_dashboard glassmorphism/motion/chip vocabulary rather than designing fresh, keeping the three frontends visually coherent.
  • One PR per phase on a shared integration branch, final phase merges to master directly — Phases 1–3 landed on gsd/v4.17-design-system-facelift; Phase 4's PR (#1811) squash-merged the full accumulated milestone diff straight to master (00df8dae6) rather than merging the integration branch separately first.
  • Desi's Phase 3 spot-check was optional, and was run anyway — Components gallery was flagged as the milestone's most net-new design surface, so Desi added a live-preview-card UI-SPEC addendum ahead of Codi's build even though the ROADMAP only recommended it, not required it.
  • Guardrail enforced by diff-check, not by trust — every phase PR's test plan included an explicit tokens.css/tailwind-tokens.cjs diff check; this audit independently re-verified it empty across the full milestone span.

Requirements Coverage ​

6 / 6 deliverables satisfied (quoted from the MILESTONE-AUDIT). This is a design-polish milestone with no backend/API/data-model surface, so deliverables are tracked by the ROADMAP's ad hoc phase IDs rather than a numbered REQUIREMENTS.md.

CategoryCountStatus
DS-UISPEC / DS-FOUNDATION (Phase 1)2All satisfied
DS-BRAND (Phase 2)1Satisfied
DS-COMPONENTS (Phase 3)1Satisfied
DS-PAGES / DS-DOCS (Phase 4)2All satisfied

Full detail: v4.17-design-system-facelift-MILESTONE-AUDIT.md on GitHub.

Outcomes ​

design_system now matches the admin_dashboard polish bar: every foundation page carries the redesigned PageHeader, glass/elevation card treatment, and reduced-motion-safe entrance motion; BrandOverview and the Components gallery no longer rely on text or emoji stand-ins; Colors and Icons are searchable; and DarkMode shows real color swatches instead of bare HSL strings. admin_dashboard and ionic_frontend are unaffected — the shared token files were never touched, so this was a pure consumer-side (design_system's own components and pages) visual upgrade.

Tech Debt ​

  • (Phase 1) SideNav.vue's active-item indicator still uses the generic border-primary left-border instead of the per-page --page-accent nav dot the UI-SPEC called for.
  • (Phase 1) AppShell.vue's mobile hamburger aria-label is static ("Open navigation") and doesn't toggle to reflect open/closed state.
  • (Phase 2) Chip primitive's fixed 6-variant palette has no destructive/red variant, so BrandOverview's negative-signal "We're Not" chips render as muted instead of a warning color.
  • (Phase 4) IconGrid.vue's empty-filter-state copy doesn't echo the search query back the way Colors.vue's does.
  • (Standing, pre-existing) design_system has no PR-preview deploy pipeline (only deploys on push to master) — every phase PR needed a manual build-and-verify workaround instead of a live preview URL.
  • 00df8dae6 — [Codi] design(v4.17): Foundation pages polish + motion + filters + docs (OBJ-1784) (#1811) — squash-merge of the full accumulated milestone diff to master
  • aa55b10ea — [Codi] fix(design-system): correct SectionHead heading tag and ActionHub thumbnail mislabel (OBJ-1786) (#1810)
  • dfdf28c7d — [Codi] design(v4.17): Components gallery — live-preview cards (OBJ-1783) (#1808)
  • 090bd3886 — [Codi] design(v4.17): rebuild BrandOverview hero + pillars + tone on Phase 1 primitives (OBJ-1782) (#1807)
  • 1a47de360 — [Codi] design(v4.17): Phase 1 foundation — polish vocabulary, shell, PageHeader (OBJ-1781) (#1806)

Last updated: 2026-08-03

Loading…