Marketing Site

Public surfaces for a subscription-analytics / SaaS-revenue-metrics platform. Light and editorial: white grounds, pure-black ink, Inter at very tight tracking, warm tan + periwinkle accent panels, deep-navy full-bleed sections, and solid-black buttons. Built on Next.js + Tailwind.

Colors

Black does the heavy lifting for text and buttons. Warm tan and periwinkle are the only true accent colours, used as large soft panels. Deep navy anchors full-bleed sections (FAQ, integrations) and the footer.

Ink & Deep Navy

Ink black

#000000

Deep navy

#192744

Navy alt

#12324B

Surfaces

White (page)

#FFFFFF

Light slate

#F1F5F9

Light slate-blue

#F7FAFD

Accents

Warm tan

#E4D3CB

Tan soft

#E8E4E0

Periwinkle

#D0DBF5

Periwinkle soft

#DADBE9

Text & Borders

Muted slate

#666F88

Caption brown

#69574B

Border slate / focus

#7A87A2

Hairline

#CDD0D7

Typography

Inter (weights 100–900) for everything, arial fallback. The signature move is a constant -0.32px letter-spacing on every role — set it once on the body. Display headlines run heavy (700) with extra negative tracking at large sizes.

H1 / H2 — 64px · 700 · line-height 76.8px · -0.32px

SaaS metrics, finally trustworthy

Lead — 19.2px · 400 · line-height 28px

One source of truth for MRR, ARR, and churn — no matter how complex your billing gets.

H3 / card title — 19.2px · 700 · line-height 23.04px

Works with every way you bill

Body — 16px · 400 · line-height 24px · Caption — 14px · 400

Track investor-grade SaaS metrics — free up to $10K MRR.

Blockquote / testimonial captions use warm brown #69574B.

Role	Size	Line	Weight	Tracking
H1 / H2	`64px`	`76.8px`	`700`	`-0.32px`
H2 compact	`40px`	`48px`	`700`	`-0.32px`
H3 / card title	`19.2px`	`23.04px`	`700`	`-0.32px`
Lead	`19.2px`	`28px`	`400`	`-0.32px`
Body / link / li	`16px`	`24px`	`400`	`-0.32px`
Blockquote	`16px`	`24px`	`400`	`-0.32px`
Small / caption	`14px`	`20px`	`400`	`-0.32px`

Spacing & Layout

Centered wrapper maxing at 1200px. Generous vertical rhythm between sections; the page alternates white, soft-slate, and accent-panel bands.

Token	Value
Wrapper max-width	`1200px`
Container padding (desktop)	`32px`
Container padding (mobile)	`20px`
Section gap (default)	`120px`
Section gap (compact)	`80px`
Nav height	`72px`
Grid gap	`24px`

Radius & Shadows

Buttons use a tight 8px; cards 12px; soft accent panels 16px; pills 32px. Shadows are intentionally faint.

Token	Value	Use
`radius-btn`	8px	Buttons, inputs
`radius-card`	12px	Feature / pricing cards
`radius-panel`	16px	Accent panels
`radius-pill`	32px	Toggles, badges, pill buttons
`shadow-subtle`	`0 0 8px rgba(0,0,0,0.094)`	Raised cards
`shadow-modal`	`0 16px 64px -16px rgba(0,0,0,0.4)`	Modals, cookie banner
`focus-ring`	`2px solid #7A87A2`	Focus + secondary button border

Buttons

Primary is solid black with white text at 8px radius. The large hero variant bumps to 19.2px/700. Secondary is transparent with a 2px slate border. A pill variant (32px) appears on nav and toggles.

/* Primary */
background: #000000; color: #FFFFFF;
border-radius: 8px; padding: 14px 24px; font: 600 16px Inter;
:hover { background: #192744; }

/* Secondary / outline */
background: transparent; color: #000000;
border: 2px solid #7A87A2; border-radius: 8px; font: 700 19.2px Inter;

Accent Panels

Large soft-coloured panels carry editorial sections. Tan reads warm and uses brown captions; periwinkle and light-slate stay cool with muted-slate text.

The benchmark

Warm tan panel — caption text in brown #69574B.

ARR forecasts

Periwinkle panel — used for highlight callouts.

Works with every billing system

Light-slate band for neutral editorial copy.

Feature Cards

White surface, hairline border, 12px radius, faint shadow. Icon tile uses a periwinkle fill. Title 19.2px/700, body 16px muted.

Multiple billing systems

Consolidate the entire subscription journey from free trial to renewal.

Automate with context

Trigger workflows from subscription events to reduce churn.

Unified data layer

One source of truth across tools, products, and data warehouses.

Dark Bands

Full-bleed deep-navy sections break up the light page — used for the integrations band, FAQ, and footer. Text goes white; secondary copy uses muted periwinkle-slate.

Integrates into the modern SaaS stack

Your data lives across tools, products, and data warehouses — unified into one view of your subscription business.

Navigation

A deep-navy announcement banner pins above a transparent nav of 16px black links. Top banner uses 14px white text.

New report: How SaaS businesses are improving conversion in 2026 See report

Product Pricing Resources Company

Tailwind Reference

The paired design-system-website.json ships a tailwind block. Drop it into theme.extend (or @theme for v4) and treat the recipes as required source. Set letter-spacing: -0.32px globally on body.

theme.extend mappings

Ink	Accent	Body Font	Default Radius	Wrapper
`ink.black #000`	`tan #E4D3CB · periwinkle #D0DBF5`	`Inter`	`btn 8px`	`1200px`

Component recipes

Recipe	Class pattern
`buttonPrimary`	`inline-flex items-center justify-center rounded-btn bg-ink-black text-white px-6 py-3.5 text-body font-semibold transition-colors hover:bg-ink-navy`
`buttonSecondary`	`rounded-btn bg-transparent text-fg-primary border-2 border-border-slate px-6 py-3.5 text-lead font-bold hover:border-ink-black`
`featureCard`	`rounded-card bg-surface-white border border-border-hairline p-8 shadow-subtle`
`accentPanelTan`	`rounded-panel bg-accent-tan text-fg-brown p-10`
`darkBand`	`bg-ink-navy text-white py-24`
`navLink`	`text-body text-fg-primary transition-colors hover:opacity-70`
`topBanner`	`bg-ink-navy text-white text-small py-2 text-center`
`billingToggle`	`inline-flex items-center rounded-pill bg-ink-black p-1 text-small`