PUBLIC REFERENCE
Superhuman
Cinematic cockpit behind warm parchment — a productivity instrument panel where atmospheric photography meets structured cream-toned UI surfaces.
Colors
#f2f0eb Primary page background below the hero; the warm, slightly toasted off-white that distinguishes this from sterile white SaaS canvases
#292827 Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black
#ffffff Card surfaces, hero text, button text on dark backgrounds
#e3e3e2 Subtle UI dividers, light button borders, tab backgrounds
#dcd7d3 Secondary dividers and section rule lines
#666666 Secondary body text — feature descriptions and supporting copy beneath headings
#421d24 Announcement banner background, footer background — deep muted red that brackets the page top and bottom
#4e242c SVG icon fills and border accents within dark brand surfaces
#714cb6 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
#353088 Focus shadow on primary CTA links (inset ring depth cue)
#d4c7ff Sign-up button fill on dark hero — soft violet chip against dark photography
#a8a4d8 Full-viewport hero background gradient overlaying the dusk photography; pastel violet-to-blue-to-purple sweep
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.
Don't
- 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.