--- version: alpha name: Google-Translate-design-analysis description: "A two-pane translator in Google's Material 3 style: Google Sans with Roboto behind it, a white page with a pale blue-gray panel (#f0f4f9), a deep blue action (#0b57d0) and a light tonal blue (#d3e3fd) for the selected mode, round 36 high mode chips and a large 24px input." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#0b57d0" on-primary: "#ffffff" tonal: "#d3e3fd" on-tonal: "#0842a0" link: "#1a73e8" ink: "#1f1f1f" ink-body: "#444746" ink-muted: "#5f6368" canvas: "#ffffff" panel: "#f0f4f9" outline: "#dadce0" focus-blue: "#2962ff" typography: input: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px body: fontFamily: "Roboto, RobotoDraft, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px label: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0.15px small: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 27px caption: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px rounded: xs: 2px sm: 8px md: 16px chip: 48px pill: 100px round: 999px spacing: xs: 8px sm: 10px md: 12px base: 16px components: button-filled: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.pill}" height: 40px padding: 10px 12px chip-selected: backgroundColor: "{colors.tonal}" textColor: "{colors.on-tonal}" typography: "{typography.label}" rounded: "{rounded.chip}" height: 36px padding: 0 12px chip: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.label}" rounded: "{rounded.chip}" height: 36px padding: 0 12px icon-button: backgroundColor: transparent textColor: "{colors.ink}" rounded: "{rounded.round}" size: 48px language-panel: backgroundColor: "{colors.panel}" textColor: "{colors.ink-body}" typography: "{typography.input}" rounded: "{rounded.md}" padding: 16px --- ## Overview Google Translate is a two-pane tool: type on the left, read on the right, pick languages on a bar above. It uses Google's Material 3 look, so the page is white, one pale blue-gray panel holds the languages, and one deep blue marks actions. [Observed] What defines the look: 1. **Google Sans and Roboto.** Google Sans for text, buttons and the input, with Roboto for headings and page text. [Measured] 2. **A deep blue action.** `#0b57d0` for the Sign in button and for selected text, with `#1a73e8` for some links. [Measured] 3. **A tonal selected state.** The active mode chip is a light blue `#d3e3fd` with dark blue `#0842a0` text, while the others are white with a `#dadce0` edge and blue text. [Measured] 4. **Round, tall chips.** Mode chips are 36 high with a 48px corner. Icon buttons are 40 to 48 circles. The Sign in button is a 40 high pill. [Measured] 5. **A large, quiet input.** The source text is 24 on 32 in `#444746`, with no box around it. [Measured] 6. **Pale panels.** The language bar and result panel sit on `#f0f4f9` with 16px corners. [Measured] Source for this file: translate.google.com measured in a browser at 1440 and 390 wide, read on 2026-10-06. Material 3's published tokens were not read. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Action blue | `#0b57d0` | Filled button, selected text | | Link blue | `#1a73e8`, `#2962ff` | Links and focus | | Tonal container | `#d3e3fd`, text `#0842a0` | Selected chip | | Text | `#1f1f1f`, input `#444746` | Interface and input | | Muted text | `#5f6368` | Secondary labels | | Page | `#ffffff` | Main surface | | Panel | `#f0f4f9` | Language and result panels | | Outline | `#dadce0` | Chip edges | | Page text | 87 percent black, about `#212121` | Headings in Roboto | ### Typography Google Sans at 400 and 500 for the interface and input, Google Sans Text for small labels and Product Sans also loaded, with Roboto for headings and some page text. The input is 24 on 32 at 400, chips and buttons are 14 at 500 with 0.15px tracking, small labels are 13, and page text is 16. [Measured] ### Shape and spacing Corners are 48 on mode chips, 100 on the Sign in pill, 16 on panels, 8 and 2 on small shapes, and 50 percent on icon buttons. Chips are 36 high with 12 side padding, the Sign in button is 40 high with 10 by 12 padding and icon buttons are 40 to 48. [Measured] ### Iconography and motion Material Icons Extended is loaded for the toolbar icons. [Measured] ### Themes Light on the page measured. [Observed] ## Platform: iOS The Google Translate iOS app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A compact bottom bar or mode switcher for text, camera and voice. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A large microphone or camera button near the input. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. Google's iOS apps usually share the colors and type with Android and use native iOS navigation. [Inferred] ## Platform: Android The Google Translate Android app was not captured. The notes below follow from the web design and Material 3. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for text, camera and conversation modes. [Inferred] ### Main action Expected on Android: Floating action button. A large round button for voice or camera input. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. Expected to follow Material 3 closely, since the web page already uses its colors, shapes and type. [Inferred] ## Platform: Web translate.google.com text translation, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A top bar with the product name and a Sign in pill button, and mode chips such as Text and Images under it. [Observed] ### Main action Expected on Web: Page-level button. A filled blue pill, 40 high. The main work is typing in the large source field. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Tonal and outlined chips 36 high, circular icon buttons and a large borderless text area. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Chips measure 36 high, the Sign in button 40 and icon buttons 40 to 48. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Material Icons Extended. [Measured] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public page measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. Material 3 colors and shapes in a web layout. [Observed] ## Cross-platform consistency Consistent across platforms: the blue, the tonal selected state and the round shapes. [Observed for web, Inferred for the apps] Intentionally different: mobile is expected to put camera and voice input first. [Inferred] ## Do's and Don'ts ### Do - Use the tonal blue for the selected state and white with an outline for the rest. - Keep the source text large and the box invisible. - Use round shapes for chips and icon buttons. - Keep one filled button on the screen. ### Don't - Don't fill every chip. Only the selected one is tonal. - Don't add shadows to panels. - Don't use the link blues for large fills. ## Known Gaps - Image, document, website and conversation modes were not measured. - The iOS and Android apps were not captured. Their sections are inferred. - Dark mode was not measured. - Material 3's published tokens were not read, so role names are not given. - Account deletion and store policy rules were not verified.