What is Heroku's primary brand color?

The extraction reveals a brand in transition. Heroku's historical violet (#5a1ba9, wired as the theme color) appears only 18 times on the captured marketing page — 5 as text, 6 as background, 5 as border, 2 in gradients. Salesforce brand blue (#0176d3) appears 151 times and powers every primary interactive element including the main CTA button. The dominant ink color is near-black #181818 at 870 appearances. The deep violet tones (#240643, #300b60, #300b60) appear hundreds of times as structural text and border colors — the hero's dark canvas — but are not branded as primary. The honest answer: Heroku's current primary interactive color is Salesforce blue, while its visual identity heritage lives in the dark violet canvas tones.

What typefaces does Heroku use, and what should I use as a substitute?

Heroku runs two Salesforce-family typefaces. Avant Garde carries every heading from h2 to h3 — section headings at 32-40px / weight 600, card headings at 24px / weight 600 or 700. Salesforce Sans carries every body paragraph, nav link, button label, and UI string — 16px body at weight 400, 16px nav at weight 700, 12px uppercase labels at weight 700 with 0.6-1.5px letter-spacing. BentonSans appears sparingly (9+ count) for certain body paragraphs, likely inherited from an older layer of the design. For substitutes: Futura or ITC Avant Garde Gothic approximate Avant Garde's high circular counters at heading size. Inter or Salesforce's open-source equivalent approximates Salesforce Sans for body. The uppercase tracking labels (12px / 700 / uppercase / 0.6px spacing) are the most distinctive pattern to preserve.

What colors make up Heroku's dark hero section?

Heroku's above-fold hero runs on a layered dark-violet gradient using four structural colors: #240643 (deep near-black violet, 106 uses), #300b60 (deep violet, 86 uses including 2 gradient stops), #032d60 (deep navy, 58 uses), and #211746 (dark indigo, 18 uses). These form a gradient that sweeps from deep navy-purple through violet-black. Below the hero the page inverts to white (#ffffff) with near-black #181818 text. The gradient canvas is the most vivid reminder of Heroku's pre-Salesforce visual identity — none of these dark violet tones appear in Salesforce's own brand guidelines, and they predate the acquisition.

What corner-radius approach does Heroku use?

The radius scale is aggressively compressed: 4px appears 35 times and dominates every component — buttons, cards, inputs, and chips all use 4px. A rare 3px appears once, and 5px appears once for minor variants. Percentage-based radii (10% and 50%) appear for avatar images and circular icon buttons. There is no 8px, 12px, or 16px step. This is the tightest radius system in the cloud-hosting category — sharper than Render (which uses 0px but has a full-pill contrast) and far sharper than Railway or Netlify. The 4px-only scale gives every surface a controlled, enterprise-adjacent feel consistent with the Salesforce brand standards Heroku now operates under.

Can I use this DESIGN.md to build a legacy PaaS marketing site?

Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Heroku's specific moves: dark violet-to-near-black hero gradient using the deep purple tones, Salesforce blue primary CTA, Avant Garde geometric display at weight 600 for section headings, Salesforce Sans body and labels at 16px, 4px universal corner radius, and uppercase tracking labels at 12px / 700. Every hex, font name, radius, and padding value is a quoted scalar. The most transferable structural pattern is the dark-canvas-above / white-below layout split — a proven marketing conversion pattern in the PaaS category that Heroku essentially invented.

Heroku Design System

Heroku's marketing-site design system: Avant Garde at 40px for section headings, Salesforce Sans body, Salesforce brand-blue CTA on a dark-violet hero.

About Heroku DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source heroku.com

Web Infrastructure & Hosting

Heroku's marketing site is a study in brand inheritance tension. Above the fold, a dark violet-to-near-black canvas carries the ghost of Heroku's original pre-2010 purple identity — deep gradients layering #240643, #300b60, and #032d60 — while the primary CTA button is Salesforce brand blue #0176d3. The hero heading runs Avant Garde at 40px / weight 600, a geometric sans with high circular counters that reads nothing like Salesforce's own Salesforce Sans body copy below it. The system sits at the intersection of two brand identities: the PaaS builder culture Heroku invented, and the enterprise-SaaS structure Salesforce imposed.

The DESIGN.md file captures 14 color tokens from a palette dominated by structural dark-purple tones and the Salesforce blue. The brand-layer color is the original Heroku violet (#5a1ba9) with a total frequency of 18 — present but not dominant, used for buttons and gradient accents rather than as the canvas floor. Near-black ink #181818 appears 870 times as the dominant text and border color; Salesforce blue #0176d3 drives all interactive elements. Typography splits between Avant Garde (headings from h2 to h3 at 24-40px / weight 600) and Salesforce Sans (body, nav, labels, buttons — the workhorse of the page). The radius scale compresses everything into a single 4px step, with rare 5px and occasional percentage radii for avatar circles.

Feed this file to an AI tool and it will reproduce Heroku's specific moves: the dark-violet hero on a white-below-fold layout, the Avant Garde geometric display at 600-weight, the Salesforce-blue CTA that overrides the purple heritage, and the 4px universal rounding that tightens every UI surface. The most revealing detail in the extraction is what's absent: Heroku's original purple (#5a1ba9) appears only 18 times, while its parent's blue (#0176d3) appears 151 times — the numbers tell the story of a brand mid-transition.

What makes it distinct

Dual Salesforce heritage typefacesAvant Garde for headings and Salesforce Sans for body, both part of the Salesforce brand family that now owns Heroku
Dark violet hero canvasthe above-fold section runs on a deep near-black violet gradient, a nod to Heroku's pre-Salesforce purple identity
Salesforce blue CTAthe primary button uses Salesforce brand blue (#0176d3), not Heroku's historical purple, signaling the brand alignment with its parent
4px universal radiusalmost every component on the page uses a single 4px corner radius, the most conservative rounding tier in the cloud-hosting category
Uppercase tracking labelsSalesforce Sans at 12px with 0.6-1.5px letter-spacing and uppercase transforms power every category chip, creating a rigid editorial grid

Live at heroku.com

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

heroku.com

Explore Heroku

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.

Other

Specialty colors.

Heroku design system FAQ

Common questions about Heroku'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.

Heroku — official site

Heroku'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.