Lazy

Lazy

Preview image. Unlock full-res

Subdued command center

Industryproductivity
Palette
#0a0a0a
#26272c
#1a1b1f
#3b3c3e
#8a8c93
#62646a
#535355
#e0e0e0
#ffffff
#b8b8b8
#6c6d77
#8c8c93

Lazy operates with a 'stealth dark mode' aesthetic, prioritizing content through deep, muted surfaces and delicate typography. A subtle play of light against dark is achieved through soft, localized gradients and sharp, clean borders. The overall impression is one of quiet efficiency and focused productivity, where UI elements recede until interaction, brought to life by crisp text and carefully applied elevation. Use Carbon Gray (#26272c) as the default background for all new sections. Apply Ghost Border (#8a8c93) for hairline separation and subtle element distinction. Headlines should leverage Migra 500 for high impact, with letter-spacing 0.048em at 58px and 0.026em at 21px. All interactive elements like buttons and inputs should have a border-radius of 4px. For card backgrounds, use Slate Surface (#1a1b1f) or Ash Gray (#3b3c3e) and apply a 1px solid #8a8c93 border. Text hierarchy should progress from Pure White (#ffffff) for primary headers to Callout Text (#e0e0e0) for body, and Whisper Gray (#62646a) or Muted Text (#535355) for secondary/helper text. Ensure large headlines and display text receive negative letter-spacing from Inter, e.g., -0.045em at 55px, for visual density. Do not introduce highly saturated colors for functional UI elements; reserve them for subtle decorative gradients or brand accents. Avoid heavy drop shadows or strong visual separation between elements; prefer thin borders and subtle background shifts. Do not use generic system fonts; Inter and Migra are critical for the brand's typographic identity. Do not use a default padding or margin of less than 6px for interactive elements; elementGap should be at least 14px. Do not use solid backgrounds for primary CTA buttons; they should rely on text, outlined borders, or subtle gradients. Avoid large blocks of plain, uncommented text; text should be broken up with clear headings and thoughtful spacing. Do not use bright white as a general text color on dark backgrounds without specific contrast considerations; Callout Text (#e0e0e0) is preferred for most body content.

More like this