HoneyBook

HoneyBook

Preview image. Unlock full-res

Warm productivity with a vibrant hum

Industrysaas
Palette
#142127
#fffa77
#fffa56
#ffffff
#c7d5d9
#f4eae0
#343c40
#131416
#9ab9e8
#99d3ac
#dbd2f7
#63696c

HoneyBook presents a playful yet established aesthetic, built on a foundation of warm neutrals and a vibrant, almost neon yellow accent. Typography creates distinct hierarchy with a sans-serif for functional text and a serif for display, often with tight tracking. Components are soft and approachable with generous corner radii, emphasizing a friendly user experience. The palette is carefully balanced to keep the vivid yellow from overwhelming the interface, reserving it for key actions and foundational sections. Use Onyx Black (#142127) for all primary text elements to ensure high contrast and readability. Implement Buttermilk Yellow (#fffa77) as the dominant background for large, impactful sections, especially the hero. Apply a large radius of 159984px to all primary ghost buttons and filled CTA buttons, creating a consistent pill shape. Employ STK Bureau Sans for all body text, navigational elements, and functional UI text, picking a weight from 400-700 as needed. Utilize STK Bureau Serif with tight letter-spacing for all major headings to establish a distinctive and sophisticated visual voice. Maintain an element gap of 16px between most interactive interface elements for comfortable density. Use Arctic Mist (#ffffff) for card backgrounds and other contained content areas that require a crisp, clean surface. Avoid using saturated colors other than Buttermilk Yellow or Lemon Zest for primary UI elements; reserve other accent colors for large background blocks. Do not use box shadows for elevation; rely on background color changes or border thickness to distinguish elements. Do not deviate from the specified letter-spacing values for STK Bureau Sans and Serif, as they are crucial for brand typography. Never use radii smaller than 6px for interactive elements or cards; all elements should feel soft and rounded. Do not introduce new typefaces; rely solely on STK Bureau Sans, STK Bureau Serif, and STK Gerhard. Avoid arbitrary uses of #c7d5d9 (Earl Gray) as a primary action; it is specifically for secondary, less emphasized actions or inactive states.

More like this