---
version: alpha
name: Gamma
description: Warm-cream AI canvas where a soft display grotesque sets buoyant navy headlines, PPMori carries the body, and the "Start for free" CTA shows up in a whole rotation of candy colors — blue, orange, pink — because in Gamma the button is a mood, not a fixed brand lock.

colors:
  # Surface / canvas
  background: "#faf9f5"        # warm off-white canvas
  surface: "#ffffff"           # cards, panels, embedded demos
  surface-tint: "#ebf3fe"      # pale-blue hover wash on light controls

  # Ink / text
  ink: "#002253"               # deep navy — the marquee headline color
  ink-near-black: "#38383c"    # standard heading / link ink
  ink-secondary: "#66666b"     # body and supporting copy
  ink-muted: "#86848d"         # captions, metadata
  on-color: "#ffffff"          # text on colored CTAs and dark surfaces

  # Brand accent — the rotating CTA palette
  primary: "#3b68f6"           # the default blue "Start for free" button
  primary-bright: "#0858f7"    # brighter blue links / icons
  primary-hover: "#0540ad"     # deep pressed/hover blue
  primary-soft: "#d0e6fe"      # light-blue secondary button border + tint
  accent-orange: "#ff6a0a"     # alternate playful CTA color
  accent-pink: "#eb49a7"       # alternate playful CTA color
  on-primary: "#ffffff"

  # Borders
  border: "#dfdfe0"            # hairline dividers, card edges
  border-soft: "#ebf3fe"       # pale-blue control borders

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.05) — Google format requires hex
  shadow-blue: "#477bf5"       # was rgba(71,123,245,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "ABC Diatype, ESBuild, Georgia, system-ui, sans-serif"
    fontSize: 96px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -1.92px
  display:
    fontFamily: "ABC Diatype, ESBuild, Georgia, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.2px
  heading:
    fontFamily: "ABC Diatype, ESBuild, Georgia, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.96px
  heading-sub:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.6px
  title:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.4px
  body-large:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  eyebrow:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.5px
  caption:
    fontFamily: "PP Mori, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 3px
  md: 12px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-orange:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-pink:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 14px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 14px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-near-black}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-rounded:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-near-black}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-near-black}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-near-black}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-near-black}"
    typography: "{typography.button}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary-bright}"
    typography: "{typography.body}"
    padding: 0px

  eyebrow:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Gamma Design System

## Overview

Gamma's marketing site behaves the way its product does: it takes something usually rigid — a deck, a brand button — and makes it feel light, generative, and a little bit playful. The canvas is a warm off-white (`{colors.background}`), not a clinical pure white, which immediately softens the whole page and gives the floating illustrations (clouds, hot-air balloons, painterly 3D objects) room to breathe. The single most distinctive move is the **rotating CTA**: the headline button "Start for free" is not locked to one brand color. It shows up in confident blue (`{colors.primary}`), then warm orange (`{colors.accent-orange}`), then hot pink (`{colors.accent-pink}`) as you scroll. Gamma treats the primary button as a changeable mood rather than a fixed asset, and that decision telegraphs the entire promise of the product — design that reconfigures itself for you.

The typography pairs a soft, optically-light display face (extracted as `ESBuild`, rendered here through a Diatype-class grotesque fallback) at a featherweight 300 for the marquee headline (`{typography.display-hero}`, 96px, -1.92px tracking) against **PP Mori** — a warm geometric sans by Pangram Pangram — for everything functional: subheads, body, and buttons. The big headline reads buoyant and unhurried; the body reads friendly and modern. Stylistic set `ss02` is switched on across the display sizes, giving the letterforms their slightly rounded, approachable cut. Nothing is heavy-handed. Even at 96px the headline whispers rather than shouts, leaning on size and color rather than weight.

Then there's the shape language. Gamma rounds everything to a generous 24px (`{rounded.lg}`) — buttons, cards, panels — with a softer 12px on tighter tiles and full pills (`{rounded.pill}`) on chips and avatars. There is no sharp corner anywhere on the page. Combined with the cream canvas, the navy ink (`{colors.ink}`), the candy-colored buttons, and the dreamy balloon imagery, the result reads optimistic and creative-tool-friendly: this is software that wants you to feel capable, not intimidated. Shadows are kept feather-soft, often a barely-there `rgba(0,0,0,0.05)` lift, with one signature blue-tinted glow (`{colors.shadow-blue}`) reserved for hero product cards.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`), not pure white — softens the whole page and frames the playful illustrations
- The **rotating CTA**: "Start for free" cycles through blue (`{colors.primary}`), orange (`{colors.accent-orange}`), and pink (`{colors.accent-pink}`) — the button is a mood, not a fixed lock
- Featherweight display headline (`{typography.display-hero}`, 96px / weight 300 / -1.92px) — buoyant, not bold
- **PP Mori** geometric sans for all functional text (`{typography.body}`, `{typography.button}`) — warm and modern
- Deep navy (`{colors.ink}`) as the marquee headline ink, not black — friendlier and more saturated
- Universally rounded shapes: 24px (`{rounded.lg}`) on buttons and cards, full pills (`{rounded.pill}`) on chips — zero sharp corners
- Stylistic set `ss02` enabled on display sizes for the soft, rounded letterform cut
- Feather-soft shadows (`{colors.shadow-soft}`) with one blue-tinted glow (`{colors.shadow-blue}`) for hero product cards
- Dreamy 3D illustration system — clouds, balloons, painterly objects — carries the brand personality
- Light-blue secondary buttons (`{colors.surface}` fill, `{colors.primary-soft}` border) for the quieter "Watch video" action

## Colors

### Surface & Canvas
- **Warm Cream** (`{colors.background}`): The dominant canvas — an off-white with a touch of warmth that frames the illustrations and softens the page.
- **White** (`{colors.surface}`): Cards, panels, embedded product demos, and secondary buttons.
- **Pale Blue Wash** (`{colors.surface-tint}`): The hover/focus tint on light controls and badge fills.

### Ink / Text
- **Deep Navy** (`{colors.ink}`): The marquee headline color — saturated and friendly, not black.
- **Near-Black** (`{colors.ink-near-black}`): Standard headings, links, and UI labels.
- **Slate** (`{colors.ink-secondary}`): Body and supporting copy.
- **Muted Slate** (`{colors.ink-muted}`): Captions and metadata.

### Brand Accent — the rotating CTA palette
- **Gamma Blue** (`{colors.primary}`): The default primary button color and the brand's anchor hue.
- **Bright Blue** (`{colors.primary-bright}`): Links and icon accents.
- **Deep Blue** (`{colors.primary-hover}`): The pressed/hover state of the blue CTA.
- **Sky Soft** (`{colors.primary-soft}`): The light-blue border on secondary buttons.
- **Gamma Orange** (`{colors.accent-orange}`) / **Gamma Pink** (`{colors.accent-pink}`): Alternate CTA colors — the same "Start for free" button rendered in playful warm hues.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers.
- **Soft Blue Border** (`{colors.border-soft}`): Pale outlines on light controls.
- **Soft / Blue Shadow** (`{colors.shadow-soft}`, `{colors.shadow-blue}`): Opaque stand-ins for the feather lift and the signature blue product-card glow (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: a soft optical-light grotesque (extracted as `ESBuild`) with fallbacks `ABC Diatype, Georgia, system-ui, sans-serif` — carries the large headlines at featherweight 300-500.
- **Primary**: **PP Mori** (Pangram Pangram geometric sans), fallbacks `Inter, -apple-system, system-ui, sans-serif` — all subheads, body, buttons, and UI.
- **OpenType / features**: stylistic set `ss02` is enabled across display sizes for the rounded, approachable letterform cut; `kern` on body.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 96px / 300 / -1.92px — the buoyant marquee headline |
| `display` | 60px / 700 / -1.2px — large section headlines |
| `heading` | 48px / 500 / -0.96px — section titles |
| `heading-sub` | 30px / 800 — feature headings (PP Mori) |
| `title` | 20px / 700 — card titles |
| `body-large` | 18px / 500 — lead paragraphs |
| `body` | 16px / 400 — standard body |
| `button` | 16px / 600 — button labels |
| `eyebrow` | 14px / 500 / 0.5px — category labels |
| `caption` | 13px / 400 — metadata |

### Principles
- **Light at the top, sturdy below**: the hero display runs featherweight 300; functional PP Mori text sits at 500-800 for legibility.
- **Size and color over weight**: the headline reads big and saturated rather than heavy — let navy and scale do the work.
- **Soft letterforms**: keep `ss02` enabled on display type for Gamma's rounded, friendly cut.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Generous vertical rhythm (`{spacing.5xl}` = 96px) separates major sections; cards and tiles stay comfortably padded (`{spacing.xl}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a left text column with the candy CTA paired against a large rounded product illustration on the right
- Below the hero, a colorful multi-card grid showcases use cases (Presentations, Social Media, Websites) each with its own accent color

### Whitespace Philosophy
- **Warm and airy**: the cream canvas plus generous section spacing keeps the page feeling open and unintimidating
- **Rounded containment**: content sits inside softly rounded cards rather than hard-edged boxes
- **Color as wayfinding**: each use-case card carries a different accent, so the eye navigates by hue

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most content |
| Feather (Level 1) | `0 1px 2px` at ~5% black (`{colors.shadow-soft}`) | Resting cards, buttons |
| Card (Level 2) | `0 10px 15px -3px` + `0 4px 6px -2px` soft black | Floating tiles, dropdowns |
| Blue Glow (Level 3) | Layered `rgba(71,123,245,...)` blue stack (`{colors.shadow-blue}`) | Hero product cards — the signature lift |

**Shadow Philosophy**: Gamma's shadows are deliberately feather-soft — most of the page floats on a barely-perceptible `rgba(0,0,0,0.05)` lift. The one signature exception is a multi-layer blue-tinted glow (`{colors.shadow-blue}`) reserved for hero product cards, which makes them read as luminous, slightly elevated objects without ever feeling heavy. The depth model is gentle and optimistic, matching the rounded shapes and warm canvas.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 3px | Tiny inset elements, tab panels |
| `md` | 12px | Tooltips, tighter tiles, inputs |
| `lg` | 24px | Buttons, cards, panels — the default radius |
| `pill` | 9999px | Chips, avatars, toggles, badges |

Gamma rounds aggressively and consistently. The workhorse radius is a generous 24px (`{rounded.lg}`) on buttons and cards, dropping to 12px only on the tightest tiles and going full pill on chips. There is no sharp corner anywhere — the roundness is core to the friendly, creative-tool personality.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Gamma blue (`{colors.primary}`) fill, white text, 24px radius. The default "Start for free." Hover deepens to `{colors.primary-hover}`.
- **`button-orange`** / **`button-pink`** — The *same* primary button rendered in `{colors.accent-orange}` or `{colors.accent-pink}`. The rotating CTA is the brand signature; pick a hue per section.
- **`button-secondary`** — White (`{colors.surface}`) fill, navy text, `{colors.primary-soft}` light-blue border. The quieter "Watch video" action. Hover tints `{colors.surface-tint}`.

### Cards
- **`card`** / **`card-rounded`** — White surface, 24px (or 12px tighter) radius, feather shadow. Use-case cards each carry an accent color and illustration.

### Inputs
- **`input`** — White fill, hairline border, 12px radius. **`input-focus`** lifts with a soft blue ring rather than a hard outline.

### Navigation
- **`nav-bar`** — Cream background, near-black labels, a single colored "Start for free" CTA pinned right.

### Accent & Meta
- **`link`** — Bright blue (`{colors.primary-bright}`) text.
- **`eyebrow`** — Slate PP Mori category label, lightly tracked.
- **`badge`** — Pale-blue (`{colors.surface-tint}`) fill, deep-blue text, full pill.

## Do's and Don'ts

### Do
- Start on the warm cream canvas (`{colors.background}`), not pure white — the warmth is part of the brand
- Embrace the **rotating CTA**: render "Start for free" in blue (`{colors.primary}`), orange (`{colors.accent-orange}`), or pink (`{colors.accent-pink}`) depending on section
- Keep the marquee headline featherweight (`{typography.display-hero}`, weight 300) — let size and navy color carry it, not bold weight
- Use **PP Mori** (`{typography.body}`) for all functional text — subheads, body, buttons
- Round everything to 24px (`{rounded.lg}`) on buttons and cards; full pills (`{rounded.pill}`) on chips
- Keep shadows feather-soft (`{colors.shadow-soft}`); reserve the blue glow (`{colors.shadow-blue}`) for hero product cards
- Use color as wayfinding — give each use-case card its own accent hue
- Lean on the dreamy 3D illustration system (clouds, balloons) for personality

### Don't
- Don't lock the primary button to a single color — the multi-hue rotation is the signature
- Don't use a clinical pure-white background — Gamma's canvas is warm cream
- Don't set the hero headline bold/heavy — it stays light at weight 300
- Don't introduce sharp corners — the system has no 0px radius anywhere
- Don't reach for heavy drop shadows — depth stays feather-soft and optimistic
- Don't use black for headlines — the brand ink is deep navy (`{colors.ink}`)
- Don't drop the illustration layer for plain screenshots — the playful art is the brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero headline scales 96px → ~40px; nav collapses to a menu; illustration stacks below copy; CTA goes full-width |
| Tablet | 640–1023px | Two-column hero begins; use-case grid drops to two columns |
| Desktop | 1024–1279px | Full layout; copy-left / illustration-right hero |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.5xl}`) |

### Touch Targets
- Buttons run comfortably tall with `14px 24px` padding and 24px radius — easy thumb targets
- Pill chips and toggles stay finger-sized

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the colored "Start for free" CTA persists
- **Hero**: copy and illustration go from side-by-side to stacked
- **Type**: display drops from 96px toward ~40px while keeping proportional negative tracking
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- The 3D illustrations (clouds, balloons, product cards) scale as flex/grid children and reflow above or below copy on narrow screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Cream (`{colors.background}`)
- Text: Deep Navy (`{colors.ink}`) for headlines, Slate (`{colors.ink-secondary}`) for body
- Brand accent: Gamma Blue (`{colors.primary}`) — but rotate with orange (`{colors.accent-orange}`) and pink (`{colors.accent-pink}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: a colored "Start for free" button (`{colors.primary}` / orange / pink)

### Example Component Prompts

- "Create a hero on warm cream (`{colors.background}`) with a 96px deep-navy (`{colors.ink}`) headline in a soft display grotesque at weight 300, letter-spacing -1.92px, a PP Mori (`{typography.body}`) subhead in slate (`{colors.ink-secondary}`), and a blue 'Start for free' button (`{colors.primary}` fill, white text, `{rounded.lg}` radius) next to a white outline 'Watch video' button"
- "Build the rotating CTA: a 'Start for free' button at `{rounded.lg}` radius and `{typography.button}` text, rendered in `{colors.primary}` for one section, `{colors.accent-orange}` for the next, and `{colors.accent-pink}` for a third — same shape, changing hue"
- "Create a secondary button: white (`{colors.surface}`) fill, deep-navy (`{colors.ink}`) text, 1px `{colors.primary-soft}` light-blue border, `{rounded.lg}` radius, hover tints `{colors.surface-tint}`"
- "Design a use-case card: white surface, `{rounded.lg}` radius, feather shadow (`{colors.shadow-soft}`), a PP Mori title (`{typography.title}`), body copy in slate, and a 3D illustration up top — give each card its own accent color"
- "Render a hero product card with the signature blue glow: white surface, `{rounded.lg}` radius, layered blue shadow via `{colors.shadow-blue}`"

### Iteration Guide

1. Start on warm cream (`{colors.background}`). If you reached for pure white, warm it up — the cream is the brand.
2. The primary button is a rotating hue. If every CTA is the same blue, vary them across sections with orange (`{colors.accent-orange}`) and pink (`{colors.accent-pink}`).
3. The hero headline is featherweight (weight 300). If it looks bold, lighten it and lean on navy color and size.
4. All functional text is **PP Mori** (`{typography.body}`). Display can be the soft grotesque; UI is PP Mori.
5. Round everything to `{rounded.lg}` (24px). If you see a sharp corner, soften it.
6. Keep shadows feather-soft (`{colors.shadow-soft}`); the blue glow (`{colors.shadow-blue}`) is for hero cards only.
7. Add the illustration layer — clouds, balloons, painterly 3D objects carry Gamma's personality.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gamma. Brand names and trademarks belong to their respective owners.