Google Sign-In Design System

Overview

The Google Sign-in interface represents a distilled expression of Material Design principles applied to authentication flows. The visual system is built around a cool, calming palette anchored by a blue-gray canvas ({colors.canvas}) that creates a soft, non-distracting environment for credential entry. At the center of this field sits a pristine white card ({sign-in-card}) — the sole container for all interactive elements, creating a clear focal point that draws the eye inward.

The brand's signature blue ({colors.primary}) is deployed with extreme restraint, appearing only on the primary call-to-action ({button-primary}), actionable text links like {text-button} and {text-link}, and as the critical focus indicator on the email input ({text-input-focus}). This selective application ensures that every instance of blue carries functional meaning — it signals "this is clickable" or "this is the primary path forward." The typography relies entirely on Google Sans, a geometric humanist typeface designed specifically for Google's product ecosystem, rendered at moderate weights (never exceeding 500) that convey approachability without sacrificing clarity.

The shape language is distinctly dual-toned: small utility elements like the {text-button} and input containers use a conservative 4px radius ({rounded.sm}), while action-oriented surfaces like {button-primary} and {button-secondary} employ a generous 20px pill shape ({rounded.lg}). This distinction subtly categorizes elements into "informational" (sharper) versus "actionable" (softer). Spacing throughout is expansive — the card itself breathes with 48px vertical padding, and gaps between the heading, subheading, input, and actions follow an 8–24px rhythm that prevents cognitive overload during what can be a high-anxiety interaction.

There are no decorative elements, no illustrations, no gradient washes. Every pixel serves either readability or interaction. This is a system that trusts whitespace and typographic hierarchy to do the heavy lifting of guidance.

Key Characteristics:

• Canvas is a cool blue-gray ({colors.canvas} — #f0f4f9), never pure white or warm gray, establishing a calm atmospheric baseline.
• Primary brand color ({colors.primary} — #0b57d0) appears only on CTAs, links, and the input focus ring — never as decorative fill.
• All type uses Google Sans at weight 400 (body/headings) or 500 (buttons/labels); bold (700) is absent entirely.
• Buttons use a 20px radius ({rounded.lg}) creating a distinctly pill-shaped action vocabulary separate from content containers.
• The sign-in card ({sign-in-card}) uses a 28px radius ({rounded.xl}) with a subtle elevation shadow, floating above the canvas.
• Input fields are 56px tall with 13–15px internal padding, optimized for touch targets and visual breathing room.
• Links inherit the primary blue ({colors.link}) with no underline decoration until hover (not documented per policy).
• Footer elements ({footer-container}, {language-selector}, {footer-link}) render in reduced-size caption type ({typography.caption}) at muted opacity.

Colors

Brand & Accent

• Primary ({colors.primary} — #0b57d0): Google's signature blue, used exclusively for the "Next" CTA button background, all clickable text links, and the input focus ring border.
• Primary Hover ({colors.primary-hover} — #0842a0): Darkened blue for hover states on primary buttons and links, providing clear interaction feedback.
• Primary Active ({colors.primary-active} — #063580): Further darkened for pressed/active states on the primary button.
• Accent ({colors.accent} — #c2e7ff): A pale sky-blue used as the background for FAB-style buttons (observed in extracted CSS as rgb(194, 231, 255)), paired with dark teal text ({colors.on-accent}).

Surface

• Canvas ({colors.canvas} — #f0f4f9): The page-level background — a cool, desaturated blue-gray that surrounds the central card and establishes the overall temperature of the interface.
• Surface ({colors.surface} — #ffffff): Pure white, used as the background of the main {sign-in-card} container and the input field interior.
• Surface Soft ({colors.surface-soft} — #f8f9fa): A near-white gray, available for secondary panel backgrounds or disabled states within the card.

Text

• Ink ({colors.ink} — #1f1f1f): Near-black, used for the "Sign in" heading and all primary readable text within the card.
• Body ({colors.body} — #1f1f1f): Functionally identical to ink in this context; used for subheading text ("to continue to Google Docs").
• Muted ({colors.muted} — #444746): Medium-gray, used for the "Not your computer?" explanatory text in the guest mode block.
• Muted Soft ({colors.muted-soft} — #5f6368): Lighter gray, reserved for footer elements — language selector text, Help/Privacy/Terms links.
• On Primary ({colors.on-primary} — #ffffff): Pure white, used for text rendered atop the blue primary button.
• On Accent ({colors.on-accent} — #004a77): Dark teal, used for text atop the light blue accent button background.

Hairlines & Borders

• Hairline ({colors.hairline} — #dadce0): Standard border color for dividers and non-focused input outlines.
• Hairline Soft ({colors.hairline-soft} — #e8eaed): Lighter border for subtle separators or container edges.
• Focus Ring ({colors.focus-ring} — #0b57d0): The primary blue, rendered as a 2px solid border around the active/focused text input field.
• Border Input ({colors.border-input} — #dadce0): Default input border when not focused, matching the standard hairline.

Semantic

• Error ({colors.error} — #d93025): Google Red, reserved for validation error messages and error-state inputs (not visible in current screenshot but part of the system).
• Success ({colors.success} — #1e8e3e): Green for success confirmations post-submission.
• Warning ({colors.warning} — #ea8600): Amber/orange for cautionary messaging.
• Info ({colors.info} — #0b57d0): Maps to primary blue for informational alerts.
• Link ({colors.link} — #0b57d0): Identical to primary blue; used for "Forgot email?", "Learn more", and inline hyperlinks.
• Link Active ({colors.link-active} — #0842a0): Darkened blue matching primary-hover, for visited or active link states.

Typography

Font Family

The system uses Google Sans as its sole typeface across all roles — headings, body text, labels, and buttons. The font stack includes robust fallbacks: "Google Sans", roboto, "Noto Sans Myanmar UI", "Noto Sans Khmer", arial, sans-serif. This cascade ensures that even if the custom Google Sans webfont fails to load (the font-face declarations in the extracted CSS show it served from fonts.gstatic.com), the interface degrades gracefully through Roboto (the previous Google product font), then Noto Sans variants for Burmese/Khmer script support, and finally system Arial. Google Sans is a proprietary geometric-humanist face with open apertures and slightly softened terminals that optimize screen readability at small sizes while maintaining a friendly, approachable character in large display settings.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 40px | 400 | 1.25 (50px) | 0 | Reserved for larger hero contexts (not used on this page but available) | | {typography.display-lg} | 36px | 400 | 1.22 (44px) | 0 | "Sign in" page heading | | {typography.title-md} | 18px | 500 | 1.4 (25.2px) | 0 | Section titles within multi-step flows | | {typography.body-md} | 14px | 400 | 1.43 (20px) | 0 | Body copy: subheading, guest mode text, input placeholder | | {typography.body-sm} | 13.33px | 400 | 1.38 (~18.4px) | 0 | Secondary body text, smaller contextual information | | {typography.caption} | 12px | 400 | 1.33 (16px) | 0 | Footer links, language selector, metadata | | {typography.button} | 14px | 500 | 1.25 (17.5px) | 0 | All button labels: Next, Create account, Forgot email | | {typography.label} | 12px | 500 | 1.33 (16px) | 0.02em | Floating input labels ("Email or phone") |

Principles

The typography system's most defining characteristic is its weight discipline. No element exceeds a font-weight of 500 (medium). The "Sign in" heading — the largest type on the page at 36px — remains at weight 400 (regular). This is a deliberate choice: Google's design language trusts scale, not weight, to establish hierarchy. When emphasis is needed (button labels, form labels), the system steps up to 500, but never to 600 or 700. This creates a quiet, confident voice that feels modern rather than aggressive.

Line heights are consistently generous — the 14px body text rides on a 20px line-height (1.43 ratio), providing ample leading that aids scanning during the cognitively demanding task of authentication. Letter-spacing remains at normal (0) for all Latin-text roles, with only the small label role applying a slight 0.02em expansion for improved legibility at 12px. There is no use of italics, uppercase transformations, or letter-spacing as a stylistic device anywhere in the visible interface — the system communicates through size and color contrast alone.

The color-to-type relationship is equally restrained: headings and body share the same {colors.ink} value. Hierarchy between the 36px "Sign in" and the 14px "to continue to Google Docs" is carried entirely by size differential (2.57x), not by darkening the heading or lightening the subheading. Only when text becomes functionally secondary (footer, helper text) does the color shift to {colors.muted} or {colors.muted-soft}.

Note on Font Substitutes

Google Sans is a proprietary typeface served from Google's CDN. For implementations without access to fonts.gstatic.com, the closest open-source substitute is Product Sans (unofficially available) or, more practically, Inter (available via Google Fonts at fonts.google.com/specimen/Inter). Inter shares Google Sans's geometric skeleton, tall x-height, and open apertures. If using Inter, define the CSS variable --font-family: 'Inter', Roboto, sans-serif;. For environments requiring fully licensed fonts, Roboto (the second fallback in the stack) is freely available via Google Fonts and provides 95% visual parity for the sizes and weights used here (400 and 500).

Layout

Spacing System

• Base unit: 4px, with most tokens being multiples (4, 6, 8, 12, 16, 24, 48).
• Tokens:
  • {spacing.xxs} (2px) — micro-adjustments, focus ring offsets
  • {spacing.xs} (4px) — tight internal gaps, icon-to-text spacing
  • {spacing.sm} (6px) — small vertical rhythm between related elements
  • {spacing.md} (8px) — standard gap between input and helper text
  • {spacing.lg} (12px) — separation between input field and "Forgot email?" link
  • {spacing.xl} (16px) — gap between subheading and input
  • {spacing.xxl} (24px) — gap between Google logo and "Sign in" heading
  • {spacing.section} (48px) — bottom padding of the sign-in card
• Card internal padding: {spacing.card-padding} = 48px 40px 36px — generous top/sides with slightly reduced bottom to visually center the content mass.
• Gutters: The {sign-in-card} maintains a fixed width of approximately 460px (extracted from section container), centered within the viewport with auto margins. No explicit gutter token is defined; the card's internal padding serves as the content edge margin.

Grid & Container

This is a single-column, centered layout with no grid system in the traditional sense. The page structure is:

• Body: Full viewport width, {colors.canvas} background, flex-centering the card vertically and horizontally.
• Main container: 968px max-width (extracted, though the card itself is only 460px — suggesting the main wrapper is oversized for potential future content or responsive expansion).
• Sign-in card ({sign-in-card}): 460px fixed width, the sole content column. All form elements stack vertically within this single column with no side-by-side layouts.
• Footer: Spans the full width below the card area, using a separate horizontal layout with language selector left-aligned and utility links right-aligned.

This is intentionally not a dashboard or marketplace layout — it is a task-completion layout optimized for a single user completing a single action (signing in). Density is low by design.

Whitespace Philosophy

The system employs expansive, directional whitespace as its primary organizational tool. The sign-in card contains significant empty space — roughly 40% of the card's interior is white space between the logo, heading, subheading, input, helper links, and action row. This is not wasted space; it reduces cognitive load by isolating each decision point. The user sees one thing at a time: "read heading → read context → enter email → decide next action." Vertical rhythm follows an 8–24px cadence that feels measured rather than sparse.

Header Architecture

There is no traditional top navigation bar on this sign-in page. The "header" is conceptually the top portion of the {sign-in-card} containing the Google logo:

┌──────────────────────────────────────────┐
│  [G Logo]          (padding: 48px top)   │
│                                          │
│  Sign in                                 │
│  to continue to Google Docs              │
│                                          │
│  ┌────────────────────────────────────┐  │
│  │ Email or phone                    │  │
│  └────────────────────────────────────┘  │
│  Forgot email?                          │
│                                          │
│  Not your computer? Use Guest mode...    │
│                                          │
│           [Create account]    [Next]     │
│                          (padding: 36px bot)│
└──────────────────────────────────────────┘

Hero Section

In the context of a sign-in page, the "hero" is the upper half of the card:

┌─────────────────────────────┐
│                             │
│     🌈 G (48px)             │  <- {google-logo}
│                             │
│     Sign in                 │  <- {page-heading} (display-lg, 36px)
│     to continue to          │  <- {subheading} (body-md, 14px)
│     Google Docs             │
│                             │
│     ┌───────────────────┐   │
│     │ Email or phone    │   │  <- {text-input} (56px h, 15px pad)
│     └───────────────────┘   │
│     Forgot email?           │  <- {text-button}
│                             │

Footer Section

Below the card, a minimal footer spans the viewport width:

┌─────────────────────────────────────────────────────────────┐
│  English (United States) ▼              Help   Privacy   Terms  │
│  ^{language-selector}                      ^{footer-link}s       │
└─────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page body/background | | 1 (Raised) | {extensions.shadows.card} — compound shadow with soft spread | {sign-in-card} floating above canvas | | 2 (Overlay) | {extensions.shadows.md} — 6px blur, 15% opacity | Dropdowns, tooltips (potential) | | 3 (Modal) | {extensions.shadows.lg} — 24px blur, 15% opacity | Dialog boxes, account switcher (potential) | | Focus Ring | 2px solid {colors.focus-ring}, no shadow offset | {text-input-focus} border highlight |

The elevation philosophy here is minimalist layering. The entire visible interface has exactly one elevated element: the sign-in card. It floats above the canvas with a carefully crafted compound shadow ({extensions.shadows.card}) that combines a tight, dark near-shadow (1px blur, 10% opacity) with a wider, softer far-shadow (8px blur, 10% opacity, 3px spread). This creates a sense of the card being lifted just slightly off the background — enough to create containment, not enough to feel heavy or dialog-like.

Input fields use border-based depth rather than shadows. The default state has no visible border or a 1px hairline border; on focus, the border transitions to a 2px solid {colors.focus-ring} (primary blue). This is a Material Design 3 pattern called "outlined text field" — the depth signal comes from color and thickness change, not from drop shadows. Buttons are flat (no shadow) in their default state, relying on background color to indicate clickability.

There is no decorative depth — no gradient backgrounds, no photographic layers, no pattern overlays. The z-depth vocabulary consists of: flat (canvas), elevated (card), and bordered (input focus).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Input containers ({text-input}), small text buttons ({text-button}), focus rings | | {rounded.DEFAULT} / {rounded.md} | 8px | General-purpose content panels, chips (potential) | | {rounded.lg} | 20px | Action buttons: {button-primary}, {button-secondary}, {button-icon} | | {rounded.xl} | 28px | Main container: {sign-in-card} outer corners | | {rounded.pill} | 56px | FAB/circular buttons: {button-fab} | | {rounded.full} | 9999px | Avatar circles, fully round elements (reserved) |

Photography Geometry

No photography is present on this sign-in page. The only imagery is the Google "G" logo (multicolor: blue, red, yellow, green segments on a white circular/rounded-square background), which renders at approximately 48×48px with the natural geometry of the brand mark (essentially circular with slight squaring at the corners depending on the exact SVG asset version). If avatars were present (e.g., account switcher), they would use {rounded.full} per Google's icon guidelines.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Actions

{component.button-primary} — The principal call-to-action, labeled "Next" in this context. Background {colors.primary} (blue), white text {colors.on-primary} using {typography.button} (14px/500). Rounded to {rounded.lg} (20px) creating a distinctly pill shape. Padding is 0px 24px horizontally with a fixed height of 36px. No box-shadow; flat against the card surface. On active state, see {component.button-primary-active} which darkens to {colors.primary-active}. On hover, implement {component.button-primary-hover} with {colors.primary-hover}. This button sits at the bottom-right of the form action row, right-aligned.

{component.button-primary-hover} — Hover variant of the primary button. Background shifts to {colors.primary-hover} (#0842a0), a ~15% darkening of the base blue. All other properties (text color, radius, typography, padding) remain identical to {component.button-primary}.

{component.button-primary-active} — Active/pressed variant. Background deepens further to {colors.primary-active} (#063580), approximately 25% darker than default. Used for the moment the button is held down or programmatically activated.

{component.button-secondary} — Text-only or ghost button style, labeled "Create account". Transparent background with {colors.link} (blue) text in {typography.button} weight (500). Same {rounded.lg} (20px) radius as primary to maintain visual consistency in the action row. Padding 0px 16px, height 36px. Positioned to the left of the primary button. See {component.button-secondary-hover} for interaction state.

{component.button-secondary-hover} — Hover state for the secondary button. Text color darkens to {colors.link-active} (#0842a0). No background appears; it remains transparent.

{component.button-icon} — Icon-only button variant (observed in CSS classes though not visibly rendered with an icon in this screenshot state). Transparent background, blue text/icon color, 20px radius, 8px horizontal padding, 36×36px square. Would be used for password visibility toggle, help trigger, or similar icon actions adjacent to inputs.

{component.button-fab} — Floating Action Button style with {colors.accent} (light blue #c2e7ff) background and {colors.on-accent} (dark teal #004a77) text. Uses the larger {rounded.pill} (56px) radius for a very rounded, capsule-like appearance. Height 40px with 24px horizontal padding. This component was detected in the extracted CSS (class VfPpkd-LgbsSe-OWXEXe-Bz112c-M1Soyc) and likely appears in other auth flow states (e.g., "Try another way" FAB).

{component.text-button} — Minimal text button, used for "Forgot email?". Transparent background, {colors.link} blue text, {typography.button} sizing (14px/500), but with {rounded.sm} (4px) radius and zero padding — it is essentially styled text that happens to be a button element. No border, no shadow. Positioned directly below the input field with {spacing.lg} (12px) gap.

Cards & Containers

{component.sign-in-card} — The central, elevated container holding all auth content. White ({colors.surface}) background with {colors.ink} text color. Large {rounded.xl} (28px) corner radius giving it a soft, modern card appearance. Generous padding: 48px 40px 36px (top, sides, bottom). Carries the {extensions.shadows.card} elevation shadow (compound: tight 1px + soft 8px with spread), making it float noticeably above the {colors.canvas} page background. Fixed width of approximately 460px, centered via flexbox. This is the architectural root component — all other components nest inside it.

{component.guest-mode-block} — Informational text block containing the "Not your computer? Use Guest mode to sign in privately. Learn more about using Guest mode" message. Transparent background, {colors.muted} gray text (#444746) in {typography.body-sm} (13.33px). Contains inline {text-link} components for "Learn more" and "about using Guest mode". Spaced approximately 24px below the "Forgot email?" link.

{component.footer-container} — Full-width footer area below the sign-in card. Transparent background (inherits canvas), {colors.muted-soft} text (#5f6368) in {typography.caption} (12px). Contains the {language-selector} on the left and {footer-link} items on the right. Vertically spaced ~40–48px below the card bottom edge.

Inputs & Forms

{component.text-input} — The primary text entry field for "Email or phone". Transparent background (reveals the white card beneath), {colors.ink} text color, {typography.body-md} (14px/400) for entered text. Bounded by a 1px {colors.hairline} border (or none in default state per extracted CSS showing 0px none). Internal padding 13px 15px with total height of 56px — a tall, touch-friendly target. {rounded.sm} (4px) corner radius. The label "Email or phone" floats above or sits inside as placeholder text using {typography.label} (12px/500) in {colors.link} blue.

{component.text-input-focus} — Focused/active state of the text input. The defining change is the border: becomes a solid 2px line in {colors.focus-ring} (primary blue #0b57d0). This is the strongest depth cue in the entire interface — a colored outline that says "I am the active element." Extracted CSS shows transition: border 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) indicating a smooth, slightly eased 280ms animation into the focus state. No background color change, no shadow lift — purely border-based focus indication.

{component.input-label} — The floating/persistent label above the input reading "Email or phone". Transparent background, {colors.link} blue text (matching the focus ring color thematically), {typography.label} (12px/500 weight, 0.02em letter-spacing). In Material Design 3 outlined fields, this label sits on the top border edge of the input container and rises/shrinks when the input gains focus or content.

{component.input-container} — The wrapping div around the input field and its label. White background ({colors.surface}), {rounded.sm} (4px) radius matching the inner input, zero padding (padding lives on the input element itself). This container holds the border that transitions to the focus ring color.

Typography Components

{component.page-heading} — The "Sign in" h1. Transparent background, {colors.ink} color, {typography.display-lg} (36px/400 weight, 44px line-height). No letter-spacing adjustment. This is the largest, highest-contrast text element on the page, yet it remains regular weight — demonstrating the system's size-over-weight hierarchy principle. Positioned 24px below the Google logo.

{component.subheading} — The "to continue to Google Docs" line. Transparent background, {colors.body} color (identical to ink), {typography.body-md} (14px/400). Positioned 8–12px below the heading. Provides critical context about what the user is signing into, reducing anxiety about the destination.

Navigation & Utility

{component.google-logo} — The multicolored "G" brand mark at the top of the card. 48×48px (inferred from spacing context), transparent background (it brings its own color). Not a component with configurable colors — it is the locked brand asset. Spacing below it is {spacing.xxl} (24px) before the heading begins.

{component.language-selector} — Dropdown trigger showing "English (United States)" with a down-caret. Transparent background, {colors.muted-soft} text (#5f6368), {typography.caption} (12px). Located at the far left of the footer row. Likely triggers a locale-switching dropdown menu (not visible in screenshot).

{component.footer-link} — Individual footer navigation items: "Help", "Privacy", "Terms". Transparent background, {colors.muted-soft} text, {typography.caption} sizing. Grouped at the right side of the footer with horizontal spacing (approximately 16–24px between items). These are likely <a> tags or button elements styled minimally.

{component.text-link} — Inline hyperlink within body text, e.g., "Learn more" and "about using Guest mode" inside the guest mode block. Transparent background, {colors.link} blue, {typography.body-md} (14px). No underline in default state (per Google's current link convention). These are embedded within the {guest-mode-block} prose.

Do's and Don'ts

Do

• Do use {colors.primary} (#0b57d0) exclusively for the primary CTA background, all clickable links, and the input focus ring — this concentrated usage makes blue semantically meaningful.
• Do maintain the 20px {rounded.lg} radius on all action buttons ({button-primary}, {button-secondary}) to preserve the distinct pill-shaped action vocabulary.
• Do keep the "Sign in" heading at weight 400 ({typography.display-lg}) despite its 36px size — the system uses scale, not weight, for hierarchy.
• Do apply the compound {extensions.shadows.card} shadow to the {sign-in-card} to create the single point of elevation that organizes the canvas/card relationship.
• Do use {typography.body-md} (14px/400) for the subheading and guest mode text, reserving {typography.caption} (12px) strictly for footer elements to maintain the two-tier body/metadata distinction.
• Do ensure the {text-input} height is 56px with 13–15px internal padding — this exceeds WCAG AAA touch targets (44px minimum) and provides comfortable thumb/finger access on mobile.
• Do position the "Next" {button-primary} right-aligned in the action row with {button-secondary} ("Create account") to its left, following the visual weight progression (filled button anchors the right).
• Do set the input focus border to 2px solid {colors.focus-ring} with the 280ms cubic-bezier(0.4, 0, 0.2, 1) transition extracted from the CSS — this timing matches Material Design 3 specifications.

Don't

• Don't apply {colors.primary} as a decorative background, gradient stop, or illustration tint — in this system, blue always means "clickable" or "active."
• Don't increase the font-weight of {page-heading} beyond 400 — the 36px size already provides sufficient dominance; adding weight would break the system's voice.
• Don't use {rounded.xl} (28px) or {rounded.pill} (56px) on anything other than the card container and FAB elements respectively — these radii are architecturally reserved.
• Don't add box-shadows to {button-primary} or {button-secondary} — they are intentionally flat, relying on background color contrast instead of depth.
• Don't substitute {colors.muted} (#444746) for {colors.ink} (#1f1f1f) in the heading or input text — the muted tone is reserved for helper/explanatory content only.
• Don't reduce the {sign-in-card} internal padding below 48px 40px 36px — the spacious interior is essential to the calm, uncluttered authentication experience.
• Don't use underlines on {text-link} or {text-button} in their default state — Google's current convention reserves underlines for hover/focus indication (to be implemented per your stack).
• Don't introduce a new color outside the documented palette (e.g., a purple "Sign in with Google" button variant) — the chromatic range is intentionally narrow to reduce visual noise during a high-stakes task.

Motion & Animation

Transition Tokens

--transition-border: border 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-flex: flex-basis 0.25s cubic-bezier(0.4, 0, 0.6, 1);
--transition-opacity-fast: opacity 0.075s linear 0.075s;

Keyframe Animations

• gm3-focus-ring-outward-grows / gm3-focus-ring-outward-shrinks — Material 3 focus ring animation that expands a ring outward from the input on focus, then contracts it on blur. This creates a ripple-like focus indication in addition to the border color change.
• mdc-ripple-fg-radius-in / mdc-ripple-fg-opacity-in / mdc-ripple-fg-opacity-out — Material Components ripple effect for button presses: the foreground ripple grows to fill the button bounds, fades in, then fades out on release.
• quantumWizBoxInkSpread / quantumWizRadialInkSpread — Legacy Google "Quantum Wiz" ink spread animations for input and button touch feedback (radial expanding circle).
• quantumWizPaperInputAddUnderline / quantumWizPaperInputRemoveUnderline — Animated underline growth/shrinkage for filled-style input variants (not used in the outlined style shown, but present in the codebase).
• mdc-floating-label-shake-float-above — Error-state shake animation for the floating label when validation fails.
• mdc-circular-progress-* series — Spinner rotation and color fade animations for loading indicators (present in CSS, indicating async operations like "checking email" show a circular progress indicator).

Interaction Patterns

• Input focus morph: On focusing the {text-input}, the border animates from 1px hairline (#dadce0) to 2px solid blue (#0b57d0) over 280ms with a standard Material easing. Simultaneously, the gm3-focus-ring-outward-grows keyframe fires, projecting an expanding ring outward from the input boundaries.
• Button ripple press: Clicking {button-primary} or {button-secondary} triggers the MDC ripple — a radial ink spread originating at the pointer coordinates, expanding to fill the button, then fading out over 150ms. This provides tactile-style feedback without state changes.
• Label float transition: The {input-label} ("Email or phone") animates upward and shrinks from 16px→12px when the input gains focus or contains content, transitioning position and size smoothly (timing inherited from the input's transition properties).
• Guest mode link reveal: The {guest-mode-block} likely uses opacity transitions (0.15s) if it appears conditionally based on context detection (e.g., "Not your computer?" logic).
• Loading state: When "Next" is clicked and the system validates the email, a {button-fab}-style circular progress spinner (using the mdc-circular-progress-* animations) replaces or overlays the "Next" text, rotating continuously with segmented color fades.

Imagery Style

• The sole image asset is the Google "G" logomark — a multicolor circular/rounded-square icon with four quadrant segments in Google Blue (#4285F4), Red (#EA4335), Yellow (#FBBC05), and Green (#34A853). It is a vector/SVG asset, never rasterized.
• No photography appears on this page — sign-in interfaces intentionally avoid imagery to minimize distraction and reduce perceived page weight for users on slow connections.
• No illustrations or decorative graphics are present. The visual vocabulary is purely typographic, chromatic, and spatial.
• If brand imagery were added (e.g., for a "Welcome back" authenticated state), it would follow Google's illustration style: flat, abstract shapes in the brand palette's secondary colors, isometric or orthographic perspective, with subtle gradients and no outlines.
• The logo is positioned at the visual top-left of the card content area, serving as the trust anchor — the first element users see, reinforcing authenticity before they enter credentials.

Icon System

• Library: Custom SVG (Google's internal icon system, likely derived from Material Symbols or the legacy Product Icons set). No third-party library (Lucide, Heroicons, etc.) is detected.
• Specific icons observed:
  • Google "G" brand mark (multicolor logo, 48px)
  • Down-arrow/carrot (in {language-selector} dropdown trigger, ~12px)
  • Potential (not visible but in CSS): eye/eye-off for password visibility toggle, help/info circle, close/X for dialogs
• Treatment: Where icons appear alongside text (e.g., potential icon buttons), they use currentColor inheriting the parent's text color (typically {colors.link} for icon buttons, {colors.muted-soft} for utility icons). Stroke-based or filled depending on the specific icon — Google's current icon set mixes both.
• Size alignment: Icon buttons ({button-icon}) are 36×36px with the icon centered at 18–20px. Standalone icons in text flows (like the language caret) align to the cap-height of the adjacent {typography.caption} (12px) or {typography.body-md} (14px) text, typically rendering at 16–20px.

Recommended Frontend Stack

- Framework:      React (Google's primary frontend framework for auth surfaces) or vanilla JS
- Styling:        CSS Modules or styled-components (Google internally uses Closure Templates + CSS;
                  for reimplementation, CSS Modules with CSS custom properties maps cleanly to 
                  this token system)
- Fonts:          Google Sans via fonts.googleapis.com/css2?family=Google+Sans:wght@400;500
                   (fallback: Roboto via Google Fonts, then system sans-serif)
- Animation:      Web Animations API or CSS transitions/keyframes (the extracted CSS uses 
                  raw @keyframes — no GSAP/Framer Motion dependency needed)
- Icons:          Material Symbols (fonts.google.com/icons) for any additional icons needed;
                  the Google logo is a locked brand asset (SVG)
- Component lib:  None required (this is a simple, self-contained form); if building a larger 
                  auth system, consider Radix Primitives for accessible form/dropdown behavior

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 480px | Card expands to full width minus 16px edge padding; font sizes may remain same (already mobile-optimized); footer stacks vertically (language selector above links) | | Tablet | 480–768px | Card centers with 32px horizontal margin; maintains 460px width or slightly constrains; footer remains horizontal | | Desktop | > 768px | Current screenshot state: 460px card perfectly centered, footer horizontal layout, full padding preserved |

Touch Targets

• {button-primary}: 36px height × ~100+px width (padding 24px each side + text) — exceeds WCAG AAA 44×44px minimum comfortably.
• {button-secondary}: 36px height × ~100px width (16px padding + "Create account" text) — exceeds 44px minimum.
• {text-input}: 56px height × full card width (~380px internal) — far exceeds 44px minimum; the extra height is intentional for mobile thumb coverage.
• {text-button} ("Forgot email?"): Height is line-height dependent (~20px) — below 44px recommendation; in production Google adds invisible padding to hit 44px. Recommend implementing with min-height: 44px and centered text.
• {footer-link}: Caption-sized (12px, ~16px height) — below 44px; footers often exempted, but consider increasing tap area with padding.

Collapsing Strategy

• Nav/Header: No traditional nav exists to collapse. The Google logo remains at the top of the card at all breakpoints.
• Card width: On mobile (< 480px), the {sign-in-card} should expand from its fixed 460px to calc(100% - 32px) with 16px margin on each side, preventing edge-to-edge contact with the viewport.
• Hero columns: Single-column layout at all sizes — no column collapse needed. The heading, subheading, input, and buttons stack vertically on mobile, tablet, and desktop identically.
• Action row: "Create account" (secondary) and "Next" (primary) remain side-by-side on desktop/tablet; on narrow mobile (< 360px), they may need to stack vertically with the primary button full-width below the secondary.
• Footer: Horizontal layout (language left, links right) maintained down to tablet; on mobile, consider stacking language selector above the Help/Privacy/Terms links, center-aligning both groups.
• Input field: Maintains 56px height at all breakpoints — this is a fixed dimension, not fluid.

Image Behavior

• Google logo: Fixed 48×48px at all breakpoints, positioned at the same relative location within the card padding. Does not scale down on mobile.
• No hero illustration or demo imagery is present to address responsively.

Iteration Guide

1. Build a sign-in page that closely mimics the design system in this DESIGN.md. Use React (or your preferred framework) with CSS Modules, defining CSS custom properties for every token in the YAML frontmatter so values are referenced centrally (e.g., var(--color-primary) mapped to {colors.primary}).

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Never hard-code a value that has a token — if you need the blue, write var(--color-primary), not #0b57d0.

3. Add state variants (-hover, -disabled, -focus) per your stack's conventions; the spec documents Default, Focus (for inputs), and Active/Pressed (for buttons) explicitly. Hover states are your implementation detail — use {colors.primary-hover} for button hovers and {colors.link-active} for link hovers.

4. When adding a new component (e.g., a password field, error message toast, or account switcher dropdown), decide first which category it belongs to: Button/Action, Card/Container, Input/Form, or Navigation. Match the existing patterns in that category (radius, padding, typography role).

5. Variants of an existing component live as separate frontmatter entries (button-primary-active, never nested inside button-primary). Follow this pattern for any new states you discover during implementation.

6. Implement the input focus animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) transition on the border property, moving from 1px {colors.hairline} to 2px {colors.focus-ring}. Add the gm3-focus-ring-outward-grows keyframe if you want Material 3 fidelity.

7. Ensure the {sign-in-card} uses the compound shadow {extensions.shadows.card} (two layered box-shadows) and {rounded.xl} (28px radius). This is the only elevated element — nothing else on the page casts a shadow.

8. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Every {token.path} in your implementation must resolve to a defined token.

9. When in doubt about emphasis: bigger type before bolder type (the 36px heading stays weight 400), signature color ({colors.primary}) before new colors, and the single-column centered layout over multi-column experiments.

10. Font Setup: Add this to your HTML <head>:

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap" rel="stylesheet">
    

    Define CSS variables:

    :root {
      --font-family: 'Google Sans', roboto, 'Noto Sans Myanmar UI', 'Noto Sans Khmer', arial, sans-serif;
      --color-primary: #0b57d0;
      --color-canvas: #f0f4f9;
      --color-surface: #ffffff;
      --color-ink: #1f1f1f;
      /* ... map all tokens ... */
    }
    

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover styles for {text-button}, {text-link}, {footer-link}, and {button-secondary} are not documented in the components list beyond the explicitly named -hover variants. Implementation teams should define hover color shifts (typically 10–15% darken for backgrounds, shift to {colors.link-active} for text).
• Loading/pending states: The "Next" button's loading state (circular progress spinner replacing text) is inferred from mdc-circular-progress-* keyframes in the CSS but not fully spec'd as a {button-primary-loading} component.
• Error/validation states: Input error state (red border {colors.error}, error message below input, label shake animation) is partially present in keyframes (mdc-floating-label-shake-float-above) but not captured as {text-input-error} component with full styling.
• Disabled states: {button-primary-disabled} and {text-input-disabled} are not explicitly documented. Typical patterns: primary button at 32% opacity white overlay on blue, input at reduced opacity with no focus ring acceptance.
• Password field variant: The second input in extracted CSS (type="password") shows different styling (inset browser-default border, 13.333px font, 1–2px padding) — this appears to be a browser autofill/rendering artifact, not the designed password field. The actual password field would mirror {text-input} styling with a visibility toggle icon button appended.
• Account switcher/avatar dropdown: Not visible in this pre-authentication screenshot. Post-sign-in or "choose an account" screens would introduce avatar circles, email lists, and dropdown menus — none of which are captured here.
• Keyboard focus indicators: Beyond the input focus ring, keyboard navigation focus outlines for buttons, links, and the language selector are not visually confirmed. Recommend implementing a 2px offset outline in {colors.focus-ring} or the system's standard focus-visible style.
• High contrast / accessibility mode: No forced-colors or reduced-motion media query adaptations are visible. The system should define @media (prefers-reduced-motion: reduce) to disable transitions, and forced-colors adjustments for Windows High Contrast Mode.
• Internationalization (i18n) layout: The current layout is LTR English. RTL languages (Arabic, Hebrew) would flip the card's internal alignment (logo right, action buttons reversed). CJK text may require slightly tighter line-height. These are not addressed in the extracted CSS.