Gocardless

GoCardless employs a subtly sophisticated financial interface, balancing a grounded, warm achromatic palette with a singular, vibrant yellow accent. The design favors a spacious, approachable feel with soft edges, defined by generous padding and rounded corners. Typography is meticulously chosen, utilizing a blend of sturdy, modern sans-serifs and a refined, airy display font to establish a clear hierarchy. Interaction is supported by crisp, focused states rather than heavy ornamentation, ensuring a clean and efficient user experience. Prioritize Canvas Ecru (#efece7) for page backgrounds and Pure White (#ffffff) for card surfaces to establish a clean, layering effect. Use Grounded Gold (#f1f252) exclusively for primary calls to action and critical accent points to maintain its high-impact role. Apply a 32px border-radius for all primary buttons and prominent navigation pills for a consistent soft, modern feel. Implement the Haffer font family for body text and most headings, adjusting weights (400, 600, 700) to create typographic hierarchy. Maintain generous spacing with 64px section gaps and at least 24px card padding to ensure visual breathing room. Leverage the light weight of Para (300) for large, softer headings and Nudge (700) for impactful display hero titles. Ensure Ghost Outline Buttons use a 1px border in Midnight Ink (#1c1b18) and have a 4px radius for click targets, contrasting with larger primary buttons. Do not introduce new chromatic colors outside of the Grounded Gold (#f1f252) accent; maintain the warm achromatic base palette. Avoid applying harsh or deep shadows; prefer subtle inset shadows or rely on background contrast to differentiate UI elements. Do not use letter-spacing adjustments unless specifically defined in a type role; default to normal for Haffer, DM Mono, Para, and Nudge. Refrain from using rectangular buttons; ensure all buttons have at least a 4px border-radius, with 32px for prominent actions. Avoid dense, compact layouts; uphold the comfortable density by respecting the 16px element gap and larger section gaps. Do not use different font families for core UI elements; Haffer should handle the majority of text content unless it's code/data (DM Mono) or a display title (Para/Nudge). Do not overuse Grounded Gold (#f1f252); its impact comes from its scarcity as a primary accent.