What font does Work & Co use?

Work & Co’s website uses two typefaces: HelveticaNowDisplay (headings), self-hosted; adobe-garamond-pro (body text), adobe Fonts.

What are Work & Co’s brand colours?

The main colours on work.co are Royal Blue (#126FE0), Light Red (#FF3029), Blue (#4A3DD2), Deep Red (#E72200), Gold (#FFCB01) and Crimson (#DB2223).

What colour is Work & Co’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Work & Co’s logo from?

The logo shown in this guide was found on work.co’s homepage. For official logo files and usage rules, check Work & Co’s own brand or press page.

Is this Work & Co’s official style guide?

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

Work & Co Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Work & Co | Digital Product Agency; ● 34 / 60 characters
Meta description: Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and experiences.; ● 148 / 160 characters
Site name: Work & Co
og:title: Work & Co | Digital Product Agency
og:description: Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and experiences.
Language: en
Theme colour: #000000

In search results

Work & Cohttps://work.co/

Work & Co | Digital Product Agency

Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and experiences.

When shared

No og:image, so no picture

work.co

Work & Co | Digital Product Agency

Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and develo…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 1239 × 309.

Logo

On white

On black

On Royal Blue

Favicons

7 found

700 px · SVG mask-icon
512 px · PNG manifest
192 px · PNG manifest
180 px · PNG apple-touch-icon
48 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon

Work & Co | Digital Product Agency

Light browser tab

Work & Co | Digital Product Agency

Dark browser tab

Back to top ↑

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

Colour

Balance

How much each colour is used

Black 35.7%
White 34%
Royal Blue 7.1%
Grey 3.9%
Light Red 3.9%
Off White 3.7%
Blue 3.5%
Deep Red 3.4%
Gold 3.4%
Crimson 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

Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · inline style on <path>, .Page-hasLightOverlay .AIHubNav-link:hover:not(.AIHubNav-link--disabled) .AIHubN
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Text, background, graphic · inline style on <path>, .Page-hasDarkOverlay .AIHubNav-link:hover:not(.AIHubNav-link--disabled) .AIHubNa
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 54

On text
4.62:1 AA

On white
4.54:1 AA

Text, background, graphic · .FooterTitle--grayDark, .BlockTitle--grayDark
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
17.94:1 AAA

On white
1.17:1 Fail

Text, background, border · .FooterTitle--grayLight, .BlockTitle--grayLight

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
92 50 0 12

On text
4.38:1 AA large

On white
4.80:1 AA

Text, background, graphic · .FooterTitle--ai-blue, .BlockTitle--ai-blue
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 81 84 0

On text
5.71:1 AA

On white
3.68:1 AA large

Text, background, graphic · .FooterTitle--red, .BlockTitle--red
Blue

HEX

RGB

HSL

OKLCH

CMYK
65 71 0 18

On text
2.89:1 Fail

On white
7.27:1 AAA

Text, background, graphic · .FooterTitle--purple, .BlockTitle--purple
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 85 100 9

On text
4.63:1 AA

On white
4.54:1 AA

Text, background, graphic · .FooterTitle--expertise-red, .BlockTitle--expertise-red
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 20 100 0

On text
13.79:1 AAA

On white
1.52:1 Fail

Text, background, graphic · .FooterTitle--yellow, .BlockTitle--yellow
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 84 84 14

On text
4.27:1 AA large

On white
4.92:1 AA

Text, border, graphic · [data-whatinput=keyboard] .CaseStudies-link:focus .ListLink-title, .no-touchevents .CaseStudies-link:hover .ListLink-title

Back to top ↑

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.

HelveticaNowDisplay

Aa 100 Aa 900

HelveticaNowDisplay

Self-hosted · weights 100, 200, 300, 400, 500, 700, 800, 900 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

adobe-garamond-pro

Adobe Fonts · weights 400, 500, 700 · body, headings, buttons · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS · root 10 px

Heading 1 2em · 20 px

Work & Co

Heading 2 2rem · 20 px weight 500 · HelveticaNowDisplay

Work & Co | Digital Product Agency

Body 1.6rem · 16 px adobe-garamond-pro

Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and exp…

Paragraph 1.6rem · 16 px / 2.4rem weight 400 · HelveticaNowDisplay

Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and exp…

Small 80%

Work & Co is a digital product agency. We drive tangible business impact through strategy, design, and development of new platforms and exp…

Button 100% / 1.15 none

Get started

Sizes in use

Most common across the site

32pxline 3.8rem · 5 rules
29pxline 3.8rem · 6 rules
24pxline 1.2 · 13 rules
22pxline 3.2rem · 5 rules
20pxline 3rem · 16 rules
18pxline 2.4rem · 22 rules
16pxline 2.4rem · 29 rules
14pxline 2.4rem · 17 rules

Back to top ↑

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

.Button · #FFFFFF

Corner radius

50px · 7×
50% · 5×
.4rem · 2×
10rem · 2×
100% · 2×
.2rem · 1×

Shadows

0 2px 20px rgba(0,0,0,.14)
0 0 2rem rgba(0,0,0,.3)

Back to top ↑

Layout

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

Grid

Breakpoints

600

749

750

1024

1099

1100

1799

1800

On a scale of 0 to 1800 px.

Content widths (max-width)

1000 px

720 px

656 px

504 px

400 px

320 px

Back to top ↑

Notes

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

Notes

● FineThe title is 34 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

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

Questions

What font does Work & Co use?: Work & Co’s website uses two typefaces: HelveticaNowDisplay (headings), self-hosted; adobe-garamond-pro (body text), adobe Fonts.
What are Work & Co’s brand colours?: The main colours on work.co are Royal Blue (#126FE0), Light Red (#FF3029), Blue (#4A3DD2), Deep Red (#E72200), Gold (#FFCB01) and Crimson (#DB2223).
What colour is Work & Co’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Work & Co’s logo from?: The logo shown in this guide was found on work.co’s homepage. For official logo files and usage rules, check Work & Co’s own brand or press page.
Is this Work & Co’s official style guide?: No. SiteStyleGuide made it from work.co’s public web pages on 27 October 2026, and isn’t affiliated with Work & Co. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

work-co-tokens.css

Download

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

/* work.co design tokens, from SiteStyleGuide (https://sitestyleguide.com/work.co) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-black: #000000;
  --colour-white: #FFFFFF;
  --colour-grey: #767676;
  --colour-off-white: #EDEDED;
  --colour-royal-blue: #126FE0;
  --colour-light-red: #FF3029;
  --colour-blue: #4A3DD2;
  --colour-deep-red: #E72200;
  --colour-gold: #FFCB01;
  --colour-crimson: #DB2223;

  /* Typefaces */
  --font-headings: 'HelveticaNowDisplay', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'HelveticaNowDisplay', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-body: 'adobe-garamond-pro', serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h2: 2rem;
  --text-body: 1.6rem;
  --text-p: 1.6rem;
  --leading-p: 2.4rem;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;

  /* Shape */
  --radius-1: 50px;
  --radius-2: 50%;
  --radius-3: .4rem;
  --radius-4: 10rem;
  --radius-5: 100%;
  --radius-6: .2rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 600px;
  --breakpoint-2: 749px;
  --breakpoint-3: 750px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1099px;
  --breakpoint-6: 1100px;
  --breakpoint-7: 1799px;
  --breakpoint-8: 1800px;
  --max-width-1: 1000px;
  --max-width-2: 720px;
  --max-width-3: 656px;
  --max-width-4: 504px;
  --max-width-5: 400px;
  --max-width-6: 320px;
}

{
    "site": "work.co",
    "source": "https://sitestyleguide.com/work.co",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Grey",
            "hex": "#767676",
            "rgb": [
                118,
                118,
                118
            ]
        },
        {
            "name": "Off White",
            "hex": "#EDEDED",
            "rgb": [
                237,
                237,
                237
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#126FE0",
            "rgb": [
                18,
                111,
                224
            ]
        },
        {
            "name": "Light Red",
            "hex": "#FF3029",
            "rgb": [
                255,
                48,
                41
            ]
        },
        {
            "name": "Blue",
            "hex": "#4A3DD2",
            "rgb": [
                74,
                61,
                210
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#E72200",
            "rgb": [
                231,
                34,
                0
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFCB01",
            "rgb": [
                255,
                203,
                1
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DB2223",
            "rgb": [
                219,
                34,
                35
            ]
        }
    ],
    "fonts": [
        {
            "name": "HelveticaNowDisplay",
            "stack": "HelveticaNowDisplay, Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                700,
                800,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "adobe-garamond-pro",
            "stack": "adobe-garamond-pro, serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Adobe Fonts"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run work.co?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/work.co" title="Work &amp; Co style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Work & Costyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Black

White

Grey

Off White

Colours

Royal Blue

Light Red

Blue

Deep Red

Gold

Crimson

HelveticaNowDisplay

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Burton Snowboards

Apple

ASUS Global

Waze

Google

Work & Costyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Black

White

Grey

Off White

Colours

Royal Blue

Light Red

Blue

Deep Red

Gold

Crimson

HelveticaNowDisplay

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run work.co?

Also set in HelveticaNowDisplay

Burton Snowboards

Similar colours

Apple

ASUS Global

Waze

Google

Title &
description