21 KiB
| version | name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alpha | Superhumon Inspired | An inspired interpretation of Superhumon's design language — a fast-email productivity brand split between an editorial dark hero (deep indigo navy with violet-sky atmospheric backdrop and a portrait subject) and a quiet white content body with off-warm-grey ink. The system uses a single proprietary variable display sans, heavy weight 460–540 with tight tracking, and a deep-teal closing CTA band that breaks the indigo/white rhythm with a warm dark interlude. Buttons are tight rounded rectangles, pricing is sober and dense, and the brand reads more like a high-end newsletter than a SaaS app. |
|
|
|
|
|
Overview
Superhumon's marketing pages open in an editorial dark register: a deep indigo navy {colors.primary} (#1b1938) canvas overlaid with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject (often a person looking off-frame, photographed at twilight). Headlines render in {typography.display-xxl} (Super Sans VF at 64px / weight 540) with negative tracking, set in white over the indigo. A single rounded-rectangle CTA button anchors each band — never two, never three.
The body of every page flips to white. {colors.canvas} (#ffffff) takes over below the hero, with body type in {colors.ink} (#292827 — a slightly warm dark grey, never pure black) and feature rows alternating between white and {colors.canvas-soft} (a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy, completing the brand's binary polarity.
Every page closes with a deep-teal CTA band ({colors.surface-teal-deep} — #0e3030). The teal is a single chromatic interlude: rich, almost-black green-blue, that breaks up what would otherwise be an indigo/white-only page. The teal band always contains the closing CTA in {typography.display-lg} paired with a single white-pill button.
Typography runs Super Sans VF — a proprietary variable display sans — at unusual mid-weights (460, 540, 600). The variable axes let the brand pick precise sub-default weights that read as warmer and more human than typical 400/500/700 SaaS scales. Display sizes use negative letter-spacing of -1.32px to -0.315px depending on size; line-heights are unusually tight (0.96 on 48px display).
Key Characteristics:
- Three-canvas system: indigo navy (
{colors.primary}) for hero, white ({colors.canvas}) for body, deep teal ({colors.surface-teal-deep}) for closing CTA. - Half-bleed portrait subject in the hero with violet-sky atmospheric backdrop — the brand uses a person looking off-frame as a recurring visual.
- Single CTA per band; the marketing pages never crowd actions.
- Super Sans VF at sub-default weights (460, 540, 600) — the brand's typographic warmth signature.
- Tight line-heights (0.96) on display sizes — vertical compression as editorial density.
- Off-warm-grey body ink (
#292827) — never pure black; the brand's quiet warmth. - Pill-shaped on-hero CTA in pale violet (
{colors.surface-violet-soft}); rounded-rectangle CTAs everywhere else.
Colors
Source pages: home (
/),/products/go-ai-assistant,/contact-sales,/plans.
Brand & Accent
- Primary Indigo Navy (
{colors.primary}—#1b1938): The brand's primary surface and CTA color. Hero canvas, filled rounded-rectangle button, featured pricing tier. - Indigo Deep (
{colors.primary-deep}—#0e0c1f): Pressed-state lift / deeper navy used in hero gradient stops. - Surface Violet Soft (
{colors.surface-violet-soft}—#c9b4fa): The hero pill-button fill — pale violet over the indigo canvas. Also appears in atmospheric backdrops. - Surface Teal Deep (
{colors.surface-teal-deep}—#0e3030): The signature closing-CTA band color. Rich green-blue, almost black. - Surface Teal Mid (
{colors.surface-teal-mid}—#155555): Slightly lifted teal for nested chrome inside the band.
Surface
- Canvas (
{colors.canvas}—#ffffff): Default body background. - Canvas Soft (
{colors.canvas-soft}—#fafaf8): Barely-warm off-white for alternating feature-row bands. - Hairline (
{colors.hairline}—#e8e4dd): 1px borders, slightly warm grey. - Hairline Dark (
{colors.hairline-dark}—#3f3a52): 1px borders on dark surfaces.
Text
- Ink (
{colors.ink}—#292827): Default body text. Warm dark grey, never pure black. - Ink Mute (
{colors.ink-mute}—#73706d): Secondary text, captions. - Ink Faint (
{colors.ink-faint}—#9a9794): Tertiary / disabled text. - On Primary (
{colors.on-primary}—#ffffff): Text on dark navy / teal surfaces. - On Dark Mute (
{colors.on-dark-mute}— translucent white): Secondary text on dark. - On Dark Faint (
{colors.on-dark-faint}— translucent white): Tertiary text on dark.
Typography
Font Family
The display and UI tier is Super Sans VF — a proprietary variable sans (variable axes for weight, with the brand using sub-default 460 / 540 / 600 weights). Fallback chain is the system font stack.
For substitution use Inter Variable (open-source) at weight 460 / 540 / 600 — Inter's variable axes match Super Sans VF's behavior closely. Avoid fixed-weight Inter at 400 / 500 / 600 — the brand specifically picks the in-between weights.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xxl} |
64px | 540 | 0.96 | 0 | Hero headline |
{typography.display-xl} |
48px | 460 | 0.96 | -1.32px | Section opener on light surfaces |
{typography.display-lg} |
28px | 540 | 1.14 | -0.63px | Sub-section / feature title |
{typography.display-md} |
22px | 460 | 1.1 | -0.315px | Card title |
{typography.heading-lg} |
20px | 460 | 1.2 | -0.4px | Compact card title |
{typography.body-lg} |
18px | 540 | 1.5 | -0.135px | Marketing body lead |
{typography.body-md} |
16px | 460 | 1.5 | 0 | Default UI body |
{typography.body-strong} |
18.72px | 700 | 1.5 | 0 | Emphasized body |
{typography.button-md} |
16px | 700 | 1.0 | 0 | Rounded-rectangle button label |
{typography.button-cap} |
14px | 600 | 1.0 | 0 | Compact button label |
{typography.caption} |
14px | 460 | 1.4 | 0 | Helper, footnote |
{typography.micro} |
12px | 540 | 1.4 | 0 | Pill label, fine print |
Principles
- Sub-default weights. The brand picks 460 / 540 / 600 instead of 400 / 500 / 700 — a quiet warmth in the typography that distinguishes it from default SaaS systems.
- Tight display leading. 0.96 on 48–64px display — the type stacks unusually compact.
- Negative tracking on display sizes. -1.32px at 48px scaling proportionally — tightens the variable letterforms into editorial density.
Note on Font Substitutes
Inter Variable (open-source via Google Fonts) is the recommended substitute. Set font-variation-settings: "wght" 540 for display, 460 for body — Inter's variable axes match. Avoid fixed-weight Inter; the in-between weights are the brand's signature.
Layout
Spacing System
- Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
- Tokens:
{spacing.xxs}2px ·{spacing.xs}4px ·{spacing.sm}8px ·{spacing.md}12px ·{spacing.lg}16px ·{spacing.xl}24px ·{spacing.xxl}32px ·{spacing.huge}64px. - Section padding: 64–96px on most sections; closing teal band uses 96–128px for editorial weight.
- Card internal padding: 32px on pricing cards; 24px on alternating feature rows.
Grid & Container
- Hero spans full viewport width with the violet-sky backdrop edge-to-edge; content centers in a ~960px column.
- Body content centers in ~960–1100px.
- Pricing collapses 3-up → 2-up → 1-up at 1024 / 768 breakpoints.
Whitespace Philosophy
The brand uses generous editorial whitespace on both polarities — dark hero and white body. Section gaps tend toward 96px; the teal closing band gets up to 128px of vertical air. The whitespace itself is part of the brand's "considered, slow-tempo" feel.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default surface |
| 1 | box-shadow: 0 1px 3px rgba(0,0,0,0.08) |
Subtle card lift |
| 2 | box-shadow: 0 8px 24px rgba(0,0,0,0.12) |
Floating panels, modals |
| 3 | Atmospheric backdrop (violet-sky over indigo) | The hero's depth medium |
Decorative Depth
The hero's depth is the violet-sky atmospheric backdrop — a soft indigo-to-violet-to-sky-blue radial wash that sits behind the portrait subject. Implemented as a CSS radial gradient or large background image. Below the hero, depth is minimal — the white canvas is flat.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
{rounded.xs} |
4px | Hairline tags |
{rounded.sm} |
6px | Form inputs |
{rounded.md} |
8px | Buttons (the brand's signature button shape — rounded rectangle, never pill) |
{rounded.lg} |
12px | Pricing cards, feature cards |
{rounded.xl} |
16px | Modal dialogs, large feature cards |
{rounded.full} |
9999px | Pill tabs in feature row, hero CTA |
Photography Geometry
The hero uses half-bleed portrait subjects — a person photographed at twilight, looking off-frame, occupying the right half of the hero. The portrait extends edge-to-edge vertically and stops mid-canvas horizontally; type sits on the left side. Other photography is rare; product UI mockups handle most other illustrative needs.
Components
Buttons
button-primary-dark — the dominant rounded-rectangle CTA on white surfaces.
- Background
{colors.primary}, text{colors.on-primary}, type{typography.button-md}, padding{spacing.md} {spacing.xl}(12px 20px), rounded{rounded.md}8px. - Pressed state
button-primary-dark-pressedshifts to{colors.primary-deep}.
button-on-dark-pill — the hero CTA in pale violet pill shape.
- Background
{colors.surface-violet-soft}, text{colors.primary}, same typography, padding 12px 20px, rounded{rounded.full}. The pill shape only appears on the hero — body CTAs use the rounded rectangle.
button-secondary-outline — outline alternative on white.
- Background
{colors.canvas}, text{colors.ink}, 1px solid{colors.hairline-dark}border, same shape asbutton-primary-dark.
button-on-teal — CTA inside the closing teal band.
- Background
{colors.canvas}, text{colors.surface-teal-deep}, rounded-rectangle, same typography.
Cards & Containers
card-feature-light — feature card on white.
- Background
{colors.canvas}, padding{spacing.xxl}, rounded{rounded.lg}, 1px{colors.hairline}border.
card-pricing — standard pricing tier card.
- Background
{colors.canvas}, padding{spacing.xxl}, rounded{rounded.lg}, 1px{colors.hairline}border.
card-pricing-featured — inverted indigo featured tier.
- Background
{colors.primary}, text{colors.on-primary}, otherwise identical tocard-pricing.
card-teal-band — the closing CTA band on every page.
- Background
{colors.surface-teal-deep}, text{colors.on-primary}, padding{spacing.huge}64px, rounded{rounded.lg}12px (often radius-less in practice when full-bleed). Holds a single closing headline in{typography.display-lg}and abutton-on-teal.
card-feature-row — alternating feature-row card on the body.
- Background
{colors.canvas-soft}, text{colors.ink}, padding{spacing.xl}24px, rounded{rounded.md}8px. Used in pairs/triplets to explain features below the hero.
Inputs & Forms
text-input — standard form input.
- Background
{colors.canvas}, text{colors.ink}, type{typography.body-md}, padding{spacing.sm}+ {spacing.md}(10px 12px), rounded{rounded.sm}6px, 1px{colors.hairline}border.
Navigation
nav-bar-dark — top nav over the indigo hero.
- Background
{colors.primary}, text{colors.on-primary}, padding{spacing.lg} {spacing.xl}. Logo on the left, nav center, "Get Started"button-on-dark-pillon the right.
nav-bar-light — top nav on body / pricing pages.
- Background
{colors.canvas}, text{colors.ink}, otherwise same structure withbutton-primary-darkon the right.
Pills, Tags, and Chips
pill-tab-light — feature-row tab selector.
- Background
{colors.canvas}, text{colors.ink}, type{typography.button-cap}, padding{spacing.sm} {spacing.lg}, rounded{rounded.full}. Used in the feature category picker (Mail / Channels / Code / AI / Calendar etc.) below the hero.
Signature Components
Half-Bleed Portrait Hero — a person photographed at twilight, occupying the right half of the indigo hero with violet-sky atmospheric backdrop behind. Type and CTA sit on the left side. The portrait is the brand's recurring visual signature.
Closing Teal Band — every page closes with a card-teal-band containing a {typography.display-lg} closing headline and a single button-on-teal. The teal is the page's resolving chord.
link-on-light — inline links on body.
- Text
{colors.ink}rendered in{typography.body-md}with persistent underline.
footer-light — site-wide footer.
- Background
{colors.canvas}, text{colors.ink-mute}, type{typography.caption}, padding{spacing.huge} {spacing.xl}(64px 24px). Holds 4 columns of link groups, social icons, and a small legal/copyright row.
Do's and Don'ts
Do
- Pair every hero with the violet-sky atmospheric backdrop and a half-bleed portrait subject when possible.
- Render display tiers at sub-default weights (460 / 540) — the warmth is the typographic signature.
- Use rounded-rectangle CTAs at 8px radius everywhere except the hero (where pill-shaped is the rule).
- Close every marketing page with a deep-teal CTA band.
- Use warm dark grey
{colors.ink}for body text — never pure black. - Apply tight 0.96 line-height on display sizes; the editorial compression is the brand.
Don't
- Don't use pill-shaped buttons in the body of the page; the pill is hero-only.
- Don't bump display weight above 540 unless using
body-strong(700) for emphasized inline body. - Don't render body text in pure black — the warm grey
#292827is part of the brand. - Don't omit the closing teal band — every marketing page closes with it.
- Don't introduce additional accent colors beyond indigo, violet-soft, teal, and the off-warm-greys.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Wide | ≥ 1440px | Half-bleed portrait at full scale; teal band 128px tall |
| Desktop | 1024–1440px | Default content max-width; pricing 3-up |
| Tablet | 768–1023px | Pricing 2-up; portrait crops tighter |
| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |
Touch Targets
- Buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA.
- Form fields stay at the 44px minimum height.
Collapsing Strategy
- Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
- Half-bleed portrait crops to head-and-shoulders on mobile; atmospheric backdrop simplifies.
- Pricing tiers stair-step 3-up → 2-up → 1-up.
- Top nav collapses to hamburger below 768px.
- Closing teal band reduces vertical padding from 128 → 64px on mobile.
Image Behavior
Hero portrait uses srcset with desktop / mobile crops — desktop favors the full half-bleed composition; mobile crops to head-and-shoulders.
Iteration Guide
- Focus on ONE component at a time.
- Reference component names and tokens directly.
- Run
npx @google/design.md lint DESIGN.mdafter edits. - Default body to
{typography.body-md}; reserve{typography.body-lg}for marketing leads. - Keep the three-canvas rhythm (indigo / white / teal) — adding a fourth canvas color breaks the system.
- The closing teal band is non-negotiable — every marketing page resolves there.