Google Translate

Overview

Google Translate is a utility-focused translation platform built on Material Design 3 principles, serving a global audience seeking instant, accurate language conversion. The aesthetic is "Functional Clarity"—a clean, light-dominant interface with strategic use of Google's signature blue accent (#0b57d0) to guide users through translation workflows. The UI prioritizes content over decoration, using generous whitespace (24px gutters, 40px section spacing) and a restrained color palette to reduce cognitive load. The emotional response is one of calm efficiency: users feel they can quickly accomplish their translation task without distraction. The brand voice is direct, instructional, and multilingual-aware—never presumptuous about language ability. Example: "Detect language" (not "Auto-detect your language").

Colors

The color system follows Material 3 with a light-mode-first approach. Primary (#0b57d0) is Google's signature blue, applied to all interactive CTAs (Sign In button, tab underlines, focus rings), link text, and selected states. It conveys trust and action. Secondary (#00639b) is a deeper teal used for focus indicators and secondary interactive states—visible in the 3px focus ring (box-shadow: 0 0 0 3px var(--gm3-sys-color-secondary, #00639b)) that appears on keyboard navigation. Tertiary (#0f5223) is a muted green reserved for success states and positive feedback. The surface stack is predominantly white (#ffffff) with subtle container layers: surface-container-low (#f8f9fa) for input backgrounds, surface-container (#f1f3f4) for card backgrounds, and surface-container-highest (#e8eaed) for

Typography

The type system pairs Google Sans Text (used for UI labels, buttons, and headers) with Roboto (used for body copy and longer-form content). This pairing creates a hierarchy that feels both modern and readable: Google Sans Text's geometric precision conveys interface clarity, while Roboto's humanist proportions make body text approachable. Display (57px, 700 weight, -0.02em tracking) is reserved for page titles; Headline-lg (32px, 600 weight) for major section headers; Headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive text and longer explanations; Body-md (16px, 400 weight, 24px line-height) for standard UI copy and input placeholders. Label-md (14px, 500 weight, 20px line-height, 0.01em tracking) is the workhorse for button

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is governed by a semantic spacing scale: 16px gutters for horizontal padding, 24px for card padding, 40px for section separation, and 64px for major layout breaks. The hero section (containing the translation input/output panes) uses a two-column split at 50/50 width on desktop, stacking vertically on mobile. Input fields and text areas are full-width within their containers, with 15px vertical padding and 16px horizontal padding (matching Material 3 input specs). Tab navigation uses 12px vertical and 16px horizontal padding per tab, with a 3px bottom border on active tabs. The translation output area has a light background (surface-container-low, #f8f9fa) to visually separate it from the

Elevation & Depth

Elevation in Google Translate is minimal and purposeful, avoiding heavy shadows in favor of subtle color shifts and borders. The base layer (Level 0) is the white surface (#ffffff) with no shadow. Level 1 (cards, input fields) uses a 1px solid border in outline-variant (#c4c7c5) and a soft shadow of 0 1px 2px rgba(0, 0, 0, 0.06)—barely perceptible, creating a hairline separation from the background. Level 2 (dropdown menus, modals) elevates to 0 4px 12px rgba(0, 0, 0, 0.08), a 4px blur with 12px spread, providing clear visual hierarchy. Level 3 (tooltips, floating action panels) uses 0 16px 40

Shapes

The shape philosophy is "Geometric Precision with Approachability"—sharp enough to feel modern and functional, rounded enough to feel welcoming. The rounded scale progresses from 2px (sm, used for small UI elements like badges and tight containers) to 4px (DEFAULT, used for input fields and most cards), 8px (md, used for larger cards and modals), 12px (lg, used for prominent containers), 16px (xl, used for hero sections and major layout blocks), and 9999px (full, used exclusively for pill-shaped buttons and circular icon buttons). Buttons use full (100px border-radius on a 40px height, creatin

Components

Action Elements Buttons are the primary interaction pattern. The primary button (backgroundColor: #0b57d0, color: #ffffff, padding: 10px 24px, height: 40px, border-radius: 9999px, fontWeight: 500) is used for main CTAs like "Sign In." On hover, the background darkens to #0d47a1 with a 75ms transition. On focus, a 3px secondary-color border appears with 8px offset, animated over 150ms. The secondary button (backgroundColor: #d3e3fd, color: #0b57d0) is used for alternative actions and maintains the same padding and height. Ghost buttons (backgroundColor: transparent, border: 1px solid #8e918f, color: #0b57d0) are used for tertiary actions. Tab buttons are stateless containers (backgroundColor: transparent, padding: 12px 16px) with a 3px bottom border that appears only when active (border

Do's and Don'ts

**Do**

• Do use primary (#0b57d0) exclusively for interactive elements (buttons, links, focus rings, active states) to maintain consistent affordance.
• Do apply the 3px secondary-color focus ring (box-shadow: 0 0 0 3px #00639b) to all keyboard-navigable elements for accessibility compliance.
• Do use Google Sans Text for all UI labels, buttons, and headers to maintain the modern, geometric brand voice.
• Do respect the 16px gutter spacing and 40px section separation to create visual breathing room and reduce cognitive load.
• Do use the full (9999px) border-radius exclusively for buttons and circular icon buttons; never apply it to cards or input fields.
• Do layer elevation via subtle shadows (0 1px 2px for Level 1, 0 4px 12px for Level 2) rather than dark overlays or heavy drop shadows.
• Do use on-surface-variant (#5f6368) for secondary labels, hints, and disabled states to create visual hierarchy without introducing new colors.
• Do animate state transitions (hover, focus, active) over 75–150ms using cubic-bezier(.2,0,0,1) for a snappy, responsive feel.

**Don't**

• Don't use secondary (#00639b) or tertiary (#0f5223) for primary CTAs; reserve them for focus indicators and success states only.
• Don't apply border-radius values smaller than 2px or larger than 16px to standard components; use the predefined rounded scale.
• Don't mix Roboto and Google Sans Text within a single button or label; choose one font family per component type.
• Don't use box-shadow values larger than 0 16px 40px rgba(0, 0, 0, 0.12); heavier shadows violate the minimalist aesthetic.
• Don't apply color to disabled buttons; use rgba(0, 0, 0, 0.38) opacity on the text and a neutral background instead.
• Don't use the outline-variant (#c4c7c5) border color for interactive elements; reserve it for static dividers and card borders.
• Don't animate opacity or transform on hover without a corresponding 75ms transition duration; instant changes feel jarring.
• Don't exceed 24px padding on cards or 16px padding on input fields; excessive padding breaks the compact, efficient layout rhythm.