superhuman.com website design: fonts, colors and UI patterns

Overview

Superhuman presents itself as a premium productivity platform through a visual system built on dramatic contrast and refined restraint. The design alternates between deep, immersive dark surfaces and warm, breathable light sections, creating a rhythm that feels both luxurious and functional. The brand identity relies on a distinctive typographic pairing: a confident serif display face for headlines and a clean sans-serif for everything else. This combination signals editorial authority while maintaining the clarity expected of modern software. The overall impression is of a tool that takes itself seriously—minimal decoration, generous whitespace, and a color palette that avoids cold tech blues in favor of warm burgundies, soft creams, and rich blacks. Every element appears considered, from the oversized background wordmarks that anchor page sections to the precise alignment of feature lists and accordion interfaces.

Colors

The color system operates in two primary modes: a dramatic dark mode built on near-black and deep burgundy, and a warm light mode using cream and stone tones. The dark surfaces create immersion for hero sections and product showcases, while light surfaces provide readability for content-heavy areas like FAQs and documentation.

The dark mode dominates the brand expression. The near-black surface-dark provides a dramatic stage for product imagery and white typography, while surface-burgundy introduces warmth that distinguishes Superhuman from generic dark-mode SaaS sites. The light mode, built on canvas and surface-warm-gray, feels like aged paper or unbleached linen—organic and approachable rather than clinical. The accent-warm tone appears sparingly, often in photography or as a subtle highlight, reinforcing the premium positioning without competing for attention.

Typography

Superhuman's typographic system is built on two families from Luzi Type: Super Sans for interface clarity and Super Serif for editorial presence. The serif carries headline duties with confidence, while the sans handles navigation, body copy, and labels with quiet efficiency. The contrast between the two creates hierarchy without relying on size alone.

The serif's tight negative tracking and compact leading give headlines a solid, authoritative block that commands attention. The sans family's slightly looser line height in body sizes ensures comfortable reading even in longer FAQ passages. Weight distinctions are minimal—Regular and Medium only—keeping the system restrained and avoiding the visual noise of heavy bolds. Verify licensing for these families before production use. Super Sans and Super Serif are designed by Luzi Gantenbein and available from Luzi Type.

Layout

The layout system favors generous horizontal margins and clear vertical rhythm. Sections stack with substantial breathing room, typically separated by six or more rem of vertical space. Content areas are constrained to readable widths, with feature sections often employing asymmetric two-column splits that favor imagery.

On the dark hero sections, the layout splits roughly 50/50 between text content and product visualization, with the text block aligned to the left margin and the image breaking into the right edge. This creates a dynamic tension that draws the eye across the composition. The text blocks themselves maintain consistent internal spacing: headlines sit close to their supporting lists, with each feature item separated by enough vertical space to scan easily without feeling disconnected.

The footer demonstrates a more complex grid: a brand statement and tagline occupy the left third, while the right two-thirds divide into equal columns for navigation links. Social links in the footer receive icon treatment alongside their labels, maintaining the clean sans-serif voice. The oversized background wordmark—spelling SUPERHUMAN at extreme scale—sits at the bottom edge, cropped by the viewport, functioning as both brand reinforcement and decorative texture.

Accordion sections on light backgrounds use a single-column centered or left-aligned layout, with questions spanning most of the content width. Each question sits above a hairline divider, with answers indented or flowing directly beneath. The generous padding around each item prevents the list from feeling cramped even when multiple items are expanded.

Visual language

Superhuman's visual language communicates precision and premium quality through restraint. The interface avoids decorative elements—no gradients, no shadows, no border radii beyond functional needs. Surfaces are flat and honest, with color doing the work of establishing hierarchy and mood.

Photography and product imagery receive prominent placement, often breaking the grid or bleeding to edges. The app interface mockups shown in hero sections use realistic, detailed renders rather than abstract illustrations, reinforcing the tangible value of the product. These images introduce color through their content—interface blues, icon oranges, toggle greens—while the surrounding design system remains neutral.

The background wordmarks are a distinctive brand element: single words rendered at enormous scale in low-contrast tones, positioned behind content as atmospheric texture. They appear cropped, partially visible, and functionally illegible, serving as rhythm markers rather than readable text. This technique appears in both dark and light sections, though the dark burgundy footer version is most dramatic.

Iconography is minimal and functional. Checkmarks indicate feature inclusion, chevrons signal accordion expandability, and small arrows denote external links. These icons share the text color of their context, maintaining visual unity rather than introducing additional accent colors.

Components

Primary Action Button

• Anatomy: Text label centered within a pill-shaped container
• Surface and text color: Background uses ink (#000000), text uses white (#FFFFFF)
• Typography: label token at 0.875rem, Medium weight
• Shape: Fully rounded pill with 9999px border radius
• Spacing: 0.75rem vertical padding, 1.5rem horizontal padding
• Composition: Typically appears in isolation or as a pair, left-aligned with content blocks
• Variants: On dark backgrounds, may invert to white background with black text; no visible disabled or loading state in supplied images

Feature List Item

• Anatomy: Circular checkmark icon, bold title, and muted description stacked vertically
• Surface and text color: Text uses text-inverse on dark backgrounds; titles use body-medium, descriptions use text-muted-inverse at reduced opacity
• Typography: Title uses body-medium token, description uses body token
• Shape: Checkmark sits in a simple circle outline or solid fill
• Spacing: Generous gap between items, approximately 1.5rem vertical separation
• Composition: Left-aligned stack, typically four to six items, positioned beside product imagery

Accordion Item

• Anatomy: Question text with right-aligned chevron indicator, expandable answer area below
• Surface and text color: Transparent background on canvas surface; question uses text-primary, answer uses text-muted
• Typography: Question uses body-medium token, answer uses body token
• Shape: Full-width horizontal border-subtle divider above each item
• Spacing: 1.5rem vertical padding per item, answer text indented or flowing with consistent left alignment
• Composition: Stacked vertically in single column, spanning content width
• Visible states: Collapsed shows chevron pointing down; expanded shows chevron pointing up with answer text revealed beneath

Footer Navigation Column

• Anatomy: Column header label with stacked link items below
• Surface and text color: All text uses text-inverse on surface-burgundy background; headers may use slightly higher opacity than links
• Typography: Header uses label token, links use navigation token
• Spacing: Tight vertical stacking of links with approximately 0.5rem between items
• Composition: Multiple columns arranged horizontally, equal width, separated by invisible gutters
• Variants: Some columns include external link indicators (diagonal arrows); social column includes platform icons preceding text labels

Background Wordmark

• Anatomy: Single word rendered at extreme scale, cropped by viewport edges
• Surface and text color: Uses text-muted-inverse at approximately 8% opacity
• Typography: hero-display token at dramatically increased size
• Composition: Positioned at bottom of section, horizontally centered, intentionally clipped

Responsive behavior

The design appears optimized for desktop viewing with substantial horizontal real estate. The two-column hero layout and multi-column footer both assume wide viewports. At narrower widths, the hero split should stack vertically with imagery preceding or following text, depending on priority. The footer columns should collapse to a single column or accordion pattern on small screens, preserving the brand statement at top.

Typography scales down proportionally: hero-display should reduce to section-display size on tablets, and further to a 2rem base on mobile to prevent overflow. The background wordmarks may require hiding on narrow viewports, as their cropped nature depends on horizontal space for visual effect.

Accordion items remain functional across widths but may benefit from increased touch targets on mobile—expanding the clickable area to full row height and increasing chevron size. Feature lists should maintain their icon-text relationship but allow text to wrap naturally rather than truncating.

Practical implementation guidance

### Preserve - The serif-sans pairing is central to brand identity; maintain Super Serif for all display headlines and Super Sans for everything else - The dramatic dark-to-light section alternation creates necessary rhythm; avoid long stretches of single background color - The oversized cropped wordmarks are a signature element; include them in major section transitions - The warm burgundy tone distinguishes the brand; do not substitute cooler dark grays or blues

### Avoid - Adding decorative shadows, gradients, or glassmorphism effects that contradict the flat, honest surface treatment - Using bold weights beyond Medium; the system achieves hierarchy through size and family contrast, not weight - Introducing additional accent colors beyond the warm palette; product imagery provides sufficient color interest - Crowding the generous spacing around feature lists and accordion items

### Recommended Build Order 1. Establish the two-mode color system with dark and light surface tokens 2. Implement the typographic hierarchy with Super Serif headlines and Super Sans body 3. Build the section container system with consistent vertical rhythm and max-width constraints 4. Create the primary action button as the foundational interactive element 5. Develop the feature list and accordion patterns for content sections 6. Add the footer grid with navigation columns and background wordmark 7. Refine responsive behavior for stacked layouts and scaled typography

### Accessibility - Ensure text-inverse on surface-dark and surface-burgundy meets WCAG AA contrast ratios; the near-white on deep burgundy should verify at 4.5:1 minimum - Provide visible focus indicators for all interactive elements; the minimal visual language requires clear keyboard navigation cues - Maintain accordion expand/collapse state programmatically for screen readers - Consider reduced-motion preferences for any scroll-triggered wordmark reveals or section transitions

Scope note

This guide covers the desktop marketing site surfaces visible in the supplied images, including hero sections, feature lists, FAQ accordions, and the footer system. Mobile layouts, interactive states beyond static presentation, animation, form components, and in-app interface elements are not represented in the available material. Measurements are practical adaptation targets derived from visual inspection against a 4px relative unit grid.

More website design guides

Browse website design guides by pattern and website.