tailthemesbuy this theme · $39
Skip to content

Design system

The parts.

Every part Marquee ships, rendered once with real content: 15 sections, 9 primitives, 48 tokens per mode.

15 sections9 primitives48 tokens2 modes

src/components · src/components/ui · src/theme.css · src/fonts.ts

Tokens

48 variables per mode in src/theme.css: 19 colour, 25 type, four shape, weight and motion. These chips read them live.

Surfaces and pairs

  • Aa

    --background

    --foreground

  • Aa

    --card

    --card-foreground

  • Aa

    --primary

    --primary-foreground

  • Aa

    --secondary

    --secondary-foreground

  • Aa

    --muted

    --muted-foreground

  • Aa

    --accent

    --accent-foreground

State ramp

  • --primary

  • --primary-hover

  • --primary-active

  • --surface-tint

Type · ratio 1.333

--font-display · Bricolage Grotesque

Aa Bb Cc 0123

--font-text · Schibsted Grotesk

Aa Bb Cc 0123

--font-mono · Spline Sans Mono

Aa Bb Cc 0123

  • d4 · 3.556rem · home h1Revenue, reconciled.
  • d3 · 2.667rem · page h1Wire. Match. Close.
  • d2 · 2rem · section h2Metrics that survive an audit
  • d1 · 1.5rem · card titleNet revenue retention
  • lead · 1.125remThe section lede, one sentence, twenty words at most.
  • body · 1remRunning prose: every figure tied to a matched invoice.
  • small · 0.875remCard body, nav links, buttons, the match log.
  • caption · 0.75remTicker items, chips, table cells, footnotes.
  • label · caption + 0.08emThe close

Radius, lines and the drift

--radius 0.875rem · --radius-inner 0.625rem

--border · hairlines never carry structure alone

--duration-ticker 90s · the one moving part

The marquee drift. Everything else is placed.

Sections

Each section rendered once, at the width and with the content it ships with.

site-header

src/components/site-header.tsx

Sticky nav: wordmark, three links, the mode toggle and the primary action. Below md it collapses into a JS-free details menu.

hero

src/components/hero.tsx

The centered manuscript and the reconciliation surface: MRR at display size, twelve months of bars, the wire, and the match verdict.

Subscription analytics

Revenue, reconciled.

Recur reads your billing feeds, matches every invoice to the ledger, and publishes metrics your accountant will sign.

No card · free to $2,500 MRR · export everything, any time

recur · the close · March

Δ $0.00

Monthly recurring revenue

$128,410

+6.1% vs February

The wire

  • 14:02invoice 8841 matched$429.00
  • 14:02new subscriber · Growth$49.00
  • 14:05upgrade · Seed → Growth+$49.00
  • 14:11refund posted$99.00
  • 14:19dunning recovered$147.00

2,412 of 2,412 invoices matched

Δ $0.00

ticker-rail

src/components/ticker-rail.tsx

THE SIGNATURE — a full-bleed strip of timestamped events drifting past. Three feeds: wire, match, wins. Pauses on hover; static under reduced motion. Shown here on the wire feed.

The wire

  • 14:02 UTC · invoice 8841 matched · $429.00 · Δ $0.00
  • 14:02 UTC · new subscriber · Growth · $49.00 MRR
  • 14:05 UTC · upgrade · Seed → Growth · +$49.00 MRR
  • 14:07 UTC · invoice 8842 matched · $1,188.00 · Δ $0.00
  • 14:11 UTC · refund posted · $99.00 · ledger updated
  • 14:12 UTC · invoice 8843 · Δ $84.00 · flagged for review
  • 14:19 UTC · dunning recovered · $147.00 · 2nd retry
  • 14:23 UTC · invoice 8844 matched · $588.00 · Δ $0.00

sources-band

src/components/sources-band.tsx

Eight billing sources on a hairline grid — the works-with-my-stack answer.

Sources

Eight feeds, one ledger

Connect what already bills you money; Recur normalizes currencies, credit notes and refunds on the way in.

  • Stripe

    billing + invoices

  • Paddle

    MoR checkout

  • Chargebee

    subscriptions

  • Lemon Squeezy

    MoR checkout

  • App Store

    in-app renewals

  • Play Billing

    in-app renewals

  • Braintree

    cards + PayPal

  • Manual invoices

    CSV or email-in

metrics-grid

src/components/metrics-grid.tsx

Six metric cards, each opening with a real sample figure; the delta card carries the chip.

The close

Metrics that survive an audit

Every number below is computed from matched invoices, so the board pack and the books agree.

  • MRR + movements

    $128,410

    New, expansion, contraction and churn split out, month by month.

  • Net revenue retention

    114%

    Cohort-weighted, with the customers driving it named.

  • Churn

    2.1%

    Logo and revenue churn separately; early-warning flags on usage cliffs.

  • Cohorts

    36 mo

    Retention tables to three years, exportable as CSV.

  • Forecast

    $1.54M ARR

    A twelve-month run-rate from matched invoices, not from optimism.

  • The delta

    Δ $0.00

    Every metric ties to the ledger; anything that will not match gets flagged.

reconcile

src/components/reconcile.tsx

Wire, match, close as a ruled 7/5: the three steps beside a match run with one flagged row.

How it works

Wire, match, close

Three steps between a charge landing and a statement you can sign.

  1. The wire

    Every charge, refund and credit note arrives from your billing feeds within minutes.

  2. The match

    Each event is paired with its invoice and its ledger entry. Anything that will not pair gets flagged, not smoothed over.

  3. The close

    When the delta reads zero, the month's statement publishes itself. Your accountant gets a trail, not a spreadsheet.

Match run 442

3m 41s

Five invoices from match run 442 with their reconciliation deltas
InvoiceAmountDelta
8839$1,240.00Δ $0.00
8840$88.00Δ $0.00
8841$429.00Δ $0.00
8842$1,188.00Δ $0.00
8843$536.00Δ $84.00

1 flagged · assigned to you · nothing smoothed over

proof

src/components/proof.tsx

Named outcome quotes: the lead quote at display size, two supporting, each beside the figure it claims.

Customers

Numbers other people sign

Three teams, three closes, outcomes they put their names on.

Our close was nine days of spreadsheet archaeology. With Recur it is one afternoon, and the auditors take the statement as-is.

9 days → 1 afternoon

monthly close

Maren Ilves

Finance lead, Standfirst

Recur flagged a cohort going quiet 41 days before the cancellations landed. We called them; most stayed.

Dele Akande

Founder, Loam

41 days

earlier churn warning

The board pack is now an export of the close. Nobody re-derives MRR in a slide the night before.

Sofia Brandt

COO, Tidemark

0

hand-built board slides

product-tour

src/components/product-tour.tsx

Three surfaces in alternating 7/5 splits, wire to match to close, ending in the Δ $0.00 band. Shown without its page lead; /product hands one in.

Wire. Match. Close.

01 · The wire

See money as it moves

Charges, refunds, upgrades and credit notes land within minutes of the processor, normalized across eight sources and fourteen currencies.

The wire · today

  • 14:02invoice 8841 matched$429.00
  • 14:02new subscriber · Growth$49.00
  • 14:05upgrade · Seed → Growth+$49.00
  • 14:07invoice 8842 matched$1,188.00
  • 14:11refund posted$99.00
  • 14:19dunning recovered$147.00

02 · The match

Nothing smoothed over

Every event pairs with its invoice and ledger entry. A row that will not pair is flagged and assigned, so exceptions get owners instead of burial.

Match run 442

Δ $0.00
  • stripe · 1,904 rows0 unmatched
  • paddle · 431 rows0 unmatched
  • manual · 77 rows1 flagged

2,412 of 2,412 invoices matched

03 · The close

A statement, not a spreadsheet

When the delta reads zero the statement publishes: MRR movements, retention, cohorts and forecast, each figure tied to matched invoices.

The close · March statement

  • Opening MRR$121,020
  • New business+$6,640
  • Expansion+$3,610
  • Contraction−$1,180
  • Churn−$1,680
  • Closing MRR$128,410

Δ $0.00

The state your month ends in. Anything else is a flag with an owner.

pricing-plans

src/components/pricing-plans.tsx

A client island: the billing switch does the monthly/annual arithmetic. One meter, three plans, risk reversal at the price.

One meter: MRR tracked

Seed

For a product with its first revenue.

$0forever

  • To $2,500 MRR tracked
  • 1 billing source
  • Daily match runs
  • MRR, movements and churn
  • 2 seats
Start on Seed

Growth

Most teams

For a team that closes every month.

$49/month

  • To $50,000 MRR tracked
  • 4 billing sources
  • Hourly match runs
  • Full metric set, cohorts included
  • 10 seats
  • CSV and Sheets export
Start free for 30 days

Scale

For finance teams with auditors.

$199/month

  • Unlimited MRR tracked
  • 8 billing sources
  • Continuous matching
  • Forecast and API access
  • SSO and unlimited seats
  • Audit-trail export
Start on Scale

30 days of Growth free, no card · cancel any month · export everything, any time

MRR tracked is the meter. Seats never are.

faq

src/components/faq.tsx

Six pricing objections as native details disclosures on a 5/7 split. The +/− swap is instant and shape-based.

Questions

Asked before buying

The six questions every finance lead asks; answers a salesperson would give you anyway.

What counts as MRR tracked?

The closing MRR of your last published statement. Cross a plan boundary and Recur asks before it upgrades you; nothing changes silently.

Is Seed a trial in disguise?

No. Seed is free to $2,500 MRR tracked, one billing source, daily match runs. No card and no time limit.

How does the 30-day trial work?

Every new account gets Growth free for 30 days, no card. When it ends you pick a plan or drop to Seed. Your data stays either way.

What does annual billing change?

You pay ten months for twelve. Cancel any month on monthly billing; annual refunds the unused whole months.

Which sources can Recur read?

Eight: Stripe, Paddle, Chargebee, Lemon Squeezy, App Store, Play Billing, Braintree and manual invoices by CSV or email-in.

Does Recur replace my accountant?

No. It hands them a matched trail instead of a spreadsheet. Every figure in a statement links to the invoices behind it.

case-study

src/components/case-study.tsx

One close told in full at prose measure, figures in a narrow rail, the pull quote signed. Shown without its page lead.

Case study

Standfirst closes in an afternoon

Standfirst sells newsroom analytics to regional publishers. Sixty-one people, London and Tallinn, and revenue arriving three ways: Stripe for self-serve, Chargebee for the annual contracts, and invoices the sales team still sends by hand.

The close took nine days. Finance exported each source to its own spreadsheet, matched rows by eye, and every board pack carried an MRR figure somebody had re-derived the night before. Two of those figures disagreed in the same quarter. The auditors noticed.

Recur read all three feeds on a Tuesday. The first match run finished in 54 minutes and surfaced 17 rows that would not pair; twelve were credit notes booked against the wrong month, five were duplicate manual invoices nobody had caught. Finance cleared the queue by Thursday.

Since then the statement publishes when the delta reads zero. The board pack is an export of the close, the auditors take the trail as-is, and the March figure everyone quotes is the March figure the ledger holds.

“Our close was nine days of spreadsheet archaeology. With Recur it is one afternoon, and the auditors take the statement as-is.”

Maren Ilves

Finance lead, Standfirst

customer-wall

src/components/customer-wall.tsx

The go-live wall: the five companies the wins rail announces, plus the action cell.

Go-lives

Recent closes

What each team runs, and what changed after the first clean match.

  • Standfirst

    newsroom analytics

    close now one afternoon

  • Loam

    sensor platform for growers

    churn flagged 41 days early

  • Tidemark

    marina bookings

    board pack from the close

  • Bellwether Labs

    clinical trial software

    3 sources, one ledger

  • Quartermaster

    fleet maintenance

    first clean close in 2 years

  • Your close next

    30 days of Growth free, no card

    Start the match

signup-panel

src/components/signup-panel.tsx

A client island: validation on submit and as fields are fixed, focus moved to the first bad field, a designed success state, and the what-happens-next rail. Renders its h1 because that is what it does on /signup.

Start free

Start the match.

30 days of Growth free, no card. Free to $2,500 MRR after that.

More sources connect after the first match

Demo form: validation runs, the POST to /api/signups does not. Wire it to your backend in signup-panel.tsx.

cta

src/components/cta.tsx

The closing band: one primary action, cost, risk and effort answered beneath it.

The books happened. Match them.

Connect a billing source and watch the first match run before the coffee is done.

  • Free to $2,500 MRR, then from $49 a month
  • 30 days of Growth free, no card
  • First close in about an hour
  • Export everything, any time

Primitives

The ui/ parts every section is built from, in one frame.

ui/badge · ui/delta · ui/mode-toggle

Most teams1 flaggedΔ $0.00Δ $84.00

ui/logo · ui/section-heading

Recur

The close

Metrics that survive an audit

Every number computed from matched invoices, so the board pack and the books agree.

ui/field · ui/input · ui/select

The invite goes here

Pick the source that bills most of your revenue. More can follow.

ui/eyebrow · ui/type

Subscription analytics

Sizes come from ui/type.ts only: caption 12 · small 14 · body 16 · lead 18 · d1 24 · d2 32 · d3 42.7 · d4 56.9. There is no size between the rungs.

src/components/site-footer.tsx

Brand block, three link columns and the legal row. Every link resolves to a page or an anchor the theme ships. Rendered in place as the page shell.