{"id":"418b374a-be64-44f0-b17e-1d45308c7e62","name":"Superhuman","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","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","cssVariable":"--color-parchment-canvas"},{"name":"Ink","hex":"#292827","role":"Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black","group":"neutral","cssVariable":"--color-ink"},{"name":"Bone","hex":"#ffffff","role":"Card surfaces, hero text, button text on dark backgrounds","group":"neutral","cssVariable":"--color-bone"},{"name":"Fog","hex":"#e3e3e2","role":"Subtle UI dividers, light button borders, tab backgrounds","group":"neutral","cssVariable":"--color-fog"},{"name":"Driftwood","hex":"#dcd7d3","role":"Secondary dividers and section rule lines","group":"neutral","cssVariable":"--color-driftwood"},{"name":"Graphite","hex":"#666666","role":"Secondary body text — feature descriptions and supporting copy beneath headings","group":"neutral","cssVariable":"--color-graphite"},{"name":"Aubergine","hex":"#421d24","role":"Announcement banner background, footer background — deep muted red that brackets the page top and bottom","group":"brand","cssVariable":"--color-aubergine"},{"name":"Aubergine Deep","hex":"#4e242c","role":"SVG icon fills and border accents within dark brand surfaces","group":"brand","cssVariable":"--color-aubergine-deep"},{"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","cssVariable":"--color-iris"},{"name":"Indigo Glow","hex":"#353088","role":"Focus shadow on primary CTA links (inset ring depth cue)","group":"accent","cssVariable":"--color-indigo-glow"},{"name":"Lavender Chip","hex":"#d4c7ff","role":"Sign-up button fill on dark hero — soft violet chip against dark photography","group":"accent","cssVariable":"--color-lavender-chip"},{"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))","cssVariable":"--color-hero-dusk-gradient"}],"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"}],"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."]}}