Preview image. Unlock full-res
Whimsical tech playground. Muted violet meets playful pastels on a clean white backdrop.
This design orchestrates a playful yet competent aesthetic, combining whimsical hand-drawn illustrations with a structured technical layout. Its mood is one of approachable innovation, where complex systems are presented with a friendly, inviting tone. The foundation is a clean, bright canvas, subtly enhanced by soft, multi-color gradients that hint at dynamism and possibility without visual noise. Muted violet tones dominate text and interactive elements, providing a consistent brand presence that is distinctive but not overwhelming.
Prioritize Fricolage Grotesque for all body text and UI labels, ensuring consistent letter-spacing as defined in the type scale.
Apply Electric Violet (#7c3aed) as the singular background color for primary call-to-action buttons, pairing it always with Cloud White text (#ffffff).
Use Muted Violet (#5e537c) for general body text and secondary informational elements to maintain a brand-aligned, readable tone.
Employ Mackinac weight 500 for all display and large section headings, utilizing its defined negative letter spacing for stylistic impact.
Implement 9999px corner radius for all primary and secondary button components to achieve a consistent 'pill' shape.
Utilize Ghost Gray (#e7e6f4) for subtle borders and dividers, providing visual structure without harsh lines.
Incorporate the Accent Gradient Hero (linear-gradient(to right, rgb(125, 211, 252), rgb(165, 180, 252), rgb(249, 168, 212))) sparingly for wide background sections to add a dynamic, pastel highlight.
Avoid using Electric Violet (#7c3aed) for non-interactive text elements; reserve it strictly for primary calls to action.
Do not introduce sharp corners on any interactive components; adhere to a minimum of 16px radius for structural elements and 9999px for buttons.
Refrain from using strong, single-color shadows for elevation; rely on the subtle rgba(91, 33, 182, 0.1) 0px 5px 5px -2px, rgba(91, 33, 182, 0.1) 0px 2px 4px -2px for button elevation.
Do not use black for body text; instead, use Grape Vine (#281950) or Muted Violet (#5e537c) for brand consistency.
Ensure all text blocks maintain generous line heights from the type scale (1.5 or 1.66) to prevent dense, hard-to-read paragraphs.
Avoid arbitrary use of the accent linear-gradient for small elements; it is designed for large background areas to provide a subtle, atmospheric shift.
