Contractbook

Contractbook

Preview image. Unlock full-res

Playful professionalism, high-contrast clarity.

Industrysaas
Palette
#1a1a1a
#ffffff
#f7f7f3
#f0f0ec
#000000
#d4d4d0
#6d6868
#b3b3b3
#1009f6
#ffba09
#add3e5
#304801

Contractbook uses a playful, confident aesthetic with bold primary colors punctuating a clean, spacious light background. The system prioritizes readability and clear interaction points, leveraging vibrant yellow for primary actions and strong blue for statements. Typography is robust and direct, complementing the slightly soft, geometric shapes used throughout components and illustrations. Visual hierarchy is established through strategic color blocking and generous whitespace, rather than relying on complex elevation. Prioritize Energy Gold (#ffba09) for all primary calls to action, ensuring immediate visual recognition. Use Abcwhyte font for all text content, maintaining consistency across headings, body, and UI elements. Apply 999px border-radius to all buttons and form fields to achieve a consistent pill-like or softly rounded appearance. Employ Washed Black (#1a1a1a) for primary text on light backgrounds to maximize readability. Leverage Royal Blue (#1009f6) and Energy Gold (#ffba09) as prominent accent colors for key content blocks or interactive states. Maintain generous section gaps of 60px to provide ample breathing room between content blocks and improve content scanning. Utilize Pure White (#ffffff) and Pearl (#f7f7f3) as primary and secondary background surfaces to create a clean, light canvas. Avoid using multiple font families; Abcwhyte is the sole typeface for this system. Do not introduce strong drop shadows; rely on color blocking and border radii for visual separation and distinction. Refrain from complex gradients or textures on primary UI elements; maintain clean, solid color fills. Do not use highly saturated colors for large areas of text to avoid strain; reserve vibrant colors for accents and actionable elements. Avoid arbitrary border-radii; adhere to the established radii of 24px, 40px, 999px, and 4.375px. Do not overcrowd sections; ensure comfortable element gaps of 14px and robust card padding for readability. Avoid using any non-system greys; stick to the defined neutral palette for consistency and accessibility.

More like this