A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
20tokens
10type steps
6radius steps
10pxspacing base
Gemini, in one page
Google Gemini's iOS app is a calm, conversational surface where the only chrome is the conversation itself. The canvas is clean white (#FFFFFF) in light mode and a deep neutral charcoal (#1E1E1E) in dark mode — there are no cards, no boxes, no list furniture. A conversation reads like a document: the user's turn sits in a soft gray chip aligned to the trailing edge, and the assistant's reply is plain flowing text on the canvas, marked only by a small gradient sparkle. This document-not-feed posture is the whole point: Gemini wants the model's words to feel like thinking made visible, not UI.
The accent system is a single, unmistakable gesture: the Gemini gradient — a smooth sweep from Google Blue (#4285F4) through violet (#9B72CB) to coral (#D96570). It is rationed to brand moments: the sparkle ✦ logomark, the streaming shimmer that runs across text as it generates, the focused state of the prompt bar, and the suggestion-chip accents. Solid Google Blue (#4285F4) is the interactive primary (send button active, links). Everything else is ink, gray, or the soft surface (#F0F4F9 light / #282A2C dark). The gradient is precious — it appears where intelligence is happening.
Typography is Google Sans (Google's product typeface), rendered here with Inter as the closest free substitute, at weights 400 / 500 / 700. The hierarchy is restrained and reading-optimized: 12–28pt, weights concentrated at 400 (body/answers) and 500 (titles/labels). There are no oversized hero headlines — the answer text *is* the content, set at a comfortable 16pt with generous 1.55 line-height so long responses read like prose. The most expressive type moment is the streaming answer: text appears token-by-token with a soft gradient shimmer sweeping the leading edge as it writes.
Key Characteristics:
- Document-not-feed canvas — white (
#FFFFFF) light / charcoal (#1E1E1E) dark, no cards - The Gemini gradient (
#4285F4 → #9B72CB → #D96570) as the only accent, rationed to brand moments - Sparkle ✦ logomark — the gradient mark for "intelligence here"
- User turn = soft gray chip (trailing-aligned); assistant turn = plain text on canvas
- Streaming gradient shimmer — text generates token-by-token with a gradient edge sweep
- Prompt bar with mic + image add — the persistent, focused composer
- Suggestion chips — soft pills with gradient hairline accents below the greeting
- Side drawer navigation (no bottom tabs) — recent conversations + Gems
- Google Sans typeface (Inter fallback), weights 400/500/700, reading-optimized
- Full light + dark parity — the gradient is identical across themes
Do's and don'ts
Do
- Treat the conversation as a document — white/charcoal canvas, no cards around turns
- Reserve the Gemini gradient for brand moments: the sparkle, streaming edge, focus ring, chip accents
- Render the user turn as a soft gray chip (trailing-aligned, 4pt pointing corner); the assistant turn as plain text with a leading gradient sparkle
- Use solid Google Blue (
#4285F4) for the interactive send button and links — the gradient is not a button fill - Stream answers token-by-token with a gradient shimmer at the leading edge
- Use the gradient focus ring on the prompt bar — it is the signature "listening" cue
- Keep answer body at 16pt with 1.55 line-height so long responses read like prose
- Provide full light + dark parity; the gradient is identical across themes
- Use Google Sans (Inter fallback) at weights 400/500/700, with Roboto Mono for code
Don't
- Don't bubble the assistant turn — it is plain text on the canvas, not a card
- Don't tint body text with the gradient — text is always solid ink; the gradient is structural
- Don't use the gradient as a flat fill behind paragraphs or as a button background
- Don't add a bottom tab bar — the side drawer is the sole primary navigation
- Don't crowd the prompt bar or remove its generous padding — it is always reachable
- Don't use thin font weights — the ramp is 400/500/700
- Don't over-shadow — the conversation is flat; only the prompt bar and overlays elevate
- Don't skip the streaming shimmer / thinking indicator — generation must feel alive
- Don't diverge the gradient stops between light and dark — keep
#4285F4 → #9B72CB → #D96570exact
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Gemini design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Google Blue: #4285f4
- Blue Pressed: #3367d6
- Gradient Violet: #9b72cb
- Gradient Coral: #d96570
- Canvas White: #ffffff
- Surface Soft: #f0f4f9
- Surface Raised: #ffffff
- Divider: #e3e3e3
- Text Primary: #1f1f1f
- Text Secondary: #5f6368
Type:
- families: Google Sans, Google Sans Text, Inter, Fallback Stack
- scale: 11, 13, 14, 15, 16, 17, 18, 20, 22
- weights: 400, 500
Shape:
- radius: 12, 18, 20, 22, 24, 26
Spacing: 10, 12, 24
Rules:
- Treat the conversation as a document — white/charcoal canvas, no cards around turns
- Reserve the Gemini gradient for brand moments: the sparkle, streaming edge, focus ring, chip accents
- Render the user turn as a soft gray chip (trailing-aligned, 4pt pointing corner); the assistant turn as plain text with a leading gradient sparkle
- Use solid Google Blue (`#4285F4`) for the interactive send button and links — the gradient is not a button fill
- Stream answers token-by-token with a gradient shimmer at the leading edge
- Use the gradient focus ring on the prompt bar — it is the signature "listening" cue
Avoid:
- Don't bubble the assistant turn — it is plain text on the canvas, not a card
- Don't tint body text with the gradient — text is always solid ink; the gradient is structural
- Don't use the gradient as a flat fill behind paragraphs or as a button background
- Don't add a bottom tab bar — the side drawer is the sole primary navigation
- Don't crowd the prompt bar or remove its generous padding — it is always reachable
- Don't use thin font weights — the ramp is 400/500/700
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Gemini Gradient: Linear sweep
#4285F4(0%) →#9B72CB(50%) →#D96570(100%). Used for the sparkle, streaming shimmer, focused prompt-bar ring, and chip accents — never as a flat fill behind body text. - Google Blue (
#4285F4): Interactive primary — active send button, links, selected states. - Blue Pressed (
#3367D6): Pressed state for the blue send button. - Gradient Violet (
#9B72CB): Mid-stop; used solo for subtle secondary accents. - Gradient Coral (
#D96570): End-stop; used solo for warm highlights (rare).
Canvas & Surfaces (Light)
- Canvas White (
#FFFFFF): Primary canvas — the conversation document. - Surface Soft (
#F0F4F9): User-turn chip, prompt-bar fill, suggestion chips, drawer. - Surface Raised (
#FFFFFF+ hairline): Sheets, menus. - Divider (
#E3E3E3): Hairlines, chip borders, drawer separators. - Text Primary (
#1F1F1F): Answer text, titles, primary UI text. - Text Secondary (
#5F6368): Timestamps, helper text, placeholders, captions. - Text Tertiary (
#9AA0A6): Disabled labels, very low-emphasis meta.
Canvas & Surfaces (Dark)
- Dark Canvas (
#1E1E1E): Primary dark canvas — the conversation document. - Dark Surface (
#282A2C): User-turn chip, prompt-bar fill, suggestion chips, drawer. - Dark Divider (
#3C3C3C): Hairlines, chip borders, separators. - Dark Text Primary (
#E3E3E3): Answer text and titles on dark. - Dark Text Secondary (
#9AA0A6): Helper text and captions on dark. - Dark Blue (
#8AB4F8): Google Blue lightened for AA contrast on dark (links, send).
Semantic
- Success Green (
#1E8E3Elight /#81C995dark): "Copied", confirmation toast. - Warning Amber (
#F9AB00): Rate-limit / safety notice banner. - Error Red (
#D93025light /#F28B82dark): Generation failed, network error.
Type scaleRead the full spec
Font Family
- Primary:
Google Sans(Google product typeface) +Google Sans Textfor body - Substitute / Fallback:
Inter— closest free geometric-humanist match - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Code blocks:
Roboto Mono/'SF Mono', Menlo, monospacefor fenced code in answers
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Greeting (Hero) | Google Sans | 28pt | 500 | 1.2 | -0.2pt | "Hello, Alex" empty-conversation greeting |
| Screen Title | Google Sans | 22pt | 500 | 1.25 | -0.1pt | Drawer header, settings title |
| Section Header | Google Sans | 18pt | 500 | 1.3 | 0pt | "Recent", "Gems" in the drawer |
| Answer Heading | Google Sans | 20pt | 500 | 1.3 | 0pt | Markdown H2 inside a response |
| Answer Subheading | Google Sans | 17pt | 500 | 1.35 | 0pt | Markdown H3 inside a response |
| Answer Body | Google Sans Text | 16pt | 400 | 1.55 | 0pt | The model's prose — the core content |
| User Turn | Google Sans Text | 16pt | 400 | 1.45 | 0pt | Text inside the gray user chip |
| List Item (answer) | Google Sans Text | 16pt | 400 | 1.5 | 0pt | Bulleted/numbered list lines in a response |
| Prompt Input | Google Sans Text | 16pt | 400 | 1.4 | 0pt | Text typed into the prompt bar |
| Suggestion Chip | Google Sans Text | 14pt | 500 | 1.3 | 0pt | Prompt-suggestion pill label |
| Metadata | Google Sans Text | 13pt | 400 | 1.3 | 0pt | Timestamps, model label, drawer subtitle |
| Code | Roboto Mono | 14pt | 400 | 1.5 | 0pt | Fenced code blocks inside answers |
| Label (UPPER) | Google Sans | 11pt | 500 | 1.2 | 0.6pt | "TODAY" / "PREVIOUS 7 DAYS" drawer labels |
| Button | Google Sans | 15pt | 500 | 1.0 | 0pt | Text buttons, dialog actions |
Principles
- Weights at 400 / 500 / 700: Regular for all reading text, medium for titles/labels/chips, bold reserved for strong emphasis inside answers — no thin
- Reading-optimized body: answer text is 16pt at 1.55 line-height so long responses read like prose, not chat snippets
- The gradient never tints body text: text is always solid ink; the gradient lives in the sparkle, the streaming edge, and chip accents
- Negative tracking only on the greeting/titles: -0.2pt at 28pt; body sits at 0pt
- Dynamic Type respected: greeting, answers, body scale; the prompt-bar height and drawer labels are layout-pinned
Components and layoutRead the full spec
Buttons
Send Button (prompt bar)
- Shape: Circle, 36pt diameter, sits at the trailing edge of the prompt bar
- Empty state: glyph
arrow.up18pt,#9AA0A6, transparent background - Active state (text present): background solid
#4285F4, glyph#FFFFFF - Pressed: scale 0.92, background
#3367D6, soft haptic - Generating: morphs to a
stop.fillsquare in#4285F4to interrupt the stream
Suggestion Chip
- Background:
#F0F4F9(light) /#282A2C(dark) - Border: 1pt
#E3E3E3(light) /#3C3C3C(dark) — OR a 1pt gradient hairline on featured chips - Text:
#1F1F1F/#E3E3E3, 14pt w500 - Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
- Pressed: background darkens ~6%, scale 0.98
- Optional leading sparkle (12pt gradient) on AI-action chips
Icon Action (Mic, Add image, Copy, Regenerate, Share, More)
- Size: 22pt glyph, 44pt hit area
- Default:
#5F6368(light) /#9AA0A6(dark) - Active/primary:
#4285F4/#8AB4F8 - Mic in the prompt bar: 22pt
#5F6368; while listening it gets a gradient pulse ring
Text Button (dialog "Cancel" / "Done")
- Font: Google Sans, 15pt, weight 500
- Color:
#4285F4/#8AB4F8 - No background, no underline, 44pt hit area
Pill Button (primary dialog action)
- Background:
#4285F4 - Text:
#FFFFFF, 15pt w500 - Padding: 10pt vertical, 24pt horizontal, corner radius 500pt
- Pressed:
#3367D6, scale 0.98
Cards & Containers
User Turn Chip (The Signature)
- Background:
#F0F4F9(light) /#282A2C(dark) - Text:
#1F1F1F/#E3E3E3, 16pt w400 - Corner radius: 20pt (4pt on the bottom-trailing corner to "point" at the sender)
- Padding: 12pt vertical, 16pt horizontal
- Max width: ~80% of the conversation column, aligned to the trailing edge
- No avatar, no name — minimalism is the point
Assistant Turn (The Signature)
- No bubble, no background — plain markdown text directly on the canvas
- Leading: a small gradient sparkle ✦ (20pt) marking the start of the response
- Full conversation-column width, 16pt body at 1.55 line-height
- Footer action row appears after the stream completes: Copy, Regenerate, Share, ⋯ (22pt,
#5F6368) - Streaming: tokens append left→right with a soft gradient shimmer at the leading edge
Code Block (inside an answer)
- Background:
#F0F4F9(light) /#282A2C(dark), corner radius 12pt - Header bar: language label (13pt
#5F6368) + a "Copy" text button - Body: Roboto Mono 14pt, 1.5 line-height, 16pt padding, horizontal scroll
- Subtle 1pt
#E3E3E3/#3C3C3Cborder
Drawer Conversation Row
- Height: 48pt
- Leading: a 18pt chat/sparkle glyph; title (16pt w400, 1-line truncating)
- Pressed: background
#F0F4F9/#282A2C, corner radius 24pt (full-height pill highlight) - Active conversation: persistent
#F0F4F9/#282A2Cpill +#1F1F1Ftext
Sheet / Menu
- Background:
#FFFFFF/#1E1E1E, corner radius 20pt top corners, 16pt grabber - Rows: 52pt, 1pt
#E3E3E3/#3C3C3Cdividers, leading 22pt glyph + label
Navigation
Top Bar
- Height: 44pt + safe area
- Leading: hamburger / drawer toggle (24pt
#5F6368) - Center: model selector — "Gemini" with a small chevron, tappable to switch model (e.g., Flash / Pro), 17pt w500
- Trailing: new-chat / compose icon (22pt) + account avatar (28pt circular)
- Background: matches canvas; subtle hairline on scroll only
Side Drawer
- Width: ~82% of screen, slides from the leading edge over a
rgba(0,0,0,0.4)scrim - Top: a "New chat" pill (gradient-hairline or solid
#F0F4F9) + search field - Body: grouped recents under uppercase day labels ("TODAY", "PREVIOUS 7 DAYS"), then "Gems"
- Bottom: settings + account row
- No bottom tab bar — the drawer is the sole primary navigation
Input Fields
Prompt Bar (The Composer)
- Background:
#F0F4F9(light) /#282A2C(dark) - Corner radius: 26pt, min height 52pt, full-width with 16pt side margins
- Leading: "+" add-content icon (22pt
#5F6368) opening image/file/camera - Center: text field, placeholder "Ask Gemini", 16pt w400
#5F6368 - Trailing: mic icon (22pt) and the send button (see Buttons)
- Focused: a 1.5pt gradient ring wraps the bar (the focus signal)
- Multiline: grows up to ~5 lines, then scrolls internally
Search Field (drawer)
- Background:
#FFFFFF/#1E1E1Ewith a 1pt#E3E3E3/#3C3C3Cborder - Height: 44pt, corner radius 22pt
- Leading
magnifyingglass18pt#5F6368, placeholder "Search chats"
Distinctive Components
Gradient Sparkle Mark
- The ✦ four-point sparkle filled with the Gemini gradient (
#4285F4 → #9B72CB → #D96570) - Marks the assistant turn, the empty-state hero, and the app icon — the single brand signifier of "intelligence here"
- Sizes: 20pt (turn marker), 40–56pt (empty-state hero), 12pt (chip accent)
Streaming Answer Shimmer
- As a response generates, text appears token-by-token; a soft gradient highlight (~120pt wide, the Gemini gradient at low opacity) sweeps the leading edge of the newest text
- A 3-dot gradient "thinking" indicator shows before the first token arrives
- The send button morphs to a stop control while streaming
Suggestion Chip Row
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Conversation column tight to 16pt margins; chips scroll sooner |
| iPhone 13/14/15 | 390pt | Standard single-column conversation |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the top bar |
| iPhone 15/16 Pro Max | 430pt | Wider reading column, larger empty-state sparkle |
| iPad | 768pt+ | Persistent drawer (not overlay) + a centered ~720pt reading column |
Dynamic Type
- Greeting, answer body/headings, user turn, list items: full scale
- Prompt-bar height: grows with text size but base height is layout-pinned
- Drawer day labels and metadata: fixed sizes
- Code blocks: scale but preserve monospace alignment
Orientation
- Conversation: portrait-primary; landscape supported (column re-centers, max readable width)
- iPad: all orientations, persistent drawer + centered column
- Image/attachment viewer: rotates to fit media
Touch Targets
- Send button: 36pt visual, 44pt hit area
- Mic / add / answer actions: 22pt glyph, 44pt hit area
- Suggestion chips: full chip tappable, ≥ 40pt tall
- Drawer rows: 48pt height, full-row tappable
- Model selector: full "Gemini ⌄" label tappable, 44pt tall
Safe Area Handling
- Top: top bar respects safe area + Dynamic Island
- Bottom: prompt bar floats above the home indicator with 12pt clearance; KB-aware
- Drawer: full-height overlay respecting safe area, scrim covers the rest
- Conversation: respects safe area top/bottom; the prompt bar never overlaps the last turn (auto-scroll)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-gemini {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1f1f1f;
--heading-color: #1f1f1f;
--link-color: #956500;
--link-hover-color: #624200;
--border-color: #d7d7d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(31,31,31,0.06);
--card-hover-shadow: 0 6px 18px rgba(31,31,31,0.12);
--header-bg: #1f1f1f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6d6d6d;
--button-bg: #f9ab00;
--button-text-color: #000000;
--button-hover-bg: #c68800;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f2f2f2;
--button-secondary-text-color: #1f1f1f;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d7d7d7;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1f1f1f;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/misc/gemini/DESIGN.md· 22.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.