What font does superhuman.com use?

superhuman.com’s website uses three typefaces: Super Sans VF (headings and body text), served from superhumanstatic.com; Super Sans Mono VF, served from superhumanstatic.com; Super Serif VF, served from superhumanstatic.com.

What are superhuman.com’s brand colours?

The main colours on superhuman.com are Maroon (#421D24), Thistle (#D4C7FF), Slate Blue (#714CB6), Black (#241013), Teal (#148072) and Light Pink (#FFA8AA).

What colour is superhuman.com’s text and background?

Body text is #FFFFFF on a #421D24 background.

Where is superhuman.com’s logo from?

The logo shown in this guide was found on superhuman.com’s homepage. For official logo files and usage rules, check superhuman.com’s own brand or press page.

Is this superhuman.com’s official style guide?

No. SiteStyleGuide made it from superhuman.com’s public web pages on 27 October 2026, and isn’t affiliated with superhuman.com. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from superhuman.com’s public web pages. Not affiliated with or endorsed by superhuman.com. The real site is superhuman.com ↗

Unofficial style guide

superhuman.comstyle guide

superhuman.com’s website (superhuman.com) uses Super Sans VF for its headings and body text. Its palette is led by Maroon (#421D24), Thistle (#D4C7FF) and Slate Blue (#714CB6), with #FFFFFF text on #421D24. Captured from the live site on 27 October 2026.

Website: superhuman.com
Typefaces: Super Sans VF, Super Sans Mono VF, Super Serif VF
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the superhuman.com homepage on a desktop screen — Screenshot of superhuman.com on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the superhuman.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Superhuman: Docs, Mail, and AI That Work Everywhere; ● 51 / 60 characters
Meta description: Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactful.; ● 142 / 160 characters
og:title: Superhuman: Docs, Mail, and AI That Work Everywhere
og:description: Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactful.
Language: en

In search results

superhuman.comhttps://superhuman.com/

Superhuman: Docs, Mail, and AI That Work Everywhere

Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactful.

When shared

superhuman.com

Superhuman: Docs, Mail, and AI That Work Everywhere

Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more cr…

Logo & favicons

Found as: SVG in the header. SVG.

Logo

On white

On black

On Maroon

Favicons

3 found

256 px · PNG apple-touch-icon
96 px · PNG icon
22 px · SVG icon

Superhuman: Docs, Mail, and AI That Work Everywhere

Light browser tab

Superhuman: Docs, Mail, and AI That Work Everywhere

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#FFFFFF) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 37.1%
Charcoal 24.2%
Maroon 7.5%
Thistle 4.7%
Slate Blue 4.3%
Near Black 2.8%
Warm Off White 2.6%
Black 2.6%
Teal 2.6%
Light Pink 1.9%
Crimson 1.9%
Aqua Marine 1.8%
Chocolate 1.6%
Light Midnight Blue 1.5%
Dark Slate Grey 1.5%
Deep Midnight Blue 1.5%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
—

On white
—

Text, background, border · body, .table-of-contents_title__8tO_Y
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 2 5 84

On text
14.72:1 AAA

On white
14.72:1 AAA

Text, background, graphic · body, .table-of-contents_title__8tO_Y
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 5 92

On text
18.43:1 AAA

On white
18.43:1 AAA

Background, text · .media-block_playPauseButton__tqf6Q, [data-background-color=secondary-dark]
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 3 5

On text
1.14:1 Fail

On white
1.14:1 Fail

Background · [data-background-color=secondary-default], .page_multiSectionBackground__WAzbj

Colours

Brand colours and accents, most used first

Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 56 45 74

On text
14.66:1 AAA

On white
14.66:1 AAA

Background, text · body, [data-background-color=primary-default]
Thistle

HEX

RGB

HSL

OKLCH

CMYK
17 22 0 0

On text
1.57:1 Fail

On white
1.57:1 Fail

Text, background · .section-hero_cta__NqIa8, .table-header-cell_isHighlightedColumnHeader__yClBO
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
38 58 0 29

On text
6.16:1 AA

On white
6.16:1 AA

Text, background · [data-background-color=accent-subdued], .callout_callout__WfMEZ
Black

HEX

RGB

HSL

OKLCH

CMYK
0 56 47 86

On text
18.13:1 AAA

On white
18.13:1 AAA

Background · [data-background-color=secondary-default], .page_multiSectionBackground__WAzbj
Teal

HEX

RGB

HSL

OKLCH

CMYK
84 0 11 50

On text
4.82:1 AA

On white
4.82:1 AA

Text · .color-icon-brand-grammarly, .color-text-success
Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 34 33 0

On text
1.84:1 Fail

On white
1.84:1 Fail

Text, border · .color-text-error, .color-icon-error
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 73 20

On text
5.75:1 AA

On white
5.75:1 AA

Text, border · .color-text-error, .color-icon-error
Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
35 0 13 8

On text
1.39:1 Fail

On white
1.39:1 Fail

Text · .color-text-success, .color-icon-success
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 59 100 24

On text
4.73:1 AA

On white
4.73:1 AA

Text · .color-text-warning, .color-icon-warning
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
44 69 0 72

On text
16.20:1 AAA

On white
16.20:1 AAA

Background · [data-background-color=accent-default], .table-header-cell_hasHighlight__sb36Q
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
82 1 0 74

On text
11.19:1 AAA

On white
11.19:1 AAA

Background · [data-background-color=tertiary-default], .tabbed-section-content_container__g1hPO
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
52 55 0 78

On text
16.90:1 AAA

On white
16.90:1 AAA

Used · --_button-default-bg, --_button-active-bg

Gradients

linear-gradient(90deg,light-dark(rgb(from #73716d r g b/20%),rgb(from #fcfaf7 r g b/20%)),light-dark(rgb(from #73716d r g b/20%),rgb(from #fcfaf7 r g b/20%)) 4px,transparent 4px,transparent 8px)
linear-gradient(to bottom left,rgb(168 164 216/50%),rgb(107 165 232/50%),rgb(176 112 192/60%),rgb(144 136 208/50%)),linear-gradient(180deg,#7c9ad3,#314682)
linear-gradient(180deg, 0, 100%)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Super Sans VF

Aa 100 Aa 900

Super Sans VF

Served from superhumanstatic.com · weights 100, 200, 460, 500, 540, 600, 900 · headings, body, buttons · shown in a stand-in if you don’t have it

Aa 100 Aa 900

Super Sans Mono VF

Served from superhumanstatic.com · weights 100, 400, 500, 900 · shown in a stand-in if you don’t have it

Aa 100 Aa 900

Super Serif VF

Served from superhumanstatic.com · weights 100, 320, 900 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 3 calc(25/16*1rem) weight 500

Superhuman: Docs, Mail, and AI That Work Everyw…

Body calc(16 / 16 * 1rem) / 1.2 weight 460 · Super Sans VF

Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactf…

Sizes in use

Most common across the site

14px1 rules
12px1 rules
11pxline · 1 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

inherit · 2×

Shadows

0 0 25px rgb(from light-dark(rgb(0 0 0/0%),rgb(255 255 255/0%)) r g b/25%)
0 -4px 8px .5px rgb(from light-dark(#474543,#141413) r g b/16%)
0 0 0 2px light-dark(#005fcc,#daedfb)
0 1px 2px 0 rgb(from r g b/24%),0 0 0 1px

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

640

1080

1280

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1132 px

861 px

760 px

678 px

600 px

507 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 51 characters, short enough to show in full in search results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does superhuman.com use?: superhuman.com’s website uses three typefaces: Super Sans VF (headings and body text), served from superhumanstatic.com; Super Sans Mono VF, served from superhumanstatic.com; Super Serif VF, served from superhumanstatic.com.
What are superhuman.com’s brand colours?: The main colours on superhuman.com are Maroon (#421D24), Thistle (#D4C7FF), Slate Blue (#714CB6), Black (#241013), Teal (#148072) and Light Pink (#FFA8AA).
What colour is superhuman.com’s text and background?: Body text is #FFFFFF on a #421D24 background.
Where is superhuman.com’s logo from?: The logo shown in this guide was found on superhuman.com’s homepage. For official logo files and usage rules, check superhuman.com’s own brand or press page.
Is this superhuman.com’s official style guide?: No. SiteStyleGuide made it from superhuman.com’s public web pages on 27 October 2026, and isn’t affiliated with superhuman.com. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

superhuman-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* superhuman.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/superhuman.com) */
:root {
  /* Colours */
  --text: #FFFFFF;
  --background: #421D24;
  --colour-white: #FFFFFF;
  --colour-charcoal: #292827;
  --colour-near-black: #141413;
  --colour-warm-off-white: #F2F0EB;
  --colour-maroon: #421D24;
  --colour-thistle: #D4C7FF;
  --colour-slate-blue: #714CB6;
  --colour-black: #241013;
  --colour-teal: #148072;
  --colour-light-pink: #FFA8AA;
  --colour-crimson: #CD0037;
  --colour-aqua-marine: #98EBCD;
  --colour-chocolate: #C25000;
  --colour-light-midnight-blue: #281647;
  --colour-dark-slate-grey: #0C4243;
  --colour-deep-midnight-blue: #1B1938;
  --gradient-1: linear-gradient(90deg,light-dark(rgb(from #73716d r g b/20%),rgb(from #fcfaf7 r g b/20%)),light-dark(rgb(from #73716d r g b/20%),rgb(from #fcfaf7 r g b/20%)) 4px,transparent 4px,transparent 8px);
  --gradient-2: linear-gradient(to bottom left,rgb(168 164 216/50%),rgb(107 165 232/50%),rgb(176 112 192/60%),rgb(144 136 208/50%)),linear-gradient(180deg,#7c9ad3,#314682);
  --gradient-3: linear-gradient(180deg, 0, 100%);

  /* Typefaces */
  --font-headings: 'Super Sans VF', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';
  --font-body: 'Super Sans VF', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';
  --font-buttons: 'Super Sans VF', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';
  --font-other: 'Super Sans Mono VF', ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas';

  /* Shape */
  --radius-1: inherit;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 1080px;
  --breakpoint-3: 1280px;
  --breakpoint-4: 1440px;
  --max-width-1: 1132px;
  --max-width-2: 861px;
  --max-width-3: 760px;
  --max-width-4: 678px;
  --max-width-5: 600px;
  --max-width-6: 507px;
}

{
    "site": "superhuman.com",
    "source": "https://sitestyleguide.com/superhuman.com",
    "text": "#FFFFFF",
    "background": "#421D24",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#292827",
            "rgb": [
                41,
                40,
                39
            ]
        },
        {
            "name": "Near Black",
            "hex": "#141413",
            "rgb": [
                20,
                20,
                19
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F2F0EB",
            "rgb": [
                242,
                240,
                235
            ]
        },
        {
            "name": "Maroon",
            "hex": "#421D24",
            "rgb": [
                66,
                29,
                36
            ]
        },
        {
            "name": "Thistle",
            "hex": "#D4C7FF",
            "rgb": [
                212,
                199,
                255
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#714CB6",
            "rgb": [
                113,
                76,
                182
            ]
        },
        {
            "name": "Black",
            "hex": "#241013",
            "rgb": [
                36,
                16,
                19
            ]
        },
        {
            "name": "Teal",
            "hex": "#148072",
            "rgb": [
                20,
                128,
                114
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#FFA8AA",
            "rgb": [
                255,
                168,
                170
            ]
        },
        {
            "name": "Crimson",
            "hex": "#CD0037",
            "rgb": [
                205,
                0,
                55
            ]
        },
        {
            "name": "Aqua Marine",
            "hex": "#98EBCD",
            "rgb": [
                152,
                235,
                205
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#C25000",
            "rgb": [
                194,
                80,
                0
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#281647",
            "rgb": [
                40,
                22,
                71
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#0C4243",
            "rgb": [
                12,
                66,
                67
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#1B1938",
            "rgb": [
                27,
                25,
                56
            ]
        }
    ],
    "fonts": [
        {
            "name": "Super Sans VF",
            "stack": "\"Super Sans VF\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
            "weights": [
                100,
                200,
                460,
                500,
                540,
                600,
                900
            ],
            "source": "Served from superhumanstatic.com"
        },
        {
            "name": "Super Sans Mono VF",
            "stack": "\"Super Sans Mono VF\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
            "weights": [
                100,
                400,
                500,
                900
            ],
            "source": "Served from superhumanstatic.com"
        },
        {
            "name": "Super Serif VF",
            "stack": "\"Super Serif VF\", Georgia, Times, serif",
            "weights": [
                100,
                320,
                900
            ],
            "source": "Served from superhumanstatic.com"
        }
    ]
}

Websites whose lead colour is closest to superhuman.com’s

Fume

fume-studio.com · 3 days ago
Save
Pantip

pantip.com · 5 days ago
Save
expedia

expedia.co.uk · 4 days ago
Save
vrbo

vrbo.com · 4 days ago
Save

Captured from superhuman.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by superhuman.com; this guide describes the public website for reference.

superhuman.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Near Black

Warm Off White

Colours

Maroon

Thistle

Slate Blue

Black

Teal

Light Pink

Crimson

Aqua Marine

Chocolate

Light Midnight Blue

Dark Slate Grey

Deep Midnight Blue

Gradients

Super Sans VF

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run superhuman.com?

Similar colours

Fume

Pantip

expedia

vrbo

Title &
description