---
version: alpha
name: "Gemini"
website: "https://www.gemini.com"
description: >-
  A Winklevoss-founded crypto exchange whose marketing homepage opens with a full-bleed editorial photograph — teal sky and orange clouds — carrying bold white display type at 56px in Geist weight 500, with a "Place a prediction" trading card floated to the right. Below the fold the page returns to a pure-white canvas. The primary button is a pure-black pill on white — no brand color fill. A distinctive orange logo mark (the twin-arcs Gemini symbol) rendered on a bold orange background card appears mid-page. Geist (Vercel's open-source sans) runs the entire type system from 96px display to 12px caption. The system is restrained and exchange-native: no decorative gradients, financial-data density in the prediction market card, and a monochromatic interactive system that reads as credible-fintech rather than speculative-crypto.

seo:
  title: "Gemini Design System for React — black on white, Geist, editorial photo hero, 15 components"
  metaDescription: "Gemini crypto exchange's marketing-site design system as a DESIGN.md file. Geist type family, editorial-photo hero, pure-black pill CTA, orange brand logo mark, 10 color tokens, 15 components. For React, Next.js, and AI tools."
  highlights:
    - "Editorial photo hero — the above-fold canvas is a full-bleed photograph of teal sky and orange clouds, not a brand-colored surface; white display type floats at 56px / weight 500"
    - "Pure-black pill CTA — the primary button is black fill with white text and a 9999px radius; no brand-color fill, no gradient, no hue on the interactive primary action"
    - "Geist at tight negative tracking — display type at 56px runs with -1.6px letter-spacing; the Vercel-developed open-source sans carries the entire type system from 96px to 12px"
    - "Orange logo mark card — the Gemini twin-arc symbol on a bold orange rectangle is the sole chromatic brand moment on the below-fold white canvas"
    - "Prediction market density — the above-fold trading card shows a full prediction UI (tabs, Yes/No percentage buttons, amount chips, odds, payout, CTA) at real data density"
  tags:
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Gemini's homepage does not look like a crypto exchange. The hero is a full-bleed editorial photograph — pale teal sky and billowing orange-pink clouds — with "Crypto was just the beginning." in white Geist at 56px / 500. A "Place a prediction" card floats to the right showing live market data with Yes/No buttons, amount chips, odds percentage, and payout. The trading card is the product experience rendered in the marketing context, but Gemini keeps the surrounding hero anchored in photography rather than in brand chrome. Where Coinbase uses a dark-navy gradient canvas and crypto-product screenshots, and Kraken wraps its hero in a deep purple surface, Gemini removes the brand surface entirely and puts the image world first.

    Below the fold, the page inverts to a pure white canvas with near-black (#010304) text and a single bold orange card holding the Gemini twin-arc logo mark — the only chromatic brand moment below the fold. The primary CTA throughout is a pure-black pill ("Get started," "Start trading") — no brand color fill, no hue at all. This monochromatic interactive discipline is unusual for crypto, where branded-color CTAs (Coinbase blue, Binance yellow) are the norm. Gemini's black pill reads as exchange-confident rather than marketing-bright.

    The DESIGN.md file packages this into machine-readable tokens. Geist runs the entire type system — Vercel's open-source sans at tight negative letter-spacing (-1.6px at 56px, -3% at larger display sizes) carries both the bold editorial headline and the dense 12px / 600 data labels inside the trading card. The spacing base is 8px, with 20px cards and 24px section panels. Feeding this file to an AI coding tool reproduces Gemini's specific moves: editorial-image hero over a plain-white canvas, monochromatic black pill CTA, Geist at tight tracking, and orange brand mark used once below the fold as the system's sole visual exclamation point.
  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.gemini.com"
      title: "Gemini — official site"
      description: "Gemini'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 Gemini's primary brand color?"
      answer: "Gemini does not declare a traditional brand color at high frequency on the marketing surface. The primary button is pure black (#000000), the canvas is pure white (#ffffff), and the dominant text is near-black (#010304). The only chromatic brand moment visible on the captured page is the Gemini twin-arc logo mark rendered in white on a bold orange card mid-page — and a single 'brand'-layered extraction entry of light blue (#c9e0ff) with frequency 1 as a background fill. The system is intentionally monochromatic: black and white carry all interactive and structural duty, with orange appearing once as an illustrative brand mark rather than as a system accent. This restraint distinguishes Gemini from Coinbase (cobalt blue CTAs) and Binance (yellow accents)."
    - id: "typography"
      title: "What typeface does Gemini use, and what can I use as a substitute?"
      answer: "Gemini runs Geist exclusively — Vercel's open-source sans-serif available at github.com/vercel/geist-font. The CSS variables declare it as the font-family for every marketing tier from display-xl (96px) to body-xs (12px). Fallback is 'Geist Fallback', a system-metric-matched fallback. Display sizes use tight negative letter-spacing: -3% at 96px, -1.6px at 56px and 42px. Body and label sizes run at 0px or slight negative tracking. Since Geist is open-source, there is no need for a substitute — it can be used directly via npm install geist. If you need an alternative, Inter is the closest in geometry; the proportions transfer well at body sizes though Inter's display tracking will need manual adjustment to match Geist's -3% at large sizes."
    - id: "canvas-hero"
      title: "Why does Gemini use a photo for its hero instead of a brand-colored surface?"
      answer: "The editorial photograph (teal sky, orange-pink clouds, warm atmospheric light) signals a specific brand positioning: Gemini markets itself as the mature, regulated, institutional-grade exchange — not a crypto startup with aggressive neon branding. A photographic hero reads as confident and established, similar to how financial services brands like Vanguard or Fidelity use lifestyle imagery rather than brand-colored hero fills. The photo also does double duty: its orange-pink cloud tones echo the Gemini orange logo mark that appears below the fold, creating a tonal through-line without requiring any graphic brand element in the hero. Coinbase's dark-navy hero and Kraken's purple surface both feel more aggressively crypto-branded by comparison."
    - id: "button-style"
      title: "What do Gemini's buttons look like?"
      answer: "Gemini's primary button is a pure-black (#000000) pill — 9999px border-radius, white text in Geist at 14px / 600 with 0.35px letter-spacing, 0×16px padding, 40px height. 'Get started' in the top nav and 'Start trading' in the mid-page CTA are the canonical instances. There is no brand-color fill — no orange, no blue. A secondary variant (visible in the trading card) uses the same black pill with slightly different sizing for context-specific CTAs ('Sign in to trade'). The pill radius is the system's most expressive shape; everywhere else (cards, input chips, amount buttons) uses 8px or 20px rounding. The pill CTA on a white canvas reads as confident and exchange-native rather than marketing-bright."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a crypto or fintech marketing site?"
      answer: "Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Gemini's specific moves: editorial-photo hero instead of a brand-color canvas, monochromatic black pill CTA on white, Geist at tight letter-spacing for display type, and a single chromatic brand mark used once mid-page as the visual anchor. The tokens resolve cleanly: {colors.ink} for near-black text and the CTA pill, {colors.canvas} for the white below-fold floor, {typography.display-xl} for the 56px hero. The key discipline to preserve: do not add a colored CTA. The black pill is what makes the system feel exchange-credible rather than marketing-speculative; adding brand color to the button fill would shift the tone toward consumer fintech and undercut the institutional register."

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

colors:
  ink: "#010304"
  ink-muted: "#808181"
  ink-subtle: "#999a9b"
  ink-dark: "#676868"
  ink-deep: "#343536"
  canvas: "#ffffff"
  surface-1: "#ececec"
  hairline: "#808181"
  shadow: "#000000"
  brand-light: "#c9e0ff"

typography:
  display-xl:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 56px
    fontWeight: 500
    lineHeight: 60px
    letterSpacing: "-1.6px"
  display-lg:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 42px
    fontWeight: 500
    lineHeight: 45px
    letterSpacing: "-1.6px"
  display-md:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 32px
    fontWeight: 500
    lineHeight: 37px
    letterSpacing: "-1.6px"
  heading-lg:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 22px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: "-1%"
  heading-md:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 18px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "-0.5%"
  body-md:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 12px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 0
  label-md:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "0.35px"
  label-sm:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 12px
    fontWeight: 600
    lineHeight: 17px
    letterSpacing: 0
  button-md:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "0.35px"
  nav-link:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  caption:
    fontFamily: "Geist, \"Geist Fallback\""
    fontSize: 12px
    fontWeight: 500
    lineHeight: 17px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "8px"
  md: "20px"
  lg: "24px"
  pill: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "104px"

components:
  button-primary:
    backgroundColor: "{colors.shadow}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "52px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px 104px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    borderColor: "{colors.hairline}"
  prediction-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px"
    borderColor: "{colors.hairline}"
  market-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
    padding: "4px 0px"
    borderColor: "{colors.surface-1}"
  text-input:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "10px 16px"
    height: "38px"
  amount-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: "0px 6px"
    height: "24px"
    borderColor: "{colors.hairline}"
  prediction-tab:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "1px 16px"
    height: "24px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    padding: "0px 16px"
---

## Overview

Gemini's marketing site opens with a move borrowed from editorial publishing rather than from crypto-exchange convention. **Photo over brand.** The hero is a full-bleed atmospheric photograph — pale teal sky and orange-pink clouds — with white display type ("Crypto was just the beginning.") in Geist weight 500 at 56px with -1.6px letter-spacing. A prediction-trading card floats to the upper right, rendering live market data (Yes 71% / No 32%, "Cleveland vs New York," payout $70) at real product density. The editorial photograph and the trading card together frame Gemini's pitch: this is a serious financial platform, and the hero is confident enough to open with imagery rather than with a branded canvas. Where Coinbase uses a dark-navy gradient and Kraken anchors on a deep purple surface, Gemini refuses to paint the walls.

Below the fold, the page runs on pure white with near-black ink (`{colors.ink}` — #010304) and a pure-black pill as the only CTA treatment. The sole chromatic moment below the fold is an orange rectangle carrying the Gemini twin-arc logo mark — the brand's visual signature, placed once, used as punctuation rather than as wallpaper. The interactive system is monochromatic: black pill on white, no brand-color accent in any CTA or link.

Typography is Geist — Vercel's open-source sans, declared across every CSS variable for every type tier. Display runs at tight negative tracking (-1.6px at 56px); body and label sizes run flat at 0px or slight negative. The system's data-label tier at 12px / 600 carries the prediction card's percentage readouts and market category chips.

**Key Characteristics:**
- Editorial photo hero — the brand canvas is an atmospheric photograph, not a surface fill; no brand color fills the above-fold area.
- Pure-black pill CTA (`{colors.shadow}` — #000000 on `{colors.canvas}`) at `{rounded.pill}` (9999px) — the single CTA treatment on a white canvas; no hue.
- Geist across every typographic tier — tight negative tracking at display sizes (-1.6px at 56px), flat at body sizes.
- Near-black ink (`{colors.ink}` — #010304, not pure black) — a trace of blue chroma keeps the near-black from reading as harsh against the white canvas.
- Prediction market card as hero product element — tabs (Sports/Crypto/Commodities/Economics/Politics/Tech), Yes/No percentage buttons, amount chips, odds, payout, and sign-in CTA at full product density.
- Orange brand mark card — a single below-fold visual exclamation point; the twin-arc Gemini symbol on a bold orange background rectangle is the system's only chromatic brand moment.
- Warm grey muted tones (`{colors.ink-muted}` — #808181, `{colors.ink-subtle}` — #999a9b) for secondary labels and fine print — the grey is slightly warm, not cool.

## Colors

### Text / Ink

- **Ink** (`{colors.ink}` — #010304): frequency 1927 (966 text, 959 border). The near-black that runs the entire system — slightly blue-tinted rather than pure black, wired as `--color-base-black`. The trace chroma avoids the harsh read of pure black on white.
- **Ink Muted** (`{colors.ink-muted}` — #808181): frequency 400 (200 text, 200 border). Secondary body text, market category labels, and hairline borders. Wired as `--color-gray-500`.
- **Ink Subtle** (`{colors.ink-subtle}` — #999a9b): frequency 94. Tertiary text — fine print, disclaimer copy, footer legal text. Wired as `--color-gray-400`.
- **Ink Dark** (`{colors.ink-dark}` — #676868): frequency 20. Fourth-level grey — used for dense data-label contexts inside the prediction card. Wired as `--color-gray-600`.
- **Ink Deep** (`{colors.ink-deep}` — #343536): frequency 4. Near-black warm grey for select emphasis contexts. Wired as `--color-gray-800`.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 277 (100 text on colored backgrounds, 86 as fill, 91 as border). The page floor below the fold and all card surfaces. Pure white.
- **Surface-1** (`{colors.surface-1}` — #ececec): frequency 7, all in gradients. A light grey used for section dividers and market-row separators. Wired as `--color-gray-100`.

### Interactive

- **Shadow** (`{colors.shadow}` — #000000): frequency 139 (26 text, 8 background, 28 border, 77 shadow). The pure black used for the primary CTA pill background, shadow ink at 77 occurrences, and select high-contrast interactive borders. Wired as `--color-black`.

### Hairline

- **Hairline** (`{colors.hairline}` — #808181): shared with ink-muted. The 200 border occurrences in the muted cluster serve dual duty as both secondary text and card-divider borders — the same warm grey does both jobs.

### Brand Accent

- **Brand Light** (`{colors.brand-light}` — #c9e0ff): frequency 1, as a background fill. The sole entry marked layer: brand — a pale sky blue. Appears once as a hover tint or chip background on the marketing surface; not a dominant accent.

## Typography

### Font Family

The system runs **Geist** exclusively — Vercel's open-source sans-serif, available freely and declared across every CSS variable (body-xs through marketing-desktop-display-xl). Fallback is `"Geist Fallback"` — a metric-matched system font for CLS prevention. There is no secondary family. The variable font supports weights from 100 to 900; the marketing surface uses 400 (regular), 500 (medium), and 600 (semibold). The display tier at 500 weight trusts tight negative letter-spacing (-1.6px to -3%) rather than heavy weight for visual authority.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 56px | 500 | 60px | -1.6px | Hero headline ("Crypto was just the beginning.") |
| `{typography.display-lg}` | 42px | 500 | 45px | -1.6px | Section display, "Access the power of markets" |
| `{typography.display-md}` | 32px | 500 | 37px | -1.6px | Sub-display, promotional section headlines |
| `{typography.heading-lg}` | 22px | 500 | 28px | -1% | Section sub-headings and prediction card market titles |
| `{typography.heading-md}` | 18px | 500 | 24px | -0.5% | Feature section headings |
| `{typography.body-md}` | 14px | 400 | 20px | 0 | Card body text and prediction market descriptions |
| `{typography.body-sm}` | 12px | 400 | 17px | 0 | Caption text and fine print |
| `{typography.label-md}` | 14px | 600 | 20px | 0.35px | Interactive labels, CTA text, and market category chips |
| `{typography.label-sm}` | 12px | 600 | 17px | 0 | Data readouts inside prediction card (percentages, amounts) |
| `{typography.button-md}` | 14px | 600 | 20px | 0.35px | Primary CTA pill labels ("Get started," "Start trading") |
| `{typography.nav-link}` | 16px | 400 | 18px | 0 | Top nav links (Crypto, Predictions, Credit Card, Developers) |
| `{typography.caption}` | 12px | 500 | 17px | 0 | Footer legal text and disclaimer labels |

### Principles

The display system uses **weight 500 plus tight negative tracking** as its authority signal — not weight 700. At 56px with -1.6px letter-spacing, Geist at 500 reads as self-assured rather than loud. Body and label sizes invert the tracking: labels at `{typography.button-md}` and `{typography.label-md}` use +0.35px (slight positive tracking) for legibility at small sizes, while display types go sharply negative. The data-label tier at 12px / 600 inside the prediction card handles percentage readouts and odds display — the heaviest weight appears at the smallest size, where it ensures legibility for financial data.

### Note on Font Substitutes

Geist is open-source and free — use it directly. Install via `npm install geist` and import with `import { GeistSans } from 'geist/font/sans'` in Next.js. If you specifically cannot use Geist, **Inter** is the closest substitute in geometry and proportion; adjust display letter-spacing to -0.04em at 56px to approximate Geist's -1.6px. **DM Sans** at the same weights is a second option, though its counters are slightly rounder at large sizes.

## Layout

### Spacing System

- **Base unit:** 8px — appearing 449 times as the dominant gap value.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 104px.
- **Hero heading padding:** `{spacing.3xl}` (104px) horizontal — the display text is inset from the photo edges.
- **Card internal padding:** `{spacing.md}` (12px) for the compact prediction card; `{spacing.sm}` (8px) for market-row compact items.
- **Section padding:** `{spacing.lg}` (24px) standard; `{spacing.xl}` (32px) on major section transitions.

### Grid & Container

- **Hero:** full-bleed atmospheric photograph, approximately 100vh, with the prediction card as an absolute-positioned floating element at the upper right.
- **Prediction market strip:** a horizontal scroll of 4 market category cards (Sports, Predictions, Space, Business) below the fold, each at equal width.
- **Mid-page CTA:** single centered column — large display headline, one-sentence sub-copy, and a single black pill CTA.
- **Brand mark card:** a bold orange rounded rectangle centered in its section — standalone, no sibling elements.
- **Max content width:** 80rem (1280px) from the `--container-7xl` CSS variable.

### Rhythm

The page has two registers: **dense** (the hero prediction card, the market category strip) and **spacious** (the mid-page editorial sections with large display type and breathing room). The alternation signals the dual product surface — data-dense trading tools and confident editorial brand statements — without either overwhelming the other.

## Elevation

The system uses **shadow as the primary elevation tool** on a white canvas. The extraction shows 77 occurrences of `{colors.shadow}` (#000000) as shadow ink — the prediction card and floating UI elements all use a `drop-shadow-md` (0 3px 3px rgba(0,0,0,0.12)) for lift against the white page.

- **Flat:** editorial sections, footer, nav — default white canvas state.
- **Card shadow:** the floating prediction card uses a soft black drop shadow for the primary elevation signal — no colored or tinted shadow.
- **Pill buttons:** no shadow; the black fill on white canvas provides sufficient contrast without elevation.

## Shapes

The radius scale runs from pill to tight:

- `{rounded.none}` 0px — input fields in the hero overlay and text fields within the trading card.
- `{rounded.sm}` 8px — amount chips (`$50`, `$100`, `$500`, `$1,000` buttons in the prediction card) and small compact UI surfaces.
- `{rounded.md}` 20px — the prediction card and market category cards below the fold. 75 occurrences.
- `{rounded.lg}` 24px — larger promotional panels.
- `{rounded.pill}` 9999px — the primary CTA button ("Get started"), the prediction-tab strip (Sports / Crypto / Commodities / etc.), and the percentage vote buttons (Yes 71% / No 32%). 170 occurrences — the dominant radius in the system by count.

The pill is the signature shape. The vast majority of interactive surfaces (CTA pills, tab rows, vote buttons) use 9999px rounding — a convention common in crypto and fintech where pill-shaped controls signal tappability. The prediction card itself uses 20px, which creates a card-ier container for the dense data inside.

## Components

**`button-primary`** — Pure black `{colors.shadow}` fill, white text in `{typography.button-md}` (14px / 600 / 0.35px), `{rounded.pill}` 9999px, 0×16px padding, 40px height. "Get started" and "Start trading" are the canonical instances on a white canvas.

**`button-secondary`** — White fill, near-black text, 1px near-black border, same pill radius and size. Used in contexts where a second action sits alongside the primary pill.

**`top-nav`** — White canvas, near-black text in `{typography.nav-link}` (16px / 400), no radius, 52px height. Houses the Gemini wordmark and twin-arc logo, product links (Crypto, Predictions, Credit Card, Developers, Institutions, Resources), and "Sign in" / "Get started" at the right.

**`nav-link`** — Transparent background, near-black text, 0×12px padding. No hover decoration captured; the active link likely underlines or adds a subtle ink tint.

**`hero-heading`** — White text on the photo hero at `{typography.display-xl}` (56px / 500 / -1.6px), 0×104px horizontal padding. The editorial headline — "Crypto was just the beginning." — carries the above-fold message.

**`section-heading`** — Near-black `{colors.ink}` at `{typography.display-md}` (32px / 500 / -1.6px). "Access the power of markets" is the canonical below-fold instance.

**`body-paragraph`** — Near-black `{colors.ink}` at `{typography.body-md}` (14px / 400). The sub-copy beneath section headings.

**`body-paragraph-muted`** — `{colors.ink-subtle}` (#999a9b) at `{typography.body-sm}` for legal text and secondary captions.

**`card`** — White canvas fill, 1px `{colors.hairline}` (#808181) border, `{rounded.md}` 20px radius, 8×12px padding. The market category cards below the fold — each holds a category icon, label, prediction question list, and a volume summary.

**`prediction-card`** — White canvas fill, `{colors.hairline}` border, `{rounded.md}` 20px, 12px padding. The hero-overlay trading card — holds tabs, match display (Cleveland vs New York), Yes/No percentage pill buttons, amount chip row, odds, payout display, and "Sign in to trade" CTA.

**`market-row`** — White fill, 1px `{colors.surface-1}` bottom divider, `{rounded.none}`, 4px top/bottom padding. Each prediction item within a category card — question text, percentage readouts, yes/no count, and a + button.

**`text-input`** — Transparent fill, white text (appears within the dark overlay on the hero), `{rounded.none}`, 10×16px padding, 38px height. Email input inside the hero sign-up or app-download module.

**`amount-chip`** — White fill, `{rounded.sm}` 8px, `{colors.hairline}` border, 0×6px padding, 24px height. The preset-amount buttons ($50 / $100 / $500 / $1,000) inside the prediction card.

**`prediction-tab`** — White fill, `{rounded.pill}` radius, 1×16px padding, 24px height. The category tab strip at the top of the prediction card (Sports / Crypto / Commodities / Economics / Politics / Tech). Active tab: black fill with white text.

**`footer`** — White canvas, `{colors.ink-subtle}` text at `{typography.caption}` (12px / 500), 0×16px padding. Legal disclaimers, trust company disclosures, and copyright.

## Do's and Don'ts

**Do** keep the primary CTA pill pure black (`{colors.shadow}` — #000000) on the white canvas. The monochromatic interactive discipline is what separates Gemini from consumer crypto brands; adding a hue to the button fill shifts the register from exchange-credible to marketing-bright.

**Do** use tight negative letter-spacing (-1.6px) at display sizes. The `-1.6px` tracking at 56px is the system's editorial authority signal — without it, Geist at 500 weight reads as generic rather than considered. At 32px the same -1.6px applies; at body sizes (14–18px) tracking returns to 0.

**Do** use the orange brand mark card as a singular below-fold punctuation point — not repeated. The visual impact of the Gemini orange on white depends on scarcity; multiplying orange elements across the page would turn a confident statement into wallpaper.

**Do** treat the prediction card as a real product UI, not a simplified illustration. The card's value comes from its data density — showing actual percentages, payout math, and market names signals platform credibility. Simplifying it to a generic "place a trade" sketch loses the distinguishing move.

**Don't** introduce a brand-color surface in the hero. The editorial photograph is the hero canvas; replacing it with a colored fill (even the Gemini orange or a deep purple) would shift the brand register from established exchange toward aggressive crypto startup.

**Don't** use `{colors.brand-light}` (#c9e0ff) as a decorative accent. The pale blue appears only once in the captured surface and is not a system design token — using it in secondary UI would invent a brand accent that does not exist in the marketing language.

**Don't** soften the display type to weight 400 at large sizes. The system uses weight 500 with tight tracking as its authority signal; weight 400 at 56px would read as light and uncertain rather than editorial and confident.

**Don't** mix pill and non-pill CTAs in the same action cluster. The system's interactive surfaces are either pills (all CTAs) or small-radius amount chips (data-card context). A `{rounded.md}` 20px CTA button alongside a `{rounded.pill}` CTA would break the binary shape grammar.

## Known Gaps

- **Dark mode:** the hero photograph implicitly provides a dark surface above the fold, but the below-fold system is light-only. Gemini's product surfaces (the exchange trading UI at gemini.com/trade) use a dark mode extensively; it is not represented here.
- **Authenticated exchange UI:** this DESIGN.md captures the marketing site only. The trading dashboard, order book, chart surfaces, and portfolio views carry a separate high-density token system not represented here.
- **Orange brand color token:** the Gemini orange (visible on the logo mark card and in the logo itself) does not appear as a CSS variable in the extracted token set; it is likely an SVG fill or Tailwind one-off rather than a declared custom property.
- **Hover and focus states:** the top nav hover, pill button focus ring, and prediction-tab active states are not captured from the marketing surface.
- **Motion:** the hero photograph may have parallax or atmospheric animation; the market category strip scrolls horizontally. End-state values only are captured here.
- **Credit card product surface:** Gemini offers a crypto credit card; its marketing page likely has specialized card-product tokens not captured on the main marketing surface.