Files
stack/agents/dewey/work/wui/BRIEF.md
T

4.4 KiB

Mosaic Stack WUI design brief

Assignment and authority

  • Owner: Jason Woltje. Designer and mockup author: Dewey.
  • Intake recorded 2026-09-08. Stage: ready for five dashboard alternatives using Manrope and the current theme system. Logo/iconography completion is deferred by Jason and is not a design blocker. Brand-board entry: index.html.
  • Keep mockups and working notes in agents/dewey/work/wui/.
  • Start fresh. Do not inspect the old v1 UI without Jason's request.
  • Use skills/ms-frontend-design/SKILL.md and its relevant references.
  • CURRENT.md was read. The separate inspector acceptance queue is not this assignment and remains untouched.
  • Existing unrelated worktree changes must be preserved. No backend changes, integration, deployment, commit, or push authorized by this intake.

Owner requirements

  1. Establish a visual foundation before dashboard design. Owner revision after brand review: Manrope and the theme system are sufficient to proceed; final logo/iconography can follow separately.
  2. Avoid the old generic AI purple/blue gradient treatment. Aim for a professional identity and avoid typical AI design tells.
  3. Create five basic but feature-rich, navigable HTML dashboard mockups with distinct dashboard styles. Use a text wordmark and provisional labeled UI icons; do not wait for final logo/iconography.
  4. Provide a central HTML index linking to each design.
  5. Support mobile, responsive full-width layouts, and ultrawide monitors. Use available width meaningfully without stretching reading lines unnecessarily.
  6. Support Light, Dark, and Dim modes.
  7. Research current docs and plans for required product features. Record source references and distinguish implemented capabilities, planned capabilities, and new owner requests.
  8. The mockup may introduce features before backend support exists. Label fixture data and simulated behavior honestly. Do not invent API contracts.
  9. Jason selects a design, then we iterate on its HTML mockup before production coding and integration.
  10. Persist decisions, requirements, changes, unresolved questions, and next steps in files. Conversation context is not the project record.

Sequence and approval gates

  • Resolve brand discovery questions.
  • Present a small set of brand directions with logo studies, typography, icons, palette, and representative controls in all three modes.
  • Carry Manrope and the current themes into dashboard exploration. Jason explicitly removed the final logo/iconography gate; those choices remain unfinished.
  • Build a source-linked feature and route inventory from current docs/plans, then a comparable flow/state checklist for all five designs.
  • Build and browser-check the five designs and central index.
  • Obtain design selection and iterate the chosen HTML prototype.
  • Establish a separate implementation/integration charter later.

Branding discovery

Jason's answers and the unapproved design proposals are recorded in DECISIONS.md.

  • Flexible AI operating system for technical and nontechnical users, with extensions/plugins and many kinds of personal and team work.
  • mosaicstack.dev is owner-held. Open source intended; hosted offering only a possibility.
  • Creative, distinguishable mark that works as both icon and logo.
  • Blue is welcome. Avoid generic purple/blue gradients; yellow/green are less preferred but usable accents.
  • Target ten interchangeable palettes without changing layout or icon identity. Explain each palette through color theory.
  • Sans-serif typography. Owner references: t3.codes and buzz.xyz, with no preference for Buzz's yellow.
  • Light, charcoal Dim, and Dark with color and depth. Default mode still unselected.

Verification and next step

  • Used frontend-design and all applicable references. Inspected t3.codes and buzz.xyz public pages; no v1 inspection. Application/onboarding limits are in RESEARCH.md.
  • index.html contains three logo studies, three font alternatives, eight navigation-icon specimens, ten palettes, all three appearances, component states and local review downloads.
  • Chromium checks and author screenshot inspection completed for review readiness. VERIFY.md records evidence, corrections, and unverified cases. This is not an approved identity or integrated application.
  • Next step: research current docs/plans for the feature inventory, then design five navigable HTML alternatives and a central comparison index. Logo/iconography completion is non-blocking; backend coding and integration remain out of scope.