Ledger

Precision fintech: cool whites, one indigo, data up front.

SaaS/ledgerlight + dark

Exemplar: Stripe

Studied from Stripe's marketing surfaces. Original tokens and copy; no assets copied.

Live tokens

Colors

bg
#FFFFFF

surface
#F6F9FC

surface-alt
#EDF2F7

text
#0A2540

text-muted
#425466

border
#E3E8EE

primary
#635BFF

on-primary
#FFFFFF

accent
#007A96

on-accent
#FFFFFF

Type

Directionxxxl · 3.25rem

Design systemxxl · 2.25rem

Conversion notesxl · 1.5rem

Section headinglg · 1.25rem

Body copy for the pagemd · 1rem

Supporting textsm · 0.875rem

Meta labelxs · 0.75rem

Pack recipe 0123'Geist', 'Inter', system-ui, sans-serif

Pack recipe 0123'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace

Spacing, radius, shadow

xs 0.25rem

sm 0.5rem

md 1rem

lg 1.5rem

xl 2.5rem

xxl 4.5rem

sm 4px

md 8px

lg 999px

Component samples

Pricing that scales with you

Start free. Pay when your volume grows.

Claim first, condition second.

Action verb, no account needed.

SOC 2 Type II

Credential badge, accent tint.

Work email

Use your company address.

Single field, stated purpose.

Usage this month

142,300 API calls

Resets in 9 days

Data first, decoration never.

Recipe

Apply the rules, place the patterns, then tune the conversion notes against the rubric.

Rules

Keep the page white; tint only panels.
Use one indigo for every primary action.
Set figures in the mono face with tabular alignment.
Separate sections with hairlines, not shadows.
Show the price before the signup form.

Patterns

Two-column hero: claim left, live product panel right.
Comparison table with a highlighted recommended column.
Logo wall between hero and pricing for instant proof.
Sticky slim header with one action on the right.

Conversion notes

Put the trust badge (SOC 2, uptime) next to the signup button.
Anchor pricing with a named popular plan.
Answer the migration objection under the pricing table.

See this pack on your site.

Attach your URL. The audit maps your gaps to Ledger or a better-fit pack.