Heap Design System

Overview

Heap's marketing page runs a two-typeface system where the division follows semantic register rather than type size — a choice that positions the brand as editorial rather than purely technical. Typeface as register split. Circular Standard (a geometric sans from Lineto) handles everything structural: display headings, nav links, section subheadings, eyebrow labels in uppercase. Lettera Text (a slightly warmer companion from the same foundry) handles everything expressive: body paragraphs, pull quotes, form labels. The system never mixes them at the same hierarchical level. Where Mixpanel uses a single typeface throughout, and Amplitude uses a geometric for all tiers, Heap achieves tonal depth through font-family switching rather than weight switching.

The brand voltage is mint green (#31d891) — and it never fills a button. The primary CTA carries a 2px mint border on an ink-black body with ink-black text; hover inverts the body to full ink with white text. The mint appears on borders and text marks. This is the opposite of how most analytics brands handle their voltage (Mixpanel uses purple fills on CTAs, Amplitude uses orange backgrounds) — Heap treats the mint as a structural annotation, not a paint bucket.

Key Characteristics:

• Mint green ({colors.primary} — #31d891) used as border and text-highlight only; ink-black fills the primary CTA body.
• 72px Circular Standard hero h1 at weight 400 with -2.16px letter-spacing — the heaviest display moment uses no extra weight.
• Two-family split: Circular Standard for structure, Lettera Text for prose — divided by semantic role, not type size.
• Pure-white canvas with a single deep-navy dark band (#100841) anchoring the Contentsquare co-brand section.
• Tight 4px card radius across feature modules — the tightest in the analytics peer group.
• Uppercase eyebrow labels at 18px / 700 / 1.8px letter-spacing — Circular Standard in its most compressed form.
• No shadow system; elevation comes entirely from 2px {colors.hairline} borders.

Colors

Brand Greens

• Primary ({colors.primary} — #31d891): frequency 34. Used as text (17), border (17), bg (0). The mint is exclusively structural — border voltage and text highlight, never a background. Wired as --color-green, --color-bd-btn, --color-mark-bg.
• Primary Muted ({colors.primary-muted} — #31a679): frequency 4. Used as text (2), border (2). Mid-tone of the mint family — secondary link states and inline emphasis.
• Primary Dark ({colors.primary-dark} — #31715f): frequency 5. Used as text (3), border (2). The link color for standard body links (--color-link) and success text (--color-text-success).
• Primary Link Hover ({colors.primary-link-hover} — #1b4438): frequency 0. The deep forest-green hover state for links (--color-link-hover).

Ink & Canvas

• Ink ({colors.ink} — #111111): frequency 719. Used as text (363), border (356). The dominant color on the page — every headline, nav link, body paragraph, card border, and primary button fill. Wired across 11 CSS variables including --color-text, --color-dark, --color-accent, --color-bd.
• Canvas ({colors.canvas} — #ffffff): frequency 391. Used as text (187), bg (15), border (187), gradient (2). The page floor and the inverse-text color on dark surfaces. The extraction merged near-white variants into this token; inputs render the faintest tonal offset against the page floor.

Dark Surface

• Surface Dim ({colors.surface-dim} — #100841): frequency 9. Used as background (5), text (2), border (2). The deep-navy band for the Contentsquare acquisition section only — the one dark island on the page. Wired as --color-bg-dim.

Hairlines

• Hairline ({colors.hairline} — #dfdfdf): frequency 7. Used as border (7). The standard card border (--color-list-bd). All feature-section separators use this tone.
• Hairline Muted ({colors.hairline-muted} — #c4c9ce): frequency 0. Declared as --color-bd-dim for disabled or secondary border states.

Text Mutes

• Ink Muted ({colors.ink-muted} — #4f525d): frequency 2. Used as text (1), border (1). Mid-level secondary text for supporting captions.
• Ink Dim ({colors.ink-dim} — #868c95): frequency 1. Used as text (1). The dimmest text tone (--color-text-dim). Input placeholder text and meta labels.
• Placeholder ({colors.placeholder} — #6b707a): frequency 0. Declared as --color-placeholder-txt for form inputs.

Status

• Error ({colors.error} — #df0134): frequency 0. Declared as --color-text-critical for critical error states.
• Error Dark ({colors.error-dark} — #a80125): frequency 0. Declared as --color-text-error for error text.

Typography

Font Families

The system runs two proprietary typefaces from Lineto. Circular Standard (--ff-sans-display) covers the display and navigation register: headlines, nav items, section subheadings, eyebrow labels. Lettera Text (--ff-sans) covers the prose register: body paragraphs, pull quotes, form labels, captions. The two families share a similar x-height and weight range, so they mix at adjacent sizes without clashing, but Circular Standard's geometric construction reads as structured while Lettera Text's slight warmth reads as editorial. The mono stack (--ff-mono: SF Mono, Monaco, Inconsolata, Fira Mono, Source Code Pro) appears in code contexts only.

Hierarchy

Principles

Circular Standard carries the structural skeleton at weight 400 throughout — only the eyebrow label goes to 700. The display hierarchy is achieved through size and letter-spacing, not weight: the 72px hero at -2.16px reads as dominant through geometry alone. Lettera Text mirrors this restraint: pull quotes go to 700, everything else stays 400.

Note on Font Substitutes

Both Circular Standard and Lettera Text are Lineto proprietary faces. For Circular Standard, Inter or DM Sans are the closest open-source geometric substitutes; for Lettera Text's editorial warmth, Plus Jakarta Sans carries a similar character. Preserve the negative letter-spacing values — they are critical to the heading's personality.

Layout

Spacing System

• Base module: 16px, with 48px as the section-level dominant (21 occurrences).
• Tokens: {spacing.xs} 16px · {spacing.sm} 20px · {spacing.md} 24px · {spacing.base} 32px · {spacing.lg} 40px · {spacing.xl} 48px · {spacing.2xl} 96px.
• Section padding (vertical): 96px (--space-outer-v) for major section breaks; 48px (--space-gutter-v) for internal section padding.
• Card internal padding: 32px ({spacing.base}) on feature cards; 24px on smaller metric tiles.
• Nav height: 70px (--nav-height: 4.375rem).

Grid & Container

• Max content width: 83.75rem / ~1340px (--maw).
• 12-column grid: --grid: repeat(12, minmax(10px, 1fr)) — standard editorial grid.
• Feature section: alternating left/right two-column layouts with product UI screenshots on one side and prose on the other.
• Metric strip: 4-stat horizontal row using {typography.display-md} for numbers.

Rhythm

The page is a pure-white editorial surface that breaks exactly once — the Contentsquare dark band. Every other section change is signaled by vertical spacing only (96px gaps) rather than background color. The dark band acts as a single strong punctuation mark: one tonal island in a long white editorial document.

Elevation

The system has no shadow tokens. Depth comes from two signals only:

• 2px ink-black border ({colors.hairline} and a 2px-wide {colors.ink} edge in some contexts): the dominant edge definition across cards and buttons. Not a hairline at 0.5px — the 2px border is deliberately visible.
• Tonal surface shift: the white canvas vs. very lightly tinted inputs creates a subtle depth in form contexts — the input background is a near-white shade clustered into {colors.canvas} by the extractor.

Heap's mint-bordered buttons are not elevation signals — they are interaction markers. The absence of shadow keeps the page flat and editorial, consistent with a data-analytics product that trusts its charts to provide visual complexity.

Shapes

The radius scale is tight-tight: 4-5px for nearly everything, with a single pill for CTAs:

• {rounded.none} 0px — section dividers and flush image panels.
• {rounded.xs} 4px (--bdrs-s: 0.3125rem) — inputs, small chips, form elements. 9 instances — the dominant radius.
• {rounded.sm} 5px — secondary form element rounding.
• {rounded.md} 10px (--bdrs: 0.625rem) — feature cards and panels. 6 instances.
• {rounded.lg} 16px — larger feature panels and the Contentsquare dark block.
• {rounded.pill} 70px (--bdrs-l: 1.25rem) — the primary CTA button and rounded action chips.

The 4px-dominant scale is the tightest in the analytics-tools peer group. Mixpanel and Amplitude both default to 8-12px; Heap's tight radius gives form elements and cards a data-table precision.

Components

button-primary — Ink-black {colors.ink} fill, white text, 2px {colors.primary} mint border, {rounded.pill} 70px radius, 11.4x24 padding, 44px height. The mint border is the only place brand green appears on an interactive element.

button-primary-hover — Same ink fill, white text, 2px ink border (the mint transitions away on hover). Hover makes the button fully monochrome — the color signal disappears on engagement.

button-secondary — Transparent fill, ink text, 2px {colors.primary} mint border. Used for secondary CTAs — the mint border does double duty as both brand accent and interactive affordance.

top-nav — White canvas background, 70px height, 0x48 padding. Ink-black nav links at {typography.nav-link} (16px / 400). A 2px bottom border in hairline separates it from the hero.

hero-heading — Transparent background, ink-black text, {typography.display-xl} (72px / 400 / -2.16px tracking). The weight-400 constraint at 72px is the single most distinctive token in the system.

section-heading — Ink-black text, {typography.heading-lg} (32px / 400 / -0.96px). Used for "Complete data, automatically," "Spot hidden opportunities," "See problems in action."

eyebrow-label — Transparent background, ink-black text, {typography.eyebrow} (18px / 700 / 1.8px letter-spacing, uppercase). The uppercase-with-tracking style is the visual key for section openers.

card — White fill, ink-black text, {rounded.md} 10px radius, 32px padding, 2px {colors.hairline} border. Feature content cards throughout the capability sections.

dark-band — Deep-navy {colors.surface-dim} fill, white text, 48x32 padding. Used exclusively for the Heap + Contentsquare acquisition announcement section.

text-input — White fill, ink-black text, {rounded.xs} 4px radius, 2x10 padding, 32px height, 1px hairline border.

highlight-mark — Mint-green {colors.primary} fill, ink-black text, {rounded.none}, 2x4 padding. Used inline as a text marker (the --color-mark-bg usage).

pull-quote-block — Transparent background, {typography.pull-quote} (20px / Lettera Text / 700). Used for testimonial excerpts and statistical callouts.

footer — Ink-black {colors.ink} fill, white text, 48x32 padding. The footer inverts the page — dark fill mirrors the Contentsquare band color family.

Do's and Don'ts

Do keep the primary button body ink-black with a mint border. The 2px mint border is carrying the entire brand identity for the button — removing it to use a mint-fill instead breaks the signal pattern the page establishes. If you need a stronger CTA emphasis, increase the border to 3px; don't switch to a mint fill.

Do use Circular Standard for display headings and nav, Lettera Text for body prose. The font-family switch at the heading/body boundary is the system's editorial register signal. Mixing — using Circular Standard for body, or Lettera Text for headings — collapses the distinction.

Do keep display heading weight at 400 even at 72px. The scale communicates hierarchy, not the weight. Adding bold (700) to the hero h1 converts it from an editorial opening to a typical SaaS shout.

Do reserve the dark-navy {colors.surface-dim} for exactly one section. The deep-navy band works because it is the single tonal break in a long white page. Using it for multiple sections removes its punctuation function.

Don't use {colors.primary} (#31d891) as a button background fill. The mint is structurally wired as a border-only token (--color-bd-btn, --color-mark-bg) — it appears 17 times as border and 17 times as text mark, zero times as background fill. A mint button fill would look like a data visualization color accidentally applied to UI.

Don't apply the -2.16px letter-spacing below 48px. The tight tracking is calibrated for the 72px hero; at 24px it makes text illegible. Below 32px, letter-spacing should be at 0 or lightly negative (no tighter than -0.5px).

Don't add box shadows to cards. The system has no shadow tokens — elevation comes from the 2px hairline border alone. Adding shadows creates a visual depth model that contradicts the flat-editorial page aesthetic.

Don't use {colors.ink-dim} (#868c95) for secondary headings. It appears once on the page as a declared variable for placeholder text. For secondary text, use {colors.primary-dark} (#31715f) when green tint is appropriate, or {colors.ink-muted} (#4f525d) for neutral secondary text.

Known Gaps

• Mobile typography scale: the extracted CSS includes responsive font-size variables (--fz-headline-100 through -600 in rem units) but no captured breakpoint values; the mobile type scale is not represented.
• Dark mode: the page is light-mode only on the marketing surface; the product app likely carries a dark theme not captured here.
• Button animation: the --trs transition token (all 0.3s ease-in-out) is declared but the full hover-state motion matrix is not captured.
• Form validation states: error and warning colors are declared in CSS variables (--color-text-critical, --color-text-warning) but not visible on the marketing surface; error inputs and form feedback UI are not represented.
• Product UI screenshots: the feature sections include product UI screenshots with their own color system (dashboards, funnels, journey maps) that is not captured in this marketing-surface extraction.
• Acquisition-era tokens: some CSS variables may reflect Contentsquare's design system; the boundary between original Heap tokens and Contentsquare-merged tokens is not determinable from the marketing surface alone.