Media & Entertainment / iOS / Android / Web

Google News

Google News keeps the page calm: a pale blue-gray ground, white cards, large regular-weight titles and a single deep blue for the one action.

Download
  • #0B57D0
  • #1F1F1F
  • #F6F8FC
  • #F0F4F9
  • #F2F2F2
  • #C30203

Color

Every color token in the file, grouped by role.

Brand

  • primary#0B57D0
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • link#1A73E8
  • ink#1F1F1F
  • ink body#444746
  • ink muted#5F6368
  • ink deep#202124

Lines

  • outline#3C4043

Status

  • alert#C30203

More

  • page#F6F8FC
  • panel#F0F4F9
  • chip#F2F2F2

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Google SansOpen font, shown as published.
  • Google Sans TextGoogle Sans Text is private and not available in open fonts. Shown in Google Sans, the closest open match.
  • headline28px / 400 / 32px

    Pack my box with five dozen liquor jugs

  • title22px / 400 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 20px

    Continue to checkout

  • caption12px / 400 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl20px
  • chip36px
  • pill40px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px

Components

Component tokens drawn with the colors, type and corners they name.

  • button filled
    button-filled
  • button tonal
    button-tonal
  • chip small
    chip-small
  • story card
    story-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 96 lines
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

RoleValueWhere
Action blue#0b57d0Sign in button
Link blue#1a73e8Links
Text#1f1f1f, #202124Titles and body
Secondary text#444746, #5f6368Meta lines
Page and card#f6f8fc, #ffffffSurfaces
Panel#f0f4f9Highlight panels
Tonal fill#f2f2f2Secondary buttons and chips
Alert red#c30203Live 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.