Phase 0.1 -- Design Exploration: Brand Identity Mockup Variations

Parent: #762

---

Context

The C+D (Mission Control + Ambient) direction won external review but was validated by only 1 reviewer on static mockups. Before committing to a final design system, we need to explore variations of the winning direction to narrow down the actual brand identity -- color temperature, density, animation philosophy, chrome treatment, and typography.

Starting Point

The winning prototype lives on branch research/762-ux-mockups at mockups/direction-cd/. It uses inline React styles (throwaway code, not the final stack).

Step 0 -- Baseline rebuild: Before creating any variations, rebuild the prototype's Dashboard page in the real stack (React + shadcn/ui + Tailwind + Framer Motion). This becomes the baseline that all 5 variations fork from. Do not carry forward any inline style code.

---

Variation Briefs

Each variation forks from the baseline rebuild and changes color temperature, density, animation style, chrome treatment, and optionally typography pairing.

Variation A: "Ice Station"

Attribute	Value
Color temperature	Cool blue-cyan palette (current prototype colors)
Density	Grafana-dense -- pack information tightly, small type in data cells
Animation style	Minimal -- 200ms opacity transitions only, no spring physics
Chrome treatment	Visible sidebar rail (always present, icon + label)
References	Grafana dashboards, Datadog dark mode

This is the "closest to the prototype" variation -- validates whether the original direction already works at production quality.

Variation B: "Warm Ops"

Attribute	Value
Color temperature	Warm amber-gold primary accent (#f59e0b as accent instead of cyan)
Density	Balanced -- comfortable spacing, readable at arm's length
Animation style	Spring physics on drag interactions and page transitions (framer-motion spring configs)
Chrome treatment	Collapsible sidebar (expanded by default, can collapse to icon rail)
References	Linear, Dust.tt's warm green aesthetic (but in amber)

Tests whether warmth makes an AI ops tool feel more approachable without losing professionalism.

Variation C: "Stealth"

Attribute	Value
Color temperature	Neutral gray -- no hue at all, pure white/gray/slate hierarchy
Density	Linear-sparse -- generous whitespace, breathing room between sections
Animation style	Almost none -- instant transitions (0ms or near-instant), no easing
Chrome treatment	Hidden sidebar (hamburger toggle, content takes full width by default)
References	Bloomberg Terminal (data-first, no decoration), Linear's latest redesign

Tests the "anti-brand" approach -- does the content itself create enough identity without color?

Variation D: "Signal"

Attribute	Value
Color temperature	Emerald-green primary accent (#10b981)
Density	Medium -- slightly denser than balanced, but not Grafana-level
Animation style	Status-driven -- only animate things that change state (counters tick, status dots pulse on transition, cards highlight on update). Static elements stay completely still.
Chrome treatment	Persistent sidebar with notification badges (unread counts, status dots)
References	Vercel (status-first design, green = deployed), Railway (topology canvas, status encoding)

Tests whether tying animation to meaning (only movement = something changed) creates better signal-to-noise.

Variation E: "Neon"

Attribute	Value
Color temperature	High-contrast violet-purple accent (#8b5cf6)
Density	Dense -- compact layout, smaller gaps, more data visible per viewport
Animation style	Aggressive -- entrance effects on cards (slide + fade), pulse on active/running items, shimmer on loading states
Chrome treatment	Compact sidebar (narrow, icons prominent, text secondary)
References	AgentOps purple palette, gaming/esports dashboards (high energy, high information)

Tests the ceiling of visual intensity -- how far can we push energy before it becomes fatiguing?

---

What Each Variation Must Include

Every variation must implement two pages with identical mock data:

1. Dashboard page

   • Metric cards (agents online, tasks in progress, budget burn, uptime)
   • Department health bars (per-department status rollup)
   • Activity stream (recent events, scrollable)
   • Budget chart (spend over time, ECharts or Recharts)

2. Agent Profile page

   • Agent identity (name, role, department, avatar, status)
   • Performance metrics (task completion rate, quality score, response time)
   • Career timeline (promotions, role changes, trust level changes)
   • Task history (recent tasks with status, duration, outcome)

Same mock data across all 5 variations -- differences should be purely visual/interaction, never content.

---

Scale Test Data

All variations must render with production-scale mock data:

• 50+ agents (not the 12-agent "Nexus Dynamics" dataset from the original prototype -- that is insufficient)
• 8+ departments with realistic hierarchies
• 30-day activity history (enough to populate charts and timelines meaningfully)

Generate a shared mock data module that all variations import. The data should stress-test:

• Long agent names (multi-word, various lengths)
• Departments with 1 agent and departments with 15+ agents
• Agents in every status state (active, idle, error, suspended, onboarding)
• Budget values spanning 3+ orders of magnitude

---

Typography Exploration

Test at least 3 monospace + sans-serif pairings across the variations:

Pairing	Mono	Sans	Notes
Pairing 1	JetBrains Mono	Inter	Current prototype default
Pairing 2	Geist Mono	Geist Sans	Vercel's type system -- designed for dashboards
Pairing 3	IBM Plex Mono	IBM Plex Sans	Neutral, corporate, excellent language support

Each variation can use a different pairing (does not need to be 1:1 -- the goal is to see all 3 in context). Document which pairing each variation uses.

---

Scoring Rubric

Each reviewer scores every variation on these criteria (1-5 scale):

Criterion	Question	1 (Worst)	5 (Best)
Identity distinctiveness	"Would I recognize this as SynthOrg in a screenshot lineup?"	Generic, could be anything	Unmistakably SynthOrg
Information density	"Can I understand org state in <5 seconds?"	Overwhelmed or starved	Instant comprehension
Sustained usability	"Would I want to look at this 8 hours/day?"	Fatiguing or boring	Comfortable and engaging
Professional credibility	"Would a CTO show this in a board meeting?"	Toy-like or chaotic	Polished and authoritative
Scale readiness	"Does this work with 100 agents, not just 12?"	Breaks down visually	Scales gracefully

Reviewers must also provide:

• Top pick (forced choice, even if close)
• Elements to steal from non-winning variations (specific: "the sidebar badge pattern from D", not vague: "I liked D's sidebar")
• Dealbreakers -- anything in any variation that is an absolute no-go

---

Review Process

1. Serve all 5 variations via Podman (same containerized approach as existing mockups on research/762-ux-mockups)
2. Minimum 2 external reviewers with different profiles:
   • 1 technical reviewer (engineer/developer background)
   • 1 non-technical/management reviewer (PM, designer, or exec background)
3. Each reviewer completes the scoring rubric independently (no discussion before scoring)
4. Document verbatim feedback -- exact quotes, not paraphrased summaries
5. After independent scoring, hold a brief discussion to surface disagreements
6. Final decision documented with rationale (which variation wins, which elements get cherry-picked from losers)

---

Brand Identity Deliverables

Produced alongside the winning variation (not after -- these inform the final design):

Logo/Wordmark Treatment

• Where does the SynthOrg wordmark sit in the dashboard layout?
• Size, color, opacity treatment
• Does it appear on every page or just the top-level?
• Relationship to the sidebar/header

Brand Voice Examples

Write sample copy that establishes the product's personality:

• 3 status sentences (e.g., what appears in the activity stream or dashboard summary)
• 3 empty state messages (e.g., no agents deployed yet, no tasks in queue)
• 3 error messages (e.g., agent crashed, budget exceeded, provider unreachable)

These should feel consistent with the winning visual direction (a "Stealth" winner would have terse copy; a "Warm Ops" winner might be more conversational).

Visual Identity Markers

Document the specific visual elements that make this "SynthOrg" vs a generic dashboard:

• Could be a unique chart style, a specific status encoding pattern, the typography hierarchy, a distinctive card treatment, a signature animation, or the information architecture itself
• Be concrete: "the department health bars use a segmented pill shape" not "it looks professional"

---

Existing References

Resource	Location
Winning prototype (C+D)	Branch research/762-ux-mockups, mockups/direction-cd/
Vue force graph prototype	Branch research/762-ux-mockups, mockups/direction-bd/
Ambient prototype	Branch research/762-ux-mockups, mockups/direction-db/
UX research doc	docs/design/ux-research.md on branch research/762-ux-mockups
Design principles (10)	Listed in #762 comment and ux-research.md
WCAG baseline fixes	text-muted needs >= 4.5:1 contrast, border needs >= 3:1 on all backgrounds
Competitor analysis	8 AI platforms + 7 dashboards documented in #762 comments

---

Constraints

• All variations built in React + shadcn/ui + Tailwind (the actual final stack -- no throwaway inline styles)
• All animations via framer-motion (no CSS transitions for interactive elements)
• All must pass WCAG AA contrast -- check AFTER selecting colors, not before (do not pre-constrain palette choices)
• Dark mode only (confirmed in feat: major web dashboard UX overhaul #762 research)
• Served via Podman for review (containerized, same as existing mockups)
• Shared mock data module across all variations (no per-variation data differences)

---

Acceptance Criteria

• Baseline rebuild of prototype Dashboard in React + shadcn/ui + Tailwind + Framer Motion
• 5 named variations (Ice Station, Warm Ops, Stealth, Signal, Neon) built and served
• All variations render with 50+ agents, 8+ departments, 30-day history
• At least 3 typography pairings tested across variations
• Side-by-side comparison page for easy switching
• Reviewed by >= 2 external reviewers (1 technical, 1 non-technical)
• Scoring rubric completed by each reviewer independently
• Verbatim feedback documented
• Final identity direction selected with documented rationale
• Brand deliverables produced: logo treatment, voice examples, visual identity markers
• Elements to cherry-pick from losing variations documented