Figma UI kit · launching mid-November

Calm SaaS dashboards, audit-ready from day one.

Calmdash is a Figma UI kit for subscription products. MRR, churn, cohorts and invoices, designed in light and dark, with contrast checked on every screen.

Calmdash Overview screen: KPI cards for MRR ($84,320), active subscribers (2,148), churn rate (2.4%) and ARPU ($39.25), a monthly recurring revenue chart, revenue by plan and recent invoices.

What's in v1.0

Fewer screens. Real subscription metrics.

Not 500 random screens. A focused kit for the dashboards subscription businesses actually open every morning.

12screens, each in light and dark
~40components with documented states
10chart types for MRR, churn and cohorts
~200Figma variables behind both themes

Subscription screens

Overview, revenue, subscribers, churn & retention, invoices, plans and settings, filled with believable sample data instead of lorem ipsum.

Charts that explain

MRR movements, churn trends, cohort heatmaps and plan mix, with thin lines, clear labels and colours that stay distinct in both themes.

Three-layer tokens

Primitives, semantic, component. No component touches a hex value, so switching theme means switching one variable mode.

The states people forget

Empty, loading and error states for cards and tables, plus failed-payment rows that tell users what to do next.

One file, two themes

Dark mode isn't inverted light mode.

Same tokens, different values per theme, because contrast decides. Indigo leads in light. In dark, the accent switches to cyan, since indigo on near-black only reaches 2.9:1.

Calmdash Overview screen in the light theme. — Northwind Cloud is fictional. Every number in the kit adds up anyway.

Why calm

Calm by default. Audit-ready by design.

I audit dashboards for a living. The same problems show up every time, so Calmdash fixes them before you start.

Contrast you can verify

Text targets at least 5.2:1 in both themes, above the 4.5:1 WCAG 2.2 AA minimum. Every ratio is documented, not guessed.

Status without relying on colour

Badges pair an icon, a label and a reason, so “Failed · card declined” reads clearly even if you can't see red.

Quiet surfaces, loud data

Near-flat cards, hairline borders, tabular numbers and thin chart lines. The metrics carry the page, not the decoration.

Before and after of the Calmdash invoices table. Before: status is a coloured word only, red on white at 3.8:1, and secondary text at 2.5:1. After: a badge with icon, label and reason at 6.1:1, secondary text at 5.96:1, and a Retry payment button in the row. — Before and after: the invoices table, run through my own UX audit checklist. Open full size

About the maker

Hi, I'm Robert, a product designer.

I design B2B products, and Calmdash is the kit I kept wishing I had on client projects: fewer screens, real subscription metrics, and accessibility checked before it ships, not after the audit. I'm building it in public, one design decision per post.

Be first in line on launch day.

Calmdash v1.0 launches mid-November 2026. The waitlist hears first and gets early-bird pricing.