Sprig

Sprig

Preview image. Unlock full-res

White canvas, thoughtful function

Industryai
Palette
#faf9f8
#0b2330
#000000
#f3f3f3
#1c1a17
#6e6d6a
#272420
#e8e7e6
#141312
#575653
#8f8d8b
#9a9a91

Sprig employs a soft, minimalist aesthetic with a focus on clear information hierarchy, using a primarily achromatic palette grounded by a deep navy. Strategic use of subtle gradients and large radii on imagery introduces a touch of warmth and visual interest. Typography is compact and precise, maintaining a high information density while generous vertical spacing creates an airy, uncrowded feel. Interactive elements are softly delineated with rounded corners and muted borders, emphasizing functionality over ornamentation. Prioritize Canvas White (#faf9f8) as the dominant background color for body sections and interface elements. Use Midnight Ink (#0b2330) for primary text and strong link states, ensuring high contrast and legibility. Apply 32px radius to all buttons and navigation elements for a consistent soft, approachable feel. Separate content sections with generous vertical spacing (sectionGap: 80px) to create an open and spacious layout. Integrate subtle linear gradients like Light Mauve Gradient or Peach Sunset Gradient for decorative backgrounds or imagery, not for functional UI elements. Use ABC Diatype for all headings and general body text, with TT Commons Pro for specific hero text or badges. Utilize Charcoal Button (#272420) for filled primary CTAs and Border Ash (#e8e7e6) for ghost button borders. Avoid using highly saturated colors for functional UI elements; reserve them for decorative imagery or gradients. Do not use dark gray/black backgrounds (Jet Black #000000 or Graphite #1c1a17) for large sections; they are for specific element contrasts. Do not break the 32px or 4px radius pattern for buttons and badges, respectively; maintain consistent corner treatments. Avoid excessive use of borders; lean on spacing and background color shifts to delineate sections. Do not introduce new font families; the system relies on ABC Diatype and TT Commons Pro for its typographic identity. Do not add drop shadows to components; the system relies on flat surfaces and subtle background shifts. Do not compress vertical spacing; maintain the spacious rhythm established by the 80px section gap and element gaps.

More like this