What is Gamma's primary brand color?

Gamma's primary CTA voltage is a deepocean blue (#0540ad) wired through Chakra as `--chakra-colors-blue-800`, `--chakra-colors-sky-800`, and `--chakra-colors-deepocean-800`. It appears just twice on the captured page, both as the background fill of the primary CTA pill (the hero 'Start for free' button and its duplicate in the second hero band). Every other chromatic moment on the page belongs to the soft pastel product-tile surfaces (periwinkle, sky, snowcap) or to the display-text deep navy (#002253), which is a structural ink color rather than a brand accent. The brand voltage is scarce by design — the page's tonal energy comes from the cloud-band gradient and the pastel grid, not from a load-bearing CTA color.

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

Gamma runs two voices: PPMori (a contemporary geometric sans by Pangram Pangram) for body, label, button, and small headings, and ESBuild (a wider display cut, also by Pangram Pangram) for the large hero display tiers. PPMori sits at weights 500-800 across body and label sizes (12-30px), while ESBuild carries the 48-96px display tier at weights 300-700. The hero h1 at 60px / 700 and the second-hero h2 at 96px / 300 are the two loudest typographic moments — note that the larger tier drops weight to read airy. Open-source substitutes: Inter at the same weights for PPMori, and General Sans Display or Söhne Breit Buch for ESBuild.

Why does Gamma use a 24px pill rather than a 9999px round-pill on its CTAs?

The primary CTA sits at a 24px border-radius on a 40px-tall button — which on a 164px-wide button reads as a soft pill rather than a fully-rounded pill. The choice is structural: a 9999px round-pill would compete with the small navigation icon-chips that DO use a 9999px round (37 occurrences across the page), and the deliberate radius gap separates 'tappable rectangle' (24px CTA) from 'small icon affordance' (9999px chip). The cards and tile grids sit at 12px or 24px depending on size; the radius scale is soft but never fully circular for primary buttons.

Why does Gamma's display text use deep navy instead of black?

Gamma's display text sits at #002253 — a deep navy wired through Chakra as `--chakra-colors-trueblue-950`, `--chakra-colors-snowcap-950`, and `--chakra-colors-deepocean-950`. Pure black on near-white feels harsh on a page whose surface palette is pastel and whose hero uses a 96px / weight-300 display moment; the deep navy holds enough contrast to read as a primary text color (>13:1 against the canvas) while sitting in the same blue hue family as the deepocean CTA voltage and the periwinkle cloud band. The navy isn't a brand accent — it's the system's primary ink, applied to every display, h2, and section heading.

Can I use this DESIGN.md to build my own AI productivity marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Gamma's specific moves: the card-grid scroll as the structural device, the 24px-radius pill primary CTA in deepocean blue, the deep navy ink for display text rather than pure black, and the PPMori-plus-ESBuild type pairing with the airy weight-300 treatment on the largest display tier. You can also reference tokens directly: every hex, font family, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The Chakra var-name lineage is preserved in the per-color notes for teams already using Chakra UI.

Gamma Design System

Gamma's AI-presentation marketing system as a DESIGN.md file.

About Gamma DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source gamma.app

AI & LLM Platforms
Productivity & SaaS

Gamma's marketing page reads as one long card-grid scroll. The top hero is a rounded soft-card holding a 60px ESBuild h1 in deep navy ("Effortless AI design for presentations, websites, and more"), a small product-mode chip row, and a blue 24px-radius pill CTA. Below it, the page commits to its structural device: a 3 x 2 grid of pastel tiles (Presentations, Documents, API, Social Media, Websites, Graphics) drifting against a periwinkle cloud band that runs edge-to-edge. The next band opens with a second hero — a 96px ESBuild line in weight 300 ("Creative content at the speed of light") — and from there the page alternates feature cards each anchored by a small mono-color pictogram and a single ESBuild heading. There is no full-width image hero, no testimonial wall in the conventional sense, no pricing table above the fold; every band is a card or a card grid.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from Chakra's spacegray, snowcap, deepocean, rocketfire, bordeaux, and periwinkle families — a deepocean blue voltage (#0540ad) for the primary CTA, a deep-navy ink (#002253) for display text, and a set of soft pastel surface tones (sky, snowcap, periwinkle) for the product-mode tiles. 12 typography tokens run PPMori at weights 500-800 for body and label and ESBuild at weights 300-700 for the display tier; the heaviest moment sits at 60px in weight 700, while the largest tier (96px) drops to weight 300. 4 radius tokens cluster on a 24px workhorse, a 12px secondary, a full-pill option, and a 0px flat tier. 17 component tokens cover the card-grid tile, the soft-pill CTA, the cloud-band section, the feature card with pictogram, and the navigation pill rail.

Feed this file to an AI coding tool and it reproduces Gamma's specific moves: card-grid scroll instead of a single-image hero, the 24px-pill primary CTA in deepocean blue, the deep-navy ink over near-white surfaces rather than black on white, and the PPMori-plus-ESBuild type pairing where the larger display sizes deliberately drop weight (96px at 300 weight) to read as airy rather than declarative. One thing to borrow only if your product is genuinely modal: the 3 x 2 product-mode tile grid only works if you actually have six product modes confident enough to each carry a tile — for narrower products it would feel padded.

What makes it distinct

Card-grid scrollsix pastel product-mode tiles (Presentations, Documents, API, Social Media, Websites, Graphics) sit in a 3 x 2 grid drifting on a cloud band, the brand's structural device for the whole page
Two display familiesPPMori for body and label (weights 500-800), ESBuild for hero h1/h2 (weight 300-700 at 48-96px); the contrast is the typographic signature
Deep navy ink over creamdisplay sits in deepocean navy on a near-white canvas, never pure black on pure white
24px-radius pill workhorseprimary CTAs use a 24px corner pill rather than a 9999px round-pill or a tight 6px corner, plus a 9999px round option for icon-only chips
Soft chromatic paletteperiwinkle, sky, snowcap, deepspace, and sunrise pinks all wired into Chakra spacegray/snowcap/deepocean families, used as tile fills rather than as accent voltage

Live at gamma.app

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

gamma.app

Explore Gamma

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.

Gamma design system FAQ

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

Gamma — official site

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