Waabi

Waabi

Preview image. Unlock full-res

monochromatic impact with magenta precision

Industryai
Palette
#191818
#ffffff
#e8e6e3
#808080
#8c8b8b
#cccccc
#d1d5dc
#ff2c6b

Waabi operates on a robust, authoritative visual language, characterized by stark contrasts between light and dark surfaces and bold, compact typography. A single vibrant magenta provides functional accents, drawing attention to calls-to-action and active states against the predominantly monochromatic palette. Components are designed for clarity and impact, with generous rounded corners hinting at a friendly usability layer beneath the serious brand posture. The overall impression is one of confident, high-tech efficiency. Always use a 12px border-radius for all content cards to maintain a consistent soft edge. Apply Accent Magenta (#ff2c6b) exclusively for primary calls-to-action or critical active states. Prioritize large, compact 'Zagma' typography for headlines, using its negative letter-spacing for visual density. Utilize Cloud Gray (#e8e6e3) and Canvas White (#ffffff) as the primary alternating background surfaces for section differentiation. Ensure interactive elements like buttons have a 50px border-radius, creating a distinct pill shape. Break up large content sections with a sectionGap of 96px for ample breathing room. Use NeueHaas for all body text and UI labels, ensuring letter-spacing of 0.01em or 0.02em for legibility. Do not introduce new vibrant colors outside of Accent Magenta (#ff2c6b); maintain the strict monochromatic palette. Avoid excessive use of drop shadows; the design relies on bold color blocks and border-radius for visual separation. Refrain from using long line lengths for body text; keep text blocks concise to maintain readability with NeueHaas. Do not deviate from the established type scale; maintain the precise sizes and letter-spacing for Zagma and NeueHaas. Avoid small, subtle changes in neutral tones for background; use the defined Cloud Gray, Canvas White, Midnight Graphite, and Muted Stone for clear surface distinction. Do not use generic square corners; aim for the established soft radii on all containers and interactive elements. Never use text as the primary call-to-action unless it is a defined Link Button with appropriate padding and transparent background.

More like this