Pronostici Naturali

Overview

Pronostici Naturali is a professional sports betting analytics platform designed for Italian football enthusiasts who demand precision, transparency, and data-driven decision-making. The brand embodies 'Data-Centric Pragmatism'—a design philosophy that prioritizes clarity and actionable intelligence over decorative flourish. The interface transforms complex statistical datasets into digestible visual narratives, combining a confident teal-and-gold accent palette with a clean, information-dense layout. The emotional response is one of professional confidence: users feel equipped, informed, and in control of their betting strategy.

The voice is direct, technical yet approachable, and distinctly Italian in cadence. Pronostici Naturali speaks in imperative verbs and concrete numbers: 'Scopri opportunità ogni giornata' (Discover opportunities daily), 'Monitora il tuo betting come un pro' (Track your betting like a pro). The tone avoids hype; instead, it emphasizes verification, guardrails, and systematic progression. Example sentence in brand voice: 'Analizza le quote iniziali, costruisci le tue giocate con insight verificabili, e gestisci il rischio con progressioni automatiche.'

Colors

The color system is anchored by a striking primary accent—#fff041 (vivid yellow-gold)—applied exclusively to high-priority call-to-action buttons and key interactive elements. This high-contrast, energetic hue signals opportunity and urgency against the clean white surface (#ffffff). The secondary accent, #1863dc (professional blue), reinforces trust and data integrity, used for secondary actions, links, and informational highlights. The tertiary anchor, #045042 (deep forest teal), grounds the header and establishes brand authority, evoking stability and expertise in financial decision-making.

The surface stack uses a minimal, light-mode palette: surface (#ffffff) as the primary canvas, with container variants ranging from #ebebeb (surface-container-lowest) to #d0d0d0 (surface-container-h

Typography

The typography system is built on Poppins, a geometric sans-serif that communicates modernity and clarity without sacrificing legibility at small sizes. Display (60px, weight 900, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, weight 700) introduces major sections; headline-md (28px, weight 600) breaks content into scannable chunks. Body-lg (18px, weight 400, 28px line-height) and body-md (16px, weight 400, 24px line-height) maintain readability in dense data contexts, with generous line-height (1.5–1.75) to prevent cognitive overload. Label-md (14px, weight 600, 0.02em letter-spacing) and label-sm (12px, weight 600, 0.03em letter-spacing) provide hierarchy for UI labels, badges, and metadata. On dense data tables and bet-tracking cards, apply te

Layout

The layout follows a 12-column grid with a max-width of 1140px, maintaining a fluid, responsive structure that adapts from mobile (full-width with 10px side padding) to desktop. The spacing scale uses semantic tokens: unit (8px) as the base increment, with sm (12px) for tight component spacing, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container padding defaults to 24px (md) on desktop, reducing to 12px (sm) on tablets and 10px on mobile. The block-gap (24px) ensures consistent vertical rhythm between stacked elements. Hero sections use full-width backgrounds with centered content containers (max 1140px), while data-dense sections (bet tracking, statistics tables) use narrower containers (800px) to prevent line-len

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids dark, diffuse shadows in favor of crisp, directional lighting. Level 1 (Base/Surface): no shadow; clean white background (#ffffff) with subtle outline-variant borders (#abb8c3, 1px) for card edges. Level 2 (Standard Card/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards on hover and secondary containers; this creates a gentle lift without visual heaviness. Level 3 (Modal/Elevated): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and primary overlays. Interactive elements (buttons, inp

Shapes

The shape philosophy is 'Functional Minimalism': rounded corners are used sparingly and purposefully to signal interactivity and reduce visual harshness without introducing organic softness. Buttons and primary CTAs use rounded.sm (4px, 0.25rem), a subtle radius that softens hard edges while maintaining geometric precision. Cards and containers use rounded.DEFAULT (8px, 0.5rem) for standard content blocks, and rounded.md (12px, 0.75rem) for elevated containers and modals. Input fields use rounded.DEFAULT (8px) to align with card styling and create a cohesive component family. Badges and pills

Components

Action Elements Buttons are the primary interaction mechanism and must be visually distinct by role. Button-primary uses {colors.primary} (#fff041) background with {colors.on-primary} (#036246) text, 40px height, 8px 16px padding, rounded.sm (4px), and label-md typography (14px, weight 600). On hover, transition to {colors.primary-fixed-dim} (#ceb400) over 0.2s ease-in-out, maintaining text color. Button-secondary uses {colors.secondary} (#1863dc) with white text, identical sizing and padding, transitioning to {colors.secondary-fixed-dim} on hover. Button-tertiary uses {colors.tertiary} (#045042) with white text. All buttons must have a minimum touch target of 40px height and 44px width to meet WCAG accessibility standards. Apply transition: background-color 0.2s ease-in-out to all but

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fff041) exclusively for primary CTAs and high-priority interactive elements; its high contrast and energetic tone signal opportunity and urgency.
• Do maintain 24px (md) gutter spacing between major content sections and 40px (lg) spacing between hero and body content to prevent cognitive overload in data-dense layouts.
• Do apply 0.2s ease-in-out transitions to all interactive state changes (hover, focus, active) to provide tactile feedback without introducing motion sickness.
• Do use Poppins weight 600 (label-md) for all button text and UI labels; weight 400 (body-md) for body copy; weight 700+ (headline-*) for section headers only.
• Do apply box-shadow: 0 0 0 3px rgba(24, 99, 220, 0.1) on keyboard focus for inputs and buttons to ensure accessibility without visual distraction.

**Don't**

• Don't use {colors.primary} (#fff041) for body text or large text blocks; its high saturation causes eye strain and reduces readability below 14px.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) to maintain the clean, data-forward aesthetic; excessive shadow depth introduces visual noise.
• Don't mix border-radius values within a component family (e.g., buttons with 4px and 8px corners); maintain consistent rounded.sm (4px) for all buttons to signal unified interaction model.
• Don't use color alone to convey status or hierarchy; always pair color changes with typography weight, size, or spacing to ensure accessibility for color-blind users.
• Don't apply animations longer than 0.3s or use easing functions other than ease-in-out; faster, linear transitions feel sluggish and delay user feedback perception.