{"id":"a6950b49-8ce4-4330-9499-26ca08061599","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/a6950b49-8ce4-4330-9499-26ca08061599","originalSiteUrl":"https://humbleops.ai","capturedAt":"2026-04-30T00:22:44.542Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Humble","summary":"Precise White Lab","description":"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.","industry":"ai","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#fafafa","role":"Primary page background, default surface for most cards and UI elements. Provides a clean, bright foundation","group":"neutral"},{"name":"Obsidian Text","hex":"#1c1c1c","role":"Primary text for headlines and critical information. Near-black for maximal contrast on light surfaces","group":"neutral"},{"name":"Granite Gray","hex":"#6e6e6e","role":"Secondary text, navigation items, and muted interface elements. Provides visual relief from primary text","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"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","group":"neutral","gradient":"linear-gradient(rgb(250, 250, 250) 38%, rgb(0, 0, 0) 49%)"},{"name":"Ghost White","hex":"#f1f1f1","role":"Subtly darker background for alternative card surfaces or subtle section separation","group":"neutral"},{"name":"Alabaster Gray","hex":"#ecebe8","role":"Tertiary background for cards or distinct content blocks, providing minimal contrast to the main canvas","group":"neutral"},{"name":"Electric Orange","hex":"#ff4000","role":"Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color","group":"accent"}],"typography":[{"role":"sans-serif — detected in extracted data but not described by AI","sizes":"12px","family":"sans-serif","weight":"400","lineHeight":"1.2"},{"role":"Primary display and heading font. Its generous x-height and slightly condensed structure give it a modern, capable feel. Letter spacing is consistently tight, especially at larger sizes, to pull words together.","sizes":"16px, 18px, 20px, 24px, 32px, 42px, 44px, 50px, 58px","family":"Bricolage Grotesque","weight":"500, 600","weights":[500,600],"lineHeight":"0.70, 1.10, 1.20, 1.40, 1.50","letterSpacing":"-0.0520em (58px), -0.0500em (50px), -0.0360em (44px), -0.0300em (42px), -0.0200em (32px)","fontFeatureSettings":"\"cv01\", \"cv05\", \"cv09\", \"cv11\", \"ss03\"; \"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\", \"ss01\", \"ss03\", \"ss04\""},{"role":"Secondary sans-serif for UI elements, navigation, and detailed body text. Its clean, technical aesthetic complements the primary heading font while maintaining readability at smaller sizes. Features like 'ss01' are activated for a distinct geometric feel.","sizes":"13px, 14px, 15px, 16px, 24px","family":"Geist","weight":"500, 600","weights":[500,600],"lineHeight":"1.30, 1.40","letterSpacing":"-0.0200em (24px, 16px), -0.0070em (14px)","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\", \"ss01\", \"ss03\", \"ss04\"; \"cv01\", \"cv05\", \"cv09\", \"cv11\", \"ss03\""},{"role":"A more flexible variant of Geist, used for compact informational text like captions, labels, and possibly code snippets due to its variable nature.","sizes":"12px, 14px, 17px","family":"Geist Variable","weight":"400","weights":[400],"lineHeight":"1.00, 1.20, 1.30, 1.40","letterSpacing":"normal","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\", \"ss01\", \"ss03\", \"ss04\"; \"ss01\", \"ss02\", \"ss03\", \"ss04\""},{"role":"Fallback and utility font for general body text and links where a more standard, highly readable sans-serif is preferred.","sizes":"14px, 16px, 18px","family":"Inter","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.20, 1.40","substitute":"system-ui","letterSpacing":"-0.0400em (18px), -0.0200em (16px), -0.0100em (14px)","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\""}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.4,"letterSpacing":0},{"role":"body","size":14,"lineHeight":1.4,"letterSpacing":-0.007},{"role":"body-lg","size":16,"lineHeight":1.4,"letterSpacing":-0.02},{"role":"subheading","size":18,"lineHeight":1.4,"letterSpacing":-0.04},{"role":"heading-sm","size":24,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"heading","size":32,"lineHeight":1.5,"letterSpacing":-0.02},{"role":"heading-lg","size":42,"lineHeight":0.7,"letterSpacing":-0.03},{"role":"display","size":58,"lineHeight":0.7,"letterSpacing":-0.052}],"spacing":{"radius":{"cards":"30px","images":"40px","buttons":"100px","controls":"6px","largeBlock":"70px"},"elementGap":"10px","sectionGap":"64px","cardPadding":"32px"},"radius":{"cards":"30px","images":"40px","buttons":"100px","controls":"6px","largeBlock":"70px"},"guidelines":{"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."],"dont":["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."]},"components":[{"name":"Ghost Button","role":"Primary call to action in hero sections or when a less prominent action is needed. Its inverse color scheme suggests a 'build' action for dark backgrounds."},{"name":"Product Features Card","role":"Standard card for content grouping, features, or product showcases. Characterized by soft elevation."},{"name":"Enclosed Content Block","role":"A variant for structured content with internal padding, like forms or detailed information panels, maintaining the elevated card aesthetic."},{"name":"Subtle Background Card","role":"Used for secondary information panels or a background for elements that need less visual weight, blending more into the canvas."},{"name":"Hero Section Callout","role":"A distinct background shape within a hero section, often for a title or subtitle. Its rounded and translucent nature makes it suitable for overlays."},{"name":"Navigation Link","role":"Top-level navigation item, subtly styled to integrate into the header."},{"name":"Main Navigation Button","role":"Prominent action in the header, signaling a primary user journey."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- text: #1c1c1c\n- background: #fafafa\n- border: #000000\n- accent: #ff4000\n- primary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a hero section headline: 'Your Factory's Next 10 Years of Productivity.' in Bricolage Grotesque, weight 600, size 58px, Obsidian Text (#1c1c1c), letter-spacing -0.052em.\n2. Build a footer button: Button text 'Book a Call' in Geist, weight 600, size 16px, Ink Black (#000000) text on a Canvas White (#fafafa) background, 100px border-radius, 16px vertical padding, 20px horizontal padding.\n3. Design a product feature card: Main content on Canvas White (#fafafa) background, 30px border-radius, with the specified diffused shadow (rgba(0, 0, 0, 0.03) 0px 30px 30px -2.5px), 32px padding inside.\n4. Create a navigation link: 'Pricing' in Geist, weight 500, size 14px, Granite Gray (#6e6e6e), with a 6px border-radius for hover states and 10px padding.\n5. Assemble a Ghost button: 'Start my 24h Build' text in Ink Black (#000000), on a rgba(255, 255, 255, 0.08) background, with a 100px border-radius."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508537202-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508537202-thumb.jpg"},"similarStyleIds":["db451eca-8de6-43a9-a5d5-35271befdffd","186775da-7568-49e5-8110-4fd0bbc7bbe3","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","75fdb89f-ca64-41b3-af36-7a78bd09448e","34baa524-5d5b-4165-bbab-d01f05e6d6b9","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","7b083729-e694-4b66-82a3-befb08451722","2e67105f-9f9a-45b5-9281-29734e753bd6","1ee070cd-3be5-4efb-aa4f-06bce9eb5fe4","ba07accb-b2cc-4ad9-a25f-c50b0f90f34e","9342e89b-c2fe-4acf-9993-53b44e0c13b5","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","fece962d-a580-4365-8afd-c9905a2502b1","63bd1ed9-b161-45fd-8734-85282bd945ec","461da0f0-fde6-46bc-8137-7eca006260a8","9fecf7d6-b717-49ca-8edc-b10d6110b21c","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","62b22816-2d98-4e98-9c17-bf600ddb2fc8"],"exports":{"designMdUrl":"/references/refero/a6950b49-8ce4-4330-9499-26ca08061599/design.md","tokensJsonUrl":"/references/refero/a6950b49-8ce4-4330-9499-26ca08061599/tokens.json","tailwindV4Url":"/references/refero/a6950b49-8ce4-4330-9499-26ca08061599/tailwind-v4.css","cssVariablesUrl":"/references/refero/a6950b49-8ce4-4330-9499-26ca08061599/tailwind-v4.css"}}