What is Gemini's primary brand color?

Gemini's single chromatic voltage on the marketing surface is Google Blue 700 (the navy-leaning blue used as Google's standard CTA hue), rendered as the fully-rounded Sign-in pill anchored top-right. It appears exactly once above the fold as a background fill. Every other element on the page is greyscale: the headline ink sits at near-black, the input field is white, the suggestion chips are white with greyscale text, and the canvas itself is a pale blue-gray. The famous Gemini sparkle gradient (the multicolor diamond mark) is not part of the marketing chrome captured here — it lives in the app icon and inside product surfaces.

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

Gemini runs Google Sans Flex across every display, heading, body, and label tier, with Google Sans Text as a companion family for button labels and footer copy. Display headlines sit at 45px in weight 400 with -0.5px tracking; suggestion-chip and nav text at 14-16px in weight 400-500; the smallest labels at 12px. There is no weight 700 on the page. The closest open-source substitute is Inter at the same weights — Inter's slightly narrower counters read close to Google Sans Flex at the 16px body sizes, and Geist is comparable at the 45px display tier. The display weight of 400 (not 500 or 700) is the move to preserve when substituting.

Why is Gemini's canvas pale gray instead of pure white?

The page floor is a soft pale blue-gray (clustered around three near-identical hex values: #f0f4f8, #e9eef6, #f0f4f9) wired into the Material surface system, not pure white. White is reserved for elevated surfaces — the prompt input field and the four suggestion chips. The contrast is intentional: by holding the canvas at a subtle gray and pushing the input to white, the input reads as the most-elevated, most-tappable element on the page without needing a drop shadow. It is the same surface-ladder discipline Google uses across Workspace and Drive, only here with one fewer elevation tier.

What is Gemini's corner-radius philosophy?

The system is fully-rounded by default. 9999px (full pill) appears 26 times across the input field, the four suggestion chips, the Sign-in pill, and most nav surfaces — every interactive element is a full pill. The only non-pill radii in the entire captured page are a 32px corner on a single feature card and 100px on the primary CTA. There is no 4px, 6px, 8px, or 12px tier; the system does not believe in rounded-but-not-pill geometry. The result is a chrome where every surface reads as a tappable affordance rather than as a static block.

Can I use this DESIGN.md to build my own AI-assistant page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Gemini's specific moves: pale-gray canvas with white elevated surfaces, Google Sans Flex at weight 400 across every tier, full-pill geometry across every chip and button, and a single Google-blue voltage held for the primary CTA. You can also reference values directly — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the product-is-the-page move only works if your prompt input is itself the central artifact users care about; for an explainer-heavy product this would feel empty.

Gemini Design System

Google Gemini's marketing chrome captured as a DESIGN.md.

About Gemini DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source gemini.google.com

AI & LLM Platforms

Gemini's marketing surface does what almost no AI brand does at this scale: it shows you the product instead of describing it. There is no editorial hero, no animated mesh gradient, no testimonial wall — just a pale blue-gray canvas, a 45px Google Sans Flex headline in regular weight ("Meet Gemini, your personal AI assistant"), and the actual prompt input rendered as a fully-rounded white field in the middle of the page. Four suggestion chips (Write, Plan, Research, Learn) sit beneath as fully-rounded pills. The only chromatic decoration is a single Google-blue Sign-in pill anchored top-right. Where ChatGPT puts its marketing on a separate landing page and Claude leans on a cream editorial layout with serif headlines, Gemini collapses marketing and product into one surface — the page IS the prompt box.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 9 color tokens drawn from a Material-derived palette dominated by greyscale ink and a single Google Blue 700 accent for the primary CTA pill; 8 typography tokens running Google Sans Flex with a Google Sans Text companion for button labels — display at 45px in weight 400, body at 14-16px in weight 400, the heaviest moment on the page being weight 500 at the smallest sizes; 6 corner-radius tokens dominated by a 9999px pill (26 occurrences in the captured render) with no flat-cornered surface anywhere; 7 spacing values on a 4px base; and 13 component definitions covering the Google-blue Sign-in pill, the white prompt input, the suggestion chip, the top-nav link, and the body-paragraph tier.

Feed this file to an AI coding tool and it reproduces Gemini's specific moves: pale-gray canvas instead of pure white, Google Sans Flex across every tier at weight 400, fully-rounded everything (no rectangular surfaces), and a single Google-blue voltage held for the one Sign-in pill. The one thing worth borrowing only if your product is itself the marketing artifact: the willingness to put NO additional chrome around the prompt input. Gemini gets away with it because the product needs no explanation; most AI tools still need an interstitial sentence.

What makes it distinct

Product-is-the-pagethe marketing surface is the Gemini app itself, no separate hero block, no editorial chrome, just the prompt input and four suggestion chips
Single Google-blue pillGoogle Blue 700 appears exactly once above the fold as the Sign-in pill, the only chromatic accent on a canvas that is otherwise all greys
Full-pill geometry9999px radius appears 26 times across input, chips, nav buttons; no flat-cornered surfaces exist anywhere in the captured page
Google Sans Flex at weight 400display headline sits at 45px in weight 400 with -0.5px tracking, no 500 or 700 anywhere on the hero
Pale-gray canvas, not whitethe page floor is a soft #f0f4f8 with white only on the input field and chip surfaces, a subtle warmth move against Google's usual pure white

Live at gemini.google.com

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

gemini.google.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

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