--- version: alpha name: The-Guardian-design-analysis description: "A newspaper on screen: Guardian Headline serif at 700 and 500, a Text Sans for interface and labels, ink #121212 on white and #f6f6f6, a deep navy (#052962) header with brand yellow, and one accent color per section such as news red (#c70000) and sport blue (#0077b6)." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#052962" on-primary: "#ffffff" brand-yellow: "#ffe500" navy-deep: "#041f4a" ink: "#121212" ink-body: "#333333" ink-muted: "#707070" ink-soft: "#545454" canvas: "#ffffff" canvas-subtle: "#f6f6f6" canvas-sunken: "#ededed" divider: "#dcdcdc" news: "#c70000" news-deep: "#ab0613" news-wash: "#fff4f2" sport: "#0077b6" opinion: "#c74600" culture: "#866d50" culture-wash: "#fbf6ef" lifestyle: "#bb3b80" lifestyle-wash: "#fef1f8" success: "#22874d" typography: # Font note: "GH Guardian Headline" is a private font and is not available in open fonts. Closest open alternative: "Bitter". # Font note: "Guardian Egyptian Web" is a private font and is not available in open fonts. Closest open alternative: "Bitter". # Font note: "GuardianTextSans" is a private font and is not available in open fonts. Closest open alternative: "Fira Sans". headline-large: fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif" fontSize: 28px fontWeight: 700 lineHeight: 32px headline-medium: fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif" fontSize: 24px fontWeight: 500 lineHeight: 28px headline-small: fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif" fontSize: 17px fontWeight: 500 lineHeight: 20px standfirst: fontFamily: "'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif" fontSize: 16px fontWeight: 500 lineHeight: 18px section-title: fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 26px ui: fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 22px ui-bold: fontFamily: "GuardianTextSans, 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 17px fontWeight: 700 lineHeight: 22px rounded: sm: 12px lg: 36px pill: 40px round: 999px spacing: xs: 4px sm: 6px base: 16px components: button-brand: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.ui-bold}" rounded: "{rounded.lg}" height: 36px padding: 0 16px header: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.ui}" height: 64px news-tag: backgroundColor: "{colors.news-wash}" textColor: "{colors.news}" typography: "{typography.ui-bold}" rounded: "{rounded.sm}" padding: 4px 8px culture-tag: backgroundColor: "{colors.culture-wash}" textColor: "{colors.culture}" typography: "{typography.ui-bold}" rounded: "{rounded.sm}" padding: 4px 8px lifestyle-tag: backgroundColor: "{colors.lifestyle-wash}" textColor: "{colors.lifestyle}" typography: "{typography.ui-bold}" rounded: "{rounded.sm}" padding: 4px 8px --- ## Overview The Guardian is a British newspaper with a worldwide site. It looks like a newspaper: a bold serif for headlines, a plain sans for labels and menus, dense columns of stories separated by thin rules, and a navy header with a yellow brand mark. [Observed] What defines the look: 1. **A headline serif.** Guardian Headline at 700 for section titles and 500 for story headlines, 17 to 28 on a tight line height. [Measured] 2. **A text sans for the interface.** Guardian Text Sans at 17 on 22, weight 400 for menus and 700 for labels and buttons. [Measured] 3. **Navy and yellow.** The header and brand buttons are `#052962`, with a deeper `#041f4a`, and the brand yellow is `#ffe500`. [Measured] 4. **One color per section.** News red `#c70000`, sport blue `#0077b6`, opinion orange `#c74600`, culture brown `#866d50` and lifestyle pink `#bb3b80`, each with a pale wash for backgrounds. [Measured] 5. **Rules and gray panels.** Dividers are `#dcdcdc`, panels `#f6f6f6` and `#ededed`, and ink is `#121212`. [Measured] 6. **Rounded only on controls.** Brand buttons are pills of 36 high and 12px corners appear on small tags. Images and stories stay square. [Measured] Source for this file: the International front page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The Source design system's documentation was not read. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Brand navy | `#052962`, deep `#041f4a` | Header, brand buttons | | Brand yellow | `#ffe500` | Brand mark and highlights | | Text | `#121212`, body `#333333` | Headlines, copy | | Muted text | `#707070`, `#545454` | Meta and captions | | Page, panel, sunken | `#ffffff`, `#f6f6f6`, `#ededed` | Surfaces | | Divider | `#dcdcdc` | Rules | | News | `#c70000`, deep `#ab0613`, wash `#fff4f2` | News section | | Sport | `#0077b6` | Sport section | | Opinion | `#c74600` | Opinion section | | Culture | `#866d50`, wash `#fbf6ef` | Culture section | | Lifestyle | `#bb3b80`, wash `#fef1f8` | Lifestyle section | | Success | `#22874d` | Confirmations | ### Typography Guardian Headline carries story headlines and section titles: 28 on 32 at 700 for the main News title, 24 on 28 and 17 on 20 at 500 for cards, 16 on 18 at 500 for short standfirsts. Guardian Text Sans carries the interface: 17 on 22 at 400 and 700, and 20 on 26 at 700 for the secondary section titles such as In focus. Georgia and system sans follow as fallbacks. [Measured] ### Shape and spacing Brand buttons are pills 36 high. Tags and small panels use a 12px corner. Larger rounded shapes of 36 and 40 appear on controls, and avatars and icon buttons are circles. Padding seen on headings is 6 above and 4 below. [Measured] ### Iconography and motion Not measured in this pass. [Inferred] ### Themes Light only on the page measured. [Observed] ## Platform: iOS The Guardian apps were not captured. The notes below follow from the web design. ### 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 tab bar for the main areas of the 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. The apps are expected to share the navy, the section colors and the headline serif. [Inferred] ## Platform: Android The Guardian apps were not captured. The notes below follow from the web design. ### 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 the main areas of the news app. [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. The apps are expected to share the navy, the section colors and the headline serif. [Inferred] ## Platform: Web The Guardian International front page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back and section links in the header. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A navy header with edition and section links and a Print subscriptions link, plus skip links for keyboard users. [Observed] ### Main action Expected on Web: Page-level button. A navy pill button, 36 high, with white bold text. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Pill buttons, circular icon buttons and an expanding panel on `#f6f6f6` with a dark border. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that change at breakpoints: the News title is 28 on desktop and 24 on mobile. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Skip links are 40 high and the brand button 36. [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 same fonts and colors scale down on mobile. [Measured] ## Cross-platform consistency Consistent across platforms: the headline serif, navy, section colors and thin rules. [Measured for web, Inferred for the apps] Intentionally different: headline sizes step down on narrow screens. [Measured] ## Do's and Don'ts ### Do - Set headlines in the serif and labels in the sans. - Give each section its own accent color and a pale wash. - Separate stories with thin gray rules. - Keep images and story blocks square. ### Don't - Don't use section colors on the navy header. - Don't round story images. - Don't use more than one section color in a single card. ## Known Gaps - Article pages, live blogs, opinion layouts and the dark theme were not measured. - The iOS and Android apps were not captured. Their sections are inferred. - Icons, motion and exact breakpoints were not measured. - The section color hexes are read from the page's own styles, so their pairing with text was not checked. - Account deletion and store policy rules were not verified.