Vivid Spain

Vivid Spain's design system feels like a digital canvas touched by soft, diffused light, giving financial services an approachable, almost ethereal quality. The pervasive use of very subtle, near-gray lavenders and clear white creates a clean, expansive backdrop. Pops of vivid violet on interactive elements act as gentle guiding lights, preventing the light palette from feeling sterile and instead imbuing it with a sense of calm innovation. The subtle use of gradients adds a painterly depth, making backgrounds feel less like solid blocks and more like atmospheric washes. Prioritize Satoshi for all text elements; ensure correct weight and letter-spacing for each size to maintain the brand's typographic tone. Use Vivid Violet (#7d33f6) exclusively for primary calls to action and active interactive states, reserving its prominence. Apply Pale Lavender (#f4edff) or Snowdrift (#ffffff) for card backgrounds and content sections to maintain a bright, spacious feel. Utilize 24px border-radius for all content cards and larger photographic elements, establishing a consistent soft geometry. Embed the Hero Gradient on primary hero sections to create a distinct, atmospheric entry point. Employ Midnight Ink (#24282d) and Graphite (#333333) for all primary text, ensuring high contrast and readability on light backgrounds. Maintain a uniform elementGap of 8px for consistent internal spacing between smaller elements. Avoid introducing new primary colors; maintain the dominance of violet and the neutral palette to prevent visual clutter. Do not use box-shadows for elevation; instead, rely on background color variations and subtle background gradients to imply depth. Do not use sharp corners; ensure all significant interactive elements and containers adhere to the 24px or 100px border-radius system. Limit the use of bold (weight 700) to critical headlines or emphasized words; primarily use 400 and 500 for body text. Avoid generic button styles; stick to the defined pill-shaped buttons with 100px or 48px border-radius. Do not vary letter-spacing for different custom weights of the same font size; follow the defined letter-spacing rules per size. Do not add additional padding to components unless specifically defined, especially for buttons which rely on internal content for their perceived size.