Copied Successfully!
Introduction

Welcome to the style guide for the Oyster website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across the entire website.

To ensure the site is responsive and adapts to all devices, some elements have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are different to those on mobile breakpoints etc. Be sure to check out the responsive alternatives by inspecting different viewports on the browser for the same element.

Colors
Background Colors

Gray

Gray 1

#fafafa

bg-gray-1

Gray 2

#f3f3f3

bg-gray-2

Gray 3

#dfdfdf

bg-gray-3

Gray 4

#727272

bg-gray-4

Gray 5

#464646

bg-gray-5

Gray 6

#323232

bg-gray-6

Off Whites

Offwhite 1

#f3f3f3

bg-offwhite-1

Offwhite 2

#f3f3f3

bg-offwhite-2

Yellow

Yellow-1

#fef1c2

bg-yellow-1

Yellow 2

#fce288

bg-yellow-2

Yellow 3

#f6d051

bg-yellow-3

Neon Yellow

#EFFF32

bg-neon-yellow

Purple

Purple 1

#F3EAF7

bg-purple-1

Purple 2

#DFCDEA

bg-purple-2

Purple 3

#B38DC8

bg-purple-3

Purple 4

#7E4B9B

bg-purple-4

Purple 5

#412850

bg-purple-5

Neon Purple

#CA6DFA

bg-neon-purple

Pink

Pink 1

#ffe8eb

bg-pink-1

Pink 2

#ffc9d4

bg-pink-2

Pink 3

#e48199

bg-pink-3

Pink 4

#ba4561

bg-pink-4

Pink 5

#4b1937

bg-pink-5

Neon Pink

#FF2995

bg-neon-pink

Green

Green 1

#e1f8de

bg-green-1

Green 2

#abe3aa

bg-green-2

Green 3

#5eba83

bg-green-3

Green 4

#ba4561

bg-green-4

Green 5

#4b1937

bg-green-5

Neon Green

#5EFF83

bg-neon-green

Blue

Blue 1

#DEF5F8

bg-blue-1

Blue 2

#A8D9E6

bg-blue-2

Blue 3

#55AAC3

bg-blue-3

Blue 4

#1B7B98

bg-blue-4

Blue 5

#0F3E4D

bg-blue-5

Neon Blue

#21CBFF

bg-neon-blue

Orange

Orange 1

#FEEDE2

bg-blue-1

Orange 2

#FFCBB8

bg-orange-2

Orange 3

#55AAC3

bg-orange-3

Orange 4

#EF6339

bg-orange-4

Neon Orange

#FF5F15

bg-neon-orange

Other Colors

Black

#FEEDE2

bg-blue-1

Success

#55AAC3

bg-success

Error

#F85B5B

bg-error
Colors
Text Colors

Base classes

text-black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-gray-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-gray-5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-gray-6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-gray-6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-purple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-pink

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-green

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-yellow

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

green 1

#e1f8de

text-gray-1

Gray 2

#f3f3f3

text-gray-2

Gray 3

#dfdfdf

text-gray-3

Gray 4

#727272

text-gray-4

Gray 5

#464646

text-gray-5

Gray 6

#323232

text-gray-6

Gray 7

#323232

text-gray-7
Typography
Headings

Base classes

heading-xxlarge

Heading

font-sizes:

80px

66px

52px

40px

heading-xlarge

Heading

font-sizes:

70px

58px

44px

36px

heading-large

Heading

font-sizes:

54px

48px

36px

32px

heading-medium

Heading

font-sizes:

36px

36px

24px

24px

heading-small

Heading

font-sizes:

24px

24px

20px

18px

heading-xsmall

Heading

font-sizes:

22px

20px

20px

18px

heading-xxsmall

Heading

font-sizes:

16px

14px

14px

14px

Max-width
Heading blurb

Base classes

blurb-10-col

Hire based on talent, not location

blurb-8-col

Hire based on talent, not location

blurb-6-col

Hire based on talent, not location

blurb-4-col

Oyster is on a mission to make it possible for companies everywhere to hire people anywhere

Paragraphs

Base classes

p-large

Paragraph

font-sizes:

80px

66px

52px

40px

p-large

Paragraph

font-sizes:

22px

20px

17px

17px

p-regular

Paragraph

font-sizes:

17px

16px

15px

15px

p-small

Paragraph 15px

font-sizes:

15px

14px

14px

14px

Text alignments

Base classes

text-align-center

text align center

text-align-left

text align left

text-align-right

text align center

Captions

Base classes

text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Classes for Font-family

Base classes

Overview

ff-freigeist-xwidebold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ff-freigeist-reg

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ff-freigeist-mono

Lorem ipsum dolor sit amet, consectetur  YYYY yyyy

ff-freigeist-var

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ff-work-sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Classes for font-weight

Base classes

fw-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

fw-semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

fw-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

fw-xbold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Classes

Base classes

Overview

button-primary

button-primary

Base + Combo Classes

button-primary

is-transparent

button-primary

is-white

button-primary

is-white

button-primary

is-white-border

button-primary

is-white-border

Margin Classes [mb=margin-bottom]

Base classes

Margin on different breakpoints

mb-96

96px

88px

56px

56px

mb-72

72px

64px

40px

40px

mb-56

56px

48px

40px

40px

mb-48

80px

66px

52px

40px

mb-40

80px

66px

52px

40px

mb-32

80px

66px

52px

40px

mb-24

80px

66px

52px

40px

mb-20

80px

66px

52px

40px

mb-16

80px

66px

52px

40px

mb-12

12px

66px

52px

40px

mb-8

80px

66px

52px

40px

cards padding

Base classes

padding on different breakpoints

p-32
p-24
px-24
px-32
py-48
py-32
py-24
py-96
Max width
To define our 12 column grid, all classes must precede with the initial class of "col"
Grid - All break point
To define our 12 column grid, all classes must precede with the initial class of "col"
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
Grid - Tablet
To define our 12 column grid, all classes must precede with the initial class of "col"
col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
Grid - Landscape
To define our 12 column grid, all classes must precede with the initial class of "col"
col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
Grid - Portrait
To define our 12 column grid, all classes must precede with the initial class of "col"
col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
Grid - Justify
To define our 12 column grid, all classes must precede with the initial class of "col"
Justify-end
Justify-center
Justify-start
Justify-space-between
Justify-space-between
Grid - Justify
To define our 12 column grid, all classes must precede with the initial class of "col"
Justify-end
Justify-center
Justify-start
Justify-space-between
Justify-space-between
Justify-space-between
Justify-space-between
Grid - Align
To define our 12 column grid, all classes must precede with the initial class of "col"
align-start
align-center
align-end
Grid - margin classes
To define our 12 column grid, all classes must precede with the initial class of "col"
offset-left-1
offset-left-2
offset-left-3
offset-left-4
offset-right-1
offset-right-2
offset-right-3
offset-right-4
md-no-offset
sm-no-offset
xs-no-offset
Flex - Order - Desktop
To define our 12 column grid, all classes must precede with the initial class of "col"
order-first
order-last
order-0
order-1
order-2
order-3
order-4
Flex - Order - md
To define our 12 column grid, all classes must precede with the initial class of "col"
order-md-first
order-md-last
order-md-0
order-md-1
order-md-2
order-md-3
order-md-4
Flex - Order - sm
To define our 12 column grid, all classes must precede with the initial class of "col"
order-sm-first
order-sm-last
order-sm-0
order-sm-1
order-sm-2
order-sm-3
order-sm-4
Class Structure
Core Structure Classes

Defined core structure classes we can use on all pages.

Page Wrapper
main wrapper
s-py-128
s-py-96
s-py-64
c-base
Margin

Utility spacing system - margin classes.

mb-8
mb-16
mb-20
mb-24
mb-32
mb-40
mb-48
mb-56
mb-72
mb-96
Text styles

Utility text sizes classes

text-style-italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text-style-muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-link
text-style-2lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolori Lorem ipsum dolori lorem

    We work directly with health insurance carriers to help teams access more robust plans and coverage typically only available in the large group market.

Paddings

Utility spacing system - padding classes.

Padding-bottom-xs
Padding-bottom-sm
Padding-bottom-md
Padding-bottom-lg
Padding-bottom-xl
Padding-bottom-xxl
12 Column Grid System

A Responsive Flexbox grid system based on a 12 column layout.

Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Grid - All break point

To define our 12 column grid, all classes must precede with the initial class of "col"

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
Grid - Tablet

To define our 12 column grid, all classes must precede with the initial class of "col"

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
Grid - Landscape

To define our 12 column grid, all classes must precede with the initial class of "col"

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
Grid - Portrait

To define our 12 column grid, all classes must precede with the initial class of "col"

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
Grid - Justify

To define our 12 column grid, all classes must precede with the initial class of "col"

Justify-end
Justify-center
Justify-start
Justify-space-between
Justify-space-between
Grid - Align

To define our 12 column grid, all classes must precede with the initial class of "col"

align-start
align-center
align-end
Grid - margin classes

To define our 12 column grid, all classes must precede with the initial class of "col"

offset-left-1
offset-left-2
offset-left-3
offset-left-4
offset-right-1
offset-right-2
offset-right-3
offset-right-4
md-no-offset
sm-no-offset
xs-no-offset
Flex - Order - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

order-first
order-last
order-0
order-1
order-2
order-3
order-4
Flex - Order - md

To define our 12 column grid, all classes must precede with the initial class of "col"

order-md-first
order-md-last
order-md-0
order-md-1
order-md-2
order-md-3
order-md-4
Flex - Order - sm

To define our 12 column grid, all classes must precede with the initial class of "col"

order-sm-first
order-sm-last
order-sm-0
order-sm-1
order-sm-2
order-sm-3
order-sm-4
Copied Successfully!

BUTTON SIZING & MAX CHARACTER

SAMPLE COPY

Contact

Login

Get Started

Get Notified

Download Guide

Register Now

Learn More

Meet Oyster [play icon]

Watch the Product Video [play icon]

Sign Up Now

Speak to an Expert

Get a Custom Demo

Watch the Recording

Get the Recording

Add to Calendar

Button Classes

Base classes

Component name

Overview

button-primary

button-primary

button-primary

button-primary--icon

button-secondary

button-secondary

Base + Combo Classes

button-primary

is-transparent

button-primary

is-green

button-primary

is-dark-green

button-primary

is-white

button-primary

is-white

button-primary

is-border-white

button-primary

is-border-white