What font does Bench use?

Bench’s website uses two typefaces: Circularstd (headings), served from cdn.prod.website-files.com; Circularstd Book (body text), served from cdn.prod.website-files.com.

What are Bench’s brand colours?

The main colours on bench.co are Light Royal Blue (#0A5AC2), Light Midnight Blue (#062D60), Dark Slate Blue (#084491), Medium Sea Green (#3FA684), Gold (#FCD269) and Golden Rod (#E0B152).

What colour is Bench’s text and background?

Body text is #121316 on a #FFFFFF background.

Where is Bench’s logo from?

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

Is this Bench’s official style guide?

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

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

Unofficial style guide

Benchstyle guide

Bench’s website (bench.co) sets its headings in Circularstd and its body text in Circularstd Book. Its palette is led by Light Royal Blue (#0A5AC2), Light Midnight Blue (#062D60) and Dark Slate Blue (#084491), with #121316 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: bench.co
Typefaces: Circularstd, Circularstd Book
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the bench.co homepage on a desktop screen — Screenshot of bench.co on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the bench.co 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: Online Bookkeeping Done for You | Bench; ● 39 / 60 characters
Meta description: Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See how Bench works.; ● 153 / 160 characters
og:title: Online Bookkeeping Done for You | Bench
og:description: Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See how Bench works.
Language: en

In search results

Benchhttps://www.bench.co/

Online Bookkeeping Done for You | Bench

Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See how Bench works.

When shared

bench.co

Online Bookkeeping Done for You | Bench

Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 3…

Logo & favicons

Found as: image in the header. PNG, 1952 × 306.

Logo

On white

On black

On Light Royal Blue

Favicons

2 found

256 px · PNG apple-touch-icon
32 px · PNG shortcut icon

Online Bookkeeping Done for You | Bench

Light browser tab

Online Bookkeeping Done for You | Bench

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

Colour

Balance

How much each colour is used

White 32.7%
Near Black 19.3%
Cool Light Grey 13%
Light Royal Blue 10%
Light Midnight Blue 6.7%
Cool Dark Grey 6.4%
Dark Slate Blue 3.7%
Medium Sea Green 3.3%
Gold 1%
Golden Rod 0.8%
Papaya Whip 0.7%
Sea Green 0.7%
Light Steel Blue 0.7%
Deep Midnight Blue 0.5%
Deep Royal Blue 0.4%
Light Cyan 0.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
18.58:1 AAA

On white
—

Text, background, border · .nav-dropdown_menu, .nav-dropdown_link
Near Black

HEX

RGB

HSL

OKLCH

CMYK
18 14 0 91

On text
—

On white
18.58:1 AAA

Text, background, border · --bp-ink, body
Cool Light Grey

HEX

RGB

HSL

OKLCH

CMYK
4 2 0 18

On text
11.65:1 AAA

On white
1.59:1 Fail

Background, text, border · .button.is-tertiary.is-blue, .button-pricing-secondary.max-width-full
Cool Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
13 10 0 59

On text
2.86:1 Fail

On white
6.49:1 AA

Text, border, background · --bp-muted, .button.is-text

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
95 54 0 24

On text
2.88:1 Fail

On white
6.45:1 AA

Background, text, border · --bp-blue, .button-2
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
94 53 0 62

On text
1.37:1 Fail

On white
13.53:1 AAA

Background, text, border · .button.is-nav, .button.is-nav.is-secondary
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
94 53 0 43

On text
1.99:1 Fail

On white
9.35:1 AAA

Background, text, border · .heading-style-h2.heading-h2-taxseason, .button.is-nav:hover
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
62 0 20 35

On text
6.19:1 AA

On white
3.00:1 AA large

Background, text, border · .button.is-nav.is-new, .monthly_bookkeeping_body_heading.background-color-ocean-green
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 17 58 1

On text
12.88:1 AAA

On white
1.44:1 Fail

Background, text, border · .button.is-link.text-color-yolk-yellow, .pricing_plan-cap
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 21 63 12

On text
9.36:1 AAA

On white
1.98:1 Fail

Background, text, border · .monthly_bookkeeping_body_heading.background-color-sunray-gold, .heading-style-paidlp
Papaya Whip

HEX

RGB

HSL

OKLCH

CMYK
0 6 19 0

On text
16.42:1 AAA

On white
1.13:1 Fail

Background · .section_header.background-color--fef0cd, .color-swatch-extended-yellows-sunlight-fef0cd
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
62 0 29 51

On text
3.71:1 AA large

On white
5.00:1 AA

Text, background, border · .button.is-nav.is-new:hover, .button.is-hover-dark-green:hover
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
18 10 0 1

On text
14.07:1 AAA

On white
1.32:1 Fail

Background, text · .resources-card_image-wrapper, .color-swatch-extended-blues-arc-light-cee2fc
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
67 100 0 74

On text
1.02:1 Fail

On white
18.87:1 AAA

Text · .heading-style-h3.text-color-dark-blue, .f-h5-heading
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 58 0 26

On text
2.55:1 Fail

On white
7.29:1 AAA

Text, border · .nav-link:focus-visible, .nav-dropdown-toggle:focus-visible
Light Cyan

HEX

RGB

HSL

OKLCH

CMYK
15 0 5 8

On text
14.38:1 AAA

On white
1.29:1 Fail

Background, border · .section_col-2x.backgrounf-color-mint, .color-swatch-extended-greens-mint-c7eade

Gradients

linear-gradient(#fff0,#0073e61a)
linear-gradient(#062d601a,#fff)
linear-gradient(180deg,#062d6020%,white 20%)

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.

Circularstd

Aa 400 Aa 700

Circularstd

Served from cdn.prod.website-files.com · weights 400, 500, 700 · buttons, headings · shown in a stand-in if you don’t have it

Aa 400

Circularstd Book

Served from cdn.prod.website-files.com · weights 400 · body, headings · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 3rem · 48 px / 1.2 weight 700 · Circularstd

Bench

Heading 2 2.5rem · 40 px / 1.2 weight 700 · Circularstd

Online Bookkeeping Done for You | Bench

Heading 3 2rem · 32 px / 1.2 weight 700

Online Bookkeeping Done for You | Bench

Heading 4 1.5rem · 24 px / 1.3 weight 700

Online Bookkeeping Done for You | Bench

Heading 5 1.25rem · 20 px / 1.2 weight 700

Online Bookkeeping Done for You | Bench

Heading 6 1rem · 16 px / 1.5 weight 700

Online Bookkeeping Done for You | Bench

Body 1rem · 16 px / 1.5 weight 400 · Circularstd Book

Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See ho…

Paragraph 1.125rem · 18 px weight 400 · Circularstd Book

Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See ho…

Small 80%

Bench pairs you with a dedicated bookkeeper and simple software, so your books get done for you. Trusted by 35,000+ U.S. businesses. See ho…

Sizes in use

Most common across the site

24pxline 1.2 · 33 rules
20pxline 1.6 · 43 rules
18pxline 1.6 · 60 rules
16pxline 1 · 75 rules
14pxline 1 · 253 rules
13pxline 1.6 · 23 rules
12pxline 20px · 64 rules
11pxline 1.2 · 32 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

.button_book-a-call_tax · #062D60 · radius .5em

Corner radius

.5em · 77×
8px · 60×
50% · 58×
12px · 27×
.5rem · 16×
1rem · 14×

Shadows

0 1px 2px #1213160f
1px 1px 20px #00000021
0 2px 5px #0003
0 4px 24px #96a3b514

Layout

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

Grid

Breakpoints

280

479

480

767

768

991

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1200 px

1120 px

1080 px

940 px

768 px

728 px

Notes

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

Notes

● FineThe title is 39 characters, short enough to show in full in search results.

Questions

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

Questions

What font does Bench use?: Bench’s website uses two typefaces: Circularstd (headings), served from cdn.prod.website-files.com; Circularstd Book (body text), served from cdn.prod.website-files.com.
What are Bench’s brand colours?: The main colours on bench.co are Light Royal Blue (#0A5AC2), Light Midnight Blue (#062D60), Dark Slate Blue (#084491), Medium Sea Green (#3FA684), Gold (#FCD269) and Golden Rod (#E0B152).
What colour is Bench’s text and background?: Body text is #121316 on a #FFFFFF background.
Where is Bench’s logo from?: The logo shown in this guide was found on bench.co’s homepage. For official logo files and usage rules, check Bench’s own brand or press page.
Is this Bench’s official style guide?: No. SiteStyleGuide made it from bench.co’s public web pages on 26 October 2026, and isn’t affiliated with Bench. 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

bench-co-tokens.css

Download

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

/* bench.co design tokens, from SiteStyleGuide (https://sitestyleguide.com/bench.co) */
:root {
  /* Colours */
  --text: #121316;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #121316;
  --colour-cool-light-grey: #CACDD2;
  --colour-cool-dark-grey: #5A5E68;
  --colour-light-royal-blue: #0A5AC2;
  --colour-light-midnight-blue: #062D60;
  --colour-dark-slate-blue: #084491;
  --colour-medium-sea-green: #3FA684;
  --colour-gold: #FCD269;
  --colour-golden-rod: #E0B152;
  --colour-papaya-whip: #FEF0CD;
  --colour-sea-green: #2F7D59;
  --colour-light-steel-blue: #CEE2FC;
  --colour-deep-midnight-blue: #160042;
  --colour-deep-royal-blue: #0050BD;
  --colour-light-cyan: #C7EADE;
  --gradient-1: linear-gradient(#fff0,#0073e61a);
  --gradient-2: linear-gradient(#062d601a,#fff);
  --gradient-3: linear-gradient(180deg,#062d6020%,white 20%);

  /* Typefaces */
  --font-buttons: 'Circularstd', sans-serif;
  --font-headings: 'Circularstd', sans-serif;
  --font-body: 'Circularstd Book', sans-serif;

  /* Type scale */
  --text-h1: 3rem;
  --leading-h1: 1.2;
  --text-h2: 2.5rem;
  --leading-h2: 1.2;
  --text-h3: 2rem;
  --leading-h3: 1.2;
  --text-h4: 1.5rem;
  --leading-h4: 1.3;
  --text-h5: 1.25rem;
  --leading-h5: 1.2;
  --text-h6: 1rem;
  --leading-h6: 1.5;
  --text-body: 1rem;
  --leading-body: 1.5;
  --text-p: 1.125rem;
  --text-small: 80%;

  /* Shape */
  --radius-1: .5em;
  --radius-2: 8px;
  --radius-3: 50%;
  --radius-4: 12px;
  --radius-5: .5rem;
  --radius-6: 1rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 280px;
  --breakpoint-2: 479px;
  --breakpoint-3: 480px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 991px;
  --breakpoint-7: 1440px;
  --max-width-1: 1200px;
  --max-width-2: 1120px;
  --max-width-3: 1080px;
  --max-width-4: 940px;
  --max-width-5: 768px;
  --max-width-6: 728px;
}

{
    "site": "bench.co",
    "source": "https://sitestyleguide.com/bench.co",
    "text": "#121316",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#121316",
            "rgb": [
                18,
                19,
                22
            ]
        },
        {
            "name": "Cool Light Grey",
            "hex": "#CACDD2",
            "rgb": [
                202,
                205,
                210
            ]
        },
        {
            "name": "Cool Dark Grey",
            "hex": "#5A5E68",
            "rgb": [
                90,
                94,
                104
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0A5AC2",
            "rgb": [
                10,
                90,
                194
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#062D60",
            "rgb": [
                6,
                45,
                96
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#084491",
            "rgb": [
                8,
                68,
                145
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#3FA684",
            "rgb": [
                63,
                166,
                132
            ]
        },
        {
            "name": "Gold",
            "hex": "#FCD269",
            "rgb": [
                252,
                210,
                105
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#E0B152",
            "rgb": [
                224,
                177,
                82
            ]
        },
        {
            "name": "Papaya Whip",
            "hex": "#FEF0CD",
            "rgb": [
                254,
                240,
                205
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#2F7D59",
            "rgb": [
                47,
                125,
                89
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#CEE2FC",
            "rgb": [
                206,
                226,
                252
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#160042",
            "rgb": [
                22,
                0,
                66
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0050BD",
            "rgb": [
                0,
                80,
                189
            ]
        },
        {
            "name": "Light Cyan",
            "hex": "#C7EADE",
            "rgb": [
                199,
                234,
                222
            ]
        }
    ],
    "fonts": [
        {
            "name": "Circularstd",
            "stack": "Circularstd, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "Circularstd Book",
            "stack": "Circularstd Book, sans-serif",
            "weights": [
                400
            ],
            "source": "Served from cdn.prod.website-files.com"
        }
    ]
}

Websites whose lead colour is closest to Bench’s

gmail.com

gmail.com · 13 hours ago
Save
google.rs

google.rs · 23 hours ago
Save
google.com.my

google.com.my · 23 hours ago
Save
google.se

google.se · 23 hours ago
Save

Captured from bench.co on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Bench; this guide describes the public website for reference.

Benchstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Cool Light Grey

Cool Dark Grey

Colours

Light Royal Blue

Light Midnight Blue

Dark Slate Blue

Medium Sea Green

Gold

Golden Rod

Papaya Whip

Sea Green

Light Steel Blue

Deep Midnight Blue

Deep Royal Blue

Light Cyan

Gradients

Circularstd

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run bench.co?

Similar colours

gmail.com

google.rs

google.com.my

google.se

Title &
description