The Well design system
Colors, typography, components, and motion. The building blocks behind every Well surface.
Logo
The marks, the room each one needs, and the surfaces they are cleared for.
Logo variations
Download any variation, or copy its permanent link to paste where another product asks for a logo or icon URL. The icon tiles are the ones to use for that: they carry a background, so the mark stays visible whatever the surface.
White logo
Black logo
White symbol
Black symbol
White icon
Black icon
Typography
Inter, at every weight and size the product and the site draw from.
Inter is our sole typeface across product and marketing.
Connect all your business data
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Connect all your business data
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Usage
Business intelligence
Page titles, hero headlines. The top of the scale.
AI-powered automation
Section headers and subcopy pairs
Dashboard overview
Card headers, dialog titles
Connectors
Subsection headings, feature labels
Well connects your banking, accounting, and invoicing tools into a single hub. It gives business teams real-time visibility without the manual work.
Lead paragraphs, feature descriptions
Automatically extract line items, match invoices to purchase orders, and flag discrepancies before they become problems.
Body text, paragraphs, descriptions
Last synced 2 minutes ago · 3 new transactions
Secondary text, metadata, table cells
v2.4.1 · Terms · Privacy
Captions, labels, footer links
Badge labels, compact UI
Small badges, dense layouts
Micro labels
Smallest text, rare use
Sentence case
Capitalize only the first word and proper nouns.
Connect all your business data
AI-powered automation
Connect All Your Business Data
AI-POWERED AUTOMATION
Text balance
All headings and short copy blocks use text-wrap: balance to distribute words evenly across lines and avoid awkward orphans.
Connect all your business data in one place. 60+ connectors, AI-powered automation, and workflows for modern business teams.
Connect all your business data in one place. 60+ connectors, AI-powered automation, and workflows for modern business teams.
Tabular numbers
Use tabular-nums lining-nums on any element that displays numerical data. Equal-width, uniform-height digits prevent layout jiggle and keep columns aligned.
1,234.56
7,890.12
1,234.56
7,890.12
Optical sizing
Inter is a variable font with an opsz axis. With font-optical-sizing: auto the browser adjusts stroke thickness, contrast, and spacing for each size. Thicker strokes for small text, more delicate forms for large.
Business intelligence
Automatically adjusts weight and contrast per size
Caption: thicker strokes for legibility at small sizes
Business intelligence
Same glyph outlines regardless of rendered size
Caption: thinner strokes may reduce legibility
Text pairings
Which heading size pairs with which body size and color. Follow these exactly for consistent hierarchy.
Live specimens
Section header (centered)
Turn connected data into business clarity
Once your data flows into Well, everything becomes searchable, visual, and automated.
Card title + description
Smart document processing
Drop invoices and PDFs. AI extracts line items, amounts, and dates automatically.
Stat number
10,000+
Banks and financial institutions
Colors
One dark grayscale ramp, and the surface, text and status tiers built on it.
Scale
One dark grayscale ramp powers every surface, border, and text tier. Each step is a real class now, gray-100 through gray-900: click one to copy its name.
Surfaces
Elevation is a one-step walk up the ramp, the website page background (gray-900) at the base and each surface one step lighter than the last. Borders, not shadows, carry most of the separation.
Text
Four working tiers from headline to metadata, plus functional tones. Each row renders its own token.
Status
Status colors ship as a text, background, and border triad. Use them together — the pill below is the triad rendered live.
Positive outcomes: posted, reconciled, paid
Needs attention: pending review, partial states
Errors, overdue items, destructive actions
Neutral information and in-progress states
Extended accent for AI surfaces and charts
Extended accent for data surfaces and charts
Borders
Alpha-white borders adapt to the surface beneath them; border-solid is the opaque hairline for dense UIs.
Charts
Two accent series for straightforward comparisons, plus a five-step ramp for stacked breakdowns. chart-muted closes the mix as "Other" when a slice doesn't need its own color.
Dividers and tracks
An etched divider pairs a dark groove with a light highlight for a carved edge. track-subtle is the plain hairline under tabs and stacked rows (the divide-website recipe).
Etched groove edge
track-subtle hairline (divide-website)
Fills and interaction states
Every fill family steps one alpha up on hover and one more on press. Try the live sample, then copy the triplet.
Contrast
WCAG contrast for the working text tiers on each surface level, computed from the token values. 4.5 passes AA for body text; 3.0 passes for large text.
AA+ marks pairs that pass only at large sizes. Quaternary and below are for non-essential metadata.
Status pairs, text on bg composited over surface-level-1
Do and don't
The rules below, shown side by side. Same intent, one version reads correctly.
Status colors ship as a triad, not a bg alone
Body copy uses text-secondary or higher, not text-quaternary
Connect all your business data.
Connect all your business data.
Reach for a token class, not a raw hex or default palette step
Components
The primitives every Well surface is assembled from, and how they behave.
Button
Variants
Sizes
With icons
Badge
States
Sizes
Activity type
Card
Static card with 8px radius and no hover state. Used across the website.
Tabs
Content for the first tab.
Tooltip
Hover to see tooltip
Form controls
Switch
Checkbox
Divider
Full-width separator
Content above the divider
Content below the divider
Skeleton
Loading placeholders
Interaction polish
Icons
One icon set, at the sizes and stroke widths Well draws it.
Icon library
All icons come from lucide-react. Use consistent sizing and stroke widths.
Sizing combinations
Card icon (contained)
Container: size-8 (32px) · Icon: size-4 (16px) · strokeWidth: 1.5
Navigation icon
No container · Icon: size-5 (20px) · strokeWidth: 1.5
Button icon
No container · Icon: size-3.5 (14px) · strokeWidth: 1.5
Inline icon (external links)
No container · Icon: size-3 (12px) · strokeWidth: 1.5
Stroke width
Lucide defaults to strokeWidth=2. We use strokeWidth={1.5} globally on every Lucide icon across the website for a lighter, more refined appearance.
Contained, strokeWidth 1.5
Thinner stroke balances the visual weight of the container background
Standalone, strokeWidth 1.5
Same weight for navigation, buttons, and inline icons
Icon containers
Contained icons use the card surface treatment: bg-surface-level-1 with shadow-card and rounded-lg, the same edge as WebsiteCard. Icon color is always text-text-secondary inside containers.
Animation
How Well moves: the layers a scene is built from, and the scenes themselves.
Animation layers
Every hero animation is a stack. A product surface at the base, a 3D tilt, then a fixed focus on top. Toggle each layer to see what it adds.
The stack
Ask anything or use / for commands...
The product surface. It can slide left, right, up, or down.
Ask anything or use / for commands...
A 3D tilt on top, set to a lab angle. The plane rotates on x, y, and z.
Ask anything or use / for commands...
Focus locks to a distance. A flat plane stays sharp; a tilt brings a focal band.
The lab
Combine them. Toggle each layer, change the angle, move the wall.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Focus
Angle
UI layer movement
The UI layer
The UI layer is the product surface we rotate, and it can hold more than one screen. Fill the container: lay multiple cards out in a padded grid that spans the full width, so the tilt always has a surface to catch. The one exception is a very zoomed-in UI layer, where a single card fills the frame on its own.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Multiple cards in a padded grid, filling the container. Use this by default.
6 suppliers have no VAT number on file: Notion, Figma, Linear, Vercel, Ramp, and Intercom. Want me to draft a data-request email?
Ask anything or use / for commands...
| Company name | Registered name | Domain | Country | Industry | Tax ID | Primary contact | Open balance | ||
|---|---|---|---|---|---|---|---|---|---|
| 1 |  | Stripe, Inc. | stripe.com | United States | Payments | US 46-1234567 | €84,200 | ||
| 2 |  | Qonto SAS | qonto.com | France | Banking | FR 85 123456789 | €12,480 | ||
| 3 |  | Mercury Technologies, Inc. | mercury.com | United States | Banking | US 84-7654321 | €31,600 | ||
| 4 |  | Slack Technologies, LLC | slack.com | United States | Software | US 47-3287654 | €4,920 | ||
| 5 |  | Xero Limited | xero.com | New Zealand | Accounting | NZ 123-456-789 | €18,750 | ||
| 6 |  | Pennylane SAS | pennylane.com | France | Accounting | FR 42 987654321 | €2,140 | ||
| 7 |  | HSBC Holdings plc | hsbc.com | United Kingdom | Banking | GB 123456789 | €56,300 | ||
| 8 |  | Asana, Inc. | asana.com | United States | Software | US 45-9876543 | €6,880 | ||
| 9 |  | The Sage Group plc | sage.com | United Kingdom | Accounting | GB 987654321 | €9,410 | ||
| 10 |  | Dropbox, Inc. | dropbox.com | United States | Software | US 26-0138832 | €1,260 | ||
| 11 |  | Agicap SAS | agicap.com | France | Treasury | FR 88 456789012 | €7,340 | ||
| 12 |  | Dext Software Limited | dext.com | United Kingdom | Accounting | GB 445566778 | €3,920 | ||
| 13 |  | Box, Inc. | box.com | United States | Software | US 20-4936620 | €880 | ||
| 14 |  | Notion Labs, Inc. | notion.so | United States | Software | — | €4,150 | ||
| 15 |  | Figma, Inc. | figma.com | United States | Software | — | €2,680 | ||
| 16 |  | Linear Orbit, Inc. | linear.app | United States | Software | — | €5,490 | ||
| 17 |  | Vercel Inc. | vercel.com | United States | Software | — | €1,940 | ||
| 18 |  | Ramp Business Corporation | ramp.com | United States | Fintech | — | €8,720 |
Very zoomed in? One card inside is enough.
Progressive UI
The UI layer should build in, not pop in. Reveal the surface one element at a time: the header first, then each row — avatar and lines — fades and rises into place, staggered. It reads as the product coming to life, and gives the eye somewhere to travel while the camera moves.
Stripe
Stripe, Inc.
Qonto
Qonto SAS
Mercury
Mercury Technologies, Inc.
Slack
Slack Technologies, LLC
Header first, then each row builds in piece by piece — logo, name, then value — on a calm, deliberate cadence. Holds fully visible underprefers-reduced-motion.
Infinite loop
When the UI layer moves, the loop has to be invisible. A repeating slide must wrap with no seam and no jump. But movement does not always loop: a one-shot entrance plays once, then rests.
Tile the content and translate by exactly one tile, so the wrap lands on an identical frame. For a sliding wall: left, right, up, or down. Loops forever, no seam.
A single surface that cannot tile drifts out and eases back, like a slow truck right then a return. It loops by reversing, so no edge is revealed.
Some moves do not loop. A reveal or push-in runs on load, then the camera rests. A first impression, not perpetual motion.
Every loop holds still underprefers-reduced-motion.
Workspace elevation
When the hero shows chat beside a workspace panel, the right panel can lift along its surface normal on every scene cut — orthogonal to the tilted UI plane, not a screen-space diagonal. Chat stays on the base plane. Shadow travels only during the motion; at rest the panel sits flush with no extra drop shadow.
€142K cash across accounts, €47K MRR (+8% vs last month), and €18.4K net burn — about 7.7 months runway at current spend.
Ask anything or use / for commands...
Cash
€142K
+€12K
MRR
€47K
+8%
Net burn
€18.4K
-3%
Runway
7.7 mo
+0.4 mo
MRR trend
€47K
+8.3%Expense mix
On each scene cut the workspace panel lifts along the surface normal (translateZ) and settles flush, while chat stays pinned to the base plane.
4.8s settle · hero-panel-settle
When to use
Split product shells (chat + tabbed workspace) that hard-cut between scenes — e.g. Graph → Companies → Dashboard.
3D context
Parent shell uses `transform-style: preserve-3d`. Chat is pinned with `translateZ(0)`; only the workspace panel animates.
Motion
4.8s cubic-bezier(0.16, 1, 0.3, 1). `translate3d(0, 0, 72px)` → `0` along the panel normal — no extra rotateX/Y on the panel.
Shadow
Deep shadow only in the keyframe `from` state. `to` is `box-shadow: none` so the resting panel does not float.
Implementation: @keyframes hero-panel-settle in globals.css; applied on the active workspace column in obsidian-graph-hero.tsx. Live on the homepage.
Recipe
Putting it together. To build a hero like the lab, stack the layers in order.
- 1
Build the UI layer
A product surface. Lay multiple cards in a padded grid that fills the width. One card only when it is very zoomed in.
- 2
Tilt it
Wrap the surface in the 3D perspective and pick an angle. Start with Top-left.
- 3
Lock the focus
Set the focus distance so the sharp band lands on the part that carries the message.
- 4
Add movement that loops
Drift a single surface and ease it back, or slide a tiled wall as a seamless marquee. A reveal entrance plays once.
- 5
Elevate the workspace on scene cuts
For chat + workspace shells, lift the right panel along its surface normal (translateZ) on each hard cut. Chat stays on the base plane.
- 6
Respect reduced motion
Hold a static tilt with the focus band. No breathing, no loop, no elevation landing.
Single surface? Drift it and ease back. A tiled wall? Slide it as a seamless marquee.
Scenes
Once you can build one hero, combine several. Each scene is its own angle, with its own UI layer. Scenes switch with a hard cut: no transition, no tween between them. The cut is the edit.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Hold each scene for a beat, then cut straight to the next angle, and loop back to the first. Within a scene the UI layer is a full wall of cards that keeps sliding on its own seamless loop; only the jump between scenes is instant.
Video scenes
For videos, not heroes. A feature video is a run of hard-cut scenes: sliding product-UI scenes (the same stack as a hero), a typography beat, and the logo to close. The video-only scenes are below, then a full example.
Typography scene
A full-bleed line of text on our darkest surface, where each word blurs into focus one at a time. Drop it between product scenes as a beat of its own.
Yourbusiness,finallyinfocus.
Darkest-surface background, one centred line, each word resolving from blur to sharp in sequence. It loops on its own.
Logo animation
The sign-off. The Well logo resolves from blur to sharp on our darkest surface. It is always the last scene of a feature video.
The logo blurs into focus on the darkest surface, then holds. Same resolve as the typography scene, on the mark instead of words.
Feature video
How the scenes combine. Opening product-UI scenes, a typography beat, and the logo to close. Each scene is its own angle or surface, and every switch is a hard cut.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Scene one is a sliding product-UI scene like Scenes above. Cut to the typography beat, then on through the remaining product scenes, and end on the logo. The logo is always last. Every cut is instant, then it loops.
Voice
How Well sounds across every surface, and the words it does not use.
Tone of voice
How Well sounds across every surface: marketing, product UI, docs, and AI-generated content. Use these rules to write copy that feels like Well.
Voice dimensions
Tone pillars
Clear & benefit-oriented
What it does + what problem it solves. No jargon. Lead with the outcome the reader cares about.
Tech-savvy but accessible
Modern, professional, no-BS. Written for builders. Technical concepts are welcomed but always grounded.
Smart & structured
Concrete metaphors (bridge, rail, protocol). Never pretentious. Precision over poetry.
Minimalist B2B
No hype. No forced emotion. Right message, right promise. Quiet confidence.
Personality
Intelligent, reliable, efficient, modern, approachable. Like a brilliant operations person who just handles things without drama.
Style rules
Short sentences. Active voice.
Show, don't tell. Lead with the outcome, not the feature.
Use concrete numbers and examples over abstract claims.
Sentence case everywhere: buttons, labels, headings, links.
Only capitalize the first word and proper nouns.
Word governance
Use
Avoid
AI writing red flags
Commas, periods, or colons
Start with the point
use, build, grow, support
Say what it actually does
Pick one accurate verb
Use a specific number or fact
State the positive directly
Em dashes (—)
Furthermore, Moreover, Additionally
delve, harness, leverage, foster
In today's fast-paced landscape…
streamline, optimize, and revolutionize
best-in-class, world-class, unparalleled
Not just X, but Y
Before / after
Upload and extract invoices
Your invoices handle themselves
Integrate your tools
Give your AI agent access to your entire business
Manage your data
Your business runs itself
Financial operations platform
Conversational financial intelligence
Connect your bank
Talk to your money