Humble

Humble's design system embraces a 'light AI lab' aesthetic: a pristine white canvas contrasted with sharp, functional typography. A singular vibrant orange acts as a dynamic accent, highlighting key actions and brand elements. Components are lightweight with subtle, diffused shadows that lift elements gently from the background rather than anchoring them with heavy forms. The overall impression is one of clarity, precision, and restrained energy. 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. 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.