Vesper

v18 · published

Calm capital - navy dusk and a serif hush.

calmrefinedcooltrustworthy

Vesper is a re-reading of refined business banking: a calm, deep-navy canvas held at dusk, where soft periwinkle light pools on raised surfaces and a quiet indigo carries every action. Headlines are set in an editorial serif that lends gravitas and slows the eye, while the body stays in a clean sans and figures are stamped in mono. Space is generous, edges are softly rounded, shadows are barely there, and motion drifts rather than snaps. It earns trust through restraint - money handled in a hushed, considered room.

Fork it into your own →Open the playground →

re-imagined from https://mercury.com

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Brings the system in

npx synthesisui@latest init --styles tailwind --ds vesper

2 · Turns the check and the tools on

npx synthesisui@latest connect

2 · Turn the check and the tools on

npx synthesisui@latest connect

Ask your agent

Use the "Vesper" design system (slug: vesper) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add vesper` if `_synthesisui/ds/vesper/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/vesper/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/vesper/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/vesper/v18/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="vesper"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use vesper "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Newsreader, Inter, IBM Plex Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.gold

400#d6a85f

500#b9893a

600#946b27

color.navy

50#f4f5fa

100#ededf3

200#dcdee9

300#b9bdd0

400#8a8fa8

500#5f6480

600#3c4158

700#272735

800#1e1e2a

900#171721

950#0e0e16

color.rose

400#d97a83

500#c25560

600#a03e49

color.sage

400#5fae8a

500#3d8a68

600#2c6b50

color.veil

500#09090bb3

color.indigo

300#aeb8f5

400#7c87ef

500#5266eb

600#3f4ed1

700#2f3aa0

color.periwinkle

200#dbe3ff

300#b9c4f0

400#9cb4e8

color.semantic - resolved live via CSS variables

info

{color.indigo.400}

faint

{color.navy.500}

muted

{color.navy.400}

scrim

{color.veil.500}

accent

{color.periwinkle.400}

border

{color.navy.700}

canvas

{color.navy.900}

danger

{color.rose.400}

raised

{color.navy.700}

overlay

{color.navy.700}

primary

{color.indigo.500}

success

{color.sage.400}

surface

{color.navy.800}

warning

{color.gold.400}

foreground

{color.navy.50}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs2px

2xs4px

xs8px

sm12px

md16px

lg24px

xl40px

2xl64px

3xl96px

shadow

ring

Typography

The voice of the system.

Display: Newsreader · Body: Inter · Mono: IBM Plex Mono

xsDesign, set free0.75rem / 1.5

smDesign, set free0.875rem / 1.55

baseDesign, set free1rem / 1.65

lgDesign, set free1.25rem / 1.4

xlDesign, set free1.625rem / 1.3

2xlDesign, set free2.125rem / 1.2

displayDesign, set free3.25rem / 1.1

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 6 live

fade

rise

drift

press

pulse

shimmer

easings

swiftcubic-bezier(0.4, 0, 0.2, 1)

gentlecubic-bezier(0.65, 0.05, 0.36, 1)

standardcubic-bezier(0, 0, 0.2, 1)

durations

base · 0.3sfast · 0.15sslow · 0.5sambient · 1s

interaction patterns

presspress-in

A barely-there press.

enterenter-rise

Content drifts up gently and fades in.

focusfocus-ring

A soft indigo ring settles around the focused control.

hoverhover-lift

Surface lifts a touch on hover with a soft shadow.

loopambient-drift

Hero elements float slowly, like a calm tide.

Components · 12

Blueprints, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

balance

bespoke · surface

The signature figure - a large serif balance, calm and confident.

$1,284,920.50

transaction

bespoke · surface

A ledger row - payee on the left, mono amount on the right, hairline below.

Stripe payout +$4,200.00

card

bespoke · surface

Calm navy panel with a soft hairline; lifts a touch on hover.

lawCards are ledger pages: hairline borders, dusk surfaces, no drop shadows.

padding

A card wearing this system.

emphasis

A card wearing this system.

chip

bespoke · pill

A quiet filter token - hairline border, periwinkle whisper, indigo when chosen (data-active="true"). Nothing shouts at dusk.

lawChips filter records; the chosen one fills indigo, the rest stay hairline.

active

MAMaya AndersenMAMaya Andersen

link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

link

alert

bespoke · surface

Inline message. Tone maps onto the system's own semantic accents.

tone

A message wearing this system.

badge

bespoke · surface

Soft pill for metadata and status; colored text on a quiet fill.

lawBadges whisper status in periwinkle; danger appears only for money at risk.

intent

PillPillPillPillPillPill

input

bespoke · surface

Quiet field; a soft indigo ring settles in on focus.

avatar

bespoke · indicator

A monogram, not a photo bubble - serif initials on raised navy inside a gold hairline, like the clasp of a private ledger. Image via ds-avatar-img.

lawThe monogram is serif and gold-clasped - never replace initials with an icon.

size

MAMAMA

button

bespoke · surface

Quiet, softly-rounded action. Primary carries the calm indigo.

lawOne indigo action per view; gold is reserved for moments of ceremony, never buttons.
lawButtons speak quietly - sentence case, no exclamation.

intent

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

avatar-group

bespoke · indicator

Monograms in quiet company - overlapping gently, each held by a navy ring so the gold hairlines never touch.

lawNever more than five monograms; overflow becomes a +N clasp.

MAJSKPRL

Engagement blocks · 1

Engagement, wearing the system.

Optional gamification blocks the AI advisor can propose - token-only, so they re-skin to any base. A library to compose from, not a parallel product.

streak

bespoke · pill

Consistency as quiet wealth - the streak glows like a candle at dusk, counted in serif.

lawConsistency is quiet wealth: the ✦ glows gold, the label never nags.

12day streak

Icons · lucide

A consistent icon set.

Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.