Voiceflow

Voiceflow

Preview image. Unlock full-res

AI Blueprint on White Canvas

Industryai
Palette
#397dff
#f55c15
#ff0000
#1956f3
#171717
#262626
#333333
#525252
#737373
#a1a1a1
#d4d4d4
#ffffff

Voiceflow presents a light and airy interface, built on a spacious canvas of off-white and crisp backgrounds, punctuated by a single vibrant blue for primary actions. Typography is precise and clear, with a preference for slightly condensed sans-serifs for body text and a light, elegant serif for dramatic headlines. Cards and elements feature large, comfortable padding and rounded corners, creating a friendly yet professional feel. The overall impression is one of confident, approachable AI technology, with visual complexity reserved for product demonstrations. Prioritize Canvas White (#ffffff) for primary backgrounds and Content Card surfaces, maintaining a bright and open feel. Use Skybound Blue (#397dff) exclusively for primary interactive elements, ensuring all core actions are distinctly colored. Apply a 999px border-radius to all buttons and tags, creating a consistent, friendly pill shape. Employ Tiempos Headline (weight 300) for all major headings to convey quiet authority and elegance. Use 24px as the primary value for elementGap and cardPadding to ensure a consistent, comfortable density. Define UI borders and dividers using Platinum Mist (#d4d4d4) for soft separation, or Quiet Stone (#737373) for slightly more emphasis. Allow imagery, especially product mockups, to feature transparent or semi-transparent backgrounds to integrate seamlessly with the light canvas. Avoid using saturated colors in large blocks unless specifically for brand accents like Ultramarine (#1956f3). Do not introduce heavy shadows or gradients; maintain the light and airy surface treatment. Refrain from using Tiempos Headline for body text or small labels; reserve it for large display typography. Do not deviate from the established border-radius values (999px, 20px, 14px) for interactive elements and cards. Avoid tightly packed content where elementGap is less than 8px; ensure generous breathing room. Do not use multiple chromatic colors for primary calls to action; Skybound Blue (#397dff) is the sole accent for interactive elements. Never use generic system fonts; always specify 'Selecta' for body and UI, and 'Tiempos Headline' for headings.

More like this