Skip to content

PUBLIC REFERENCE

Humble

Precise White Lab

2026-04-30 Source style Original site
Humble captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Canvas White #fafafa

Primary page background, default surface for most cards and UI elements. Provides a clean, bright foundation

Obsidian Text #1c1c1c

Primary text for headlines and critical information. Near-black for maximal contrast on light surfaces

Granite Gray #6e6e6e

Secondary text, navigation items, and muted interface elements. Provides visual relief from primary text

Ink Black #000000

Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color; Background gradient primarily for hero sections or full-width elements where text needs to stand out against imagery or product graphics

Ghost White #f1f1f1

Subtly darker background for alternative card surfaces or subtle section separation

Alabaster Gray #ecebe8

Tertiary background for cards or distinct content blocks, providing minimal contrast to the main canvas

Electric Orange #ff4000

Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color

Do

  • Prioritize Canvas White (#fafafa) for all primary backgrounds and surfaces.
  • Use Bricolage Grotesque (weights 500, 600) for all headings, applying appropriate tight letter-spacing for each size.
  • Apply Geist (weights 500, 600) for UI labels, navigation, and body text where precision is key.
  • Elevate cards with a subtle, diffused shadow: rgba(0, 0, 0, 0.03) 0px 30px 30px -2.5px.
  • Apply 30px border-radius to main content cards and 100px to all buttons for a consistent rounded feel.
  • Reserve Electric Orange (#ff4000) strictly for accents, interactive links, and strong highlights, never for large background areas or primary text.
  • Maintain comfortable spacing with 10px element gaps and 32px card padding, ensuring visual breathability.

Don't

  • Avoid heavy or high-contrast shadows; only use the subtle, diffused dark shadow.
  • Do not introduce new display fonts; stick to Bricolage Grotesque for all headings.
  • Never use Electric Orange (#ff4000) as a primary button background unless it's a small, icon-centric interaction.
  • Do not use dark backgrounds for sections unless explicitly defined as a full-bleed hero or product showcase with the Dark Overlay Gradient.
  • Avoid strong border strokes on cards; rely on elevation shadows or background color variations for differentiation.
  • Do not deviate from the established border radii; 30px for cards, 100px for buttons, 6px for controls, and 40px for images ensures consistency.
  • Refrain from using bold typefaces for body text; rely on weight 500 or 600 from Geist for emphasis.