What is Gemini's primary brand color?

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

What typeface does Gemini use, and what can I use as a substitute?

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.

Why does Gemini use a photo for its hero instead of a brand-colored surface?

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.

What do Gemini's buttons look like?

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.

Can I use this DESIGN.md to build a crypto or fintech marketing site?

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.

Gemini Design System

Gemini crypto exchange's marketing-site design system as a DESIGN.md file.

About Gemini DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source gemini.com

Fintech & Crypto

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.

What makes it distinct

Editorial photo herothe 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 CTAthe 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 trackingdisplay 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 cardthe Gemini twin-arc symbol on a bold orange rectangle is the sole chromatic brand moment on the below-fold white canvas
Prediction market densitythe above-fold trading card shows a full prediction UI (tabs, Yes/No percentage buttons, amount chips, odds, payout, CTA) at real data density

Live at gemini.com

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

gemini.com

Explore Gemini

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.

Other

Specialty colors.

Gemini design system FAQ

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

Gemini — official site

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