Google Antigravity

Overview

Google Antigravity is a developer-first agent platform designed with architectural minimalism and technical precision. The brand embodies a 'Clarity-First Modernism' aesthetic—a design philosophy that prioritizes information hierarchy, functional elegance, and purposeful restraint over decorative excess. The interface uses a refined light canvas (rgb(255, 255, 255)) paired with deep charcoal text (rgb(18, 19, 23)) and strategic accent colors to guide developer attention. The emotional response is one of confidence and control: users feel empowered to build complex systems without cognitive overload. The visual language rejects skeuomorphism and trendy gradients in favor of clean typography, precise spacing, and subtle depth cues that emerge from shadow and surface layering.

The brand voice is direct, technical, and respectful of developer time. Antigravity speaks in imperative, action-oriented language: 'Download for Linux,' 'Explore use cases,' 'Build the new way.' Vocabulary emphasizes agency ('liftoff,' 'experience,' 'platform') and avoids marketing hyperbole. The tone is confident without arrogance—acknowledging that developers are experts who deserve clarity, not persuasion. Example sentence in brand voice: 'Deploy agents at scale with a single command—no infrastructure overhead.'

Colors

The Antigravity color system operates on a principle of 'functional contrast and purposeful accent.' The primary surface is pure white (#FFFFFF) with a carefully calibrated grayscale hierarchy: on-surface text uses #121317 (near-black with 2% blue undertone for screen comfort), on-surface-variant uses #45474D (mid-gray for secondary information), and outline uses #AAB1CC (lighter gray for borders and dividers). This creates a 7-step contrast ladder that supports accessibility (WCAG AAA) while maintaining visual rhythm. Primary color (#121317) is the dominant interactive element—buttons, links, and key UI controls use this dark tone to signal clickability and hierarchy. Secondary (#3279F9) is a vibrant blue reserved for accent actions, focus states, and brand-distinctive highlights; it appe

Typography

The Antigravity type system is built entirely on Google Sans Flex, a variable font that supports optical sizing (opsz 8–144), weight variation (400–500), and width modulation (25–150%). This enables a responsive, fluid typography scale that adapts to context without requiring multiple font files. Display (80px, weight 450, lineHeight 88px, letterSpacing -0.02em) anchors hero sections and major headings with a tight, confident spacing that conveys authority. Headline-lg (40px, weight 450) is used for section titles and primary content headings, while headline-md (28px) handles subsections. Body-lg (18px, weight 400, lineHeight 28px) is reserved for introductory paragraphs and prominent descriptions; body-md (16px, lineHeight 24px) is the standard paragraph text, ensuring 1.5x line-height fo

Layout

Antigravity uses a 12-column fluid grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on smaller screens. The page rhythm is governed by a semantic spacing scale: unit (8px) is the atomic increment, sm (12px) is used for inline element spacing, md (24px) is the standard gutter and card padding, lg (40px) separates major sections, and xl (64px) creates breathing room between hero and content blocks. The gutter (24px) is applied consistently to left/right margins on all container elements, creating a predictable 24px margin on desktop and scaling down to 16px on tablets via media queries. White-space is treated as a first-class design element—sections are separated by lg spacing (40px) to create visual rest, and nes

Elevation & Depth

Elevation in Antigravity is achieved through a restrained shadow system that emphasizes clarity over drama. The system uses three elevation levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like hover states and small cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and popovers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and floating panels. Shadows use a 6% to 12% opacity black with a vertical offset of 1–16px and a blur radius of 2–40px, creating a natural light-from-above effect. The header uses a subtle backdrop-filter: blur(12px) wi

Shapes

Antigravity employs a 'Technical Precision' shape philosophy—rounded corners are used strategically to soften hard edges without introducing organic or playful aesthetics. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable; this extreme rounding is reserved exclusively for primary CTAs and chips. Standard interactive elements (cards, inputs, secondary buttons) use lg (1rem / 16px) border-radius, creating a gentle curve that acknowledges the digital medium without appearing whimsical. Form inputs and smaller containers use DEFAULT (0.5rem /

Components

Action Elements Buttons are the primary interaction mechanism and use a two-tier system: button-primary (backgroundColor: #121317, textColor: #FFFFFF, rounded: 9999px, padding: 10px 24px, height: 40px) for main CTAs like 'Download for Linux,' and button-secondary (backgroundColor: transparent, border: 1px solid #AAB1CC, textColor: #121317) for alternative actions like 'Explore use cases.' Primary buttons use fontWeight 450 (Google Sans Flex mid-weight) to convey confidence without heaviness. Hover states transition over 200ms to button-primary-hover (backgroundColor: #2F3034) or button-secondary-hover (backgroundColor: #E1E6EC), providing clear feedback without jarring color shifts. Focus states add a 3px box-shadow: 0 0 0 3px rgba(50, 121, 249, 0.1) to support keyboard navigation. But

Do's and Don'ts

**Do**

• Do use primary (#121317) for main CTAs and interactive elements—it's the brand's signature dark tone that signals clickability and hierarchy.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to create visual breathing room.
• Do use Google Sans Flex weight 450 for all labels and button text to convey confidence and technical precision without heaviness.
• Do apply focus rings (3px box-shadow with rgba(50, 121, 249, 0.1)) to all interactive elements for keyboard accessibility.
• Do transition hover states over 200ms using cubic-bezier(0.2, 0, 0, 1) for responsive, non-twitchy feedback.
• Do use the full (9999px) border-radius exclusively for primary buttons and chips to signal high interactivity.
• Do maintain the 1.5x line-height ratio for body text (16px font = 24px line-height) to ensure readability and visual rhythm.

**Don't**

• Don't use secondary (#3279F9) as a background color—it's reserved for accent actions and focus states; overuse dilutes its impact.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to avoid a dated, heavy Material Design appearance.
• Don't use border-radius values between 2–4px; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain consistency.
• Don't apply text-shadow or other text effects to body copy; the typography system is designed for clarity without embellishment.
• Don't mix Google Sans Flex with system fonts or fallbacks—always specify the full font stack with Google Sans Flex as primary.
• Don't use opacity below 0.85 for the header background; it must remain readable and not feel like a ghost element.
• Don't create custom color values outside the defined palette; all interactive elements must reference the M3 token system to ensure consistency and maintainability.