Pumice

Typography

← All categories

Heading

h1–h6 headings with aesthetic-appropriate sizing, weight, and line height.

View standalone →

h1 — 3rem / 48px

Build things people love

h2 — 2.25rem / 36px

Why teams choose Pumice

h3 — 1.875rem / 30px

Designing for real people

h4 — 1.5rem / 24px

Getting started with your workspace

h5 — 1.25rem / 20px

Notification preferences

h6 — 1rem / 16px

Section label

Paragraph

Body text with proper line height, measure, and muted secondary variant.

View standalone →

Lead

Pumice is a design library built for how teams actually work — fast, collaborative, and deeply human. It ships complete, opinionated components so you spend less time on pixel math and more time on problems that matter.

Body

Every component in Pumice is designed to feel warm and approachable without sacrificing clarity. The palette leans into earthy tones — soft whites, warm grays, and a bold tomato-coral accent that draws the eye to the actions that matter most. Typography is set in Nunito and DM Sans for a friendly, readable finish at every size.

Muted

Last updated March 12, 2026 · 4 min read · Filed under Design Systems

Caption

All prices shown in USD. Taxes may apply depending on your billing country. See our pricing FAQ for details.

Prose

Long-form content container for articles and blog posts with full typographic rhythm.

View standalone →

The case for calm design in a noisy product landscape

Most software is loud. Every screen competes for attention — badges, banners, tooltips, notifications. Over time, the noise becomes wallpaper and users stop seeing anything at all. Calm design takes a different bet: that restraint is a feature, not a limitation. When you reduce the visual volume, the things that actually matter get heard.

"Good design, when it's done well, becomes invisible. It's only when it's done poorly that we notice it."
— Jared Spool

This doesn't mean boring. Warmth, personality, and delight are entirely compatible with calm. The difference is intention — every visual element should earn its place. If it doesn't guide, inform, or reassure the user, ask whether it should exist at all.

Use whitespace as a design material, not an afterthought
Reserve accent colors for actions, not decoration
Write labels that inform rather than impress

Code Block

Monospaced code display with syntax-highlighted appearance and copy affordance.

View standalone →

formatCurrency.js

/**
 * Format a number as a localized currency string.
 * @param {number} amount - The value to format
 * @param {string} currency - ISO 4217 currency code
 */
function formatCurrency(amount, currency = 'USD') {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
    minimumFractionDigits: 2,
  }).format(amount);
}

// Usage
formatCurrency(4299);  // → "$4,299.00"