Revline Design System

A subscription-analytics / SaaS-revenue-metrics platform with two surfaces: a light editorial marketing site and a data-dense analytics dashboard. Both share Inter at -0.32px tracking, pure-black ink, and a slate / periwinkle / tan / navy palette; the app derives a charting + status scale on top. This combined page documents foundations once, then the website and dashboard components.

Colors

Black for text and buttons; warm tan and periwinkle as soft accent panels; deep navy for full-bleed bands. The dashboard reuses slate + periwinkle as primary chart series and adds green/amber/red status plus a navy retention ramp.

Brand & Surfaces

Ink black

#000000

Deep navy

#192744

Warm tan

#E4D3CB

Periwinkle

#D0DBF5

Light slate

#F1F5F9

Light slate-blue

#F7FAFD

Text & Borders

Muted slate

#666F88

Caption brown

#69574B

Border / focus

#7A87A2

Hairline

#CDD0D7

Dashboard — Status & Cohort Ramp

Positive

#16A34A

Warning

#D97706

Negative

#DC2626

Cohort retention ramp · low → high

Typography

Inter (100–900), arial fallback, with a constant -0.32px letter-spacing on every role. Marketing display runs 64px/700; dashboard KPI values 32px/700 tabular.

Role	Size	Line	Weight	Surface
H1 / H2	`64px`	`76.8px`	`700`	Website
H3 / card title	`19.2px`	`23.04px`	`700`	Website
Lead	`19.2px`	`28px`	`400`	Website
Body	`16px`	`24px`	`400`	Both
Small / caption	`14px`	`20px`	`400`	Both
KPI value	`32px`	`38px`	`700`	App
Table header	`12px` upper	`16px`	`600`	App
Table cell	`14px`	`20px`	`400`	App

Spacing & Radius

Token	Value	Use
Wrapper (web)	`1200px`	Marketing max-width
Sidebar (app)	`248px`	Dashboard nav rail
Section gap (web)	`120px / 80px`	Default / compact
`radius-btn`	8px	Buttons, inputs, controls
`radius-card`	12px	Cards, tables
`radius-panel`	16px	Accent panels
`radius-pill`	32px	Pills, badges, status
`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, drawers

Website Components

Buttons

Solid-black primary at 8px radius; transparent secondary with a 2px slate border; pill variant for nav.

Accent Panels

The benchmark

Warm tan — brown captions.

ARR forecasts

Periwinkle highlight.

Every billing system

Light-slate neutral band.

Feature Cards

Multiple billing systems

From free trial to renewal in one source of truth.

Automate with context

Trigger workflows from subscription events.

Unified data layer

One view across tools and warehouses.

Navigation & Dark Bands

A navy announcement banner pins above a transparent nav of 16px black links. Full-bleed navy bands carry the FAQ, integrations, and footer.

New report: SaaS conversion in 2026 See report

Product Pricing Resources

Integrates into the modern SaaS stack

Unify your subscription data into one view.

App / Dashboard Components

Shared Chrome — Sidebar, Tabs & Filter Toolbar

Sidebar with workspace switcher + grouped nav + bottom usage meter; tabbed report nav under the title; a filter toolbar with date-range pills, granularity, compare, and Configure.

Revenue Subscribers Trials Churn Collections

Archetypes 1, 2 & 6

KPI & Chart Cards

KPI stat cards (label + info, 32px tabular value, delta badge, sparkline, "Updated…" caption) above chart cards (title + toolbar + body + footer). The dashboard landing surface.

Monthly Recurring Revenue

$9.28M ▲ 4.2%

Updated 2h ago

Net MRR Churn

2.1% ▼ 0.6%

Updated 2h ago

Customer LTV

$4,120 ▲ 1.8%

Updated 2h ago

Archetype 3 — Retention

Cohort Heatmap Table

Triangular grid shaded by retention intensity, with a %/count toggle and Export CSV.

Cohort	M0	M1	M2	M3	M4
Jan 2026	100	82	71	63	58
Feb 2026	100	79	68	60	—
Mar 2026	100	84	73	—	—

Archetype 5 — Mix

Donut / Segmented Bar with Legend List

Subs

3,612

Active2,240 62%

Trial434 12%

Past due506 14%

Canceled432 12%

Card$182K 62%

ACH$59K 20%

Invoice$53K 18%

Archetype 7 — Records

Data Table

Sortable uppercase headers, avatar + name/email cell, right-aligned numerics, status pills, row-action menu, pagination footer. No striping. (Segment builder and detail drawer are documented on the dedicated App page.)

Customer	Plan	MRR	LTV	Status	Joined
AK Anna Kovac anna@northwind.io	Enterprise	$1,200	$28,400	Active	8 mo ago
MR Marco Rossi marco@finhub.co	Pro	$320	$6,100	Trial	3 d ago
JD Jamal Dean jamal@loophq.com	Pro	$320	$9,800	Past due	1 yr ago

Status Pills

Active Trial Past due Canceled

Tailwind Reference

The combined design-system.json nests website and app sections, each with its own tailwind.theme.extend and componentRecipes. Drop the relevant block into theme.extend (or @theme for v4) per surface, and set letter-spacing: -0.32px globally.

Website recipes

Recipe	Class pattern
`buttonPrimary`	`rounded-btn bg-ink-black text-white px-6 py-3.5 text-body font-semibold 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`
`accentPanelTan`	`rounded-panel bg-accent-tan text-fg-brown p-10`
`darkBand`	`bg-ink-navy text-white py-24`

App recipes

Recipe	Class pattern
`kpiCard`	`rounded-card bg-bg-surface border border-border-card p-5 shadow-card flex flex-col gap-3`
`chartCard`	`rounded-card bg-bg-surface border border-border-card shadow-card min-h-[320px] flex flex-col`
`dataTable`	`w-full border-collapse rounded-card overflow-hidden border border-border-card`
`statusPillActive`	`inline-flex items-center gap-1.5 rounded-pill bg-status-positiveBg text-status-positive text-caption font-semibold px-2.5 py-0.5`
`cohortCell`	`rounded-cell text-center p-2` (bg from `heat.0…6`)
`drawer`	`fixed right-0 top-0 h-screen w-drawer bg-bg-surface shadow-drawer flex flex-col`