---
version: alpha
name: "Heroku"
website: "https://www.heroku.com"
description: >-
  A legacy PaaS brand (Salesforce-owned since 2010) whose marketing site runs dual proprietary typefaces — Avant Garde for display headings and Salesforce Sans for body — against a deep-violet-to-black canvas in the hero, inverting to white below the fold. The Salesforce brand blue anchors the primary CTA, while a restrained violet (Heroku's historical identity color) appears in gradients and hero depths. The overall palette sits between its Salesforce parent's corporate blue-white and its own original purple heritage, with Avant Garde's geometric geometry providing the most visually distinctive typographic move.

seo:
  title: "Heroku Design System for React — Salesforce blue CTA, Avant Garde display, 14 components"
  metaDescription: "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. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Dual Salesforce heritage typefaces — Avant Garde for headings and Salesforce Sans for body, both part of the Salesforce brand family that now owns Heroku"
    - "Dark violet hero canvas — the above-fold section runs on a deep near-black violet gradient, a nod to Heroku's pre-Salesforce purple identity"
    - "Salesforce blue CTA — the primary button uses Salesforce brand blue (#0176d3), not Heroku's historical purple, signaling the brand alignment with its parent"
    - "4px universal radius — almost every component on the page uses a single 4px corner radius, the most conservative rounding tier in the cloud-hosting category"
    - "Uppercase tracking labels — Salesforce Sans at 12px with 0.6-1.5px letter-spacing and uppercase transforms power every category chip, creating a rigid editorial grid"
  tags:
    - "Web Infrastructure & Hosting"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.heroku.com"
      title: "Heroku — official site"
      description: "Heroku's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Heroku's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does Heroku use, and what should I use as a substitute?"
      answer: "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."
    - id: "dark-hero-canvas"
      title: "What colors make up Heroku's dark hero section?"
      answer: "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."
    - id: "corner-radius"
      title: "What corner-radius approach does Heroku use?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a legacy PaaS marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#5a1ba9"
  secondary: "#0176d3"
  ink: "#181818"
  ink-medium: "#333d47"
  ink-light: "#211746"
  canvas: "#ffffff"
  surface-1: "#eef1f6"
  hairline: "#dddddd"
  hero-deep: "#240643"
  hero-violet: "#300b60"
  hero-navy: "#032d60"
  ink-dark-purple: "#333d47"

typography:
  display-xl:
    fontFamily: "\"Avant Garde\", Arial, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: "normal"
  display-lg:
    fontFamily: "\"Avant Garde\", Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: "normal"
  heading-md:
    fontFamily: "\"Avant Garde\", Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: "normal"
  heading-sm:
    fontFamily: "\"Avant Garde\", Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: "normal"
  body-lg:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: "normal"
  body-md:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
    letterSpacing: "normal"
  body-sm:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: "0.25px"
  label-md:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: "0.6px"
  label-sm:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 19.2px
    letterSpacing: "1.5px"
  nav-link:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: "normal"
  button-md:
    fontFamily: "\"Salesforce Sans\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "-0.032px"

rounded:
  none: "0px"
  sm: "3px"
  md: "4px"
  lg: "5px"
  full: "50%"

spacing:
  xs: "2px"
  sm: "10px"
  md: "15px"
  base: "30px"
  lg: "24px"
  xl: "60px"
  2xl: "75px"

components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
    height: "52px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
    height: "52px"
    borderColor: "{colors.secondary}"
  top-nav:
    backgroundColor: "{colors.hero-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "0px 30px"
    height: "98px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "35px 15px"
    height: "98px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.hero-violet}"
    typography: "{typography.display-lg}"
    padding: "0px"
  card-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  label-tag:
    backgroundColor: "transparent"
    textColor: "{colors.ink-medium}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "2px 0px"
  hero-label:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.label-sm}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "30px"
    borderColor: "{colors.hairline}"
  surface-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "15px 20px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
    height: "52px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.hero-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    padding: "60px 0px"
---

## Overview

Heroku's marketing site carries the visible weight of two brand identities occupying the same page. **Inherited Violet, Imposed Blue.** The hero canvas runs on deep violet gradients that belong to Heroku's pre-Salesforce identity, while every interactive element — primary CTA, links, form controls — renders in Salesforce brand blue #0176d3. The display typeface is Avant Garde, a geometric sans-serif with conspicuously circular counters that reads more like a 1970s magazine font than either Heroku's developer culture or Salesforce's enterprise CRM aesthetic. The combination is historically layered in a way that competing cloud platforms like Render or Railway, which were designed from scratch, are not.

The system's typography is a dual-voice structure: Avant Garde carries section headings at weight 600 with its signature circular geometry; Salesforce Sans carries everything else at moderate weights with tight letter-spacing on labels. A 4px universal radius locks every component into the same conservative rounding tier — buttons, cards, inputs, and chips all share the 4px step, with no larger or smaller option in the main component set.

**Key Characteristics:**
- Dark violet hero gradient built from deep structural tones (#240643, #300b60, #032d60) — a heritage reference to Heroku's pre-Salesforce purple identity.
- Salesforce brand blue (#0176d3, 151 appearances) drives all interactive elements; Heroku's own violet (#5a1ba9) appears only 18 times in the captured page.
- Avant Garde at 32-40px / weight 600 carries section headings — a geometric sans with circular counters that is entirely distinct from Salesforce's standard brand typefaces.
- Salesforce Sans at 16px / weight 400 handles all body copy; at 20px / weight 700 handles nav links; at 12px / weight 700 with 0.6-1.5px letter-spacing handles uppercase category labels.
- Universal 4px corner radius on every component except avatar images (50%) — the tightest consistent rounding in the cloud-PaaS category.
- Page layout splits: dark violet above-fold hero, white body below the fold — a proven conversion pattern that Heroku popularized in the 2012-2014 era.
- BentonSans appears for some body paragraphs (count: 9-5), a trace element from earlier design iterations.

## Colors

### Brand

- **Heroku Violet** (`{colors.primary}` — #5a1ba9): frequency 18. Used as text (5), bg (6), border (5), gradient (2). Heroku's heritage brand color, wired as the meta theme-color. Appears sparingly — gradient accents and occasional secondary interactive elements — not the primary CTA driver.
- **Salesforce Blue** (`{colors.secondary}` — #0176d3): frequency 151. Used as text (72), bg (8), border (71). The dominant interactive color; powers the primary button, all text links, nav hover states, and form controls. Wired at this hex directly (no CSS variable name captured).

### Hero Canvas

- **Hero Deep** (`{colors.hero-deep}` — #240643): frequency 106. Used as text (53), border (53). The deepest violet in the gradient stack; appears as the dominant foreground and border color on the dark hero canvas.
- **Hero Violet** (`{colors.hero-violet}` — #300b60): frequency 86. Used as text (42), border (42), gradient (2). Mid-layer of the dark hero gradient; also used as section heading color below the fold.
- **Hero Navy** (`{colors.hero-navy}` — #032d60): frequency 58. Used as text (29), border (29). The navy-blue depth in the hero gradient, providing the blue-shifted shadow of the violet palette.

### Ink & Surface

- **Ink** (`{colors.ink}` — #181818): frequency 870. Used as text (436), border (434). The dominant text and border color across the white-canvas body sections — a near-black with zero chromatic offset.
- **Ink Medium** (`{colors.ink-medium}` — #333d47): frequency 232. Used as text (116), border (116). Secondary text and sub-label color with a subtle slate-blue shift.
- **Ink Light** (`{colors.ink-light}` — #211746): frequency 18. Used as text (9), border (9). Dark indigo, used for deep-contrast text within dark sections.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 75. Used as text (35), bg (13), border (27). Page background below the fold; also the hero CTA button text.
- **Surface 1** (`{colors.surface-1}` — #eef1f6): frequency 3. Used as bg (2), border (1). Light blue-gray surface for alternating content cards.

### Hairlines

- **Hairline** (`{colors.hairline}` — #dddddd): frequency 9. Used as border (9). The divider color for card edges and input field outlines.

## Typography

### Font Families

The system runs **Avant Garde** for every heading level (h2 and h3, at 24-40px / weight 600-700) and **Salesforce Sans** for every body, button, label, and nav element. **BentonSans** appears as a tertiary family on some body paragraphs and divs, likely a legacy remnant from an earlier design iteration.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 40px | 600 | 48px | Hero h1 / top section heading |
| `{typography.display-lg}` | 32px | 600 | 40px | Section h2 |
| `{typography.heading-md}` | 24px | 600 | 32px | Card heading h3 |
| `{typography.heading-sm}` | 24px | 700 | 32px | Bold card heading variant |
| `{typography.body-lg}` | 20px | 400 | 30px | Lead paragraph / hero body |
| `{typography.body-md}` | 16px | 400 | 25.6px | Default body text |
| `{typography.body-sm}` | 14px | 400 | 14px | Small UI copy / footnotes |
| `{typography.label-md}` | 12px | 700 | 18px | Category label (0.6px tracking) |
| `{typography.label-sm}` | 12px | 700 | 19.2px | Uppercase label (1.5px tracking) |
| `{typography.nav-link}` | 20px | 700 | 28px | Top navigation links |
| `{typography.button-md}` | 16px | 700 | 24px | Button label (-0.032px tracking) |

### Principles

Avant Garde's weight ceiling is 700 in card headings only; the primary display tier sits at 600. The most distinctive typographic pattern is the 12px uppercase label with 0.6-1.5px letter-spacing — a strict category-chip format that runs throughout the page as "PLATFORM", "RUNTIME", "AI", "SECURITY". Salesforce Sans at 20px / 700 for navigation links is unusually large; most PaaS sites use 14-16px nav links.

### Note on Font Substitutes

Both Avant Garde and Salesforce Sans are proprietary. **Futura** or **ITC Avant Garde Gothic** approximate Avant Garde's circular geometric counters at display size. **Inter** or **Nunito** at the same weights approximates Salesforce Sans for body and label copy. The uppercase-tracking-label pattern (12px / 700 / 0.6px or 1.5px spacing / all-caps) is system-defining and should be preserved in any adaptation.

## Layout

### Spacing System

- **Base unit:** 10-15px (with 30px as the dominant section module).
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 10px · `{spacing.md}` 15px · `{spacing.base}` 30px · `{spacing.lg}` 24px · `{spacing.xl}` 60px · `{spacing.2xl}` 75px.
- **Button padding:** 12px vertical × 32px horizontal — compact height (52px) with generous horizontal breathing room.
- **Section padding:** 75px × 50px for large section containers; 30px × 60px for standard bands.
- **Nav padding:** 35px × 15px per link, producing the 98px navigation height.

### Grid & Container

- **Hero:** full-width dark violet canvas carrying the headline, sub-paragraph, and primary CTA button.
- **Body sections:** white canvas with alternating feature blocks, typically a text-left / visual-right layout.
- **Card grid:** 2-3 column grids at desktop for feature and product cards, 30px internal padding.
- **Container:** ~1200px max content width for hero and body sections.

### Rhythm

The page alternates between dark violet (hero) and white (body) — a structural contrast that has been Heroku's layout signature since approximately 2012. Section gaps use 75px vertical padding at major breaks, 30px at internal card spacing. The overall rhythm feels denser than Render or Cloudflare, with more content packed per scroll unit.

## Elevation

The system has a **minimal shadow tier** — near-zero. On the dark hero, no shadows are needed. On the white body canvas, card edges use 1px `{colors.hairline}` borders at #dddddd. A single shadow reference to true black (frequency 2) appears in the extraction, suggesting an occasional very-light drop shadow on specific elements.

- **Flat (no shadow):** hero sections, footer, and most body cards.
- **Hairline border:** `{colors.hairline}` (#dddddd) 1px border on content cards and inputs.
- **Surface lift:** `{colors.surface-1}` (#eef1f6) cards sit on the white canvas for a subtle light-teal-gray lift.

## Shapes

The radius scale is **nearly monolithic at 4px**:

- `{rounded.none}` 0px — appears only on certain hero text elements.
- `{rounded.sm}` 3px — one instance, minor variant.
- `{rounded.md}` 4px — the universal radius: buttons, cards, inputs, chips, form elements.
- `{rounded.lg}` 5px — one instance, minor variant.
- `{rounded.full}` 50% — avatar images and circular icon containers only.

The 4px monoculture means there is no pill variant and no generous-soft tier anywhere in the interactive system. The rounded-ness is minimal enough that the interface reads as sharp-edged without committing to Render's zero-radius extremism.

## Components

**`button-primary`** — Salesforce blue fill (`{colors.secondary}`), white text, `{typography.button-md}` (16px / 700 / -0.032px), 4px radius, 12×32 padding, 52px height. "Get Started Now" is the canonical instance.

**`button-secondary`** — Transparent fill, Salesforce blue text, blue border, same typography and sizing. Used for secondary CTAs alongside the primary.

**`top-nav`** — Dark deep-violet fill (`{colors.hero-deep}`), white text, 98px height, 0×30px padding. The navigation bar extends as part of the dark hero canvas.

**`nav-link`** — Transparent background, white text in `{typography.nav-link}` (20px / 700), 35×15px padding. Unusually large and heavy for a marketing nav — closer to a mobile CTA than a standard nav link.

**`hero-heading`** — White text on the dark hero, `{typography.display-xl}` (40px / 600). The captured headline is "The Cloud Application Platform For Building, Deploying, and Scaling Apps."

**`section-heading`** — Deep violet text (`{colors.hero-violet}`), `{typography.display-lg}` (32px / 600). Used for major section h2 elements on the white body canvas.

**`card-heading`** — Ink text (`{colors.ink}`), `{typography.heading-md}` (24px / 600). Feature card and sub-section headings.

**`body-paragraph`** — Default ink text (`{colors.ink}`) at `{typography.body-md}` (16px / 400 / 25.6px line height).

**`label-tag`** — No background, medium-ink text, `{typography.label-md}` (12px / 700 uppercase / 0.6px tracking), 4px radius. Category chips above headings.

**`hero-label`** — White text, `{typography.label-sm}` (12px / 700 uppercase / 1.5px tracking). Category labels on the dark hero canvas, maximum letter-spacing.

**`card`** — White canvas, ink text, `{typography.body-md}`, 4px radius, 30px padding, hairline border. The default content card across the white body sections.

**`surface-card`** — Light blue-gray surface (`{colors.surface-1}`), ink text, `{typography.body-md}`, 4px radius, 15×20px padding. Alternating card variant on sections that need a tonal lift.

**`text-input`** — White fill, ink text, `{typography.body-sm}`, 4px radius, hairline border, 52px height. Resting state only; no error or focus captures in the extraction.

**`footer`** — Deep-violet fill (`{colors.hero-deep}`), white text, `{typography.body-md}`, 60px × 0px padding. The footer returns to the hero's dark violet, framing the page with matching dark bands at top and bottom.

## Do's and Don'ts

**Do** use Salesforce blue (#0176d3) as the primary interactive color. Despite Heroku's violet heritage, the current marketing site unambiguously routes all interactive affordances — primary CTA, text links, form controls — through the Salesforce blue. Using violet (#5a1ba9) for primary CTAs would misrepresent the current live system.

**Do** keep the hero canvas and footer both in dark violet. The dark-top / white-body / dark-bottom structural frame is Heroku's most distinctive layout pattern. Switching the footer to white breaks the framing and loses the page's structural identity.

**Do** use Avant Garde at weight 600 for section headings. The circular geometric counters at 32-40px are the most distinctive typographic move in the system; dropping to weight 400 or switching to Salesforce Sans for headings flattens the hierarchy.

**Do** apply 4px radius to every interactive component. The near-flat rounding is consistent across the entire component set. Introducing a pill variant or a generous 12-16px radius for any button would break the enterprise-adjacent visual grammar the 4px monoculture establishes.

**Don't** use the deep violet tones (#240643, #300b60, #032d60) as text colors on a white canvas. These dark purples function only as canvas fill on the dark hero sections; used as text on white they would appear nearly black but with an uncanny purple tint that reads as miscalibrated rather than branded.

**Don't** introduce a 12px / weight 700 uppercase label with tracking below 0.6px. The label-md and label-sm tiers define themselves through their extreme uppercase tracking (0.6-1.5px); reducing the tracking collapses them into generic small-caps and loses the editorial rigidity that distinguishes Heroku's category chips.

**Don't** use Heroku's violet (#5a1ba9) as a primary CTA fill. The extraction confirms this color has only 18 total uses versus 151 for the Salesforce blue — the hierarchy is clear. Using violet as the primary button would be historically accurate to pre-2018 Heroku but would conflict with the current live system.

**Don't** increase nav-link font size above 20px / 700. The nav links are already substantially larger than industry convention; going beyond 20px would make the top navigation dominate the page over the hero content in ways the current layout handles by confining links to the dark canvas.

## Known Gaps

- **Hover states:** no hover transitions captured for buttons or nav links; the Salesforce blue likely lightens on hover based on adjacent brand tokens.
- **Mobile layout:** the hero typography scale at 40px was captured at desktop width; mobile breakpoints almost certainly reduce the display size significantly.
- **Light mode nav:** whether the navigation carries a white-canvas variant for scroll-past-hero is not captured in the static extraction.
- **Form states:** `{component.text-input}` captures resting state only; focus ring color (likely Salesforce blue at some opacity), error state, and disabled state are not extracted.
- **AI product sections:** Heroku has added AI-specific marketing sections referencing "Heroku AI Agents" — the typography and color treatments within those sections may introduce additional tokens not captured here.
- **Animation:** hero scroll transitions and section entrance animations are not captured in this static spec.
- **Pricing table:** the pricing page components — which would expose the full button hierarchy across plan tiers — were not captured in this extraction.