{"id":"418b374a-be64-44f0-b17e-1d45308c7e62","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/418b374a-be64-44f0-b17e-1d45308c7e62","originalSiteUrl":"https://superhuman.com","capturedAt":"2026-04-28T23:31:39.739Z","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":"Superhuman","summary":"Cinematic cockpit behind warm parchment — a productivity instrument panel where atmospheric photography meets structured cream-toned UI surfaces.","description":"Superhuman feels like a cinematic productivity cockpit — moody atmospheric photography bleeds behind glassmorphic UI panels while the page itself stays anchored in warm parchment neutrals. The hero is a full-viewport dusk photograph with overlapping product panels floating at various depths, then the page snaps to a warm off-white (#f2f0eb) canvas for feature content. Custom variable font 'Super Sans VF' is the entire typographic system — tight negative tracking at display sizes (-0.028em at 64px) makes headlines feel compressed and urgent. Violet (#714cb6) is the sole chromatic system accent, appearing as outlined ghost buttons and focus rings against otherwise achromatic surfaces. The dark muted-red (#421d24) surfaces only in the announcement banner and footer, creating a bracketed frame around the entire page.","industry":"saas","colorScheme":"both","colors":[{"name":"Parchment Canvas","hex":"#f2f0eb","role":"Primary page background below the hero; the warm, slightly toasted off-white that distinguishes this from sterile white SaaS canvases","group":"neutral"},{"name":"Ink","hex":"#292827","role":"Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black","group":"neutral"},{"name":"Bone","hex":"#ffffff","role":"Card surfaces, hero text, button text on dark backgrounds","group":"neutral"},{"name":"Fog","hex":"#e3e3e2","role":"Subtle UI dividers, light button borders, tab backgrounds","group":"neutral"},{"name":"Driftwood","hex":"#dcd7d3","role":"Secondary dividers and section rule lines","group":"neutral"},{"name":"Graphite","hex":"#666666","role":"Secondary body text — feature descriptions and supporting copy beneath headings","group":"neutral"},{"name":"Aubergine","hex":"#421d24","role":"Announcement banner background, footer background — deep muted red that brackets the page top and bottom","group":"brand"},{"name":"Aubergine Deep","hex":"#4e242c","role":"SVG icon fills and border accents within dark brand surfaces","group":"brand"},{"name":"Iris","hex":"#714cb6","role":"Ghost/outlined action borders, link text, focus rings — the only chromatic accent across light UI surfaces; outlined ghost 'Get the suite' button uses this as its border and text","group":"accent"},{"name":"Indigo Glow","hex":"#353088","role":"Focus shadow on primary CTA links (inset ring depth cue)","group":"accent"},{"name":"Lavender Chip","hex":"#d4c7ff","role":"Sign-up button fill on dark hero — soft violet chip against dark photography","group":"accent"},{"name":"Hero Dusk Gradient","hex":"#a8a4d8","role":"Full-viewport hero background gradient overlaying the dusk photography; pastel violet-to-blue-to-purple sweep","group":"accent","gradient":"linear-gradient(to left bottom, rgba(168, 164, 216, 0.5), rgba(107, 165, 232, 0.5), rgba(176, 112, 192, 0.6), rgba(144, 136, 208, 0.5))"}],"typography":[{"role":"The sole typeface for all text — headlines, body, nav, buttons, captions. Custom variable font with tight negative tracking baked into large sizes: -0.028em at 64px collapses letterforms until display text reads as a single compressed block. Weight 460 is the default body weight; 600–700 reserved for headlines. The variable weight axis allows granular fine-tuning not possible with static weights.","sizes":"12px, 14px, 16px, 18px, 19px, 20px, 22px, 26px, 28px, 48px, 64px","family":"Super Sans VF","weight":"460, 500, 540, 600, 700","lineHeight":"0.76–1.50 (0.76 at display, 1.20–1.50 at body)","substitute":"Inter Variable or Neue Haas Grotesk","letterSpacing":"-0.028em at 64px, -0.027em at 48px, -0.022em at 28px, -0.020em at 26px, -0.014em at 22px, -0.008em at 18-20px"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":0},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":0},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.3,"letterSpacing":-0.14},{"role":"heading-sm","size":22,"lineHeight":1.25,"letterSpacing":-0.31},{"role":"heading","size":28,"lineHeight":1.2,"letterSpacing":-0.62},{"role":"heading-lg","size":48,"lineHeight":1,"letterSpacing":-1.3},{"role":"display","size":64,"lineHeight":0.96,"letterSpacing":-1.79}],"spacing":{"radius":{"cards":"16px","links":"12px","pills":"999px","buttons":"8px","cardsLarge":"24px","announcementBanner":"16px"},"elementGap":"8px","sectionGap":"64px","cardPadding":"16px","pageMaxWidth":"1200px"},"radius":{"cards":"16px","links":"12px","pills":"999px","buttons":"8px","cardsLarge":"24px","announcementBanner":"16px"},"shadows":{"philosophy":"Superhuman uses no box-shadow elevation for cards or panels — depth is created through overlapping elements at the layout level (product UI panels floating over hero photography) and backdrop-filter: blur(12px) frosted glass on hero-overlapping panels. Shadow appears only as the Iris inset ring on the focused primary CTA.","surfaces":[{"hex":"#421d24","name":"Hero Photography","level":0,"purpose":"Full-viewport hero with dusk photography + translucent gradient overlay; dark surfaces here only"},{"hex":"#f2f0eb","name":"Parchment Canvas","level":1,"purpose":"Primary content page background below hero for all feature sections"},{"hex":"#ffffff","name":"Bone Card","level":2,"purpose":"Card and panel surfaces that lift off the parchment canvas"},{"hex":"#e3e3e2","name":"Fog Divider","level":3,"purpose":"Tab indicators, secondary separators, low-contrast borders on white surfaces"}]},"guidelines":{"do":["Use #f2f0eb as the page canvas for all content sections below the hero — never plain white (#ffffff) as the canvas background.","Apply Super Sans VF at weight 600–700 for all headings with letter-spacing -0.022em to -0.028em at sizes 28px and above.","Use #714cb6 exclusively as outlined ghost button borders and link colors on light surfaces — never as a filled button background.","Reserve #421d24 only for the announcement banner and footer — it must bracket the page without appearing in content sections.","Set border-radius 8px for inline buttons and badges, 16px for cards, 999px for pill tabs and floating UI chips.","Use backdrop-filter: blur(12px) on any UI panel that overlaps the hero photography to maintain the glassmorphic depth effect.","Pair display headlines (64px) with line-height 0.96 — sub-1.0 line-height at display sizes is the signature compression of this system."],"dont":["Don't use a pure white (#ffffff) page background for content sections — the parchment (#f2f0eb) canvas is what separates this from generic SaaS.","Don't apply #714cb6 as a filled button background — evidence shows it appears only as outlined borders and link text, never as a button fill.","Don't use letter-spacing at 0 or positive values for headings — all heading sizes use negative tracking; flat tracking breaks the compressed headline aesthetic.","Don't introduce additional typefaces — Super Sans VF handles every text role; mixing in system fonts or other typefaces breaks the typographic cohesion.","Don't use standard box-shadow elevation for cards — depth is achieved through overlapping layout and backdrop-blur, not drop shadows.","Don't place the aubergine (#421d24) in mid-page content sections, feature cards, or UI components — its role is structural framing (banner + footer) only.","Don't use rounded corners smaller than 8px on interactive elements — the minimum radius in this system is 8px; sharp 0px borders only appear on flat content containers and logo bars."]},"components":[{"name":"Announcement Banner","role":""},{"name":"Suite Tab Selector","role":""},{"name":"Get Superhuman CTA Button Group","role":""},{"name":"Announcement Banner","role":"Full-width top-of-page notification strip"},{"name":"Primary Navigation","role":"Sticky top navigation bar"},{"name":"Hero Section","role":"Full-viewport brand opening"},{"name":"Get Superhuman CTA Button","role":"Primary hero call-to-action"},{"name":"Sign Up Button","role":"Nav-level signup action"},{"name":"Ghost Outlined Button (Iris)","role":"Secondary action on light surfaces"},{"name":"Suite Tab Button","role":"Product switcher tabs (Mail / Grammarly / Coda / Go)"},{"name":"Social Proof Logo Bar","role":"Trust logos strip"},{"name":"Product Feature Card","role":"Per-product detail panel inside tab sections"},{"name":"Glassmorphic Hero Panel","role":"Product UI preview panels floating in hero"},{"name":"Footer","role":"Full-width site footer"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text: #292827 (Ink)\n- background (canvas): #f2f0eb (Parchment)\n- card surface: #ffffff\n- border: #e3e3e2 (light) / #dcd7d3 (divider)\n- accent / outlined action border: #714cb6 (Iris)\n- secondary text: #666666 (Graphite)\n- dark frame (banner/footer): #421d24\n- primary action: #421d24 (filled action)\n\n**Example Component Prompts**\n\n1. Hero Section: Full-bleed dusk photograph with linear-gradient(to left bottom, rgba(168,164,216,0.5), rgba(107,165,232,0.5), rgba(176,112,192,0.6), rgba(144,136,208,0.5)) overlay. Center-aligned headline: 'Superpowers, everywhere you work' in Super Sans VF (substitute: Inter Variable) weight 600, 64px, line-height 0.96, letter-spacing -1.79px, color #ffffff. Sub-headline at 20px weight 460, #ffffff, letter-spacing -0.16px. CTA button: background #ffffff, text #292827, 8px radius, 12px/24px padding, weight 500, 16px. Iris inset ring on focus: rgb(113,76,182) 0px 0px 0px 1px inset.\n\n2. Feature Section on Parchment: Background #f2f0eb. Section heading at 48px Super Sans VF weight 600, #292827, letter-spacing -1.30px, line-height 1.0. Body text at 16px weight 460, #666666, line-height 1.5. 'Get the suite' ghost button: transparent background, 1px solid #714cb6 border, text #714cb6, 8px radius, 6px/12px padding.\n\n3. Product Feature Card: Background #ffffff, 1px solid #e3e3e2 border, 16px border-radius, 16px padding. Label at 12px weight 500, #714cb6 with Iris icon. Heading at 28px weight 600, #292827, letter-spacing -0.62px. Body at 16px weight 460, #666666. Link at 14px weight 500, #714cb6, underline on hover.\n\n4. Announcement Banner: Full-width, background #421d24, 12px vertical padding, 32px horizontal padding. Text: 'Looking for Superhuman Mail?' at 14px weight 500, #ffffff. Inline 'Learn more' link in white, 16px radius inner button, no border.\n\n5. Suite Tab Switcher: Row of pill tabs, 999px radius. Active: background #e3e3e2, text #292827, 12px/16px padding. Inactive: transparent background, #292827 text. All tabs: 16px, weight 500, Super Sans VF."},{"title":"Gradient System","content":"Four radial spotlight gradients animate behind the hero section, positioned at different edges to simulate colored lighting on the photography:\n- Violet spotlight: radial-gradient(circle at 68% 50%, rgba(133,125,250,0.6) 0px, rgba(0,0,0,0) 50%)\n- Pink spotlight: radial-gradient(circle at 50% 98%, rgba(255,51,102,0.6) 0px, rgba(0,0,0,0) 50%)\n- Blue spotlight: radial-gradient(circle at 93% 50%, rgba(75,105,227,0.5) 0px, rgba(0,0,0,0) 50%)\n- Cyan spotlight: radial-gradient(circle at 50% 75%, rgba(104,222,255,0.5) 0px, rgba(0,0,0,0) 50%)\n\nThese stack via multiple background layers to produce the cinematic dusk atmosphere. The CTA button also has a rotating gradient animation (hero-button-gradient-angle-rotate) on hover — a slow rotation of the violet-blue palette around the button border."},{"title":"Motion Philosophy","content":"Motion is expressive but controlled. Base transition: 0.2s ease on color, border-color, background-color, box-shadow. Slower 0.3s for layout shifts (gap changes). Hero entrance uses fade-slide sequences: fade-slide-down-from-transparent (headline) and fade-slide-up-from-transparent (subtext), creating a cinematic reveal. The navigation bar transitions from transparent+blur-0 to white+blur on scroll (page_header-fade-in, page_header-remove-blur). Asset grids use fade-in/fade-out (0.5s) for tab switching. The signature CTA micro-interaction is hero-button-gradient-angle-rotate — a continuous slow rotation of the gradient behind the button border on hover. Easing is overwhelmingly ease (780×) with no linear transitions — everything accelerates and decelerates."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777418980534-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777418980534-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/418b374a-be64-44f0-b17e-1d45308c7e62-1777554755806-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/418b374a-be64-44f0-b17e-1d45308c7e62-1777554755806-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/418b374a-be64-44f0-b17e-1d45308c7e62-1777554755806-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/418b374a-be64-44f0-b17e-1d45308c7e62-1777554755806-preview-detail-poster.jpg"},"similarStyleIds":["ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","e869e214-f672-4ac3-bfc2-bd25de7b003b","63bd1ed9-b161-45fd-8734-85282bd945ec","c60a19c1-259a-4001-95d9-6a3826f5c06e","742b500d-3e10-4daa-bb89-d0d26272e5f6","029d3ce0-0fe5-4a8c-99c4-4f9d704f1c60","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","41547c7a-3bbe-49f0-95d6-9701c9df9a5e","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","29567671-da1e-4f85-ae52-8b611fecc384","fe955d4a-c56d-4ab0-a6b3-8d985ab9570c","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","461da0f0-fde6-46bc-8137-7eca006260a8","90ce5883-bb24-4466-93f7-801cd617b0d1","607c2098-bbbb-40bb-b23e-adf2b72c63dd","7b083729-e694-4b66-82a3-befb08451722","34baa524-5d5b-4165-bbab-d01f05e6d6b9","2b6642d9-fa66-4c06-9804-30f56e544a6d","9f9a4a4f-1a27-47ca-a65b-68b9850a84e4"],"exports":{"designMdUrl":"/references/refero/418b374a-be64-44f0-b17e-1d45308c7e62/design.md","tokensJsonUrl":"/references/refero/418b374a-be64-44f0-b17e-1d45308c7e62/tokens.json","tailwindV4Url":"/references/refero/418b374a-be64-44f0-b17e-1d45308c7e62/tailwind-v4.css","cssVariablesUrl":"/references/refero/418b374a-be64-44f0-b17e-1d45308c7e62/tailwind-v4.css"}}