Bento

Bento

Preview image. Unlock full-res

Vibrant, playful canvases

Industryproductivity
Palette
#1e2330
#ffffff
#f3f3f1
#676b5f
#222222
#d2e823
#2665d6
#e9c0e9
#061492
#502274
#780016
#254f1a

Linktree employs a vibrant, high-contrast visual system built around playful, oversized typography and boldly colored, flat surfaces. The design makes liberal use of curved shapes, particularly extreme pill-like radii, creating a soft yet dynamic feel. Color functions primarily as an energetic accent, rotating through vivid primary and secondary hues to delineate sections and highlight interactive elements, while core content remains anchored by highly legible black text on clean white or near-white backgrounds. Components are lightweight with minimal elevation, emphasizing color and shape over heavy borders or shadows. Use Chartreuse Kick (#d2e823) for primary call-to-action buttons, ensuring a 99px border-radius and Ink (#1e2330) text. Apply extreme large border radii (64px, 1000px) to decorative cards and feature blocks to maintain a playful aesthetic. Prioritize Linksans Linksansvf or Linksans for all headings and subheadings, adjusting letter-spacing according to the specified type scale for visual cohesion. Maintain a clear visual hierarchy by using Pure White (#ffffff) or Marble Fog (#f3f3f1) as background for most content areas, contrasted with Ink (#1e2330) text. Employ the specified brand colors – Chartreuse Kick, Hydrangea Bold, Lavender Pop, Iris Deep, Dahlia Grape, Crimson Currant, Forest Green, Marigold Gold – as vibrant, full-block section backgrounds on a rotating basis. Use Arial for standard body text at 16px to ensure optimal readability for longer passages. Apply 10px as the default elementGap for consistency in vertical spacing between discrete UI elements. Avoid using drop shadows on cards or buttons; the design system relies on color, shape, and bold typography for visual differentiation. Do not introduce new color hues; strictly adhere to the defined brand and neutral palettes to maintain brand consistency. Do not deviate from the specified border-radii; the curved aesthetic is a core part of the brand identity making specific values critical. Avoid using subtle grays for interactive elements; actions should be clearly distinguished with vibrant brand colors. Do not use generic system fonts for display or heading text; it dilutes the distinctive typographic voice. Do not apply padding or margins that break the established elementGap (10px) and sectionGap (48px) rhythm. Do not use less than 20px vertical padding on primary buttons; the generous padding is integral to their confident presence.

More like this