Gemini Design System

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

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.