
Preview image. Unlock full-res
Deep Violet Efficiency – like a meticulously organized business travel brief, dark and precise yet subtly inviting.
This design system projects an image of sophisticated efficiency, using a deep violet primary, Navan Ink, grounded by a crisp white and muted grays. It achieves a balance between corporate authority and modern approachability through its meticulous typography, showcasing delicate letter-spacing on display fonts and precise line-heights. The overall impression is one of trusted expertise, made accessible by subtle gradients and refined component styling. Use Navan Ink (#15002c) for primary dark text and key background elements. Apply Action Violet (#6307f8) exclusively for primary interactive elements like main CTA buttons. Maintain a 9999px border-radius for all primary and secondary buttons to ensure a consistent pill-shape. Apply 14px border-radius to all card components and elevated containers. Utilize Neue Haas Grotesk Display Pro with 0.0400em letter-spacing for large, impactful headlines to maintain refinement. Ensure all body text uses Neue Hass Grotesk Text with a line-height appropriate to its size for optimal readability, such as 1.50 for 16px. Use Border Ash (#c6c6d2) for all subtle divders and non-interactive borders. Avoid using highly saturated colors for large content blocks; reserve them for accents and interactive elements. Do not introduce additional font families; stick to Neue Hass Grotesk (Text/Display) and Sanomat. Never use hard-edged rectangles without a radius for interactive components; apply at least 10px radius to badges and 14px to most cards. Do not use shadows for elevation except where explicitly defined; rely primarily on background color differentiation. Avoid using custom letter-spacing on Neue Hass Grotesk Text body copy; it should remain 'normal'. Don't deviate from the established padding values for interactive buttons (10px vertical, 28px-54px horizontal).









