Front

Front, deep purple, vibrant accent

Preview image. Unlock full-res

Deep Violet Command Center. An enterprise platform that feels personal and approachable through color and shape.

Industrysaas, dev-tools
Palette
#300c41
#5b1f76
#ffffff
#dee948
#e2dcf6
#0d1d39
#d0c6f0
#1c1e20
#f0f4fe
#8034bf
#5b5d63

Front's visual style is a bold declaration of authority, centered around a deep, immersive purple canvas. It balances the playful energy of vibrant accents with the serious undertones of a mature B2B SaaS. The use of custom typography and deliberate shape choices—sharp corners for content containers vs. generous 40px and 64px radii for interactive elements—creates a dynamic tension, projecting a brand that is both innovative and reliable. The unique deep violet background establishes a distinct brand identity, ensuring instant recognition. Use Deep Violet (#300c41) as the primary background for hero sections and brand statements to establish immediate recognition. Apply Warm Lemon (#dee948) exclusively for primary call-to-action buttons to ensure maximum visual impact and clear user guidance. Prioritize Suisse Intl 500 for all headlines and Suisse Intl 400 for body text to maintain consistency and legibility. Implement a generous 64px border-radius for all primary CTA buttons and critical interactive inputs. Employ Bright Lavender (#e2dcf6) for accent text and secondary interactive elements when set against Deep Violet. Ensure all primary headings utilize letter-spacing of -0.01eM to -0.02em for a refined, modern presentation. Use Jet Black (#1c1e20) as the default text color on all lighter backgrounds like Clean White (#f0f4fe). Do not use multiple accent colors; Warm Lemon (#dee948) is the singular energetic accent. Avoid using hard, sharp corners on interactive elements; prefer 40px or 64px radii for buttons and inputs. Do not place body text directly on Deep Violet (#300c41) or Accented Plum (#5b1f76) backgrounds; use Primary White (#ffffff) or Bright Lavender (#e2dcf6) for contrast. Do not deviate from the Suisse Intl font family for core UI elements and body copy. Avoid applying heavy shadows; use subtle inset shadows like rgb(208, 198, 240) 0px 0px 0px 1px inset for a soft, layered effect. Do not use black text on Warm Lemon (#dee948) buttons; ensure text is dark, nearly black (#1c1e20) for optimal contrast. Avoid using the vivid violet hues for large blocks of content; they are best reserved for accents and backgrounds for distinction.

More like this