Diario Panorama

Overview

Diario Panorama is a regional news platform serving Santiago del Estero, Argentina, and the broader Spanish-speaking world. The design embodies a 'Professional Clarity' aesthetic—a modern, accessible interpretation of traditional newspaper design adapted for digital-first consumption. The UI prioritizes information hierarchy and rapid scanning through a clean white canvas (rgb(255, 255, 255)), a commanding cobalt header (rgb(42, 76, 130)), and a vibrant cyan accent (rgb(2, 174, 238)) that draws the eye to breaking news, CTAs, and key financial data. The emotional response is one of trustworthiness and immediacy: users feel they are accessing authoritative, up-to-the-minute reporting without visual noise or distraction.

The brand voice is direct, factual, and locally rooted. Montserrat (a geometric sans-serif from Google Fonts) conveys modernity and clarity, while the typography scale emphasizes headlines (28–56px, fontWeight 700) to surface the most urgent stories. Vocabulary is journalistic and precise: 'Último Momento' (Breaking News), 'Locales' (Local), 'Policiales' (Police Reports), 'Somos Deporte' (Sports). Example sentence in brand voice: 'Milei se comparó con Sarmiento en un video generado con IA—lee la cobertura completa.'

Colors

The color system is built on a high-contrast, news-optimized palette. Primary (rgb(2, 174, 238) / #02aeee) is the brand's signature accent—deployed on all interactive elements (buttons, links, focus states) and financial data highlights. It is a vivid cyan that commands attention without overwhelming the page. Secondary (rgb(42, 76, 130) / #2a4c82) anchors the header and navigation bar, establishing authority and visual weight. Tertiary (rgb(240, 163, 2) / #f0a302) is reserved for alerts, warnings, and secondary CTAs, providing a warm counterpoint to the cool primary. Error (rgb(255, 0, 0) / #ff0000) is used for negative financial indicators and critical alerts.

The surface stack is deliberately minimal: Surface (rgb(255, 255, 255)) is the dominant canvas, with surface-container-lowest (r

Typography

The type system is built on Montserrat, a geometric sans-serif that balances warmth with precision—ideal for news environments where both authority and approachability matter. Display (56px, fontWeight 700, lineHeight 64px, letterSpacing -0.02em) is reserved for hero headlines and section titles. Headline-lg (36px, fontWeight 700) and headline-md (28px, fontWeight 700) drive story cards and subsection headers, with tight letter-spacing (-0.01em to 0em) to maximize impact. Body-lg (18px, fontWeight 400, lineHeight 28px) and body-md (16px, fontWeight 400, lineHeight 24px) handle article text and descriptions, with generous line-height (1.5–1.75) to support readability on mobile. Label-md (14px, fontWeight 600, letterSpacing 0.02em) and label-sm (12px, fontWeight 500, letterSpacing 0.03em) ar

Layout

The layout follows a fluid 12-column grid with a container max-width of 1280px (1024px on tablets, 100% on mobile). The page rhythm is driven by semantic spacing: lg spacing (40px) separates major sections (hero, news grid, financial ticker), md spacing (24px) divides cards and subsections, and sm spacing (12px) provides breathing room within components. The header occupies a fixed 60px height (padding 10px 0px) with a secondary navigation bar below it (height auto, padding 16px 24px). The hero section spans full width with a 24px gutter on either side. News cards are arranged in a 2–3 column grid on desktop, collapsing to single-column on mobile, each card using md padding (24px) and md border-radius (0.75rem / 12px). Financial ticker cards are displayed in a horizontal scrollable row on

Elevation & Depth

Depth is conveyed through a subtle shadow system and strategic use of background color shifts. Level 1 (Base) is the white surface (rgb(255, 255, 255)) with no shadow. Level 2 (Standard Card) uses surface-container-lowest (rgb(238, 238, 238)) with box-shadow: 0 5px 15px rgba(0,0,0,0.15) and a 1px border in outline-variant (rgb(204, 204, 204)). Level 3 (Elevated/Hover) shifts to surface-container-high (rgb(232, 232, 232)) and increases shadow to 0 8px 24px rgba(0,0,0,0.12). The header (rgb(42, 76, 130)) sits at Level 3, establishing visual dominance. Sticky elements (sticky ad, floating CTA) us

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully to soften hard edges without introducing visual noise. Buttons and inputs use DEFAULT (0.5rem / 8px) border-radius, creating a modern, approachable feel while maintaining clarity. Cards use md (0.75rem / 12px) border-radius to add subtle softness and distinguish them from the flat background. The header and navigation bars are square (0px border-radius) to anchor the page and convey authority. Badges and pills use full (9999px) border-radius to signal secondary or supplementary information. Fina

Components

Action Elements Buttons are the primary interactive element. Button-primary (backgroundColor rgb(2, 174, 238), textColor rgb(255, 255, 255), height 44px, padding 12px 24px, border-radius 8px) is used for primary CTAs like 'Subscribe', 'Read More', and 'Share'. On hover, backgroundColor shifts to #0088bb (a darker cyan) with a 200ms transition. Button-secondary (backgroundColor rgb(42, 76, 130), textColor rgb(255, 255, 255)) is used for secondary actions and navigation. Button-ghost (backgroundColor transparent, border 1px solid rgb(2, 174, 238), textColor rgb(2, 174, 238)) is used for tertiary CTAs and toggles; on hover, it fills with primary-container (rgba(224, 247, 255, 1)) and text shifts to on-primary-container (rgb(0, 61, 92)).

Containers & Surfaces Cards (backgroundColor rg

Do's and Don'ts

**Do**

• Do use primary (rgb(2, 174, 238)) exclusively for interactive elements and breaking news highlights—never for body text or backgrounds.
• Do maintain 24px vertical spacing between major sections and 12px between cards to preserve visual breathing room and reduce cognitive load.
• Do apply fontWeight 700 to all headlines (28px and above) and fontWeight 600 to labels and navigation to create clear visual hierarchy.
• Do use the financial ticker color system (green for positive, red for negative, gray for neutral) consistently across all data displays.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create a responsive, tactile feel.
• Do use Montserrat exclusively for all typography—never mix serif or system fonts—to maintain brand consistency across all platforms.

**Don't**

• Don't use secondary (rgb(42, 76, 130)) or tertiary (rgb(240, 163, 2)) as primary CTAs—reserve them for navigation and alerts only.
• Don't apply border-radius greater than 12px (md) to cards or buttons; excessive rounding dilutes the professional, news-focused aesthetic.
• Don't use box-shadow values greater than 0 8px 24px rgba(0,0,0,0.12)—deeper shadows create visual clutter and reduce clarity.
• Don't reduce line-height below 1.5 on body text (16px and below); tight line-height harms readability on mobile and creates visual tension.
• Don't mix fontWeight 400 and 500 in body text—use 400 exclusively for paragraphs and 500–600 only for labels and metadata.
• Don't apply color overlays or gradients to the white surface (rgb(255, 255, 255))—the system relies on flat color and shadow for depth.