Aiva

Overview

Aiva is a Brazilian fintech platform that democratizes mobile financing through installment-based purchasing, eliminating credit card friction for everyday consumers. The brand embodies 'Tech-Forward Minimalism'—a design philosophy that pairs deep navy foundations (#020a46) with electric blue accents (#2181f9) and golden highlights (#ffbe00), creating a premium yet approachable digital experience. The aesthetic evokes trust, innovation, and accessibility: the navy conveys financial stability and security, while the vibrant blue and gold inject energy and optimism, signaling that modern finance is within reach. Users encounter a clean, spacious interface where every interaction feels deliberate and rewarding.

Aiva's voice is direct, confident, and human-centered. The brand speaks in conversational Portuguese, avoiding jargon while maintaining professionalism. Tone examples: 'Chegou Aiva' (Aiva has arrived) signals a moment of arrival and possibility; 'A menor distância entre você e seu próximo celular' (The shortest distance between you and your next phone) frames the product as a solution to real desire, not a workaround. The vocabulary emphasizes simplicity ('Simples. Digital.'), speed, and dignity—never patronizing, always empowering.

Colors

The Aiva color system is built on a foundation of deep navy (#020a46) that anchors the brand's financial credibility and appears in headers, primary text, and dark-mode contexts. The primary accent is electric blue (#2181f9), deployed on CTAs, interactive states, and key UI elements to signal interactivity and forward momentum. Secondary accent is golden yellow (#ffbe00), reserved for primary action buttons (Login, CTAs) and highlights that demand immediate attention—this warm, high-contrast color creates visual hierarchy and encourages conversion. Tertiary purple (#5235ef) supports secondary actions and badge states. The surface stack progresses from pure white (#ffffff) for primary content areas through light grays (#f2f2f2, #ebebeb) for container backgrounds, with a subtle lavender tint

Typography

The type system pairs Manrope (geometric, modern, weights 600–700) for headlines and display text with Geist (humanist sans-serif, weights 400–600) for body and interface text. This pairing creates a visual hierarchy that feels both premium and approachable: Manrope's geometric precision conveys innovation and confidence in headlines ('Chegou Aiva.' at 48px, 700 weight, -0.02em letter-spacing), while Geist's warmth keeps body copy accessible and readable. Display text (64px, 700 weight, -0.03em tracking) is reserved for hero sections and major announcements; headline-lg (48px, 700 weight) anchors section introductions; body-lg (18px, 400 weight, 28px line-height) carries primary content. All body text uses 24px line-height minimum to ensure comfortable reading on mobile and desktop. Apply

Layout

Aiva employs a 12-column fluid grid with a maximum container width of 1360px, ensuring responsive scaling from mobile (320px) to desktop (1920px+). The page rhythm is governed by a 24px gutter (md spacing) between columns and 40px (lg spacing) for section separation, creating breathing room that reinforces the brand's premium positioning. The hero section occupies full viewport height with centered content, using 64px top/bottom padding on desktop and 40px on tablet to establish visual dominance. Card-based layouts use 24px padding internally and 12px gaps between cards in grids. Container max-width is enforced at 1360px to prevent text lines from exceeding 75 characters, maintaining readability. White-space is treated as a first-class design element: empty space around CTAs (40px lg spaci

Elevation & Depth

Depth in Aiva is achieved through a restrained shadow system that avoids harsh contrasts while maintaining clear visual separation. The elevation scale uses three levels: Level 1 (sm) applies 0 2px 4px rgba(0, 0, 0, 0.05) to subtle interactive elements like list items and input fields, creating barely-perceptible lift. Level 2 (md) uses 0 3px 8px rgba(0, 0, 0, 0.15) on cards, modals, and standard containers, providing clear separation from the background without drama. Level 3 (lg) deploys 0 10px 50px rgba(82, 53, 239, 0.1)—a purple-tinted shadow with 10px blur and 50px spread—on elevated moda

Shapes

Aiva's shape philosophy is 'Precision with Warmth'—combining sharp, geometric forms with carefully chosen radii that feel both modern and human. Primary buttons use 30px border-radius (full rounding at 48px height), creating pill-shaped affordances that are unmistakably clickable and feel premium. Secondary buttons and cards use 16px border-radius (lg), balancing geometric clarity with approachability. Input fields and smaller components use 8px border-radius (md), maintaining visual consistency without softness. Navigation and header elements are square (0px radius) to anchor the layout and c

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (Login Cliente, CTAs) use golden yellow (#ffbe00) background, deep navy text (#020a46), 30px border-radius, 12px vertical / 32px horizontal padding, and 48px height. Apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) at rest; on hover, transition to box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Secondary buttons use transparent background with 2px solid blue (#2181f9) border, blue text, and 16px border-radius; on hover, fill with blue background and white text. Ghost buttons (no border, transparent background, blue text) appear in navigation and secondary contexts; on hover, apply surface-container-high background (rgba(216, 216, 227, 1)) over 150ms.

Container

Do's and Don'ts

**Do**

• Do use the golden yellow (#ffbe00) exclusively for primary CTAs and high-priority actions; it creates instant visual hierarchy and drives conversion.
• Do maintain 24px minimum line-height on all body text (16–18px) to ensure comfortable reading on mobile and desktop.
• Do apply the purple-tinted shadow (0 10px 50px rgba(82, 53, 239, 0.1)) to elevated elements to reinforce the brand's tertiary palette and create branded depth.
• Do use Manrope (600–700 weight) for all headlines and Geist (400 weight) for body text; never mix weights or families within a single component.
• Do enforce 40px (lg spacing) between major sections and 24px (md spacing) within components to maintain visual breathing room.
• Do use 30px border-radius on primary buttons only; reserve 16px for cards and 8px for inputs to maintain shape hierarchy.

**Don't**

• Don't use electric blue (#2181f9) for body text or large text blocks; reserve it for links, focus states, and interactive affordances only.
• Don't apply shadows exceeding 50px spread or 16px blur; this maintains visual refinement and prevents a dated, heavy appearance.
• Don't mix border-radius values between 12–15px; stick to the defined scale (8px, 16px, 30px) to maintain system coherence.
• Don't use font-weight below 400 or above 700; this preserves readability and maintains the type system's clarity.
• Don't apply text-shadow to body text larger than 14px; reserve it for small labels over busy backgrounds only.
• Don't use the secondary yellow (#ffbe00) for anything other than primary CTAs; overuse dilutes its impact and confuses visual hierarchy.