Reference
Visual system
The rules that keep TAM Advisor calm, credible, and easy to scan. Every panel, label, and status indicator in the app composes from this small set of primitives.
Mood
What the design is for, and what it isn't.
Aim for
- Calm
- Credible
- Modern
- Easy to scan
- Professional
- Trustworthy
Avoid
- —Neon glows and abstract gradients
- —Glassmorphism, blurred chrome
- —Generic AI illustrations
- —Decorative motion, hover sparkles
- —Heavy shadows or thick borders
- —Jargon labels and clever microcopy
Color
Three surfaces, one ink with an opacity ramp, one accent, three signals.
Surfaces
Canvas
--canvas · #fcfaf7
Page background
Paper
--paper · #f9f7f2
Panels, cards
Sunken
--sunken · #f3f0ea
Input wells, quotes
Ink ramp
ink/100
Headings, primary content
ink/80
Body text
ink/60
Secondary text, helper
ink/40
Section labels, meta
ink/25
Disabled, placeholder
Accent & signals
Accent
--accent · burnt sienna
Stage cues, links, primary action
Caution
--caution · amber
Risks, watchouts
Info
--info · slate
Neutral notes, framing
Positive
--positive · forest
Understood, confirmed, done
One signal per surface. Signals carry meaning — they aren't a palette to decorate with.
Typography
Lora for thinking, Inter for doing.
Hierarchy
Decisions, in plain language.
Here's what I think you're asking.
Risks worth naming
The advisor reflects back what it heard, names what's missing, and asks only the questions it actually needs.
"You're being asked to recommend whether and how to roll out an AI capability."
What I heard
Skipping is fine. Anything you skip becomes a visible assumption.
Rules
- —Lora is reserved for headings and the advisor's own voice (restatements, memo titles).
- —Inter handles everything the user does — labels, controls, body copy, data.
- —Section labels are always 10px, semibold, uppercase, tracked widely. Never bigger.
- —Body lines wrap at ~60ch. Never run edge-to-edge in a panel.
- —Numbers are tabular. Italics are reserved for the advisor's voice and helper text.
- —Plain language only. No 'leverage', 'utilize', 'unlock potential'.
Spacing & rhythm
A 4-pt grid. Section rhythm at 24 / 32 / 56 / 80.
8px
Inline gap (icon ↔ label)
16px
Tight stack (label ↔ value)
24px
Within a panel
32px
Between panel sections
56px
Between page sections
80px
Top of a stage
Panels & cards
Three tones. No shadows. Hairlines only.
Panel · default
What I heard
Restatement
Editable. The user signs off before clarifying questions.
"You're scoping an AI rollout to support, with timeline pressure."
Panel · feature
Stage 5 — Diligence
Risks worth naming
- Customer-visible errors during the pilot window.
- Compliance exposure on regulated accounts.
Panel · quiet
Working plan
- 1.Reflect back the framing.
- 2.Ask 2–3 targeted questions.
- 3.Draft the memo for your edits.
Buttons
One primary action per view. Everything else is quiet.
Rules: ink button for forward motion, accent button only for the final commit ("Draft the memo"), text buttons for back / cancel / skip. Never two filled buttons side by side.
Stage & status indicators
Stages mark progress. Status pills carry meaning.
Stages
Used in the progress trail and the session ledger.
Status pills
One pill per panel header. Tone matches meaning, not aesthetics.
Inputs & outputs
Inputs sit in sunken wells. Outputs sit on paper.
Input · textarea
Sunken background signals "you write here". Focus uses accent ring at 30%, never a glow.
Output · advisor block
Suggested next steps
- 1.Run a 30-day pilot scoped to tier-1, non-regulated tickets only.
- 2.Define two success metrics with the support lead before week one.
- 3.Schedule a legal review checkpoint at day 21.
Advisor panel hierarchy
Each advisor block has a fixed role and a fixed indicator.
| Panel | Indicator | Tone | Reads as |
|---|---|---|---|
| What I heard | Framing | Calm, paraphrasing | The advisor's understanding, in plain words. |
| Missing context | Open | Neutral, factual | Things the advisor doesn't know yet — not failures. |
| Watchouts | Risk | Careful, specific | Risks worth naming before deciding. |
| Suggested next steps | Recommendation | Direct, actionable | What to do next — never 'you should'. |
| Review needed | Sign-off | Serious, scoped | Where a human must look before this ships. |
Responsive
The workbench survives on a phone.
- —Below lg: ledger collapses above the active step instead of beside it.
- —Progress trail keeps the numbers, hides labels under sm, and scrolls horizontally if needed.
- —Panel padding steps from p-6 to p-7 at sm. Never larger.
- —Primary action stays full-text on mobile; secondary actions become text-only.