{"id":"e06224b2-6d52-4d06-bbde-115cec719b47","name":"basement.studio","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/e06224b2-6d52-4d06-bbde-115cec719b47","originalSiteUrl":"https://basement.studio","capturedAt":"2026-04-11T22:15:28.353Z","colors":[{"name":"Ember Signal","hex":"#ff4d00","role":"Active nav state only — appears on a single interactive element as a hot indicator, never used for buttons or CTAs; its rarity is the feature","group":"accent","cssVariable":"--color-ember-signal"},{"name":"Void","hex":"#000000","role":"Page background, button fill, SVG fills — absolute black, not near-black","group":"neutral","cssVariable":"--color-void"},{"name":"Chalk","hex":"#ffffff","role":"Primary text, nav labels, button text, body copy","group":"neutral","cssVariable":"--color-chalk"},{"name":"Fog","hex":"#e5e7eb","role":"Border color across nav, cards, buttons, logo grid dividers — the structural skeleton visible against black","group":"neutral","cssVariable":"--color-fog"},{"name":"Ash","hex":"#c4c4c4","role":"Secondary text, subheadings, de-emphasized body copy, SVG fills","group":"neutral","cssVariable":"--color-ash"},{"name":"Graphite","hex":"#757575","role":"Tertiary text, muted labels, icon fills","group":"neutral","cssVariable":"--color-graphite"},{"name":"Carbon","hex":"#454545","role":"Card/tile border color — used on logo grid cells to define structure without brightness","group":"neutral","cssVariable":"--color-carbon"},{"name":"Obsidian","hex":"#2e2e2","role":"Subtle element backgrounds, hover states, SVG fills","group":"neutral","cssVariable":"--color-obsidian"},{"name":"Cinder","hex":"#1a1a1a","role":"Input backgrounds, input borders — the only surface that differs from absolute black","group":"neutral","cssVariable":"--color-cinder"},{"name":"Smudge","hex":"#666666","role":"SVG illustration fills, decorative icon tones","group":"neutral","cssVariable":"--color-smudge"}],"typography":[{"role":"Single font family across all type — nav, body, display, headings, labels. The 87px weight-600 headline at 0.89 line-height is the system's signature: text taller than its own cap-height spacing, letters colliding at scale. -0.04em letter-spacing at display sizes crushes the tracking until characters nearly touch. 'ss01' feature flag activates alternate glyph forms distinct to Geist. Using one face for everything from 12px captions to 87px display creates a monolithic typographic voice — zero genre-mixing.","sizes":"12px, 13px, 15px, 16px, 20px, 24px, 38px, 76px, 87px","family":"Geist","weight":"400, 500, 600","lineHeight":"0.89–1.50 (tightest at largest sizes: 0.89 at 87px, 0.90 at 76px)","substitute":"Inter, Helvetica Neue","letterSpacing":"-0.04em at 76-87px, -0.03em at 38px, -0.02em at 20-24px","fontFeatureSettings":"\"ss01\" on"}],"spacing":{"radius":{"cards":"0px","badges":"0px","global":"0px — zero radius everywhere, no exceptions","inputs":"0px","buttons":"0px"},"elementGap":"8px","sectionGap":"128px","cardPadding":"16px","pageMaxWidth":"1280px"},"radius":{"cards":"0px","badges":"0px","global":"0px — zero radius everywhere, no exceptions","inputs":"0px","buttons":"0px"},"shadows":{"philosophy":"Zero elevation — no shadows, no raised surfaces, no blurs. The entire interface exists on one Z plane. Depth is constructed exclusively through type scale contrast (12px vs 87px) and luminance contrast (white vs #757575 vs black). This flatness is structural: adding any shadow would imply a surface that doesn't exist in this void."},"guidelines":{"do":["Use #000000 as the only page background — never substitute near-blacks like #0a0a0a or #111111; the absolute void is intentional.","Apply 0px border-radius to every element — buttons, cards, inputs, badges, all components. Any rounded corner breaks the system.","Reserve #ff4d00 exclusively for the active nav state. Never use it on buttons, CTAs, icons, or decorative elements.","Set display type (38px+) with font-feature-settings: 'ss01' and letter-spacing at minimum -0.02em, scaling to -0.04em at 76-87px.","Use 1px solid #454545 borders on grid tiles and 1px solid #e5e7eb on interactive elements (buttons, nav items) — these two border shades create a two-tier hierarchy.","Maintain Geist as the single typeface across all sizes from 12px caption to 87px display — no secondary or decorative fonts.","Use #c4c4c4 for body copy under headlines rather than full white, creating luminosity hierarchy through brightness rather than size alone."],"dont":["Never add box-shadows, drop-shadows, or glows — the design has zero elevation; depth is created by type scale and color, not shadow.","Never use rounded corners — not 2px, not 4px. The 0px radius is non-negotiable across every component.","Never introduce a secondary typeface — not for decorative headlines, not for code blocks, not for quotes.","Never place #ff4d00 on backgrounds, fills, or decorative shapes — it exists only as a 1-element text color signal.","Never use white (#ffffff) for body-level descriptive text — use #c4c4c4 or #757575 to preserve the display headline as the luminance peak.","Never add gradients to backgrounds or text — the system is flat, matte, and binary in its color application.","Never apply padding greater than 16px to inline or small components — the spacing system is compact (4px base unit) and dense grid arrangements should not breathe excessively."]}}