Opinaia

Overview

Opinaia is a comprehensive market research and public opinion platform that transforms complex data into actionable insights for strategic decision-making. The design system embodies a "Data-Driven Clarity" aesthetic—a modern, professional approach that balances technical sophistication with human-centered accessibility. The interface uses a clean white canvas paired with a vibrant blue accent (#0babdd) as the primary interaction color, supported by a warm green secondary (#8fc262) and golden tertiary (#f3c969) for status and highlights. This palette creates visual hierarchy without overwhelming the user, evoking confidence, innovation, and trustworthiness.

The brand voice is precise, authoritative yet approachable, and never condescending. Opinaia speaks to data professionals and business leaders with clarity and respect, using concrete language grounded in methodology and results. Example sentence: "Our four research units deliver validated insights across customer behavior, panel management, public sentiment, and user acquisition—each backed by rigorous analysis and real-time data."

Colors

The color system is anchored by a neutral white surface (#ffffff) with a carefully calibrated gray scale for depth and contrast. Primary interactions use a vibrant cyan-blue (#0babdd), which appears on all call-to-action buttons, links, and active states—this is the signature accent that guides user attention through the interface. Secondary actions and status indicators employ a sage green (#8fc262), used for success states, positive metrics, and supporting UI elements. The tertiary accent, a warm golden yellow (#f3c969), highlights warnings, featured content, and secondary calls-to-action. The surface stack progresses from #ffffff (base) through #f4f5f6 (dim), #f3f4f6 (container-low), #eeeff2 (container), #e5e7eb (container-high), and #d1d5db (container-highest), enabling subtle layering

Typography

The type system uses Montserrat as the primary typeface, a geometric sans-serif that conveys modernity and precision—essential for a data-driven brand. The hierarchy spans from Display (64px, 600 weight) for hero statements down to Label-sm (12px, 500 weight) for metadata and form hints. Headlines use 600 weight to maintain clarity without excessive boldness; body text at 400 weight ensures readability at 16px on light backgrounds with 24px line-height. Letter-spacing is minimal (0em to -0.02em) to preserve the typeface's geometric character while maintaining legibility. For small labels over busy backgrounds or data-dense tables, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast without adding visual noise. The body-md (16px, 400 weight, 24px line-height) is the workhorse

Layout

The layout uses a 12-column grid with a maximum container width of 1280px, providing a flexible yet structured foundation for responsive design. The gutter spacing is consistently 24px, applied horizontally between columns and vertically between sections. White-space is generous: section separation uses lg spacing (40px), card-to-card padding uses md spacing (24px), and internal element spacing uses sm (12px) or xs (4px) for fine-tuning. The page rhythm alternates between full-width hero sections (with background imagery or gradients), constrained content containers (1024–1200px), and card grids that adapt from 1 column on mobile to 3–4 columns on desktop. Margins between major sections (hero to features, features to testimonials) are set at 64px (xl spacing) to create breathing room and v

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than heavy drop shadows. Level 1 (Base): white surface (#ffffff) with no shadow, used for the page background and primary content areas. Level 2 (Standard Card): 1px border at #d1d5db with a soft shadow of 0 1px 2px rgba(0, 0, 0, 0.06), applied to cards, input fields, and contained components. Level 3 (Elevated/Hover): background shifts to #f3f4f6 with shadow 0 4px 12px rgba(0, 0, 0, 0.08), used for card hover states and modal backgrounds. Level 4 (Modal/Overlay): shadow 0 16px 40px rgba(0, 0, 0, 0.1

Shapes

The shape philosophy is "Technical Precision with Approachability"—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and primary interactive elements use lg radius (1rem / 16px) to create a friendly, inviting appearance while remaining clearly clickable. Cards and containers use md radius (0.75rem / 12px) to balance structure with softness. Input fields and form controls use DEFAULT radius (0.5rem / 8px) for a compact, business-like feel. Small UI elements like badges and tags use full radius (9999px) to create pill-shaped co

Components

Action Elements Buttons are the primary drivers of user intent. The button-primary component uses the signature blue (#0babdd) background with white text, 12px horizontal padding, 48px height, and lg radius (16px). On hover, the background shifts to the lighter primary-container (#39abe0) with a 200ms transition. On active/pressed state, use primary-fixed-dim (#0babdd) with a subtle inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) to indicate depression. Button-secondary uses a transparent background with a 1px border at #d1d5db and primary-colored text; on hover, the background becomes #e5e7eb and the border darkens to #9ca3af. All buttons must have a minimum touch target of 44px height; if space is constrained, increase horizontal padding instead of reducing height.

Containers

Do's and Don'ts

**Do**

• Do use the primary blue (#0babdd) exclusively for interactive elements, focus states, and CTAs—it is the visual anchor that guides user attention through the interface.
• Do maintain consistent 24px gutters and 40px section spacing to create a rhythm that feels spacious and professional without appearing empty.
• Do apply the 200ms cubic-bezier(0.2, 0, 0, 1) transition to all interactive state changes (hover, focus, active) for a cohesive, refined feel.
• Do use the full gray scale (from #ffffff to #d1d5db) for layering and depth; avoid pure black (#000000) for text or borders—use #111827 instead for a softer, more refined appearance.
• Do reserve shadows for elevated states (hover, modal) rather than applying them to base components; this maintains visual clarity and prevents the interface from feeling cluttered.

**Don't**

• Don't use the secondary green (#8fc262) or tertiary gold (#f3c969) as primary interactive colors; they are supporting accents for status and highlights only.
• Don't apply border-radius below 8px (DEFAULT) to interactive elements like buttons or inputs—it creates a harsh, dated appearance that conflicts with the modern aesthetic.
• Don't stack multiple shadows or use blur effects on text; the design system relies on color contrast and clean typography for hierarchy, not visual noise.
• Don't exceed 1280px container width or use asymmetric gutters; consistency in spacing is essential to the technical precision of the brand.
• Don't use system fonts or fallback sans-serifs in place of Montserrat; the typeface is integral to the brand identity and must load reliably via @font-face.