G1

Overview

G1 is Brazil's preeminent news portal, serving millions of readers daily with breaking news, in-depth reporting, and multimedia content across politics, economy, technology, and culture. The design system embodies 'Journalistic Clarity'—a philosophy that prioritizes legibility, information hierarchy, and rapid content discovery over decorative flourishes. The interface uses bold primary red (#c4170c) as the signature accent, anchoring the brand's authority and urgency, while maintaining a clean, light-neutral canvas (white #ffffff with subtle grays) that ensures text remains the hero. The emotional response is one of trustworthiness and immediacy: users should feel confident they're accessing vetted, current information without friction.

The brand voice is direct, authoritative, and conversational—never sensational, always precise. G1 speaks to Brazilians across all demographics with clarity and respect. Vocabulary favors concrete nouns and active verbs; sentences are short and scannable. The tone avoids jargon while maintaining journalistic rigor. Example sentence in brand voice: 'Lula afirma que Brasil não está nem aí para o que Trump diz'—direct, present-tense, human-centered, and immediately comprehensible.

Colors

The G1 color system is built on a foundation of journalistic restraint: a neutral, light surface (#ffffff background, #f9f9f9 surface-dim) ensures text legibility and allows multimedia to breathe. The primary accent is a bold, warm red (#c4170c), used exclusively for CTAs, active states, and brand-critical UI elements like the header bar. This red is never used for body text or secondary information—it is reserved for moments that demand user attention. The secondary accent, a deep blue (#005cde), provides a complementary interactive layer for secondary actions, links, and data visualization. A tertiary red (#a6130a) serves as the hover/pressed state for primary elements, creating tactile feedback without introducing a new hue family.

Surface stack: The page background is pure white (#fff

Typography

G1 uses Open Sans (via the custom glbOpenSans font-family stack) across all typographic scales, chosen for its high legibility at small sizes and neutral, journalistic character. The type system follows a 4-weight hierarchy: 300 (light, rarely used), 400 (regular, body text), 600 (semibold, labels and secondary headings), and 700 (bold, headlines and primary headings). Display (56px, 700, -0.04em letter-spacing) is reserved for hero headlines and major announcements. Headline-lg (40px, 700, -0.02em) anchors section breaks and article titles. Headline-md (28px, 700, -0.015em) is used for subsection headers and featured story titles. Title-lg (20px, 600, -0.02em) marks card titles and sidebar headers. Body-lg (18px, 400, -0.025em) is used for article introductions and emphasized body text. B

Layout

G1 uses a fluid, 12-column grid system with a maximum container width of 1220px, centered on the viewport. The grid gutter is 24px (md spacing), applied symmetrically on left and right of each column. Page sections use lg spacing (40px) for vertical separation between major content blocks (e.g., hero to featured stories, featured stories to article grid). Within cards and containers, md spacing (24px) is used for padding and internal separation. Horizontal rhythm is maintained through consistent use of sm (12px) for tight groupings (e.g., icon + label pairs) and md (24px) for moderate separation (e.g., between list items).

The header occupies 100% viewport width with a fixed or sticky position, using primary red (#c4170c) as the background. Below the header, the main content area uses the

Elevation & Depth

G1 uses a subtle shadow system to create visual hierarchy without introducing depth illusions or glassmorphism. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06), used for hover states on flat elements), md (0 3px 8px rgba(0, 0, 0, 0.15), applied to cards and floating UI elements), and lg (0 12px 16px rgba(0, 0, 0, 0.1), reserved for modals, dropdowns, and the most prominent overlays). Cards in the default state have no shadow; on hover, they receive the md shadow and a subtle background-color shift to surface-container-low (#eeeeee), creating a 'lift' effect. The header

Shapes

G1 adopts a 'Pragmatic Roundness' philosophy: corners are softened just enough to feel contemporary and approachable, but never so much that they distract from content. The rounded scale is: sm (2px, used for very small UI elements like checkboxes or tiny badges), DEFAULT (4px, the workhorse radius for buttons, inputs, and small cards), md (8px, used for medium cards and larger interactive elements), lg (16px, for prominent cards and modals), xl (24px, for hero sections and full-width containers), and full (9999px, for pills and circular badges). Buttons use DEFAULT (4px) to maintain a profess

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary red (#c4170c) background, white text, 12px vertical / 16px horizontal padding, 40px height, and DEFAULT (4px) border-radius. Typography is label-md (14px, 600 weight). On hover, the background shifts to the secondary red (#a6130a) with a 150ms ease-in-out transition. On active/pressed, the background darkens further and the shadow elevates to sm (0 1px 2px rgba(0, 0, 0, 0.06)). Button-secondary uses the secondary blue (#005cde) with identical padding and sizing; on hover, it shifts to #004cb8 (on-secondary-fixed-variant). Button-ghost has a transparent background with a 1px solid outline in outline color (#999999), white text, and on hover receives a surface-container-low (#eeeeee)

Do's and Don'ts

**Do**

• Do use primary red (#c4170c) exclusively for CTAs, active states, and the header bar—never for body text or secondary information.
• Do maintain generous white-space (lg spacing, 40px, between major sections) to keep the interface feeling organized and scannable.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all headlines to create visual weight and authority.
• Do use the full 12-column grid with 24px gutters and a 1220px max-width container to ensure consistent, responsive layouts.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards on hover and elevated UI elements to signal interactivity.
• Do use Open Sans (glbOpenSans) at 400 weight for body text and 600–700 weight for headlines to maintain journalistic clarity.
• Do provide a 3px primary-red glow (box-shadow: 0 0 0 3px rgba(196, 23, 12, 0.1)) on input focus to signal interactivity.
• Do use DEFAULT (4px) border-radius for buttons, inputs, and standard cards to maintain a professional, contemporary appearance.

**Don't**

• Don't use primary red for body text, backgrounds behind white text, or disabled states—reserve it for interactive elements only.
• Don't crowd content; always use at least md spacing (24px) between cards and lg spacing (40px) between major sections.
• Don't apply shadows to buttons; their visual weight comes from color contrast and typography weight (600–700).
• Don't use rounded corners larger than lg (16px) on standard UI elements; save xl (24px) and full (9999px) for special cases like hero sections and pills.
• Don't mix font families; use glbOpenSans (Open Sans) exclusively across all typographic scales.
• Don't use positive letter-spacing on headlines; always use negative letter-spacing (-0.02em to -0.04em) to create visual authority.
• Don't apply more than one shadow level to a single element; use sm for subtle hover states, md for cards, and lg for modals only.
• Don't exceed the 1220px container max-width on desktop; maintain symmetric left/right gutters (24px) for visual balance.