aistudio.google.com — Design System

1. Visual Theme & Atmosphere

Google AI Studio is a dark workspace — not merely dark-themed, but intentionally low-stimulation to keep focus on the model output. The visual language is minimal Angular Material: flat surfaces, no shadows, soft rounded corners. The palette is deliberately close to neutral with a single blue accent (#0842A0), signaling trust and Google’s brand without screaming it. The experience says “professional workbench” over “consumer product.” What’s notably absent: gradients, illustrations, decorative elements — this is developer infrastructure dressed in calm authority.

2. Color Palette & Roles

Background

• Page / body: rgb(31,31,31) — dark charcoal, not pure black, reduces eye strain
• Code blocks: rgb(31,31,31) — matches body, code blends with content layer
• Model badge: rgba(37,37,37,0.5) — slightly elevated, semi-transparent

Text

• Primary: rgb(212,212,212) — light grey, not white, reduces contrast harshness
• Links: rgb(135,169,255) — periwinkle blue, readable on dark background, Google tint

Accent / Action

• Primary buttons: rgb(8,66,160) — deep Google blue, high confidence action
• Hover state: rgb(60,60,60) on nav items — subtle surface reveal on hover

Interactive

• Nav hover background: rgb(60,60,60) / border: rgb(62,62,62) — barely-there lift
• Default nav opacity: 0.9 — items start slightly faded, become full on hover

Borders

• No explicit border tokens — separation is implied by background contrast, not drawn lines

3. Typography Rules

AI Studio makes an unusual choice: Inter Tight for h1, regular Inter for everything else. This pairing is the same typeface family at different optical widths — creating hierarchy through compression rather than weight or size change.

The 14px baseline is small but appropriate for a tool interface where information density matters. Line-height of 20px (1.43 ratio) is tight — a workspace rhythm, not a reading rhythm. Notably, h1 at weight 300 is deliberately light — this is not a product page, it’s a tool, and the headline doesn’t need to sell.

4. Component Stylings

Buttons

• Background: rgb(8,66,160) — deep blue, solid fill
• Text: rgb(226,226,229) — slightly warm white
• Border radius: 12px / 16px / 32px — pill and rounded rectangle variants
• No shadow — elevation is communicated through color alone

Navigation links

• Default: transparent background, rgb(212,212,212) text, opacity 0.9
• Hover: rgb(60,60,60) background fills in, opacity becomes 1.0
• Border: rgb(62,62,62) appears on hover — a hairline container materializes

Code blocks

• Surface: rgb(31,31,31) — matches body, no visual distinction
• Font: system monospace, 14px — undecorated, raw

Model badge

• rgba(37,37,37,0.5) — frosted glass-like pill, semi-transparent over the dark base

5. Layout Principles

Generous page margins: main has 0 141px horizontal margins — a wide content column with breathing room on large screens. Section spacing is dramatic: 50px 0px 250px on section elements — the 250px bottom margin creates long scrolling space between content blocks, giving each section room to breathe and be read in isolation.

Header is padded 30px 60px 0 with 130px bottom margin — a very deliberate separation between navigation and content. The overall feel is airy for a dark interface, which prevents claustrophobia.

Breakpoints: 600px, 768px, 1046px — standard tablet-first responsive ladder.

6. Depth & Elevation

Shadow array is empty — there are no drop shadows in this design. Zero. Depth is expressed entirely through background color steps: rgb(31,31,31) base → rgba(37,37,37,0.5) mid → rgb(8,66,160) accent. The semi-transparent model badge is the closest thing to layering. This creates a flat, focused atmosphere where the UI doesn’t compete with content.

7. Do’s and Don’ts

Do

• Use dark charcoal rgb(31,31,31) as the base surface — not pure black
• Keep text at rgb(212,212,212) — grey, not white
• Use rgb(8,66,160) exclusively for primary action buttons
• Rely on background color changes for hover states, not shadows or transforms
• Use generous section spacing (100px+) to separate content zones

Don’t

• Add box shadows — this design is intentionally shadowless
• Use bright or saturated accent colors — one blue, that’s all
• Mix font weights aggressively — the palette is 300/400/500 only
• Use Inter Tight outside of h1 — the condensed variant is reserved for top-level headings
• Create visual noise with borders — separation is contextual, not drawn

8. Responsive Behavior

At 1046px the layout begins to adapt. The 141px side margins on main likely collapse at tablet widths. The 600px breakpoint is the mobile threshold. Angular’s Material component system handles most responsive behavior. No custom dark/light mode toggle is visible in the CSS — this is dark-only by design.

9. Agent Prompt Guide

Design an AI workspace tool in the style of Google AI Studio: dark charcoal background (rgb(31,31,31)), light grey text (rgb(212,212,212)), single deep blue accent (rgb(8,66,160)) for primary actions. Inter Tight at weight 300 for headlines, Inter at 400–500 for everything else, all at 14px baseline. No shadows anywhere. Hover states are background reveals (rgb(60,60,60)) not transforms. Wide page margins (140px+), dramatic section spacing (200px+ bottom). Rounded corners 12–32px. Periwinkle links (rgb(135,169,255)). Flat, focused, developer-grade.

Generated by Sparkbites — extracted from live CSS analysis