Brex

Brex's design system evokes a sense of quiet authority and precision, like a finely engineered financial instrument. It relies on a high-contrast achromatic palette for clarity, punctuated by a single vibrant orange for critical actions. The interplay of strong typography, including a custom headline font, and a disciplined use of space, crafts an experience that feels both robust and approachable, grounding complex financial offerings in visual simplicity. Always use Action Orange (#ff5900) for primary call-to-action buttons, never fordecorative elements. Apply Soft Gray (#f3f3f7) as a background to differentiate content sections without introducing strong color. Employ the Flecha typeface (36px, 500 weight) exclusively for main page headlines to maintain brand distinction. Utilize Inter for all body text and UI labels, ensuring legibility and consistency across components. Maintain a clear visual hierarchy with Dark Charcoal (#15191e) for prominent text and Cool Stone (#60646c) for supporting details. Ensure all interactive elements have sufficient padding; a minimum of 4px vertical and 8px horizontal for small buttons, scaling up to 16px horizontal for primary CTAs. Do not use any additional chromatic colors beyond Action Orange (#ff5900); stick to the defined neutral palette. Avoid arbitrary border-radius values; adhere to 6px, 8px, or 12px for components, and 0px for inputs. Do not use Flecha for any body text or minor headings; its distinctiveness is reserved for key messaging. Never use shadows on buttons or cards unless explicitly defined as part of a component style. Do not introduce tight letter-spacing for body text; apply negative letter-spacing only to large display typography as specified for Inter.