Design References

Owner: Russell (Lead Designer)
Status: Draft — first entry added 2026-05-11; will expand as Russ migrates the Claude mockup to a Figma source-of-truth file.

---

Live mockup (current source-of-truth pending Figma migration)

MemberIntel product mockup — Claude design artifact
https://claude.ai/design/p/019e0983-ffe2-7f2b-8618-4f9f50ee1448?file=index.html&via=share

This is what Seth has been working against during the planning phase and what was shared in the 2026-05-11 working session. It is the reference for Russ’s first task: migrate to Figma with components, tokens, and a documented type/color scale (see Russ’s JD for the full Phase 1 deliverable list).

The mockup is not the final design — it’s the working starting point. Russ is expected to push back, propose alternatives, and consolidate it into a system. Once a Figma file exists, this page will note “Superseded by Figma — see link below” and the Claude link will be retained for historical reference only.

---

Figma source-of-truth

(To be added once Russ creates the file. Per Russ’s JD, this is a Phase 1 deliverable.)

---

Visual system conventions (already authoritative)

The visual rules for the knowledgebase itself — typography (Sofia Pro + Minion Pro), the slate-scale token system, the three palette variants, light/dark theming, the mi-* class naming — are documented in:

• docs/design/MemberIntel/CLAUDE.md (in the repo root) — authoritative for the KB’s visuals
• site/src/styles/app.css — the ported token layer
• site/src/styles/design-system.css — font imports and MP base layer

These conventions are not automatically authoritative for the product (the V1 advisor). They’re the right starting point because the KB and the product share a brand family, but Russ has the latitude to evolve product visuals away from KB visuals where they need to diverge (e.g., a paid-SaaS-advisor density vs. a long-form-knowledgebase density).

---

Constraints to design within

These are non-negotiable inputs to the design work (decided in the 2026-05-11 session):

1. Platform-agnostic. MemberIntel must read as a standalone product, not a MemberPress add-on. The design has to land convincingly on a non-MP marketing page (memberpress.cloud / membersintel.com candidates) and inside the MP admin without either context feeling parasitic.
2. Free tier visually distinct from Pro. The free tier runs on a slower local LLM (Ollama-class) — the design has to make the Pro upgrade obvious without making the free experience feel punitive.
3. Streaming-response native. Chat UI is not a request/response pattern; it’s a token-stream pattern with citations rendering live. Design from streaming-first, not from synchronous-mock.
4. Entitlement-aware UI. Many components render differently for Free vs Pro. Don’t design the “happy Pro path” and bolt on Free disabled-states — design both as first-class.
5. Accessibility floor: WCAG AA. Not negotiable.
6. Brain editor needs versioning UX. Per-customer brain entries get a version + superseded_at schema (Blair-approved 2026-05-11 friction-points item 7). The customer needs to see history and revert. UX is open; the data shape is fixed.

---

How this page evolves

Add a new section under “Live mockup” each time a new design artifact lands that the team will reference:

• Figma file links (with section anchors)
• Loom walkthroughs of specific flows
• Reference inspiration (“the chat-citation pattern we want to feel like” with the linked example)
• Screenshots of shipped surfaces (for design-engineering hand-off receipts)

Keep one entry under “Live mockup (current source-of-truth)” — promote the freshest authoritative artifact there; demote prior ones to “Historical reference” sections below.

---

Document owner: Russell. Russ has full edit authority on this page once he’s onboarded; Seth maintains it in the interim.