What font does Worksmiths use?

Worksmiths’s website uses three typefaces: Segoe UI (body text), a system font; Arial (headings), a system font; Roboto, google Fonts.

What are Worksmiths’s brand colours?

The main colours on worksmiths.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 Worksmiths’s text and background?

Body text is #282828 on a #FFFFFF background.

Where is Worksmiths’s logo from?

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

Is this Worksmiths’s official style guide?

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

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

Unofficial style guide

Worksmithsstyle guide

Worksmiths’s website (worksmiths.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 22 October 2026.

Website: worksmiths.com
Typefaces: Segoe UI, Arial, Roboto
Palette: 4 neutrals, 11 colours, 2 gradients
Captured: 22 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the worksmiths.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: Worksmiths - Branding Studio, London; ● 36 / 60 characters
Meta description: Worksmiths is a branding studio specialising in people-powered brands. London-based, taking assignments worldwide.; ● 114 / 160 characters
Site name: Worksmiths
og:title: Worksmiths.com
og:description: A branding studio specialising in people-powered brands. London-based, taking assignments worldwide.

In search results

Worksmithshttps://worksmiths.com/

Worksmiths - Branding Studio, London

Worksmiths is a branding studio specialising in people-powered brands. London-based, taking assignments worldwide.

When shared

worksmiths.com

Worksmiths.com

A branding studio specialising in people-powered brands. London-based, taking assignments worldwide.

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

Worksmiths - Branding Studio, London

Light browser tab

Worksmiths - Branding Studio, London

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 45.6%
Black 12.5%
Charcoal 11.2%
Light Royal Blue 7.3%
Grey 6.5%
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
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.42:1 Fail

On white
21.00:1 AAA

Background, text · html, .arrow-color-selector .color-clip-wrapper .color-wrapper .color.black
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
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)

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

Aa 400

Roboto

Google Fonts · weights 400

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

Type scale

From the site’s CSS

Heading 3 18px weight 700 · Arial

Worksmiths - Branding Studio, London

Heading 4 8px uppercase · Arial

Worksmiths - Branding Studio, London

Body — / 1 Segoe UI

Worksmiths is a branding studio specialising in people-powered brands. London-based, taking assignments worldwide.

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 36 characters, short enough to show in full in search results.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).
▲ 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 Worksmiths use?: Worksmiths’s website uses three typefaces: Segoe UI (body text), a system font; Arial (headings), a system font; Roboto, google Fonts.
What are Worksmiths’s brand colours?: The main colours on worksmiths.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 Worksmiths’s text and background?: Body text is #282828 on a #FFFFFF background.
Where is Worksmiths’s logo from?: The logo shown in this guide was found on worksmiths.com’s homepage. For official logo files and usage rules, check Worksmiths’s own brand or press page.
Is this Worksmiths’s official style guide?: No. SiteStyleGuide made it from worksmiths.com’s public web pages on 22 October 2026, and isn’t affiliated with Worksmiths. 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

worksmiths-com-tokens.css

Download

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

/* worksmiths.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/worksmiths.com) */
:root {
  /* Colours */
  --text: #282828;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-charcoal: #282828;
  --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';
  --font-other: 'Roboto';

  /* 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": "worksmiths.com",
    "source": "https://sitestyleguide.com/worksmiths.com",
    "text": "#282828",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#282828",
            "rgb": [
                40,
                40,
                40
            ]
        },
        {
            "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"
        },
        {
            "name": "Roboto",
            "stack": "Roboto",
            "weights": [
                400
            ],
            "source": "Google Fonts"
        }
    ]
}

Other websites using Segoe UI as their main typeface

S

SORT

sort-office.com · set in Segoe UI
Save
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

Websites whose lead colour is closest to Worksmiths’s

Plarium

plarium.com · 2 days ago
Save
Dillard's

dillards.com · 6 days ago
Save
Facebook

messenger.com · 2 days ago
Save
Facebook

m.me · 4 days ago
Save

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

Worksmithsstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

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

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run worksmiths.com?

Also set in Segoe UI

SORT

CodeCanyon

xbox.com

orbitz

Similar colours

Plarium

Dillard's

Facebook

Facebook

Title &
description