What is Heap's primary brand color and where does it appear?

Heap's brand voltage is electric mint green at #31d891, wired in CSS as --color-green, --color-bd-btn, --color-hover-bd-btn, and --color-mark-bg. The critical restriction: it appears as a border and marker highlight only, never as a button background fill. The primary CTA button uses it as a 2px border (--bdw-btn: 2px; --color-bd-btn: #31d891) while the body remains ink-black #111111. The mint also appears as a text-mark background (--color-mark-bg) and as link color in its darker form (#31715f). Across the captured page, total mint-green occurrences are 34 — split evenly between text (17) and border (17), zero as background fill.

What typefaces does Heap use and how are they divided?

Heap runs two distinct typefaces with a semantic rather than size-based split. Circular Standard (a geometric sans from Lineto) carries display headings, nav links, section subheadings, and eyebrow labels — everything structural and navigational. Lettera Text (a slightly warmer sans from the same foundry) carries body paragraphs, pull quotes, form labels, and inline emphasis. The hero h1 uses Circular Standard at 72px / weight 400 with -2.16px letter-spacing. Body prose uses Lettera Text at 16-18px / weight 400. The mono stack (SF Mono, Monaco, Inconsolata) appears only in code contexts. Because both families are Lineto proprietary, the closest open-source substitutes are Inter (for Circular Standard) and Source Serif 4 or IBM Plex Serif (for Lettera Text's editorial register).

Why does Heap have a deep-navy band if the site is light-mode only?

The deep-navy section (#100841, wired as --color-bg-dim) appears in exactly one context: the Heap + Contentsquare co-brand acquisition block, which announces the parent company relationship and prompts users toward the combined platform. Outside this single band, the entire page is white (#ffffff) canvas with ink-black text. The navy is not a global dark mode — it is an isolated editorial dark block used to signal a distinct brand relationship. This is a common pattern for acquired products: a contained 'partnership island' in the parent brand's color anchors the narrative transition without committing the page to a full dark-mode palette.

How is Heap's primary button constructed?

The primary button uses --color-bg-btn (transparent/black) as the body fill and --color-bd-btn (#31d891) as a 2px mint border. Text is ink-black #111111 (--color-text-btn). On hover, --color-hover-bg-btn-accent becomes #111111 (the fill darkens to full ink) and --color-hover-text-btn-accent flips to #ffffff (text inverts to white). The border transitions to --color-hover-bd-btn-accent which also becomes #111. This means the button hover state is a full ink fill with white text — essentially the inverse of the resting state. Radius sits at 70px pill on the form CTA and 4px on smaller interactive elements.

Can I use this DESIGN.md to build a product-analytics landing page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Heap's specific moves: ink-black primary CTA with 2px mint border, Circular Standard for all structural typography and Lettera Text for prose, tight 4px card rounding, pure-white canvas with a single isolated deep-navy dark section, and mint green reserved for borders and text marks only. The dual-typeface split is the most distinctive token choice in this system — it creates an editorial register for body copy without the visual weight of an actual serif font. Most AI tools will correctly apply the typeface split if the tokens name the semantic role (body-paragraph vs. nav-link) rather than just font size.

Heap Design System

Heap's marketing design system as a DESIGN.md file — mint green as border voltage, dual typefaces, ink-black CTAs, 16 color tokens, 17 components for React and AI tools.

About Heap DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source heap.io

Analytics & Data
Developer Tools & IDEs

Heap's marketing site makes a counterintuitive choice: the electric mint green that defines the visual identity never fills a button. The primary CTA uses ink-black fill with a 2px mint border, and when mint appears as text it marks a highlight or a link — never a background swatch. Unlike Mixpanel, which commits its product color to every interactive element, or Amplitude, which tints hero bands with its orange, Heap treats the mint as a precision signal: it shows up on borders and underlines to indicate meaning, not decoration.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens built around the ink-black primary, a pure-white canvas, the mint green trio (full saturation, muted, and deep tint), and a deep-navy band color; 13 typography tokens spanning Circular Standard (display, nav, section headings, eyebrow labels) and Lettera Text (body paragraphs, pull quotes, form labels); 5 radius tokens anchored at 4-5px tight; 8 spacing values on a 16-48px scale; and 17 component definitions covering the mint-bordered primary button, the dual-font feature cards, and the Contentsquare co-brand dark block.

Feed this file to Claude or Cursor and it reproduces Heap's specific moves: ink-black primary CTA with mint border instead of a mint fill, weight-400 display at 72px, Circular Standard for everything structural and Lettera Text for every paragraph, tight 4px rounding, and the deep-navy dark section isolated to the acquisition co-brand block. The dual-typeface split is the most transferable pattern — using a geometric sans for navigation and headings while switching to a text-optimized serif-adjacent for prose is a technique that makes body copy feel editorial without requiring a separate font for display.

What makes it distinct

Border-only brand voltagemint green #31d891 appears on button borders and text highlights, never as a fill; the button body stays ink-black #111111
Dual-typeface splitCircular Standard carries display and nav at weight 400; Lettera Text handles body prose and pull quotes; the division is by semantic register, not size
Weight-400 display headingsthe 72px hero h1 runs at weight 400, not 700; Heap signals confidence through scale rather than typographic weight
Deep-navy section island#100841 is the single dark band on the page, used for the Contentsquare co-brand block only
4px tight card radiussmallest radius in the analytics peer group; Mixpanel and Amplitude both use 8px+, Heap runs 4-5px throughout

Live at heap.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

heap.io

Explore Heap

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Heap design system FAQ

Common questions about Heap's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Heap — official site

Heap's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.