The Guardian

Overview

The Guardian is a global news organization that prioritizes editorial authority, journalistic rigor, and reader accessibility through a refined, print-informed design aesthetic. The brand embodies 'Editorial Modernism'—a design philosophy that treats typography, hierarchy, and whitespace as primary tools for guiding readers through complex information. The interface evokes the precision of a broadsheet newspaper translated into digital form, with a dark navy header (rgb(5, 41, 98)) anchoring the page and a clean white canvas (rgb(255, 255, 255)) providing maximum legibility for long-form content. The emotional response is one of trust, clarity, and intellectual rigor: readers feel they are engaging with a serious, authoritative source.

The Guardian's voice is measured, investigative, and conversational—never sensational, always contextual. The brand uses a distinctive yellow accent (rgb(255, 229, 0)) to highlight calls-to-action and key editorial moments, creating visual punctuation without distraction. Vocabulary patterns favor specificity over hyperbole: 'The government announced new regulations' rather than 'Shocking new rules revealed.' Example sentence in brand voice: 'The Welsh-language film adaptation challenges both the classical myth and contemporary austerity, refusing compromise on either front.'

Colors

The Guardian's color system is rooted in editorial tradition and digital accessibility. Primary (rgb(5, 41, 98) / #052962) is the navy blue used for the header bar, navigation, and primary CTAs—it conveys authority and institutional trust. Secondary (rgb(255, 229, 0) / #ffe500) is a vibrant yellow reserved for 'Support us' buttons, highlight boxes, and editorial callouts; it creates visual urgency without aggression. Tertiary (rgb(134, 109, 80) / #866d50) is a warm brown used for bylines, timestamps, and supporting text, evoking the ink of printed newsprint. The surface stack uses near-white (rgb(255, 255, 255) / #ffffff) for article bodies, light gray (rgb(246, 246, 246) / #f6f6f6) for card backgrounds and ad containers, and medium gray (rgb(220, 220, 220) / #dcdcdc) for borders and divid

Typography

The Guardian employs a two-family system: GH Guardian Headline (a custom serif with high contrast and distinctive letterforms) for all display, headline, and title levels, paired with Guardian Text Egyptian (a refined serif with generous x-height) for body copy. This pairing communicates editorial authority—serifs signal tradition and depth—while maintaining digital legibility through generous line-height (1.5x to 1.75x font size) and careful letter-spacing. Display (56px, 700 weight, -0.02em tracking) anchors feature articles; Headline-lg (40px, 700 weight) introduces sections; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading for article text. Labels and UI text use GuardianTextSans (a humanist sans-serif) at 15px with 0.02em tracking to create visual separation fr

Layout

The Guardian uses a flexible 12-column grid with a max-width of 1300px, centering content on desktop while allowing full-bleed imagery and ads. The gutter is 16px on mobile, scaling to 24px on tablet and 40px on desktop. Article content typically occupies 8–10 columns, with a sidebar (2–4 columns) for related content, ads, and navigation. Whitespace is generous: section breaks use lg spacing (40px) to create visual breathing room between article sections, while inline elements (paragraphs, lists) use md spacing (24px). The container max-width of 1300px prevents line lengths from exceeding 75–80 characters, maintaining optimal readability. Cards and modular content blocks use md padding (24px) internally, with sm spacing (12px) between nested elements. Margins follow a consistent scale: hea

Elevation & Depth

The Guardian uses minimal shadow and depth to maintain editorial clarity. Level 1 (Base): flat white surface (rgb(255, 255, 255)) with no shadow, establishing the primary reading plane. Level 2 (Cards & Containers): light gray background (rgb(246, 246, 246)) with a 1px solid border at rgba(0, 0, 0, 0.1) and optional box-shadow 0 1px 2px rgba(0, 0, 0, 0.06) on hover, creating subtle separation without visual drama. Level 3 (Modals & Overlays): white background with box-shadow 0 16px 40px rgba(0, 0, 0, 0.12) and a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) behind the modal. Focus states

Shapes

The Guardian employs 'Editorial Minimalism' in its shape language: corners are either sharp (0px radius) or subtly rounded (3–4px) to maintain the precision of print typography. Buttons use 4px border-radius, creating a soft-edged rectangle that feels contemporary without appearing playful. Cards and containers use 4px radius for consistency with buttons, maintaining a cohesive, grid-aligned aesthetic. Input fields use 1000px border-radius (full pill shape) to signal interactivity and distinguish them from static containers. Badges and small UI elements use full (9999px) radius for a circular

Components

Action Elements Buttons follow a three-tier hierarchy. Primary buttons (button-primary) use the navy primary color (rgb(5, 41, 98)) with white text, 48px height, 12px vertical / 24px horizontal padding, and 4px border-radius. On hover (button-primary-hover), the background shifts to primary-container (rgb(0, 119, 182)) with a transition of 150ms ease-out. Secondary buttons (button-secondary) use a transparent background with a 1px border at rgb(153, 153, 153) and navy text, maintaining the same dimensions. Accent buttons (button-accent) use the yellow secondary color (rgb(255, 229, 0)) with bold (700 weight) black text, reserved for 'Support us' and high-priority CTAs. All buttons use label-md typography (15px, 600 weight, 0.02em tracking) and disable text-decoration on hover to mainta

Do's and Don'ts

**Do**

• Do use the navy primary (rgb(5, 41, 98)) for all primary CTAs, header elements, and focus states—it is the brand's signature authority color.
• Do reserve the yellow secondary (rgb(255, 229, 0)) exclusively for 'Support us' buttons and high-priority editorial callouts; overuse dilutes its impact.
• Do maintain generous line-height (1.5x to 1.75x) and letter-spacing (-0.02em to 0.02em) in typography to ensure digital readability across all screen sizes.
• Do use 4px border-radius consistently on buttons and cards to maintain the editorial, grid-aligned aesthetic; avoid organic or heavily rounded corners.
• Do apply 1px borders at rgba(0, 0, 0, 0.1) to all card and container edges to define structure without visual noise.

**Don't**

• Don't use the yellow secondary (rgb(255, 229, 0)) for body text or large background areas—it is reserved for accent moments and CTAs only.
• Don't apply shadows larger than 40px blur radius; the system prioritizes flat, print-like clarity over dimensional depth.
• Don't use sans-serif fonts for headlines or body copy; the serif pairing (Guardian Headline + Guardian Text Egyptian) is core to the brand's editorial authority.
• Don't exceed 80 characters per line in body text; use the 8–10 column layout and container max-width of 1300px to maintain optimal readability.
• Don't use border-radius values between 5px and 999px on interactive elements; stick to the defined scale (3px, 4px, 8px, 12px, 24px, or full).