{"id":"3f296d6e-6a1c-45db-829b-afb078d49ab4","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","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":"Refero","summary":"Editorial ink on white marble — a typographer's product page where the serif headline IS the brand, and everything else stays out of its way.","description":"Refero uses a white-canvas editorial language where a high-contrast serif headline font (Title) carries nearly all expressive weight against an otherwise achromatic UI. The page breathes with generous vertical rhythm, letting black-on-white hierarchy do the work that other systems hand to color. The single accent move is a filled black pill button against white — no gradients, no color splashes, just ink-weight contrast. Borders and muted grays form a quiet structural grid, while the inset blue-tinted shadow on surface elements is the only chromatic whisper in an otherwise monochrome system.","industry":"design","colorScheme":"light","colors":[{"name":"Pure Canvas","hex":"#ffffff","role":"Primary page background, modal/dialog background","group":"neutral"},{"name":"Frost Surface","hex":"#f7f8fb","role":"Secondary surface, subtle background containers, nav pill background","group":"neutral"},{"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"},{"name":"Deep Charcoal","hex":"#13151b","role":"Near-black text for dense UI labels, active nav tab text","group":"neutral"},{"name":"Graphite","hex":"#2d313f","role":"Navigation link text, secondary headings, mid-level labels","group":"neutral"},{"name":"Slate","hex":"#525769","role":"Tertiary text, supporting body copy, muted label text","group":"neutral"},{"name":"Ash","hex":"#777d90","role":"Subdued body text, hairline borders, icon strokes, placeholder text — the dominant mid-gray in this system","group":"neutral"},{"name":"Fog","hex":"#9fa5ba","role":"Light borders, icon outlines, de-emphasized link borders, ghost UI outlines","group":"neutral"},{"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"}],"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\""}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.4,"letterSpacing":-0.34},{"role":"body-sm","size":15,"lineHeight":1.5,"letterSpacing":-0.38},{"role":"heading-sm","size":20,"lineHeight":1.4,"letterSpacing":-0.4},{"role":"heading","size":25,"lineHeight":1.2,"letterSpacing":-0.38},{"role":"heading-lg","size":36,"lineHeight":1.28,"letterSpacing":-0.72},{"role":"display","size":64,"lineHeight":1.12,"letterSpacing":-1.28}],"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."]},"components":[{"name":"Button Group — Primary + Secondary","role":""},{"name":"Platform Toggle — Web / iOS Segmented Control","role":""},{"name":"Announcement Chip + Hero Headline Block","role":""},{"name":"Black Pill Button (Primary)","role":"Primary call-to-action, install/demo actions"},{"name":"Ghost Pill Button (Secondary)","role":"Secondary action alongside the primary pill"},{"name":"Platform Toggle (Web / iOS)","role":"Segmented control for switching platform context in nav"},{"name":"Search Bar","role":"Global AI-query input in top navigation"},{"name":"Feature Card","role":"Content showcase containers for product screenshots/feature blocks"},{"name":"Inset Surface Ring","role":"Elevated UI panels, chat interface frames"},{"name":"Logo / Brand Badge","role":"Circular brand mark in top-left navigation"},{"name":"Partner Logomark Row","role":"Social proof / compatibility strip (Claude, Cursor, Lovable, Codex)"},{"name":"Announcement Chip","role":"Top-of-hero contextual label ('Refero MCP for AI agents')"},{"name":"Navigation Link","role":"Top navigation text links (Pricing, How It Works)"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text (primary): #000000\n- text (secondary): #777d90\n- text (nav links): #2d313f\n- background: #ffffff\n- surface (secondary): #f7f8fb\n- border (default): #777d90\n- border (light): #9fa5ba\n- primary action: no distinct CTA color\n\n**Example Component Prompts**\n\n1. **Hero Section**: White background (#ffffff). Display headline at 64px Title serif weight 400, color #000000, letter-spacing -1.28px, line-height 1.12, centered, max-width 800px. Sub-headline at 17px Base-Variable weight 500, color #777d90, letter-spacing -0.34px, centered, max-width 560px. Two pill buttons side by side, gap 12px: primary = background #000000, text #f7f8fb, 15px weight 600, padding 12px 24px, radius 9999px; secondary = background transparent, border 1px solid #9fa5ba, text #2d313f, same font/padding/radius. Announcement chip above headline: 13px weight 500, color #525769, letter-spacing -0.34px, diamond icon preceding text.\n\n2. **Feature Showcase Card**: Background rgba(55,80,155,0.04), border-radius 64px, padding 0. Contains a product screenshot image that fills the card with rounded overflow. Below the card, small caption at 13px Base-Variable weight 500, color #777d90, letter-spacing -0.34px.\n\n3. **Elevated Panel / Demo Frame**: Background #ffffff, border-radius 24px, box-shadow rgba(12,41,126,0.07) 0px 0px 0px 1px inset. Internal padding 24px. Text inside at 15px Base-Variable weight 500, color #2d313f.\n\n4. **Search Input (Nav)**: Full-width container, background transparent, no top/side/bottom border except border-bottom 1px solid #000000. Padding-left 8px. Placeholder text 'AI chat interface' at 16px Base-Variable weight 500, color #9fa5ba, letter-spacing -0.35px. Border-radius 0px.\n\n5. **Platform Toggle (Segmented Control)**: Outer pill: background #f7f8fb, radius 9999px, padding 4px. Two tabs side by side: active tab background #ffffff, radius 9999px, box-shadow rgba(12,41,126,0.07) 0px 0px 0px 1px inset, text #13151b 15px weight 600; inactive tab background transparent, text #777d90 15px weight 500. Total height ~36px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777561486510-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777561486510-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f296d6e-6a1c-45db-829b-afb078d49ab4-1777581888114-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f296d6e-6a1c-45db-829b-afb078d49ab4-1777581888114-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f296d6e-6a1c-45db-829b-afb078d49ab4-1777581888114-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f296d6e-6a1c-45db-829b-afb078d49ab4-1777581888114-preview-detail-poster.jpg"},"similarStyleIds":["c45b115b-dcb5-446d-8952-85aef740f8e4","ac14ea36-ea3e-4a25-bd16-11fb50d806fb","08c8700c-f278-42bc-812e-f60dc6ce996e","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","7b083729-e694-4b66-82a3-befb08451722","c8c22958-ec50-47f1-aedc-a131d7aeb442","43c1b150-0dab-42f9-9bce-fe0be3dde26c","a0d54731-58dc-448b-a6b0-ed543f397ab1","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","dae7cbf2-0485-433b-8f63-eea8716ad14d","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","607c2098-bbbb-40bb-b23e-adf2b72c63dd","75fdb89f-ca64-41b3-af36-7a78bd09448e","4d832c12-dd14-45b0-bba7-2d3bc25d8264","fe955d4a-c56d-4ab0-a6b3-8d985ab9570c","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","4bbc63cf-c995-4c56-9873-e7f300f1c9e7","031056ff-7af1-46db-8daa-115f731c5d26","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","b2dab9ac-9e35-43f5-a8bb-dd9d6702acf0"],"exports":{"designMdUrl":"/references/refero/3f296d6e-6a1c-45db-829b-afb078d49ab4/design.md","tokensJsonUrl":"/references/refero/3f296d6e-6a1c-45db-829b-afb078d49ab4/tokens.json","tailwindV4Url":"/references/refero/3f296d6e-6a1c-45db-829b-afb078d49ab4/tailwind-v4.css","cssVariablesUrl":"/references/refero/3f296d6e-6a1c-45db-829b-afb078d49ab4/tailwind-v4.css"}}