Autri — Design Brief (for Claude Design)#

A brief to seed UI/UX design work in Claude Design. Lives alongside functional-mvp.md (functional scope), design.md (architecture), and decisions.md in the repo (active decisions). Iterate as Claude Design evolves the visuals.

References#

(Intentionally left empty — let Claude Design propose. We'll iterate.)

UI surfaces — design these (priority order)#

Product overview#

Autri is a generic knowledge-base platform with a visual extraction inspector. Users upload document corpora (PDFs, DOCX, MD, eventually XLSX); Autri parses them into chunks with structural and visual metadata, exposes hybrid retrieval (semantic + lexical + structured), and lets users see exactly how their documents were parsed, chunked, embedded, and retrieved — so they can vet quality before trusting answers.

The wedge: most RAG tools are black boxes. When retrieval gets weird, users can't tell why. Autri makes the pipeline legible — every chunk is anchored to its source document with bounding-box overlays, and every retrieval result shows which index found it. Trust through legibility.

Audience segments (multi-segment from launch)#

The brand needs to land all three without being generic.

Brand direction#

Mood: warm precision. Sits between approachable-warm (Notion, Mailchimp) and premium-enterprise (Linear, Stripe Atlas). NOT cold-corporate; NOT playful-toy. Like a trusted scientific instrument with personality.

Mascot: golden retriever. Loyal, helpful, eager-but-thoughtful. Doesn't appear prominently in the product UI — lives in marketing, error states, empty states, easter eggs. The dog conveys trustworthy companion; the rest of the brand conveys precision instrument.

Logo concept: "Au" as the gold periodic-table element.

• Au = the chemical symbol for gold (atomic number 79)
• "Au" is also the first two letters of "Autri" — name and logo reinforce each other
• Square format like a periodic-table cell: large "Au" character + atomic number "79" small in a corner + "Autri" wordmark below
• Connotes: fundamental building block (matches the "foundation / platform" thesis), precious + valuable (matches the trust positioning), scientific + premium (matches the inspector wedge)
• Color: burnished gold / warm amber (NOT yellow — too playful, NOT brass — too utilitarian)

Color palette direction (Claude Design to propose specifics):

• Primary brand color: burnished gold / warm amber — premium, distinct, evokes the element
• Warm neutrals: cream, tan, soft browns for surfaces
• Dark mode anchor: warm-toned dark (NOT pure black — closer to deep espresso or warm charcoal). Dark mode is the default per code conventions.
• Status colors (already in the codebase as semantic tokens):
  • Green = --ok (clean tier, approved chunks)
  • Amber/yellow = --warn (yellow tier, flagged chunks)
  • Red = --danger (red tier, failed extraction)
  • These need to feel cohesive with the warm gold palette — probably warm-leaning versions of each
• Retrieval-trace colors — need three distinct hues for the three retrieval primitives (vector / FTS / section-lookup). Today's dev code uses blue/green/amber as placeholders; Claude Design to propose final palette.

Typography direction:

• Sans-serif body that reads premium but not cold (something with subtle warmth — Söhne, IBM Plex Sans, Geist; or a custom recommendation)
• Monospace for code, chunks-in-inspector, technical UI elements (gives a "scientific instrument" feel)
• Display weight for marketing surfaces; tight letter-spacing for the wordmark

Voice: warm-precise.

• Trustworthy retriever (helpful, reliable, eager to surface relevant info) meets scientific instrument (precise, legible, never overconfident).
• Error messages explain why without blame.
• Empty states are encouraging, not preachy.
• Microcopy leans short, plain English. No jargon when prose works.

Tech constraints (non-negotiable)#

• Framework: Next.js 14 (App Router) + TypeScript + Tailwind + shadcn/ui
• Dark mode: the default, not opt-in. Light mode is a fallback.
• Existing semantic tokens in app/app/globals.css: --bg, --surface, --ink, --line, --brand, --ok, --warn, --danger. New palette should propose replacements/additions in this token system.
• Component primitives: shadcn/ui (Radix-based) — Card, Button, Dialog, Chip patterns already in use; designs should fit naturally into this primitive set.

Differentiators to make visible#

These are the things competitors don't have. The visual design has to show them, not hide them:

1. Color-coded retrieval traces. Every cited chunk in chat answers shows which retrieval method found it (semantic / lexical / section-lookup) via a colored border or chip. This is the "trust through legibility" differentiator.
2. Inspector with bbox overlay. Source-doc page renders with bounding boxes overlaid showing where each chunk was extracted from. Hover a chunk → bbox highlights on the page image; click a bbox → chunk content appears. This is the "see how it was parsed" differentiator.
3. Confidence-tier chips (green/yellow/red) on every document — the "you know which docs to trust" signal.
4. Ingestion pipeline view. A flow/status visualization showing each doc moving through stages: Upload → Ingestion → Agent validation → Human review → Ready. Confidence comes from watching the system do real work.

Surface 1 (START HERE): Chat homepage with right-rail sources#

The most important screen. This is where users land. Layout:

• Center column — chat (Claude/ChatGPT pattern). Message bubbles for user/assistant turns, markdown rendering in assistant answers, inline [N] citation markers, input field at the bottom.
• Right rail (collapsible) — sources panel. For the most recent answer:
  • List of cited chunks
  • Each chunk shows: source doc name, page number, retrieval-trace color-coded chip (semantic / lexical / section), and a snippet of chunk content
  • Hover a [N] citation in the answer → corresponding chunk highlights in the right rail
  • Click a chunk → opens the source doc inspector to that bbox (Surface 4)
• Left side / top — minimal chrome: KB selector (or "New chat" if KB context is implicit), nav to KB management and ingestion view
• Empty state (no KBs yet): center column blocks input with an encouraging "Create a knowledge base to start" CTA; right rail empty with a quick-start illustration (golden retriever moment?)

Reference patterns: Claude.ai web chat, ChatGPT, Perplexity. The familiarity is intentional — users know the pattern; we add the right rail as our differentiator.

Surface 2: Knowledge base management view#

• List of existing knowledge bases — card or list view, each showing: name, slug, doc count, last updated, total chunks
• "Create new KB" action — modal or dedicated page
• Click a KB → drill into Surface 3
• Delete KB (with confirmation)
• No per-KB ACL UI in Functional MVP (that's Deployed MVP territory)

Surface 3: Source-doc list inside a KB#

• Doc cards or list, each showing: doc name, source type icon (PDF/DOCX/XLSX/MD), confidence tier chip (green/yellow/red), chunk count, version label if applicable, last ingested timestamp
• "Upload documents" action → drag-drop surface (could route to Surface 5 or be inline)
• Click a doc → drill into Surface 4
• Re-extract action on each doc (re-run extraction with current model version)

Surface 4: Document inspector#

• Page image renders with bounding-box overlays for extracted chunks (already built, needs polish)
• Parsed text panel alongside the image — hover a chunk → bbox highlights on the page; click a bbox → chunk content scrolls into view
• Page navigation — page-by-page or thumbnail strip
• Section navigation — sidebar showing the doc's section/heading hierarchy (when present)
• Per-chunk metadata — chunk type, confidence, source-of-result if surfaced from a query
• Actions — "Re-extract with Sonnet", "Approve all green chunks", "Flag this chunk"

Surface 5: Ingestion pipeline view (the cool one)#

• Pipeline-style flow visualization with 4 stages: File upload → Ingestion → Agent validation → Human review → Ready
• Each uploaded doc moves through the stages — status pill or progress bar per doc
• Per-doc detail expandable: shows time spent in each stage, failure reason if applicable
• Reference: QuoteAI's streaming-checklist for quote generation (similar pattern — gives the user confidence the system is doing real work)
• Polling for status updates is fine (no need for real-time-streaming)

What's already built (starting point)#

The codebase has working versions of most of these, in a placeholder visual style:

• /kb (KB list — needs Surface 2 polish)
• /kb/[id] (doc list inside KB — needs Surface 3 polish)
• /kb/[id]/chat (chat surface — currently no right-rail, needs Surface 1 redesign)
• /docs/[id] (inspector with bbox overlays — needs Surface 4 polish)
• /docs/[id]/query (query playground with color-coded retrieval traces — the trace pattern lives here, needs to migrate into Surface 1)
• /docs (flat doc list — likely deprecated as KB-scoped nav becomes primary)

Existing dark-mode token system is in app/app/globals.css. Component primitives use shadcn/ui patterns (Card, Button, Chip).

Deliverables expected from Claude Design#

In rough order of usefulness:

1. Logo + wordmark — "Au" periodic-element treatment + Autri wordmark, in dark mode and light mode variants
2. Color palette + semantic token mapping — fill in / replace the existing tokens (--brand, --surface, --ink, --ok/--warn/--danger, plus new retrieval-trace tokens)
3. Typography spec — body + display + monospace recommendations
4. Surface 1 design (chat homepage with right-rail) — the most important screen
5. Surface 5 design (ingestion pipeline view) — second-most-important, since it's the most visually-distinct moment
6. Surfaces 2, 3, 4 — polish-grade designs, can borrow heavily from the existing patterns
7. Component library updates — chip variants (confidence tier, retrieval trace, source type), card patterns, button hierarchy
8. Mascot design — golden retriever character/illustration style for marketing + empty states

Open / for-Claude-Design-to-decide#

• Specific color values (just given brand axes)
• Type-family choice (just given vibe)
• Iconography style (line vs. filled vs. duotone)
• Layout density at the pixel level
• Mascot illustration style (cartoon? geometric? photorealistic?)
• Whether to push the "scientific instrument" feel harder (small caps, monospace data display, etc.) or pull back toward warmth

Notes for the brief consumer#

• This brief is iterable. Update it as Claude Design proposes and we react.
• Priority order on deliverables is a suggestion — Claude Design may surface what's most fruitful to design first.
• All visuals will land in a Next.js + Tailwind + shadcn/ui codebase. Designs that don't translate cleanly into that stack should propose token/component additions alongside the mockup.