Vivid Money

Overview

Vivid Money is a European fintech platform designed to democratize business banking through vibrant, energetic design paired with intelligent financial tools. The brand embodies 'Energetic Minimalism'—a design philosophy that combines bold, saturated accent colors (particularly the signature purple #7d33f6) with clean, spacious layouts and humanist typography. The interface evokes confidence, accessibility, and forward-thinking innovation, speaking directly to entrepreneurs, freelancers, and small business owners who demand both functionality and visual delight. The emotional response is one of empowerment: users feel capable, supported, and excited to manage their finances.

Vivid's voice is conversational yet professional, avoiding corporate jargon in favor of direct, benefit-focused language. The tone balances enthusiasm with clarity—never breathless, always purposeful. Vocabulary emphasizes speed ('en quelques minutes'), rewards ('cashback', 'intérêts'), and control ('gagnez', 'faites fructifier'). Example sentence in Vivid's voice: 'Ouvrez votre compte en pro en quelques minutes, au meilleur prix—puis gagnez jusqu'à 10% de cashback sur chaque transaction.'

Colors

Vivid's color system centers on a vibrant purple primary (#7d33f6) that commands attention on CTAs, links, and interactive states while maintaining accessibility against white surfaces. This purple is paired with a warm, approachable green secondary (#42c88c) used for success states, positive reinforcement, and accent highlights. The surface stack is predominantly white (#ffffff) with carefully calibrated light purples and grays for container hierarchy: surface-container-low (#f4edff) for subtle backgrounds, surface-container (#f4e8ef) for mid-level cards, and surface-container-highest (#dac9ee) for elevated modals. The on-surface text is a near-black (#333333) for maximum readability at 16px body sizes. Error states use a bold red (#c40b08) reserved exclusively for destructive actions and

Typography

Vivid employs Satoshi as the primary typeface for all headings and body text, chosen for its geometric warmth and contemporary feel that aligns with the brand's approachable-yet-professional positioning. The type hierarchy is built on a 60px display (fontWeight 500, lineHeight 68px) for hero headlines like 'Le compte pro malin', stepping down through 40px headline-lg (fontWeight 600) for section titles, 28px headline-md for subsections, and 16px body-md (fontWeight 400, lineHeight 24px) for body copy. All headings use fontWeight 600 or higher to create visual distinction from body text. Labels and CTAs use 16px label-md with fontWeight 500 and 0.01em letter-spacing for crisp, scannable text. On small labels over busy backgrounds (e.g., badge components), apply text-shadow: 0 1px 2px rgba(0

Layout

Vivid uses a fluid 12-column grid with a maximum container width of 1440px, allowing content to breathe on large screens while remaining compact on mobile. The page rhythm is built on the spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) is used for padding within cards and component internals, and sm (12px) for tighter groupings within cards. The gutter is consistently 24px, applied as horizontal padding on the container. Hero sections use full-width backgrounds with a 40px top/bottom margin, while feature cards are arranged in a 3-column grid on desktop (each card 24px padding, 24px gap). The white background (#ffffff) is never broken by color blocks; instead, subtle surface-container colors (#f4edff, #f4e8ef) create visual separation without jar

Elevation & Depth

Vivid uses a restrained shadow system to create subtle depth without visual heaviness, reflecting the clean, modern aesthetic. Base cards use elevation.sm (0 1px 2px rgba(0,0,0,0.04)) for minimal separation from the surface. Elevated cards and hover states apply elevation.md (0 4px 12px rgba(0,0,0,0.08)), creating a gentle lift. Modals and overlays use elevation.lg (0 16px 40px rgba(0,0,0,0.12)) for pronounced depth. All shadows use a 0 offset (no horizontal/vertical shift) to maintain the flat, modern aesthetic. Focus states on interactive elements add a 3px inset box-shadow: 0 0 0 3px rgba(1

Shapes

Vivid employs 'Geometric Warmth'—a shape philosophy that balances precision with approachability. Buttons and primary CTAs use full rounded corners (border-radius: 100px or 9999px) to create a friendly, inviting appearance that encourages interaction; the primary CTA 'Ouvrir un compte professionnel' exemplifies this with its 100px radius. Cards and containers use 24px (1rem) radius for a modern, slightly softer edge that avoids the clinical feel of sharp corners while maintaining visual clarity. Input fields use 6px (0.375rem) radius for a subtle, technical appearance that signals functionalit

Components

Action Elements Buttons are the primary interaction mechanism and use the full rounded (100px) radius to signal their importance. The primary button (button-primary) has backgroundColor: rgb(125, 51, 246), textColor: white, padding: 15px 23px, and fontWeight: 500. On hover, the background shifts to #6c26de (button-primary-hover) with a 120ms transition (transition: background-color 120ms ease-out). The secondary button (button-secondary) uses backgroundColor: #f5f5f4 with textColor: #333333, maintaining the same 100px radius and 15px 23px padding for size consistency. Ghost buttons (button-ghost) have a transparent background with a 2px solid border in the primary color and textColor: #7d33f6; on hover, the background becomes #f4edff (button-ghost-hover). All buttons use label-md typog

Do's and Don'ts

**Do**

• Do use the primary purple (#7d33f6) exclusively on CTAs, focus states, and brand-critical interactive elements—never dilute it with opacity or secondary uses.
• Do maintain 24px padding and 24px border-radius on all cards and elevated containers to create visual consistency across the interface.
• Do apply the full rounded (100px) radius only to buttons; never apply it to inputs, cards, or other surface elements.
• Do use the green secondary (#42c88c) for success states, positive feedback, and reward highlights (cashback, interest earned).
• Do preserve generous whitespace (lg spacing: 40px) between major sections to reflect the brand's confidence and accessibility.
• Do use Satoshi fontWeight 600+ for all headings and fontWeight 500 for labels to create clear visual hierarchy.
• Do apply the md shadow (0 4px 12px rgba(0,0,0,0.08)) on hover to cards and buttons, never remove shadows on interaction.

**Don't**

• Don't use opacity on the primary purple; always use the full hex #7d33f6 or shift to the darker hover state #6c26de.
• Don't apply rounded corners smaller than 24px to cards or containers—this breaks the geometric warmth philosophy.
• Don't mix border-radius values within a single component family (e.g., don't use 16px on one card and 24px on another).
• Don't use the green secondary (#42c88c) for neutral or informational states; reserve it for positive, reward-based feedback.
• Don't reduce or remove shadows on hover or active states; instead, increase shadow depth to signal elevation.
• Don't use system fonts or fallbacks in place of Satoshi; always load the custom font and provide Satoshi as the primary family.
• Don't apply text-shadow or text-outline to body text; reserve these techniques for small labels over busy backgrounds only.