Clear = transparency, readability, accessibility. The user always knows where they stand. Data hierarchy is explicit, not hidden.
Ground = stability, trust, foundation. Deep navy anchors the system. The palette feels earthy and timeless, not trendy. The user is making a major financial decision and needs to feel grounded, not uncertain.
This is the foundational register. Every surface, every interaction, every default state should feel transparent and stable. 95% of the interface lives here.
The principle for when you break the baseline. It answers: "When do we add visual flourish?"
Answer: only when the system has earned the right to say "I understand why you're here."
The magic moment isn't a UI state. It's the moment the system connects the borrower's motivation to their numbers. The gradient wash, the tertiary palette, the Clarity Report headline. These activate because understanding was earned, not because a button was pressed.
The foundation of every interface. These colors establish calm confidence and transparency. "We understand your situation. You're in capable hands." This is where 95% of the interface lives.
| Token | Use | Don't use |
|---|---|---|
| ink-900 | Text, headers, primary surfaces, navigation chrome | Never as background wash behind data cards |
| stone-400 | Secondary text, borders, dividers | Not for primary actions or headlines |
| ground-50 | Page backgrounds, card surfaces, input fields | Not for text or interactive elements |
Four semantic categories that map to the borrower's information landscape. Each color carries meaning: not just what information it is, but what kind of information it is.
Two registers: muted for ambient dots (7px, always present), saturated for explicit chips/tags (larger UI elements where emphasis is earned).
| Category | What it captures | Borrower or System | Examples |
|---|---|---|---|
| Facts | Verifiable data the borrower shared | Borrower voice | Income, home value, current rate, balance, credit score |
| Constraints | Hard limits that can't flex | Borrower voice | Can't move, max payment $2400, need to close by June |
| Preferences | What matters to them, any intensity | Borrower voice | Want lower payment, prefer shorter term, want cash out |
| Opportunities | What the system surfaced back | Advisor voice | $40k tappable equity, rate gap of 1.2%, $347/mo savings potential |
Priorities merged into Preferences. "I want lower payments" and "I NEED lower payments" are both things the user said about what matters. Intensity is tracked internally, not with a separate dot.
Questions dropped. A question is a conversational state, not a captured artifact. The answer becoming a Fact is what earns the dot.
Motivations don't get dots. See Magic Moment spec. The motivation is the frame, not a data point.
Not a UI state change. Not "user enters comparison mode." The magic moment is when the system has enough information to connect the borrower's motivation to their numbers.
"You said you want to stop worrying. Here's what that costs: $347/month less. Here's what it buys: 11 years of not thinking about it."
That's the moment the product stops being a calculator and becomes the thing David built it to be.
A magic moment is a layer, not a new theme.
Same typography. Same components. Same spacing. Only the background wash and highlight treatment change.
The tertiary palette activates because understanding was earned, not because a button was pressed.
The system has captured enough dots AND can write the Clarity Report opening line: the motivation connected to the numbers.
Before this threshold: just data collection. After it: the data has meaning.
If pink appears in the system, it must be one accent among many. Never the dominant mood. If a screen reads "gendered" or decorative, pull back to the primary gradient only.
| Line | Spec |
|---|---|
| What it is | A presence indicator that acknowledges real-time data capture. The system is actively listening and translating conversation into actionable artifacts. |
| Why it exists | The borrower is sharing vulnerable financial information. The dot closes the feedback loop between speaking and seeing that information become part of their financial picture. Without it, the conversation feels like talking into a void. |
| When it appears | Three moments, in sequence: (1) user shares information in chat, (2) system captures and confirms that data point, (3) that point feeds into scenario modeling. Never random. |
| What it means | Conversation → Capture → Artifact → Scenario. Each dot is a step forward in the decision-making journey. Words become structured data, then become part of their financial model. |
| Where it lives | Chat pin chips (next to messages), dot bar at top of drawer, Clarity Report items. Dots fly between these locations during state transitions. |
| If we drop it | Replace with "3 Items Captured — See Clarity Report" in the nav. Same meaning (progress + acknowledgment) without the dot visual language. |
During conversation: pin chips appear next to messages. Dots fly from pin to bar.
Drawer half-open: dots fly DOWN from bar to Clarity items.
Drawer full: dots fly UP from Clarity to bar.
Bar stays visible until last dot departs.
Inclusive Sans body is locked everywhere. The header typeface flexes by context. In the product, we choose restraint. In marketing, we choose whatever serves the story.
| Context | Header | Body | Rule |
|---|---|---|---|
| In-product | Rethink Sans, Semi Bold | Inclusive Sans, Regular/Medium | Legibility and restraint. No decorative headers. Every word earns its weight on screen. |
| Marketing / top-of-funnel | Crimson Text or Rethink Sans (designer's choice per campaign) | Inclusive Sans | Personality allowed. Serif is optional when warmth or editorial tone serves the message. |
| Style | Typeface | Weight | Size |
|---|---|---|---|
| H3. Headline | Rethink Sans | Semi Bold | 32 |
| H4. Headline | Rethink Sans | Semi Bold | 28 |
| H5. Headline | Rethink Sans | Semi Bold | 26 |
| S1. Subtitle | Inclusive Sans | Semi Bold | 18 |
| S2. Subtitle | Inclusive Sans | Semi Bold | 16 |
| B1. Body | Inclusive Sans | Regular | 16 |
| B2. Body | Inclusive Sans | Medium | 16 |
| Label | Inclusive Sans | Medium | 14 |
| Button | Inclusive Sans | Semi Bold | 16 |
Motivations are upstream of facts, constraints, and preferences. They're the emotional foundation the whole picture sits on.
Motivations don't get dots.
They get the Clarity Report headline.
"I want to stop worrying about money" isn't a data point. It's the frame. The four dot categories capture the what. The motivation captures the why.
The why shouldn't compete for space in a 7px dot. It should anchor the entire report.
"You told us you want to stop worrying. Here's what that costs: $347/month less. Here's what it buys: 11 years of not thinking about it."
The tertiary set activates when the magic threshold is crossed. Slightly more saturated. Gradient surfaces. Reserved for moments where understanding was earned.
Layer, not theme. Same type, same components, same spacing. Only background wash and highlight treatment change.
| Token | Description |
|---|---|
| magic-wash-start | Gradient start. Slightly more saturated version of primary palette. |
| magic-wash-end | Gradient end. Warm direction, not cool. |
| magic-highlight | Accent highlight on active scenario cards during comparison. |
HEX values TBD. Define after gradient direction and intensity are locked in prototype.