Info del Estero

Overview

Info del Estero is a regional Argentine news platform that combines bold, urgent typography with a warm, accessible color palette to deliver breaking stories and community journalism. The design aesthetic embraces "Journalistic Directness"—a style that prioritizes clarity and impact through high-contrast headlines, generous whitespace, and strategic use of the brand's signature red accent (#EC3237) on all interactive elements and key editorial moments. The platform serves readers across Santiago del Estero and surrounding regions, speaking to a diverse audience seeking local, police, sports, and cultural coverage with equal authority.

The brand voice is direct, trustworthy, and conversational—never sensational, always grounded in facts. The typography system pairs the bold, geometric Archivo family (used exclusively for headlines at weights 700–800) with the warm, humanistic Libre Franklin for body text, creating a visual hierarchy that guides readers from scannable headlines to digestible paragraphs. Example sentence in brand voice: "El gobernador Elías Suárez participó del encuentro que fortalece el acceso judicial en todo el territorio."

Colors

The color system centers on a warm, neutral foundation (surface: #f4f2ee, on-surface: #211f1e) that evokes newsprint and establishes a calm, readable baseline. The primary accent—a vivid, energetic red (#EC3237)—is reserved exclusively for call-to-action buttons, active navigation states, and breaking-news highlights; this red appears 48 times across the interface, making it the most recognizable brand signal. Secondary blue (#315297) supports editorial categorization and secondary actions, while tertiary purple (#9b51e0) marks special features and premium content. The error state uses a deeper red (#e40014) for validation feedback. All interactive surfaces use the full Material 3 surface stack: surface-container-lowest (#ffffff) for cards and modals, surface-container (#f4f2ee) for the ma

Typography

The typography system enforces a clear hierarchy using two distinct families: Archivo (bold, geometric, 700–800 weight) for all headlines from display (60px) down to title-lg (20px), and Libre Franklin (warm, humanistic, 400–600 weight) for body text and UI labels. Display-level headlines (60px, 800 weight, -0.04em letter-spacing) are reserved for hero sections and major story leads; headline-lg (40px, 700 weight) anchors section titles and featured articles; headline-md (28px, 700 weight) marks subsection breaks and card titles. Body-lg (18px, 400 weight, 28px line-height) is used for article introductions and long-form content, while body-md (16px, 400 weight, 24px line-height) serves as the default for article body and UI descriptions. Label-md (14px, 600 weight, 20px line-height, 0.01e

Layout

The layout uses a 12-column fluid grid with a maximum container width of 1180px, centered on the viewport. The page rhythm is established through consistent spacing: lg spacing (40px) separates major sections (hero, featured stories, category blocks), md spacing (24px) divides cards and article groups within sections, and sm spacing (12px) provides breathing room between list items and inline elements. The gutter width is 24px on desktop, reducing to 16px on tablet and 12px on mobile. The hero section spans full width with a semi-transparent overlay (rgba(0, 0, 0, 0.5)) and backdrop-filter: blur(4px) to ensure headline legibility over background imagery. Featured article cards use a rounded: full (9999px) border-radius and are arranged in a 2–3 column grid depending on viewport, with md sp

Elevation & Depth

Depth is achieved through a three-level shadow system that reinforces the information hierarchy without introducing dark overlays or glassmorphism. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) is applied to all card components, input fields, and standard UI surfaces, creating a subtle lift from the surface-container background. Level 2 (Hover/Interactive): on hover, cards and buttons transition to box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), a slightly deeper shadow that signals interactivity without dramatic movement. Level 3 (Modal/Overlay): modals and expanded panels use bo

Shapes

The shape philosophy is "Accessible Roundness"—a balance between modern softness and journalistic clarity. Buttons and chips use rounded: full (9999px border-radius) to create pill-shaped affordances that feel inviting and clickable; this applies to all primary and secondary buttons, input fields, and badge components. Cards and modals use rounded: lg (1rem / 16px) to soften corners without appearing overly playful, maintaining editorial authority. Form inputs and smaller UI elements use rounded: DEFAULT (0.5rem / 8px) for a subtle, professional appearance. The full (9999px) radius is never ap

Components

Action Elements Buttons are the primary interactive affordance and use a consistent 48px height with 12px vertical and 32px horizontal padding. Primary buttons (button-primary) use background-color: {colors.primary} (#EC3237), text-color: {colors.on-primary} (white), and rounded: full (9999px); they include a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them from the surface. On hover (button-primary-hover), the background shifts to #d42a2f with an enhanced shadow (0 4px 12px rgba(236, 50, 55, 0.25)) and a 200ms ease-out transition. On active/pressed (button-primary-active), the background darkens to #bf000f and the shadow reduces to 0 2px 4px rgba(0, 0, 0, 0.12), creating tactile feedback. Secondary buttons (button-secondary) use a transparent background with a 2px solid bord

Do's and Don'ts

**Do**

• Do use Archivo 700–800 weight for all headlines; its geometric boldness commands attention and reinforces editorial authority.
• Do apply the primary red (#EC3237) exclusively to interactive elements (buttons, active states, links) to maintain a clear visual hierarchy and prevent color fatigue.
• Do maintain lg spacing (40px) between major sections to create visual breathing room and guide readers through the page rhythm.
• Do use the full surface-container stack (surface-container-lowest through surface-container-highest) to create subtle depth without relying on dark overlays.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all cards and input fields to lift them from the surface and signal interactivity.
• Do use rounded: full (9999px) exclusively on buttons, chips, and badges; never apply it to large containers or section backgrounds.

**Don't**

• Don't use the primary red (#EC3237) for body text, backgrounds, or non-interactive elements; reserve it for CTAs and active states only.
• Don't mix Archivo and Libre Franklin weights arbitrarily; use Archivo 700–800 for headlines and Libre Franklin 400–600 for body and UI text.
• Don't reduce spacing below md (24px) between major content sections; the generous whitespace is essential to the editorial aesthetic.
• Don't apply rounded: full to large containers, section backgrounds, or structural elements; it dilutes the visual hierarchy and makes the interface feel unfocused.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#211f1e) for primary text and on-surface-variant (#5f6368) for secondary text to maintain warmth.
• Don't apply shadows stronger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) except on modals; excessive shadows create visual clutter and undermine the clean, journalistic aesthetic.