{"id":"3f296d6e-6a1c-45db-829b-afb078d49ab4","name":"Refero","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/3f296d6e-6a1c-45db-829b-afb078d49ab4","originalSiteUrl":"https://refero.design/mcp","capturedAt":"2026-04-30T15:06:33.442Z","colors":[{"name":"Pure Canvas","hex":"#ffffff","role":"Primary page background, modal/dialog background","group":"neutral","cssVariable":"--color-pure-canvas"},{"name":"Frost Surface","hex":"#f7f8fb","role":"Secondary surface, subtle background containers, nav pill background","group":"neutral","cssVariable":"--color-frost-surface"},{"name":"Midnight Ink","hex":"#000000","role":"Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Deep Charcoal","hex":"#13151b","role":"Near-black text for dense UI labels, active nav tab text","group":"neutral","cssVariable":"--color-deep-charcoal"},{"name":"Graphite","hex":"#2d313f","role":"Navigation link text, secondary headings, mid-level labels","group":"neutral","cssVariable":"--color-graphite"},{"name":"Slate","hex":"#525769","role":"Tertiary text, supporting body copy, muted label text","group":"neutral","cssVariable":"--color-slate"},{"name":"Ash","hex":"#777d90","role":"Subdued body text, hairline borders, icon strokes, placeholder text — the dominant mid-gray in this system","group":"neutral","cssVariable":"--color-ash"},{"name":"Fog","hex":"#9fa5ba","role":"Light borders, icon outlines, de-emphasized link borders, ghost UI outlines","group":"neutral","cssVariable":"--color-fog"},{"name":"Modal Veil","hex":"#0c2970","role":"Inset ring shadow on elevated cards/surfaces — blue-tinted at 7% opacity creates structural definition without neutral gray shadows","group":"accent","cssVariable":"--color-modal-veil"}],"typography":[{"role":"All editorial headlines and display text — the expressive backbone of the brand. Weight 400 for a serif at 64px is anti-convention; most product sites use weight 700+, but this regular-weight serif creates authority through ink texture rather than mass. The -0.02em tracking tightens large display lines without condensing smaller ones.","sizes":"36px, 40px, 50px, 64px","family":"Title (custom serif)","weight":"400","lineHeight":"1.12–1.28","substitute":"Playfair Display 400, or Georgia for fallback","letterSpacing":"-0.02em at all display sizes"},{"role":"All UI text: navigation, buttons, body copy, labels, captions, input text. Variable font exploited for precise weight stepping — 650 for strong UI labels, 600 for subheadings, 500 for body and supporting text. Negative tracking throughout (-0.015em to -0.026em) keeps the sans from spreading loose.","sizes":"13px, 15px, 16px, 17px, 20px, 25px","family":"Base-Variable (custom sans)","weight":"500, 600, 650","lineHeight":"1.40–1.60 for body, 0.96–1.20 for tight UI labels","substitute":"Inter Variable or DM Sans","letterSpacing":"-0.026em at 13px, -0.025em at 15px, -0.022em at 16px, -0.020em at 17–20px, -0.015em at 25px","fontFeatureSettings":"\"tnum\""}],"spacing":{"radius":{"tags":"8px","cards":"64px","small":"4px","inputs":"12px","modals":"24px","panels":"20px","buttons":"9999px"},"elementGap":"12px","sectionGap":"80px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"tags":"8px","cards":"64px","small":"4px","inputs":"12px","modals":"24px","panels":"20px","buttons":"9999px"},"shadows":{"philosophy":"Refero deliberately avoids outset drop shadows. Elevation is communicated through the inset ring shadow rgba(12,41,126,0.07) 0px 0px 0px 1px inset — a blue-tinted 1px inset border that defines surface edges without creating depth illusion. This keeps the page fully flat while still distinguishing panels from background. The blue tint at 7% opacity is the only chromatic element in the structural layer.","surfaces":[{"hex":"#ffffff","name":"Page Canvas","level":1,"purpose":"Base page background for all content sections"},{"hex":"#f7f8fb","name":"Frost Surface","level":2,"purpose":"Secondary containers: nav segmented control background, subtle section washes"},{"hex":"#f4f5fb","name":"Card Tint","level":3,"purpose":"Feature cards at rgba(55,80,155,0.04) over white — barely-perceptible blue-gray tint distinguishing card from canvas"},{"hex":"#ffffff","name":"Elevated Panel","level":4,"purpose":"Modal dialogs, product demo frames — white surface defined by inset ring shadow rather than color change"}]},"guidelines":{"do":["Use the Title serif at weight 400 for all display headlines (36–64px) with -0.02em tracking — never bold or semi-bold the serif.","Fill primary buttons with #000000 background and #f7f8fb text at 9999px radius; this is the only filled color action in the system.","Apply border-radius 64px to feature/showcase cards to create the signature pill-card shape — do not use standard 8–16px card radii for these containers.","Use rgba(12,41,126,0.07) 0px 0px 0px 1px inset as the shadow token for elevated surfaces — never use outset drop shadows.","Keep the palette achromatic for all UI chrome; introduce color only through semantic states (error #a10214, warning #7c4b01, success #02a745) and the structural accent tint rgba(55,80,155,0.04) on card backgrounds.","Apply negative letter-spacing to all Base-Variable UI text: -0.026em at 13px scaling to -0.015em at 25px — loose tracking is never correct.","Reserve #777d90 for all subdued borders, placeholder text, and partner/supporting iconography — it is the system's workhorse mid-gray."],"dont":["Never introduce chromatic accent colors (blue, purple, green) as UI button fills or background washes — the system is intentionally achromatic outside semantic states.","Never use the Title serif below 36px — it is a display-only typeface; all body and UI text uses Base-Variable.","Never apply drop shadows or elevation halos (box-shadow: 0 4px 24px ...) — the only allowed shadow is the inset blue-tinted ring rgba(12,41,126,0.07).","Never use a border-radius below 20px for major container panels or modal sheets — the system skews large-radius throughout.","Never set Base-Variable at weight 400 or below — minimum weight is 500 to maintain the compact, confident stroke density.","Never use #9fa5ba or lighter grays as body text color — they are border and ghost-UI colors only; minimum body text is #777d90.","Never stack multiple button styles of the same hierarchy — one black pill + one ghost pill per action group; do not add a third tier."]}}