---
version: alpha
name: "Gitpod"
website: "https://www.gitpod.io"
description: >-
  A cloud development environment platform whose marketing site pairs two typefaces no other dev-tools brand combines — ABC Diatype (a geometric sans at 40px / weight 400 with tight -1.16px tracking) and Martina Plantijn (a humanist serif at 48–64px / weight 300) — on a near-white monochrome canvas with a near-navy structural ink (#0a0e19) and a single forest-green link color (#397554). No primary CTA button is captured in the rendered surface; the page communicates through editorial typography and a restrained natural palette rather than through brand-voltage accent colors.

seo:
  title: "Gitpod Design System for React — ABC Diatype sans + Martina Plantijn serif, 15 components"
  metaDescription: "Gitpod's marketing site pairs ABC Diatype sans with Martina Plantijn serif on a near-white monochrome canvas. Near-navy ink, forest-green links, 12px default rounding. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Dual-typeface editorial identity — ABC Diatype (geometric sans) and Martina Plantijn (humanist serif at weight 300) share display duties, a combination not found elsewhere in dev-tools marketing"
    - "Near-navy structural ink — the dominant color (#0a0e19) is a deeply blue-shifted near-black, warmer and more anchored than the pure-black or graphite that Vercel and Linear use"
    - "Forest-green link color — #397554 appears 20 times as the sole chromatic element on an otherwise monochrome page, reserved exclusively for inline links and text accents"
    - "Martina Plantijn at weight 300 — the display serif runs at light weight, a contrast to the heavy serifs used in publications; it reads closer to editorial fashion than to developer documentation"
    - "12px default rounding — the dominant card shape across 24 occurrences, softer than most dev-tools systems while stopping short of the 16px that CI/CD platforms use"
  tags:
    - "Developer Tools & IDEs"
    - "Backend, Database & DevOps"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Gitpod's marketing site does something almost no developer-tools brand attempts: it brings a light-weight humanist serif into the primary display tier. Martina Plantijn at 64px / weight 300 with tight letter-spacing introduces section headings at a register closer to an architecture or fashion magazine than to a CI/CD dashboard. ABC Diatype — a geometric sans with restrained proportions — handles the body and UI chrome. The two families never compete because they each own distinct surface types: Martina Plantijn appears only at display scale in heading positions, ABC Diatype covers everything from navigation to form labels. Where Vercel runs Geist exclusively and Linear runs Inter, Gitpod invests in a typographic voice that signals craft and deliberateness above technical authority.

    The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 12 color tokens anchored by a deeply blue-shifted near-navy ink (#0a0e19) at 588 total occurrences, with a single forest-green link tone (#397554) as the sole chromatic element; 14 typography tokens spanning Martina Plantijn at three display sizes and ABC Diatype across body, heading, button, and label tiers; a radius scale centered on 12px; and 9 spacing values on a 4px base. Components cover the editorial section headings, the inline text input (the only captured form element), feature description cards, and the footer.

    Feed this spec to an AI coding tool and it reproduces Gitpod's moves: near-navy ink instead of pure black or charcoal, Martina Plantijn for any display-scale heading that needs editorial weight, ABC Diatype for all body and UI, forest green exclusively for links, and 12px default rounding. The typographic pairing is the move worth considering for developer-tools brands that want to distance themselves from the commodity sans-only look — it only succeeds if both families are loaded at quality weights and the serif is confined strictly to display use.
  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.gitpod.io"
      title: "Gitpod — official site"
      description: "Gitpod'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 Gitpod's primary brand color?"
      answer: "Gitpod does not use a high-frequency chromatic brand accent in the traditional sense. The only chromatic color that renders on the marketing page is forest green (#397554), wired as `--color-link-green`, which appears 20 times — 10 as text and 10 as border — exclusively on inline links and hypertext states. Every other color is structural monochrome: the near-navy ink (#0a0e19) dominates at 588 total occurrences, the canvas is pure white or near-white gray, and the secondary grays (medium, muted, light) handle all other surfaces. The CSS also declares pastel-blue (#afc1fd), candy-purple (#efd4ff), ocean-blue (#0048ff), and frosted-mint (#d9fff7) as named variables — none of these are visible in the captured marketing render."
    - id: "typography"
      title: "What typefaces does Gitpod use, and what should I use as substitutes?"
      answer: "Gitpod uses two primary typefaces. ABC Diatype is a geometric sans-serif that handles navigation, body copy, buttons, and UI labels — appearing in 30 elements at 16px / weight 400 and scaling up to 40px / weight 400 for section headings, with letter-spacing as tight as -1.16px at display sizes. Martina Plantijn is a humanist serif at weight 300 used exclusively for large display headings at 48–64px. ABC Diatype is a commercial typeface available from ABC Dinamo; Martina Plantijn is available from TypeFoundry. Open-source substitutes: for ABC Diatype, **DM Sans** or **Plus Jakarta Sans** at similar weights and proportions; for Martina Plantijn at light weight, **Cormorant Garamond** at weight 300 or **EB Garamond** read similarly at display scale."
    - id: "forest-green-links"
      title: "Why is the link color a forest green rather than a blue?"
      answer: "The link color (#397554, `--color-link-green`) is a mid-depth forest green — not the bright electric green used by CircleCI for CTAs, not a standard web-link blue. The CSS name 'link-green' makes the intent explicit: it is a typographic link color, not a CTA accent or brand voltage. The tone is saturated enough to be legible as a link against the white canvas but naturalistic rather than electric — it reads as a deliberate editorial choice rather than a default browser-link override. The system also declares a pistachio-green light surface (#dbefdb, `--color-pistachio-green`) used as a card-background tint behind certain feature tiles, reinforcing the green as a nature-natural register rather than a tech-voltage one."
    - id: "serif-at-display-scale"
      title: "How does Gitpod use the Martina Plantijn serif in the layout?"
      answer: "Martina Plantijn appears at three sizes in the captured surface: 64px / weight 300 / -0.36px tracking on the largest display headings, 56px / weight 300 / -1.12px tracking on section sub-headings, and 48px / weight 300 / -0.96px tracking on the smallest display-serif tier. All instances are in near-navy ink (#0a0e19) on a white or near-white canvas. The family is strictly confined to the heading role — it does not appear in navigation, body copy, buttons, or labels. ABC Diatype handles all non-heading text. The weight-300 choice is deliberate: heavier serifs in developer tools read as editorial authority (The Economist), while weight 300 reads as editorial craft and restraint (architectural press, fashion editorial)."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a cloud-dev-tools or AI-engineering marketing site?"
      answer: "Yes — the tokens are structured for AI coding tools and direct reference. The reproducible moves: near-navy ink (#0a0e19) instead of charcoal or pure black for all text and borders, ABC Diatype (or DM Sans as substitute) for body and UI, Martina Plantijn (or Cormorant Garamond as substitute) at weight 300 for display headings only, forest green (#397554) reserved for inline links and hypertext states, 12px default card rounding, and a white-to-near-white surface palette with no chromatic accent on cards or sections. The restraint of this system depends on the serif display heading carrying all the visual weight — if the serif is swapped for a sans, the system flattens into a generic monochrome layout."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  ink: "#0a0e19"
  ink-muted: "#818181"
  ink-soft: "#636363"
  ink-dark: "#1f1f1f"
  canvas: "#ffffff"
  surface-1: "#f2f2f2"
  surface-2: "#e1e1e1"
  surface-muted: "#cecece"
  link-green: "#397554"
  surface-green: "#dbefdb"
  hairline: "#e1e1e1"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"Martina Plantijn\", serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 62.72px
    letterSpacing: "-0.36px"
  display-lg:
    fontFamily: "\"Martina Plantijn\", serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 54.88px
    letterSpacing: "-1.12px"
  display-md:
    fontFamily: "\"Martina Plantijn\", serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 50.4px
    letterSpacing: "-0.96px"
  heading-lg:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 39.2px
    letterSpacing: "-1.16px"
  heading-md:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: "-0.456px"
  heading-sm:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24.2px
    letterSpacing: "-0.638px"
  heading-xs:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 17.64px
    letterSpacing: "-0.36px"
  body-lg:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 19.8px
    letterSpacing: 0
  body-md:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 22.95px
    letterSpacing: "-0.36px"
  body-sm:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
    letterSpacing: 0
  label-md:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 16.25px
    letterSpacing: 0
  button-md:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  caption:
    fontFamily: "\"ABC Diatype\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 17.6px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"

spacing:
  xs: "2px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "28px"
  2xl: "32px"
  3xl: "40px"
  4xl: "43px"
  5xl: "48px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "7px 10px"
    height: "36px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "7px 10px"
    height: "36px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "11px 40px"
    height: "52px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    padding: "0px"
  display-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  card-green:
    backgroundColor: "{colors.surface-green}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
  feature-tile:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px 16px"
    height: "42px"
    borderColor: "{colors.surface-2}"
  stats-block:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  testimonial-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px 40px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-sm}"
    padding: "43px 28px"
---

## Overview

Gitpod's marketing site challenges the design convention that developer tools must communicate through dark surfaces, gradient heroes, and a sans-only type stack. **Editorial Serif Restraint.** Where Linear, Vercel, and Warp use a single geometric or humanist sans across every tier, Gitpod introduces Martina Plantijn — a humanist serif at weight 300 — for display headings. The combination with ABC Diatype (geometric sans) produces the most distinct typographic voice in the cloud-dev-environment category. The palette declines to amplify: near-navy ink on a white canvas, forest green for links, and a pistachio-green surface tint for one category of feature card. No brand-voltage accent, no gradient, no dark canvas.

The shape language is **mid-soft**: 12px as the default card radius, 8px for inner elements, 6px for compact chips, with a full pill for CTA buttons. The system sits warmer than the 4–8px tight radius that terminal-aesthetic tools use, and more reserved than the 16px generous-soft that CircleCI deploys.

**Key Characteristics:**
- Two-typeface editorial identity: ABC Diatype for all UI, Martina Plantijn at weight 300 for all display headings — a combination not visible in any other dev-tools system in the directory.
- Near-navy structural ink (`{colors.ink}` — #0a0e19) — the dominant text and border tone at 588 total occurrences, deeply blue-shifted.
- Forest-green link tone (`{colors.link-green}` — #397554) as the sole chromatic element — 20 occurrences, all as text and border on inline links.
- Tight letter-spacing on the sans display tier: -1.16px at 40px, -0.638px at 22px — approaching magazine-display tracking without the typographic weight.
- Pistachio-green surface (`{colors.surface-green}` — #dbefdb) as a single tinted card variant — natural and unsaturated, reinforcing the environmental register.
- 12px default card rounding — warmer than Vercel's tight 4–6px, more reserved than CircleCI's 16px.
- Full-pill CTA buttons in near-navy ink with white text — the navigation and hero actions use an ink-fill pill rather than a chromatic CTA.
- No large hero gradient or full-bleed brand-color section — the page opens on a white canvas with a text headline and a product-dashboard illustration.

## Colors

### Structural Text

- **Near-Navy Ink** (`{colors.ink}` — #0a0e19): frequency 588 (text 296, bg 5, border 287). The dominant system color — wired as `--color-onyx-black`. Every heading, paragraph, border, and nav element renders in this deeply blue-shifted near-black. The 268° hue angle makes it distinctly cooler and more anchored than pure black or standard charcoal.
- **Medium Gray** (`{colors.ink-muted}` — #818181): frequency 20 (text 10, border 10). Wired as `--color-grey-700`. Secondary body text — used for supporting paragraphs and caption-tier copy where near-navy would feel too heavy.
- **Gray Soft** (`{colors.ink-soft}` — #636363): frequency 24 (text 12, border 12). Wired as `--color-grey-800`. Footer link text and tertiary labels.
- **Near Black** (`{colors.ink-dark}` — #1f1f1f): frequency 8 (text 4, border 4). Wired as `--color-grey-900`. The darkest text tier — used in header elements where maximum contrast is needed.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): the page floor and all primary card surfaces. Merged from near-identical white values (pure white, off-white, porcelain grey) — wired as `--color-white`, `--color-porcelain-grey`, `--color-gray-50`. The system runs on a white canvas without the gray-floor shift that CircleCI uses.
- **Surface Light** (`{colors.surface-1}` — #f2f2f2): frequency 9 (bg 8, border 1). Wired as `--color-grey-400`. Light background for feature tiles and inner card backgrounds.
- **Surface Mid** (`{colors.surface-2}` — #e1e1e1): frequency 7 (bg 3, border 4). Wired as `--color-grey-500`. Card borders and inner chip fills.
- **Surface Muted** (`{colors.surface-muted}` — #cecece): frequency 9 (border 3, gradient 6). Wired as `--color-grey-600`. Gradient stop for overlaid surface transitions.

### Brand Link

- **Forest Green** (`{colors.link-green}` — #397554): frequency 20 (text 10, border 10). Wired as `--color-link-green`. The sole chromatic element on the page — inline link color and hypertext state border. A naturalistic mid-depth green, not electric.
- **Pistachio Green** (`{colors.surface-green}` — #dbefdb): frequency 4 (bg only). Wired as `--color-pistachio-green`. The tinted card-background variant used for one category of feature card.

### Shadow and Border

- **Hairline** (`{colors.hairline}` — #e1e1e1): the primary border tone across cards and input fields — same value as `{colors.surface-2}`.
- **Shadow** (`{colors.shadow}` — #000000): frequency 4 (shadow 2, text 1, border 1). Standard black-with-opacity for small elevation shadows.

## Typography

### Font Families

The system runs two primary families: **ABC Diatype** for all UI and prose surfaces, and **Martina Plantijn** for display-scale headings. ABC Diatype is a geometric sans from ABC Dinamo with slightly narrower proportions than Inter; Martina Plantijn is a humanist serif with low x-height and long ascenders, available from TypeFoundry. A system mono stack (`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`) is declared as `--font-mono` for code contexts.

The two-family system is the most consequential design decision on the site. In the dev-tools category, almost every brand runs one sans family across all tiers. Gitpod's use of a light-weight humanist serif at display scale positions it closer to editorial design — architecture, interiors, craft — than to developer productivity software.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 300 | 62.72px | -0.36px | Largest display headings (Martina Plantijn serif) |
| `{typography.display-lg}` | 56px | 300 | 54.88px | -1.12px | Section sub-headings (Martina Plantijn) |
| `{typography.display-md}` | 48px | 300 | 50.4px | -0.96px | Tertiary display tier (Martina Plantijn) |
| `{typography.heading-lg}` | 40px | 400 | 39.2px | -1.16px | Above-fold h2 headline (ABC Diatype) |
| `{typography.heading-md}` | 24px | 400 | 31.2px | -0.456px | Sub-section headings |
| `{typography.heading-sm}` | 22px | 400 | 24.2px | -0.638px | Card heading and feature titles |
| `{typography.heading-xs}` | 18px | 500 | 17.64px | -0.36px | Small h3 feature tile headings |
| `{typography.body-lg}` | 18px | 400 | 19.8px | 0 | Hero and lead paragraph |
| `{typography.body-md}` | 17px | 400 | 22.95px | -0.36px | Standard body paragraph |
| `{typography.body-sm}` | 16px | 400 | 25.6px | 0 | Default body — nav and card copy |
| `{typography.label-md}` | 13px | 600 | 16.25px | 0 | Small labels and badge text |
| `{typography.button-md}` | 14px | 500 | 20px | 0 | Button and CTA labels |
| `{typography.nav-link}` | 16px | 400 | 16px | 0 | Navigation link labels |
| `{typography.caption}` | 16px | 400 | 17.6px | 0 | Button-adjacent captions and metadata |

### Principles

The Martina Plantijn display tier runs at weight 300 across all three sizes — lighter than body weight. This creates an intentional hierarchy inversion: the larger the heading, the lighter the weight. Body copy at weight 400 (ABC Diatype) renders slightly heavier than the 300-weight display, which reinforces the editorial-magazine register where display type floats and body text grounds. ABC Diatype at the sans-heading tier (40px, -1.16px tracking) uses tight tracking to compensate for the absence of weight — the narrowed character spacing adds density without adding visual mass.

### Note on Font Substitutes

ABC Diatype is commercially licensed (ABC Dinamo). The closest open-source substitute is **DM Sans** at the same weights and a -0.02em letter-spacing adjustment for the display sizes; **Plus Jakarta Sans** is slightly wider but transfers cleanly at body sizes. Martina Plantijn is licensed from TypeFoundry; for open-source substitute, **Cormorant Garamond** at weight 300 carries similar proportion and high elegance at display scale. **EB Garamond** is a wider alternative with similar warmth.

## Layout

### Spacing System

- **Base unit:** 4px, with 16px and 24px as the dominant content values.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 8px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 28px · `{spacing.2xl}` 32px · `{spacing.3xl}` 40px · `{spacing.4xl}` 43px · `{spacing.5xl}` 48px.
- **Card padding:** 24px internal (`{spacing.lg}`) for standard cards; 24×40px for testimonial cards.
- **Nav padding:** 11px vertical × 40px horizontal — generous horizontal breathing room.
- **Top-of-section padding:** 43px vertical in the footer.

### Grid and Container

- **Max content width:** approximately 1360px (declared as `--container-width: 85rem`).
- **Hero layout:** left-aligned text stack — product tagline at 40px ABC Diatype, supporting paragraph, dual CTA pills — with a product dashboard illustration below.
- **Feature sections:** alternating text-and-image rows, each featuring a Martina Plantijn serif heading at one of the three display sizes.
- **Feature grid:** 4-column tile grid showing use-case illustrations (background agents, code migration, AI code review, CVE remediation).
- **Stats row:** inline stat blocks ("4x faster," "83% reduction," "400+ customers") in the near-navy ink on white — rendered as display-xl metrics.
- **Blog/resource section:** vertical list of highlighted posts with inline link-green text accents.

### Rhythm

The page reads as a **vertical editorial flow** rather than sectional bands. Sections do not alternate background colors (with the exception of one pistachio-green card tile and an orange-gradient product illustration panel). The near-navy ink on white canvas remains consistent from top to bottom, creating the sensation of reading a long-form editorial piece rather than scanning a product marketing page. Rhythm is created by the alternation between serif display headings and sans body text, not by surface-color shifts.

## Elevation

The system uses **hairline borders on white** rather than shadow elevation. Cards sit on the white canvas with a 1px `{colors.hairline}` (#e1e1e1) border. Drop shadows appear in 4 occurrences using black-with-opacity, reserved for small product-mockup frames within feature illustrations. There is no tonal surface lift (no equivalent to Spline's surface-1 / canvas separation). The flat approach is consistent with the editorial register — editorial layouts do not use shadows to lift content; they use whitespace and typographic weight.

## Shapes

The radius scale is **mid-soft**, centered on 12px:

- `{rounded.none}` 0px — not explicitly applied; the page has no square-edged surface bands.
- `{rounded.xs}` 4px — compact UI chips and inner badge elements.
- `{rounded.sm}` 6px — text input fields; 5 occurrences.
- `{rounded.md}` 8px — inner card content and nested elements; 11 occurrences.
- `{rounded.lg}` 12px — the dominant card radius across 24 occurrences.
- `{rounded.xl}` 16px — larger cards and panel elements; 4 occurrences.
- `{rounded.full}` 9999px — CTA buttons and navigation pills (rendered as the maximum representable radius at ~6.71×10⁷ px in CSS).

The 12px card default sits between the tight dev-tools tier (4–6px) and the warm SaaS tier (16px+). The full-pill CTA is the warmest shape in the system — the contrast between tight-radius cards and full-pill buttons is deliberate.

## Components

**`button-primary`** — Near-navy ink `{colors.ink}` fill, white text, `{rounded.full}` pill, 7×10px padding, 36px height. "Sign up" and "Start building" are canonical instances. The CTA uses the page's dominant ink color as the fill — no separate accent color is needed.

**`button-secondary`** — Transparent fill, near-navy ink text, 1px `{colors.hairline}` border, `{rounded.full}` pill. "Talk to us" or "Learn more" secondary instances.

**`top-nav`** — White canvas, near-navy ink text and logo, 52px height, 11×40px padding. Gitpod wordmark flush left, navigation links (Docs / Resources / Blog / Pricing) center, "Sign in" + primary button right. No bottom hairline border visible on the captured surface.

**`nav-link`** — Transparent background, near-navy ink text in `{typography.nav-link}` (16px / 400 / 16px line-height). The compressed line-height (1.0) gives nav labels a tight, precise feel.

**`hero-heading`** — ABC Diatype at `{typography.heading-lg}` (40px / 400 / -1.16px tracking), near-navy ink, on transparent white background. The above-fold marketing headline ("The AI engineering workforce. Set the direction. Run the execution. Continuously and autonomously.").

**`display-heading`** — Martina Plantijn at `{typography.display-xl}` (64px / 300 / -0.36px tracking), near-navy ink. The editorial section heading — appears above feature-row sections and the testimonial block.

**`body-paragraph`** — Medium-gray `{colors.ink-muted}` text at `{typography.body-sm}` (16px / 400). Default paragraph body — the gray tone reduces the contrast with the white canvas and lets headings carry the visual weight.

**`card`** — White canvas, 1px `{colors.hairline}` border, `{rounded.lg}` 12px radius, 24px padding. The standard feature-description and blog-post card.

**`card-green`** — Pistachio-green `{colors.surface-green}` fill, near-navy ink text, `{rounded.lg}` 12px radius, 24px padding. Used for one category of feature card — the green tint signals environmental or success-state content.

**`feature-tile`** — Light-gray `{colors.surface-1}` fill, near-navy ink text, `{rounded.lg}` 12px radius, 0 padding. The 4-column use-case grid tile — holds a product illustration image and a short descriptive heading.

**`text-input`** — White canvas, near-navy ink text, 1px `{colors.surface-2}` border, `{rounded.sm}` 6px radius, 10×16px padding, 42px height. The email input in the newsletter or waitlist section.

**`stats-block`** — Transparent background, near-navy ink text in `{typography.display-xl}`. Metric pairs ("4x", "83%", "400+") rendered at display-serif scale as social proof.

**`testimonial-card`** — White canvas, 1px hairline border, `{rounded.lg}` 12px radius, 24×40px padding. Holds a quote in body-md, an attribution in label-md, and an avatar.

**`footer`** — White canvas, medium-soft gray text (`{colors.ink-soft}`), 43×28px padding. Multi-column footer with the Gitpod wordmark, navigation links, social icons, and legal text.

## Do's and Don'ts

**Do** reserve Martina Plantijn for display headings only and keep ABC Diatype in all body and UI contexts. The editorial power of the pairing depends on the serif appearing only at large scale — any use of Martina Plantijn below 40px (in body copy, labels, or buttons) would read as a mismatch between display weight and prose rendering.

**Do** treat forest green (`{colors.link-green}` — #397554) as a hypertext-only color. The system uses it 20 times, exclusively on inline links. Adding it to buttons, icons, or decorative elements would convert a precise semantic signal into a general accent and erase the restraint that makes it work.

**Do** use the near-navy ink (`{colors.ink}` — #0a0e19) for the primary CTA button fill rather than a chromatic accent. The ink-fill pill CTA is the system's answer to "what color is the action?" — the answer is the same as the text, not a separate accent.

**Do** use tight letter-spacing on the ABC Diatype display tier. The -1.16px tracking on the 40px heading is essential to the density that makes the sans headline read with weight comparable to the light-weight serif. Without the tracking, the 40px ABC Diatype reads as loose and informal.

**Don't** introduce a chromatic accent color beyond the forest-green link tone. The system runs on near-navy ink and white canvas; any chromatic addition (a brand-color CTA, a section-background accent, icon colors) would break the monochrome editorial register.

**Don't** render Martina Plantijn above weight 300. The light-weight serif is the move — bumping to 400 or 500 would make the display headings compete with body text rather than float above it, destroying the intended hierarchy inversion.

**Don't** swap the 12px card radius for a tighter 4–8px tier. The 12px default is the warmth signal that keeps the monochrome system from feeling cold and architectural. Tightening to 4px would shift the page into terminal-tool territory, which contradicts the editorial register.

**Don't** add shadows to standard cards. The system uses only hairline borders for card separation. The flat editorial approach depends on whitespace and type hierarchy rather than elevation cues; adding shadows would create visual noise without adding clarity.

## Known Gaps

- **Primary CTA button:** no primary button is captured in the render (the form section shows only the text input); the ink-fill pill button spec is inferred from the navigation sign-up button and the smaller inline CTAs visible in the capture.
- **Dark mode:** the marketing surface is light-only; a dark variant for the product dashboard or documentation may exist but is not represented here.
- **Hover and focus states:** the full state matrix (link-green hover, button press, input focus ring) is not captured from the static render.
- **Motion:** the page includes scroll-triggered entrance animations on feature tiles and section headings; easing curves and timing are declared in the CSS but not captured as component values.
- **Color palette depth:** the CSS declares named pastel-blue, candy-purple, ocean-blue, frosted-mint, and chocolate-brown — all wired as custom properties but none appearing in the captured marketing surface. These may be reserved for product states, agent-type identifiers, or future marketing content.
- **Mono type usage:** the system mono stack (ui-monospace / SFMono-Regular / Menlo / Monaco / Consolas) is declared as `--font-mono` but no code block instance is visible in the marketing capture.