{"id":"a6950b49-8ce4-4330-9499-26ca08061599","name":"Humble","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","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","cssVariable":"--color-canvas-white"},{"name":"Obsidian Text","hex":"#1c1c1c","role":"Primary text for headlines and critical information. Near-black for maximal contrast on light surfaces","group":"neutral","cssVariable":"--color-obsidian-text"},{"name":"Granite Gray","hex":"#6e6e6e","role":"Secondary text, navigation items, and muted interface elements. Provides visual relief from primary text","group":"neutral","cssVariable":"--color-granite-gray"},{"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%)","cssVariable":"--color-ink-black"},{"name":"Ghost White","hex":"#f1f1f1","role":"Subtly darker background for alternative card surfaces or subtle section separation","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Alabaster Gray","hex":"#ecebe8","role":"Tertiary background for cards or distinct content blocks, providing minimal contrast to the main canvas","group":"neutral","cssVariable":"--color-alabaster-gray"},{"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","cssVariable":"--color-electric-orange"}],"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\""}],"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."]}}