Dub

Dub

Preview image. Unlock full-res

Crisp Utility on White Canvas

Industrysaas
Palette
#ffffff
#000000
#0a0a0a
#171717
#262626
#404040
#f5f5f5
#e5e5e5
#d4d4d4
#3b82f6
#16a34a
#ea580c

Dub presents a high-contrast, functionally transparent productivity aesthetic. Surfaces range from pure white to subtle light grays, often paired with crisp dark text. Typography is precise and clear, with a prominent serif display font for impact and a neutral sans-serif for content. Accent colors appear as small functional highlights rather than large blocks, creating a dynamic yet understated feel. Components are lightweight, featuring soft border radii and minimal, diffused shadows, emphasizing content over heavy ornamentation. Use Satoshi (or Montserrat) at 48px, weight 500, line-height 1.15 for primary page headings. Apply Canvas White (#ffffff) for all main page and card backgrounds to maintain a bright, open feel. Employ Ink Black (#0a0a0a) for all primary body text, headings, and crucial interactive text for maximum readability. Utilize Border Light (#e5e5e5) for all hairline borders and subtle dividers to define content areas without adding visual weight. Apply a 9999px (full pill shape) border-radius to all ghost buttons and tags for a distinctive soft, approachable quality. Use Element Gap of 16px to separate most inline elements and Card Padding of 16px for content within containers. Employ Accent Blue (#3b82f6) or Focus Ring Blue (#1e40af) as the background for primary call-to-action buttons, with Canvas White (#ffffff) text. Avoid using heavy drop shadows; prefer diffused, subtle shadows like rgba(0, 0, 0, 0.05) 0px 1px 2px 0px. Do not deviate from Inter for body text, links, and most UI elements; consistency is key for readability and brand recognition. Refrain from using saturated colors as large background blocks; reserve them for small accents, highlights, or semantic indicators. Avoid tight line spacing for larger text; ensure line-heights are generous, especially for headings, to enhance scannability. Do not overcrowd sections; maintain a Section Gap of at least 64px to provide clear visual separation and breathing room. Do not use arbitrary border radii; adhere strictly to the defined scales: 9999px for pills, 8px for small components, 12px for cards, and 16px for larger containers. Do not introduce new typefaces; the combination of Satoshi (display), Inter (UI), and Geist Mono (monospace) is comprehensive.

More like this