Palette

Warm-ledger palette. Defined as CSS custom properties on :root in themes/donornode/assets/css/main.css. Use the var name in CSS so a future palette refresh is one place.

--paper
#faf5ec
Page background (ivory).

--paper-deep
#f3ebdb
Stats band, code background.

--ink
#16312a
Primary foreground; CTA band; brand dark.

--ink-soft
#3e5950
Muted body text, captions.

--accent
#e25a33
Persimmon accent; CTA fill, logo coin.

--accent-deep
#c44823
Link colour; primary button hover.

--moss
#7fa08c
Soft moss disc, feature icon background.

--gold
#d9a441
h1 italic highlight (55% opacity).

--line
#d8cdb8
Borders, dividers, dotted ledger.

Type scale

Fraunces (display serif, 400–700) for headings, Karla (sans, 400/500/700) for body. Both are responsive via clamp() at h1 and h2.

h1 · Fraunces 600 · clamp(2.6rem, 5.5vw, 4.4rem) · line-height 1.12

A receipt for every gift.

h2 · Fraunces 600 · clamp(1.9rem, 3.4vw, 2.8rem)

Built for small nonprofits.

h3 · Fraunces 600 · 1.25rem

Recurring giving, done right.

.kicker · Karla 700 · 0.8rem · uppercase · letter-spacing 0.14em · accent-deep

Why donors stay

.lede · Karla 400 · 1.25rem · ink-soft · max-width 34rem

Fundraising infrastructure for small nonprofits — donation pages, recurring giving, automatic receipts. Your Stripe, your money.

body p · Karla 400 · 1.0625rem · line-height 1.65

DonorNode is the fundraising stack we wished we had when we ran a small charity ourselves. Donation pages that read like ledgers, monthly giving that survives Stripe quirks, and receipts that look like receipts — not marketing.

.stat-value · Fraunces 600 · 1.9rem · accent-deep & .stat-label · Karla 600 · 0.85rem · uppercase · letter-spacing 0.05em · ink-soft

$1.2M Raised since launch

small · 0.85rem · ink-soft (captions, fine print)

Stripe processes the payment; DonorNode never touches your money.

Logo

Mark is a coin dropping into a leaf-cup. Wordmark sets DonorNode in Fraunces 600 at 21px. Source SVGs live in static/brand/.

Wordmark · brand/logo.svg

Mark · brand/mark.svg
36×36 viewBox, centered for circular crops.

On dark · _partials/logo.html

Favicon · static/favicon.svg

Safe inscribed-circle radius. In the 36×36 mark canvas the farthest mark point is ≈16.46 units from centre; the inscribed circle radius is 18. Profile-pic crops have ~1.5 units of buffer. Keep the centered translate(3 2.25) intact.

Buttons

Pill-shaped buttons (border-radius: 999px) with the offset shadow on hover. Four styles + .btn-lg modifier.

.btn-primary Talk to us Bigger CTA

.btn-ghost Read the docs Bigger ghost

.btn-paper (on ink) Inverse CTA

Component patterns

.feature-card

Icon (moss-bg circle) · h3 · short paragraph. Used in the home page features grid.

Automatic receipts

Every donor gets a clean, branded receipt the moment they give — no manual exports, no spreadsheet wrangling.

.stats / .stats-row

Horizontal flex row with .stat-value + .stat-label pairs.

$1.2MRaised since launch

183Nonprofits served

99.97%Webhook uptime

.section-title (ledger-dots motif)

Heading + auto-extending dotted line. The dotted line is the brand's visual signature.

What ships today

.cta-band

Full-width ink-background band with moss radial overlay and a .btn-paper CTA. Use sparingly.

Ready to ship your donate page?

Spin up a hosted donation site in an afternoon.

Get started

.prose blockquote & code

Inside .prose wrappers: italic quote with left accent border; inline code on paper-deep.

We swapped four tools for one — donate page, recurring engine, and receipts — and our donors barely noticed except that giving got easier.

Pass --task stripe_rate_auto_detect to the jobs runner to trigger the nightly sweep manually.

Links

Default anchor colour is --accent-deep. Nav links underline-on-hover with a 2px accent border-bottom.

This is a paragraph with an inline link in body context. Nav links live in the header partial.

Icons

Inline stroke-based SVG set, keyed by name. Render via {{ partial "icon.html" "heart" }}.

heart

receipt

repeat

shield

chart

plug

Spacing & container

One container width: --wrap: 70rem (1120px) centred with padding-inline: 1.5rem. No global numeric spacing scale — each section sets its own padding from the rhythm below.

1.5rem · inline gutter (.wrap padding)

1.6rem · .stats vertical padding

3rem · .steps top padding · .feature-grid gap baseline

4.5rem · .cta-band block padding · .page-head top

5rem · .features & .steps block padding · .prose bottom

5.5rem · .hero top padding

Mobile breakpoint: single @media (max-width: 860px) rule in main.css collapses the hero grid + footer grid + flips the nav into a burger. Use that breakpoint consistently in new sections.