What font does Super User use?

Super User’s website uses one typeface: Segoe UI Adjusted (headings and body text), self-hosted.

What are Super User’s brand colours?

The main colours on superuser.com are Crimson (#C83232), Steel Blue (#1B75D0), Corn Silk (#FFF4D1), Royal Blue (#145799), Chocolate (#E7700D) and Sea Green (#18864B).

What colour is Super User’s text and background?

Body text is #0C0D0E on a #FFFFFF background.

Where is Super User’s logo from?

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

Is this Super User’s official style guide?

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

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

Unofficial style guide

Super Userstyle guide

Super User’s website (superuser.com) uses Segoe UI Adjusted for its headings and body text. Its palette is led by Crimson (#C83232), Steel Blue (#1B75D0) and Corn Silk (#FFF4D1), with #0C0D0E text on #FFFFFF. Captured from the live site on 2 November 2026.

Website: superuser.com
Typefaces: Segoe UI Adjusted, Cascadia Mono
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 2 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the superuser.com homepage on a desktop screen — Screenshot of superuser.com on a 1440 px desktop screen, 2 Nov 2026.

Screenshot of the superuser.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: Super User; ● 10 / 60 characters
Meta description: Q&A for computer enthusiasts and power users; ▲ 44 / 160 characters
Site name: Super User
og:title: Super User
og:description: Q&A for computer enthusiasts and power users
Language: en

In search results

Super Userhttps://superuser.com/

Super User

Q&A for computer enthusiasts and power users

When shared

superuser.com

Super User

Q&A for computer enthusiasts and power users

Logo & favicons

Found as: schema.org logo. PNG, 378 × 84.

Logo

On white

On black

On Crimson

Favicons

2 found

158 px · PNG apple-touch-icon
32 px · ICO icon

Super User

Light browser tab

Super User

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 (#0C0D0E) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 39.3%
Off White 13.3%
Near Black 11.2%
Cool Charcoal 11%
Crimson 3.9%
Steel Blue 3.1%
Corn Silk 2.9%
Royal Blue 2.3%
Chocolate 2.1%
Sea Green 1.9%
Light Sky Blue 1.9%
Alice Blue 1.9%
Aqua 1.4%
Dark Slate Blue 1.4%
Light Steel Blue 1.2%
Peach Puff 1.2%

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
19.45:1 AAA

On white
—

Background, text, border · .title-search-float, --theme-topbar-search-color
Off White

HEX

RGB

HSL

OKLCH

CMYK
2 1 0 9

On text
15.52:1 AAA

On white
1.25:1 Fail

Background, border, text · .message.gray .message-title, .message.job-improve .message-title
Near Black

HEX

RGB

HSL

OKLCH

CMYK
14 7 0 95

On text
—

On white
19.45:1 AAA

Text, background, border · --theme-topbar-background-color, --theme-topbar-bottom-border
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
14 7 0 73

On text
1.86:1 Fail

On white
10.47:1 AAA

Text, background · --theme-topbar-item-background-hover, --theme-topbar-search-background

Colours

Brand colours and accents, most used first

Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 75 75 22

On text
3.67:1 AA large

On white
5.31:1 AA

Text, border, background · .s-modal__warning .s-modal--title, .informative-tooltip.error
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
87 44 0 18

On text
4.17:1 AA large

On white
4.66:1 AA

Background, border, text · --blue-300, .privacy-wrapper .privacy-checkbox
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 4 18 0

On text
17.70:1 AAA

On white
1.10:1 Fail

Background · --gold-100, .val-info
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
87 43 0 40

On text
2.64:1 Fail

On white
7.36:1 AAA

Background, text · .privacy-wrapper .privacy-checkbox:before, --blue-400
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 52 94 9

On text
6.23:1 AA

On white
3.12:1 AA large

Background · .textarea-with-counter .-counter.-fail .-dot, .teams-join--logo
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
82 0 44 47

On text
4.22:1 AA large

On white
4.61:1 AA

Background, border · .textarea-with-counter .-counter.-success .-dot, .teams-checklist--checkbox.is-complete
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
42 21 0 2

On text
10.61:1 AAA

On white
1.83:1 Fail

Border · --focus-theme, --blue-400
Alice Blue

HEX

RGB

HSL

OKLCH

CMYK
14 7 0 2

On text
15.55:1 AAA

On white
1.25:1 Fail

Background · --blue-600, .textarea-with-counter .-counter
Aqua

HEX

RGB

HSL

OKLCH

CMYK
100 0 0 0

On text
15.51:1 AAA

On white
1.25:1 Fail

Background · .title-float-selected
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
89 44 0 58

On text
1.71:1 Fail

On white
11.36:1 AAA

Text · --blue-600, .lsep
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
26 24 0 0

On text
11.32:1 AAA

On white
1.72:1 Fail

Used · --purple-400, --purple-300
Peach Puff

HEX

RGB

HSL

OKLCH

CMYK
0 11 22 7

On text
13.46:1 AAA

On white
1.45:1 Fail

Used · --bronze-400, --orange-200

Gradients

linear-gradient(hsla(0,0%,100%,0), hsl(0,0%,100%))
linear-gradient(to right, 8%, 16%, 25%, 42%, 58%, 75%, 83%)
linear-gradient(to bottom, 0%, 69%, 100%)

Dark mode

When the device is set to dark

Aa Light · #0C0D0E on #FFFFFF

Aa Dark · #F9FAFA on #252627 · 14.50:1 AAA

Charcoal

#252627 · --white
Cool Dark Grey

#494D50 · --black-225
Charcoal

#333638 · --black-150
Light Sky Blue

#90C4F9 · --blue-400
Off White

#F9FAFA · --black-600
Cool Dark Grey

#575C60 · --black-250
Cool Grey

#73787D · --black-300
Medium Aqua Marine

#9CDEBC · --green-500
Pink

#FCC5C5 · --red-500
Warm Off White

#FDE2E2 · --red-600
Cool Light Grey

#ACB3B9 · --black-350
Cool Light Grey

#C8CCD0 · --black-400

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.

Segoe UI Adjusted

Aa 400 Aa 800

Segoe UI Adjusted

Self-hosted · weights 400, 600, 700, 800 · headings, body · shown in a stand-in if you don’t have it

Aa 400

Cascadia Mono

System font, or not loaded on this page · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS · root 13 px

Heading 1 1.61538462rem · 21 px / 1.3

Super User

Heading 2 1.46153846rem · 19 px / 1.3

Super User

Heading 3 1.15384615rem · 15 px / 1.3

Super User

Heading 4 100%

Super User

Heading 5 100%

Super User

Heading 6 100%

Super User

Body 13px / calc((13 + 4) / 13) Segoe UI Adjusted

Q&A for computer enthusiasts and power users

Paragraph 100%

Q&A for computer enthusiasts and power users

Small 100%

Q&A for computer enthusiasts and power users

Button 100%

Get started

Link 100%

Sizes in use

Most common across the site

27pxline calc((13 + 2) / 13) · 7 rules
21pxline calc((13 + 2) / 13) · 6 rules
19pxline 2.22 · 10 rules
17pxline 24px · 23 rules
15pxline 1 · 28 rules
13pxline calc((13 + 4) / 13) · 50 rules
12pxline 1 · 58 rules
11pxline 1.3 · 40 rules

Elements

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

Elements

Button

Get started

.top-notification .-content .btn · #F48024

Corner radius

calc(12px - 2px) · 44×
calc(4px) · 38×
3px · 18×
calc(6px) · 13×
2px · 13×

Shadows

0 0 0 2px ,0 0 0 4px
0 0 0 4px
0 0 0 1px ,0 0 0 calc(4px - 1px)

Layout

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

Grid

Breakpoints

607

640

816

947

980

1100

1111

1264

On a scale of 0 to 1440 px.

Content widths (max-width)

1264 px

1100 px

640 px

600 px

435 px

430 px

Notes

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

Notes

● FineThe title is 10 characters, short enough to show in full in search results.
▲ CheckThe description is only 44 characters. There is room to say more.

Questions

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

Questions

What font does Super User use?: Super User’s website uses one typeface: Segoe UI Adjusted (headings and body text), self-hosted.
What are Super User’s brand colours?: The main colours on superuser.com are Crimson (#C83232), Steel Blue (#1B75D0), Corn Silk (#FFF4D1), Royal Blue (#145799), Chocolate (#E7700D) and Sea Green (#18864B).
What colour is Super User’s text and background?: Body text is #0C0D0E on a #FFFFFF background.
Where is Super User’s logo from?: The logo shown in this guide was found on superuser.com’s homepage. For official logo files and usage rules, check Super User’s own brand or press page.
Is this Super User’s official style guide?: No. SiteStyleGuide made it from superuser.com’s public web pages on 2 November 2026, and isn’t affiliated with Super User. 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

superuser-com-tokens.css

Download

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

/* superuser.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/superuser.com) */
:root {
  /* Colours */
  --text: #0C0D0E;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-off-white: #E3E6E8;
  --colour-near-black: #0C0D0E;
  --colour-cool-charcoal: #3B4045;
  --colour-crimson: #C83232;
  --colour-steel-blue: #1B75D0;
  --colour-corn-silk: #FFF4D1;
  --colour-royal-blue: #145799;
  --colour-chocolate: #E7700D;
  --colour-sea-green: #18864B;
  --colour-light-sky-blue: #90C4F9;
  --colour-alice-blue: #D6E8FA;
  --colour-aqua: #00FFFF;
  --colour-dark-slate-blue: #0C3B6A;
  --colour-light-steel-blue: #BDC1FE;
  --colour-peach-puff: #EDD2BA;
  --gradient-1: linear-gradient(hsla(0,0%,100%,0), hsl(0,0%,100%));
  --gradient-2: linear-gradient(to right, 8%, 16%, 25%, 42%, 58%, 75%, 83%);
  --gradient-3: linear-gradient(to bottom, 0%, 69%, 100%);

  /* Typefaces */
  --font-headings: -apple-system, blinkmacsystemfont, 'Segoe UI Adjusted', 'Segoe UI', 'Liberation Sans', sans-serif;
  --font-body: -apple-system, blinkmacsystemfont, 'Segoe UI Adjusted', 'Segoe UI', 'Liberation Sans', sans-serif;
  --font-other: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Liberation Mono', 'Menlo', 'Monaco';

  /* Type scale */
  --text-h1: 1.61538462rem;
  --leading-h1: 1.3;
  --text-h2: 1.46153846rem;
  --leading-h2: 1.3;
  --text-h3: 1.15384615rem;
  --leading-h3: 1.3;
  --text-h4: 100%;
  --text-h5: 100%;
  --text-h6: 100%;
  --text-body: 13px;
  --leading-body: calc((13 + 4) / 13);
  --text-p: 100%;
  --text-small: 100%;
  --text-button: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: calc(12px - 2px);
  --radius-2: calc(4px);
  --radius-3: 3px;
  --radius-4: calc(6px);
  --radius-5: 2px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 607px;
  --breakpoint-2: 640px;
  --breakpoint-3: 816px;
  --breakpoint-4: 947px;
  --breakpoint-5: 980px;
  --breakpoint-6: 1100px;
  --breakpoint-7: 1111px;
  --breakpoint-8: 1264px;
  --max-width-1: 1264px;
  --max-width-2: 1100px;
  --max-width-3: 640px;
  --max-width-4: 600px;
  --max-width-5: 435px;
  --max-width-6: 430px;
}

{
    "site": "superuser.com",
    "source": "https://sitestyleguide.com/superuser.com",
    "text": "#0C0D0E",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#E3E6E8",
            "rgb": [
                227,
                230,
                232
            ]
        },
        {
            "name": "Near Black",
            "hex": "#0C0D0E",
            "rgb": [
                12,
                13,
                14
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#3B4045",
            "rgb": [
                59,
                64,
                69
            ]
        },
        {
            "name": "Crimson",
            "hex": "#C83232",
            "rgb": [
                200,
                50,
                50
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#1B75D0",
            "rgb": [
                27,
                117,
                208
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FFF4D1",
            "rgb": [
                255,
                244,
                209
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#145799",
            "rgb": [
                20,
                87,
                153
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#E7700D",
            "rgb": [
                231,
                112,
                13
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#18864B",
            "rgb": [
                24,
                134,
                75
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#90C4F9",
            "rgb": [
                144,
                196,
                249
            ]
        },
        {
            "name": "Alice Blue",
            "hex": "#D6E8FA",
            "rgb": [
                214,
                232,
                250
            ]
        },
        {
            "name": "Aqua",
            "hex": "#00FFFF",
            "rgb": [
                0,
                255,
                255
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#0C3B6A",
            "rgb": [
                12,
                59,
                106
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#BDC1FE",
            "rgb": [
                189,
                193,
                254
            ]
        },
        {
            "name": "Peach Puff",
            "hex": "#EDD2BA",
            "rgb": [
                237,
                210,
                186
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI Adjusted",
            "stack": "-apple-system, BlinkMacSystemFont, \"Segoe UI Adjusted\", \"Segoe UI\", \"Liberation Sans\", sans-serif",
            "weights": [
                400,
                600,
                700,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Cascadia Mono",
            "stack": "ui-monospace, \"Cascadia Mono\", \"Segoe UI Mono\", \"Liberation Mono\", Menlo, Monaco, Consolas, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Websites whose lead colour is closest to Super User’s

The Hollywood Reporter

hollywoodreporter.com · 4 days ago
Save
ТСН.ua

tsn.ua · 3 days ago
Save
CCM

commentcamarche.net · 6 days ago
Save
feedburner.com

feedburner.com · 3 days ago
Save

Captured from superuser.com on 2 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Super User; this guide describes the public website for reference.

Super Userstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Near Black

Cool Charcoal

Colours

Crimson

Steel Blue

Corn Silk

Royal Blue

Chocolate

Sea Green

Light Sky Blue

Alice Blue

Aqua

Dark Slate Blue

Light Steel Blue

Peach Puff

Gradients

Dark mode

Segoe UI Adjusted

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run superuser.com?

Similar colours

The Hollywood Reporter

ТСН.ua

CCM

feedburner.com

Title &
description