--- version: alpha name: Google-News-design-analysis description: "A news briefing in Google's Material 3 style: a pale blue-gray page (#f6f8fc), white cards, Google Sans titles at regular weight, a deep blue action (#0b57d0) and rounded 12 to 40px shapes." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#0b57d0" on-primary: "#ffffff" link: "#1a73e8" ink: "#1f1f1f" ink-body: "#444746" ink-muted: "#5f6368" ink-deep: "#202124" canvas: "#ffffff" page: "#f6f8fc" panel: "#f0f4f9" chip: "#f2f2f2" outline: "#3c4043" alert: "#c30203" typography: # Font note: "Google Sans Text" is a private font and is not available in open fonts. Closest open alternative: "Google Sans". headline: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 32px title: fontFamily: "'Google Sans', Roboto, Arial, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 28px body: fontFamily: "'Google Sans Text', Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px label: fontFamily: "'Google Sans Text', Roboto, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0.1px caption: fontFamily: "'Google Sans Text', Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0.2px rounded: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px chip: 36px pill: 40px spacing: sm: 8px md: 12px base: 16px components: button-filled: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.pill}" height: 40px padding: 0 20px button-tonal: backgroundColor: "{colors.chip}" textColor: "{colors.ink-body}" typography: "{typography.label}" rounded: "{rounded.pill}" height: 40px padding: 0 20px chip-small: backgroundColor: "{colors.chip}" textColor: "{colors.ink-body}" typography: "{typography.label}" rounded: "{rounded.md}" height: 32px padding: 0 12px story-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 16px --- ## Overview Google News is a personalised news front page. It uses Google's Material 3 look: a pale blue-gray page, white cards, a deep blue action and large Google Sans titles at regular weight. [Observed] What defines the look: 1. **A pale blue-gray page.** `#f6f8fc` behind white cards, with `#f0f4f9` for panels. [Measured] 2. **Large regular titles.** Google Sans at 28 on 32, weight 400, for section titles such as Your briefing. [Measured] 3. **Deep blue action.** `#0b57d0` for the Sign in button and `#1a73e8` for links. [Measured] 4. **Tonal secondary buttons.** `#f2f2f2` fills with `#444746` text, 40 high, with 14 to 40px corners. [Measured] 5. **Rounded shapes at several sizes.** 4, 8, 12, 16, 20, 36 and 40. [Measured] Source for this file: the Google News home page 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` | Sign in button | | Link blue | `#1a73e8` | Links | | Text | `#1f1f1f`, `#202124` | Titles and body | | Secondary text | `#444746`, `#5f6368` | Meta lines | | Page and card | `#f6f8fc`, `#ffffff` | Surfaces | | Panel | `#f0f4f9` | Highlight panels | | Tonal fill | `#f2f2f2` | Secondary buttons and chips | | Alert red | `#c30203` | Live and breaking marks | ### Typography Google Sans carries titles at 400: 28 on 32 for section titles. Google Sans Text carries body and controls at 16 and 14 (500 for labels). Roboto follows as a fallback. [Measured] ### Shape and spacing Corners are 4, 8, 12, 16, 20, 36 and 40, with 100 on the Sign in pill. Buttons are 40 high, small chips 32 and icon buttons 46 to 48. [Measured] ### Iconography and motion Material icons. [Inferred] ### Themes Light on the page measured. [Observed] ## Platform: iOS The Google News 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 bottom bar for the main sections of a news app. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. No floating action is expected in a news app. [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 colors and type with Android and use native iOS navigation. [Inferred] ## Platform: Android The Google News Android app was not captured. The notes below follow from the web design and platform conventions. ### 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 with Material 3 styling. [Inferred] ### Main action Expected on Android: Floating action button. No floating action is expected in a news app. [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 The Google News home page, 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, a search field and a Sign in pill, with topic links beneath. [Observed] ### Main action Expected on Web: Page-level button. A filled blue pill, 40 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Tonal pills 40 high and small chips 32 high. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values at each breakpoint. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons measure 40 high and icon buttons 46 to 48. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The responsive page keeps type and color and changes layout. [Measured] ## Cross-platform consistency Consistent across platforms: the pale page, white cards, the blue and the rounded shapes. [Observed for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Set section titles large at regular weight. - Use tonal buttons for secondary actions and one filled blue. - Put white cards on the pale blue-gray page. - Round shapes generously. ### Don't - Don't use bold titles. - Don't add borders around cards. - Don't use the link blue for large fills. ## Known Gaps - Article pages, the topic and local views and the dark theme were not measured. - The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions. - Icons, motion and exact breakpoints were not measured. - Account deletion and store policy rules were not verified. - Material 3's published tokens were not read, so role names are not given.