4.4 KiB
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.mdand 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
- 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.
- Avoid the old generic AI purple/blue gradient treatment. Aim for a professional identity and avoid typical AI design tells.
- 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.
- Provide a central HTML index linking to each design.
- Support mobile, responsive full-width layouts, and ultrawide monitors. Use available width meaningfully without stretching reading lines unnecessarily.
- Support Light, Dark, and Dim modes.
- Research current docs and plans for required product features. Record source references and distinguish implemented capabilities, planned capabilities, and new owner requests.
- The mockup may introduce features before backend support exists. Label fixture data and simulated behavior honestly. Do not invent API contracts.
- Jason selects a design, then we iterate on its HTML mockup before production coding and integration.
- 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.