What is Gitpod's primary brand color?

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.

What typefaces does Gitpod use, and what should I use as substitutes?

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.

Why is the link color a forest green rather than a blue?

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.

How does Gitpod use the Martina Plantijn serif in the layout?

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).

Can I use this DESIGN.md to build a cloud-dev-tools or AI-engineering marketing site?

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.

Gitpod Design System

Gitpod's marketing site pairs ABC Diatype sans with Martina Plantijn serif on a near-white monochrome canvas.

About Gitpod DESIGN.md

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

Developer Tools & IDEs
Backend, Database & DevOps

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.

What makes it distinct

Dual-typeface editorial identityABC 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 inkthe 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 300the 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 roundingthe dominant card shape across 24 occurrences, softer than most dev-tools systems while stopping short of the 16px that CI/CD platforms use

Live at gitpod.io

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

gitpod.io

Explore Gitpod

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Gitpod design system FAQ

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

Gitpod — official site

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