Ohana Inversiones

Overview

Ohana Inversiones is a fintech platform democratizing managed investment funds for Latin American retail investors. The brand embodies "Accessible Confidence"—a design philosophy that pairs bold, energetic pink (#db296b) with trustworthy navy (#0f395c) to signal both innovation and stability. The visual language combines soft, organic gradient overlays (pinks and purples) with clean, structured layouts, creating an approachable yet professional experience. The emotional response is one of empowerment: users feel guided by expert knowledge while maintaining control over their financial future.

The brand voice is conversational yet authoritative, speaking directly to the investor's aspirations without condescension. Vocabulary emphasizes clarity and action: "Aprovechá" (seize the opportunity), "tranquilidad" (peace of mind), "expertos" (trusted expertise). The tone avoids financial jargon where possible, preferring accessible metaphors. Example sentence in brand voice: "Invertí en el presente, construí tu futuro—nuestros expertos cuidan cada peso para que vos disfrutes de los resultados."

Colors

The color system balances emotional energy with institutional trust. Primary (#db296b) is the signature accent, deployed on all CTAs (buttons, links, app download badges), interactive states, and brand moments—it signals action and opportunity. Secondary (#0f395c), a deep navy, anchors the interface as the primary text color, navigation, and secondary buttons, conveying stability and expertise. Tertiary (#0d71b9), a brighter blue, supports data visualization and secondary accents. The surface stack is predominantly white (#ffffff) with carefully calibrated grays (#f5f5f5 to #d9d9d9) for container hierarchy. On-surface text is dark gray (#333333 for primary, #666666 for secondary), ensuring 7:1+ contrast ratios. Error red (#cf2e2e) is reserved for validation and alerts. Gradients are used s

Typography

The type system uses Asap, a geometric sans-serif from Google Fonts, across all scales. Display (48px, 700 weight) is reserved for hero headlines like "¡POTENCIÁ TU FUTURO INVIRTIENDO EN EL PRESENTE!"—the exclamation mark and all-caps treatment reinforce the energetic brand voice. Headline-lg (36px, 700) and headline-md (28px, 600) structure section breaks and card titles, with tight line-height (1.22x) to maintain visual density. Body-lg (18px, 500) and body-md (16px, 400) carry descriptive copy and form labels, with generous line-height (1.5x) for readability. Label-md (14px, 600) and label-sm (12px, 500) are applied to buttons, badges, and micro-copy. Letter-spacing is tightened on display and headlines (-0.02em to -0.01em) to enhance impact, while body text uses +0.01em for clarity. On

Layout

The layout follows a 12-column grid with a max-width of 1200px, centered with 24px gutters on desktop and 16px on mobile. The page rhythm alternates between full-width hero sections (with blurred gradient backgrounds) and contained content blocks. Spacing uses a semantic scale: 8px unit base, with md (24px) for section padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section occupies ~60vh with asymmetric content (headline + CTA on left, app mockup on right), creating visual tension that draws the eye. Card-based sections (e.g., "Fondos Administrados") use a 3-column grid with 24px gaps, collapsing to 1 column on mobile. Container backgrounds are white (#ffffff) with subtle borders (1px solid #cccccc) and shadows (0 3px 8px rgba(0, 0,

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Elevated): cards and containers with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft spread shadow that lifts elements 4-6px. Level 3 (Modal/Overlay): modals and popovers with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and vertical offset (8px) that creates perceived distance. Interactive elements (buttons) use a contextual shadow: primary buttons add 0 3px 8px rgba(219, 41, 107, 0.25

Shapes

The shape language is "Soft-Technical"—combining geometric precision with approachable curves. Border-radius follows a scale: sm (3px) for minor UI elements like small badges, DEFAULT (5px) for input fields and small buttons, md (7px) for medium cards, lg (10px) for primary buttons and larger containers, xl (16px) for hero sections and modals, and full (9999px) for pill-shaped badges and circular avatars. The rationale: smaller radius (3-5px) on form inputs and micro-components maintains a structured, professional feel; medium radius (7-10px) on buttons and cards balances friendliness with aut

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (48px height, 12px vertical / 24px horizontal padding) use the brand pink (#db296b) with white text (label-md weight 600). On hover, the background darkens to #c41e5e and the shadow deepens (0 6px 16px rgba(219, 41, 107, 0.35)), creating a tactile response. On active/pressed, the background shifts to #a81850 and shadow reduces to 0 2px 4px, simulating a "pressed" state. Secondary buttons mirror the primary structure but use navy (#0f395c) with white text, signaling lower priority. Ghost buttons (transparent background, 2px pink border) are used for tertiary actions; on hover, the background fills with rgba(219, 41, 107, 0.08) without changing the border. All buttons use border-radius: 10px (lg token) and tra