Varo Bank

Varo uses a vibrant, confident design language to convey financial accessibility. It primarily features a clean white canvas frequently punctuated by bold, saturated blocks of color for branding and accentuation. Typography is assertive, primarily using a custom grotesque sans-serif with controlled letter-spacing, giving a modern and approachable feel. Interactive elements are clearly delineated with a dominant purple accent, while a subtle elevation strategy ensures a lightweight, fluid user experience. Use Regal Violet (#8c58d0) for primary interactive elements, ensuring strong contrast against white or dark backgrounds. Apply 4px border-radius consistently for all interactive components like buttons and input fields. Employ National 2 Compressed for large, impactful headlines to create a bold, direct visual statement. Maintain a clear visual hierarchy with Neue Haas Grotesk Display, using varying weights and letter-spacing to differentiate content roles. Prioritize Canvas White (#ffffff) as the dominant background, using blocks of saturated brand/accent colors to define sections and emphasize content. Utilize 24px as the standard elementGap for horizontal and vertical spacing between components and elements. Ensure input fields have a subtle border of rgba(0, 28, 45, 0.14) against a white background to distinguish them clearly. Avoid using highly saturated colors for large paragraphs of body text; reserve them for accents, headings, or interactive elements. Do not introduce new border radii beyond the established 4px for interactive elements and 0px for full-bleed content blocks. Refrain from using shadows for elevation; rely on color blocks and subtle borders for visual separation. Do not deviate from the specified letter-spacing values for Neue Haas Grotesk Display and National 2 Compressed, as they are crucial to the brand's typographic identity. Avoid arbitrary use of the accent color palette; deploy colors like Limelight (#d4e84b) and Burnt Orange (#ed6c52) intentionally for highlights and feature differentiation. Do not use generic system fonts unless explicitly specified for fallback; prioritize Neue Haas Grotesk Display and National 2 Compressed. Do not apply decorative gradients; the system relies on solid color blocks and sharp color transitions for visual dynamism.