Style Guide

This Style Guide has been created for Bench.co. Its purpose is to create clear guidelines for the brand's digital presence and enable partners, contractors, and more with the right information & assets.

Brand Assets

Quickly access and download all relevant brand assets.

fonts

Circular Std

Font Preview

Download Font Files

View on Google Fonts

logo

Main Logo

Download PNG

Download SVG

Other Accepted Variations

colors

Click to copy

#062D60

Deep Sapphire - #062D60

Click to copy

#121316

Eerie Black - #121316

Click to copy

#0A5AC2

Electric Blue - #0A5AC2

Click to copy

#E0B152

Sunray Gold - #E0B152

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

HTML Heading Tags

HTML tags define default Heading styles.

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-xlarge

Sample text is being used as a placeholder for real text that is normally We take care of bookkeeping and tax for small business owners. And we do it in a way that’s never been done before—by pairing intuitive software with real, human bookkeepers. To us, it’s more than number crunching. It's giving entrepreneurs more time to focus on what they care about.

text-size-large

text-size-medium

We take care of bookkeeping and tax for small business owners. And we do it in a way that’s never been done before—by pairing intuitive software with real, human bookkeepers. To us, it’s more than number crunching. It's giving entrepreneurs more time to focus on what they care about.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

text-size-xsmall

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

button

Button Text

button

is-small

Button Text

button

is-large

Button Text

button

is-secondary

Button Text

button

is-text

Button Text

button

is-icon

Button Text

Colors

Manage recurring text and background colors.

Color Palette

Deep Sapphire - #062D60

Text Color/Eerie Black (#121316) - #121316

Core/Sunray Gold (#E0B152) - #E0B152

White - #FFFFFF

Electric Blue - #0A5AC2

Athens Grey - #F0F1F4

Little Dipper - #E4E6E9

Lunar Rays - #CACDD2

Tulle Grey - #8E9198

Slate Grey - #5A5E68

Ghost White - #F7F8FA

Yolk Yellow - #FCD269

Extended (Reds)/Opal Flame (#EB5747) - #EB5747

Extended (Greens)/Ocean Green (#3FA684) - #3FA684

Extended (Greens)/Pearl Green (#7ECEB3) - #7ECEB3

Extended (Greens)/Mint (#C7EADE) - #C7EADE

Extended (Greens)/Sea Foam (#ECF8F4) - #ECF8F4

Extended (Teals)/Tiffany Teal (#14B8B8) - #14B8B8

Extended (Teals)/Icy Blue (#A3F5F5) - #A3F5F5

Extended (Teals)/Artic (#D2F9F9) - #D2F9F9

Extended (Teals)/Calm Water (#E8FCFC) - #E8FCFC

Extended (Blues)/Midnight Blue (#084491) - #084491

Extended (Blues)/Sky Blue (#6EAAF7) - #6EAAF7

Extended (Blues)/Arc Light (#CEE2FC) - #CEE2FC

Extended (Blues)/Solitude Blue (#E7F1FE) - #E7F1FE

Extended (Purples)/Violet Storm (#6D6EB9) - #6D6EB9

Extended (Purples)/Orchid Purple (#BABADE) - #BABADE

Extended (Purples)/Lilac (#DDDDEE) - #DDDDEE

Extended (Purples)/Light Lavender (#EEEEF7) - #EEEEF7

Extended (Reds)/Rosy Outlook (#F5ABA3) - #F5ABA3

Extended (Reds)/Silk Pink (#FAD5D1) - #FAD5D1

Extended (Reds)/Blush (#FCEAE8) - #FCEAE8

Extended (Oranges)/Crayola Orange (#F8793A) - #F8793A

Extended (Oranges)/Peach Orange (#FCBC9C) - #FCBC9C

Extended (Oranges)/Cantaloupe (#FDDDCD) - #FDDDCD

Extended (Oranges)/Cotton Candy (#FEEEE6) - #FEEEE6

Extended (Yellows)/Banana Boat (#FBC337) - #FBC337

Extended (Yellows)/Caramel (#FDE19B) - #FDE19B

Extended (Yellows)/Sunlight (#FEF0CD) - #FEF0CD

Extended (Yellows)/Daffodil (#FEF7E6) - #FEF7E6

Extended (Greens)/Pistachio (#94C072) - #94C072

Extended (Greens)/Matcha Latte (#C9DFB8) - #C9DFB8

Extended (Greens)/Winter Green (#E4EFDC) - #E4EFDC

Extended (Greens)/Green Tea (#F1F7ED) - #F1F7ED

Cyber Space - #44474F

Text Colors

text-color-black

text-color-grey

text-color-white

Background Colors

background-color-sapphire

background-color-ghost

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

margin-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

margin-custom1

margin-custom2

margin-custom3

Other HTML Tags

HTML tags define default text styles.

All paragraphs

All links

All Links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

pointer-events-off

layer

div-square

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.