What font does SORT use?

SORT’s website uses two typefaces: Segoe UI (body text), a system font; Arial (headings), a system font.

What are SORT’s brand colours?

The main colours on sort-office.com are Light Royal Blue (#0078FF), Orange Red (#FF4828), Dodger Blue (#0A85FF), Deep Royal Blue (#026EE8), Deep Sky Blue (#00BAFF) and Chocolate (#F66B05).

What colour is SORT’s text and background?

Body text is #282828 on a #FFFFFF background.

Where is SORT’s logo from?

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

Is this SORT’s official style guide?

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

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

Unofficial style guide

SORTstyle guide

SORT’s website (sort-office.com) sets its headings in Arial and its body text in Segoe UI. Its palette is led by Light Royal Blue (#0078FF), Orange Red (#FF4828) and Dodger Blue (#0A85FF), with #282828 text on #FFFFFF. Captured from the live site on 2 November 2026.

Website: sort-office.com
Typefaces: Segoe UI, Arial
Palette: 4 neutrals, 11 colours, 2 gradients
Captured: 2 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Identity & metadata

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

Title &
description

Page title: Sort Office; ● 11 / 60 characters
Meta description: A creative office working with makers and brands to shape impactful brand experiences.; ● 86 / 160 characters
Site name: SORT
og:title: SORT
og:description: A creative office working with makers and brands to shape impactful brand experiences.

In search results

SORThttps://sort-office.com/

Sort Office

A creative office working with makers and brands to shape impactful brand experiences.

When shared

sort-office.com

SORT

A creative office working with makers and brands to shape impactful brand experiences.

Logo & favicons

Found as: CSS background on .logo. PNG, 76 × 18.

Logo

On white

On black

On Light Royal Blue

Favicons

5 found

144 px · PNG icon
114 px · PNG apple-touch-icon-precomposed
72 px · PNG apple-touch-icon-precomposed
57 px · PNG apple-touch-icon-precomposed
32 px · ICO favicon.ico

Sort Office

Light browser tab

Sort Office

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

Colour

Balance

How much each colour is used

White 46.8%
Charcoal 11.5%
Black 10.5%
Light Royal Blue 7.4%
Grey 6.7%
Orange Red 2.3%
Dodger Blue 2%
Deep Royal Blue 1.7%
Deep Sky Blue 1.7%
Chocolate 1.7%
Deep Red 1.7%
Steel Blue 1.7%
Forest Green 1.7%
Light Red 1.3%
Red 1.3%

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

On white
—

Background, text, border · html, .toolbar .menu-button .line-1
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 84

On text
—

On white
14.74:1 AAA

Text, background · body, .new-settings .toolbar .menu-button:hover
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.42:1 Fail

On white
21.00:1 AAA

Background, text · .arrow-color-selector .color-clip-wrapper .color-wrapper .color.black, .share-popup-overlay
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 50

On text
3.73:1 AA large

On white
3.95:1 AA large

Background, text, border · .toolbar .alert, .cart-sidebar .tab-order .order-details .order-title-row

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 53 0 0

On text
3.60:1 AA large

On white
4.09:1 AA large

Background, text · .alert-popup .panel-wrapper .panel .button.main, .isphone .share-popup .content-wrapper .share-wrapper .type-selector[data-tp=pag
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 84 0

On text
4.36:1 AA large

On white
3.38:1 AA large

Background, text · .common-form .button.error, .isdesktop #page404 table tr td .message .front-page-link:hover
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
96 48 0 0

On text
4.08:1 AA large

On white
3.61:1 AA large

Background · .alert-popup.category-shared-unlock-page .panel-wrapper .panel .button.ok, .isdesktop .magpassword-container .center-table .center-cell .center-content .pa
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
99 53 0 9

On text
3.09:1 AA large

On white
4.77:1 AA

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-facebook
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 0

On text
6.65:1 AA

On white
2.22:1 Fail

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-twitter
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 57 98 4

On text
4.93:1 AA

On white
2.99:1 Fail

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-gplus
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 90 92 14

On text
2.90:1 Fail

On white
5.08:1 AA

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-pinterest
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
91 32 0 28

On text
3.30:1 AA large

On white
4.47:1 AA large

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-linkedin
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
80 0 75 36

On text
4.40:1 AA large

On white
3.35:1 AA large

Background · .share-popup .content-wrapper .share-wrapper .buttons-wrapper .share-mail
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 72 80 4

On text
4.04:1 AA large

On white
3.65:1 AA large

Background · .toolbar .alert, .toolbar .alert .popup .reload
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
3.69:1 AA large

On white
4.00:1 AA large

Background · .intercom-custom-counter, .msie .rmwidget.widget-background .video-background .overlay

Gradients

linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,.8) 100%)
linear-gradient(to bottom,#0000 0% 31%,#000c)

Dark mode

When the device is set to dark

Aa Light · #282828 on #FFFFFF

Aa Dark · #FFFFFF on #000000 · 21.00:1 AAA

Black

#000000

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.

Arial

Aa 400 Aa 600

Segoe UI

System font, or not loaded on this page · weights 400, 500, 600 · buttons, body · shown in a stand-in if you don’t have it

Aa 700

Arial

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

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

Type scale

From the site’s CSS

Heading 3 18px weight 700 · Arial

Sort Office

Heading 4 8px uppercase · Arial

Sort Office

Body — / 1 Segoe UI

A creative office working with makers and brands to shape impactful brand experiences.

Link 8px / 1px weight 700 · uppercase · Arial

Sizes in use

Most common across the site

24pxline 30px · 11 rules
20pxline 48px · 4 rules
19pxline 24px · 4 rules
18pxline 24px · 7 rules
16pxline 20px · 24 rules
14pxline 50px · 10 rules
12pxline 25px · 22 rules
11pxline 14px · 4 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

.alert-popup.category-shared-unlock-page .panel-wrapper .panel .button.ok · #0A85FF · radius 8px

Corner radius

50% · 8×
4px · 7×
8px · 6×
100% · 6×
12px · 5×
25px · 4×

Shadows

0 0 0 4px #0000000a,0 0 0 3px #ffffff47
0 0 0 1px #00000014
0 0 0 1px #00000017,0 1px 2px #0000003d
0 0 0 1px #00000017

Layout

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

Grid

Breakpoints

768

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

418 px

Notes

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

Notes

● FineThe title is 11 characters, short enough to show in full in search results.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Questions

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

Questions

What font does SORT use?: SORT’s website uses two typefaces: Segoe UI (body text), a system font; Arial (headings), a system font.
What are SORT’s brand colours?: The main colours on sort-office.com are Light Royal Blue (#0078FF), Orange Red (#FF4828), Dodger Blue (#0A85FF), Deep Royal Blue (#026EE8), Deep Sky Blue (#00BAFF) and Chocolate (#F66B05).
What colour is SORT’s text and background?: Body text is #282828 on a #FFFFFF background.
Where is SORT’s logo from?: The logo shown in this guide was found on sort-office.com’s homepage. For official logo files and usage rules, check SORT’s own brand or press page.
Is this SORT’s official style guide?: No. SiteStyleGuide made it from sort-office.com’s public web pages on 2 November 2026, and isn’t affiliated with SORT. 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

sort-office-com-tokens.css

Download

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

/* sort-office.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/sort-office.com) */
:root {
  /* Colours */
  --text: #282828;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #282828;
  --colour-black: #000000;
  --colour-grey: #808080;
  --colour-light-royal-blue: #0078FF;
  --colour-orange-red: #FF4828;
  --colour-dodger-blue: #0A85FF;
  --colour-deep-royal-blue: #026EE8;
  --colour-deep-sky-blue: #00BAFF;
  --colour-chocolate: #F66B05;
  --colour-deep-red: #DB1611;
  --colour-steel-blue: #107EB8;
  --colour-forest-green: #20A229;
  --colour-light-red: #F54432;
  --colour-red: #FF0000;
  --gradient-1: linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,.8) 100%);
  --gradient-2: linear-gradient(to bottom,#0000 0% 31%,#000c);

  /* Typefaces */
  --font-buttons: -apple-system, system-ui, blinkmacsystemfont, 'Segoe UI', 'Ubuntu', 'Fira Sans';
  --font-body: -apple-system, system-ui, blinkmacsystemfont, 'Segoe UI', 'Ubuntu', 'Fira Sans';
  --font-headings: 'Arial';

  /* Type scale */
  --text-h3: 18px;
  --text-h4: 8px;
  --text-a: 8px;
  --leading-a: 1px;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 100%;
  --radius-5: 12px;
  --radius-6: 25px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 768px;
  --breakpoint-2: 1024px;
  --max-width-1: 418px;
}

{
    "site": "sort-office.com",
    "source": "https://sitestyleguide.com/sort-office.com",
    "text": "#282828",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#282828",
            "rgb": [
                40,
                40,
                40
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Grey",
            "hex": "#808080",
            "rgb": [
                128,
                128,
                128
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0078FF",
            "rgb": [
                0,
                120,
                255
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF4828",
            "rgb": [
                255,
                72,
                40
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#0A85FF",
            "rgb": [
                10,
                133,
                255
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#026EE8",
            "rgb": [
                2,
                110,
                232
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00BAFF",
            "rgb": [
                0,
                186,
                255
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#F66B05",
            "rgb": [
                246,
                107,
                5
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#DB1611",
            "rgb": [
                219,
                22,
                17
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#107EB8",
            "rgb": [
                16,
                126,
                184
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#20A229",
            "rgb": [
                32,
                162,
                41
            ]
        },
        {
            "name": "Light Red",
            "hex": "#F54432",
            "rgb": [
                245,
                68,
                50
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Ubuntu, Fira Sans, Roboto, Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500,
                600
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Segoe UI as their main typeface

CodeCanyon

codecanyon.net · set in Segoe UI
Save
xbox.com

xbox.com · set in Segoe UI
Save
orbitz

orbitz.com · set in Segoe UI
Save
wikiquote.org

wikiquote.org · set in Segoe UI
Save

Websites whose lead colour is closest to SORT’s

Plarium

plarium.com · 2 days ago
Save
Dillard's

dillards.com · 5 days ago
Save
Facebook

messenger.com · 1 day ago
Save
Facebook

m.me · 4 days ago
Save

Captured from sort-office.com on 2 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by SORT; this guide describes the public website for reference.

SORTstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Black

Grey

Colours

Light Royal Blue

Orange Red

Dodger Blue

Deep Royal Blue

Deep Sky Blue

Chocolate

Deep Red

Steel Blue

Forest Green

Light Red

Red

Gradients

Dark mode

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run sort-office.com?

Also set in Segoe UI

CodeCanyon

xbox.com

orbitz

wikiquote.org

Similar colours

Plarium

Dillard's

Facebook

Facebook

Title &
description