Infobae

Overview

Infobae is a Spanish-language news platform serving Latin American audiences with urgent, data-driven coverage of US politics, immigration, and society. The design embodies "Warm Editorial Minimalism"—a visual language that balances journalistic authority with approachable warmth, using a vibrant orange accent (#f68e01) against a clean, light neutral palette. The aesthetic rejects cold corporate sterility; instead, it channels the energy and urgency of breaking news through carefully orchestrated color moments, generous whitespace, and typography that reads with clarity at any scale. The brand personality is direct, conversational, and deeply human: it speaks to readers as peers, not subjects. Voice example: "Trump afirmó que EEUU nunca olvidará el 11-S: por eso luchamos hoy"—urgent, specific, and emotionally resonant without sensationalism.

Colors

The color system is anchored by a warm, energetic primary orange (#f68e01) used exclusively for CTAs, key interactive elements, and brand moments. This orange is paired with a light, nearly-white surface palette (surface: #fafafa, surface-bright: #ffffff) that maximizes readability and creates breathing room for content. Secondary colors—a vibrant green (#02840c) and a cool blue (#75aadb)—serve as categorical accents for topic badges, status indicators, and supporting UI elements. The neutral hierarchy (on-surface: #1f1f1f for primary text, on-surface-variant: #5f6368 for secondary text, outline: #9b9b9b for borders) ensures legibility across all contexts. Error states use a muted rose (#d88080) to signal caution without alarm. All interactive states employ the primary orange with a 200ms

Typography

The type system uses Roboto exclusively, a humanist sans-serif that balances journalistic authority with warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero moments and major headlines; headline-lg (40px, 700 weight) frames section breaks and article titles; headline-md (28px, 700 weight) structures subsections with tight -0.01em tracking to maintain visual density. Body text operates at 16px (body-md) with 24px line-height and 0.01em tracking, ensuring comfortable reading at mobile and desktop scales. Labels use 14px (label-md) at 600 weight with 0.01em tracking for buttons and form fields. All type weights (300, 400, 500, 700) are preloaded via woff2 for performance. Headings use 700 weight exclusively to create visual hierarchy; body copy defaults to 400 weight with 500 re

Layout

The layout operates on a 12-column grid with a max-width of 1236px, centered with symmetric gutters of 24px. The spacing scale uses semantic tokens: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Cards and content containers use md (24px) padding internally; section margins default to lg (40px) vertically. The page rhythm emphasizes generous whitespace: hero sections occupy 40–60% of viewport height, followed by lg spacing before the first content section. Container widths remain fixed at 1236px on desktop; on tablet (768–1024px), gutters reduce to 16px and grid columns compress to 8; on mobile (<768px), gutters collapse to 12px and layout becomes s

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual clutter. Level 1 (Base): no shadow; surfaces sit flush against the background. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and dropdowns to lift them 2–3dp above the surface. Level 3 (Elevated/Hover): box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), used on card-hover and modal-content to signal interactivity. All shadows use a warm black (rgba(0, 0, 0, ...) rather than pure #000000) to preserve the warm aesthetic. Transitions between shadow states use 200ms ease-out timing to f

Shapes

The shape philosophy is "Approachable Precision"—combining sharp, technical corners for data-heavy elements with soft, rounded corners for interactive and human-facing components. Buttons and badges use full (100px) border-radius to signal friendliness and approachability; this extreme rounding is balanced by their compact padding (12px 24px) and bold typography to maintain visual weight. Cards and modals use md (9px) or lg (12px) radius to feel modern without appearing overly playful. Input fields use DEFAULT (6px) radius for a clean, functional appearance. Dividers and borders use sm (3px) r

Components

Action Elements Buttons use a two-state system: button-primary (background: #f68e01, text: white, rounded: 100px, padding: 12px 24px, height: 44px, font-weight: 600) for primary CTAs like "REGISTRARME"; button-primary-hover shifts to #ff9f1c with a 200ms ease-out transition. Secondary buttons (button-secondary) use a light gray background (#e0e0e0) with a 1px outline-variant border, maintaining the same height and padding. All buttons include a focus state with a 3px outline at primary color, offset 2px outward.

Containers & Surfaces Cards (card component) use background: white, rounded: 9px, padding: 24px, and a 1px border at #c4c7c5 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover (card-hover), the shadow elevates to 0 4px 8px rgba(0, 0, 0, 0.16) and background shifts to

Do's and Don'ts

**Do**

• Do use the primary orange (#f68e01) exclusively for CTAs, focus states, and brand-critical moments—never on body text or neutral surfaces.
• Do maintain lg (40px) spacing between major content sections to create visual breathing room and prevent cognitive overload.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for responsive, predictable feedback.
• Do use Roboto 700 weight for all headings and 400 weight for body text; avoid mixing weights within a single text block.
• Do layer cards and modals with the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to create clear visual hierarchy without excessive depth.
• Do use full (100px) border-radius on buttons and badges to signal interactivity and warmth; reserve sharp corners for data tables and technical elements.

**Don't**

• Don't use the secondary green (#02840c) or tertiary blue (#75aadb) as primary interactive colors; reserve them for categorical badges and status indicators only.
• Don't apply shadows exceeding 8px blur radius; the system prioritizes subtle depth and editorial clarity over dramatic layering.
• Don't mix font families; Roboto is the exclusive typeface across all scales and weights.
• Don't reduce padding below 12px on buttons or inputs; the design relies on generous internal spacing to feel approachable and clickable.
• Don't use pure black (#000000) for text or shadows; always use on-surface (#1f1f1f) or warm black (rgba(0, 0, 0, ...)) to preserve warmth.
• Don't apply border-radius greater than md (9px) to cards or modals; excessive rounding dilutes the editorial authority of the platform.