Style Guide

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

#fbfbf6

bg-offwhite-1

Offwhite 2

#f5f5eb

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

#327B50

bg-green-4

Green 5

#1E4637

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

#FF9070

bg-orange-3

Orange 4

#EF6339

bg-orange-4

Neon Orange

#FF5F15

bg-neon-orange

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-orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-neon-yellow

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Typography

Headings

Base classes

heading-xxlarge

5rem

4.125rem

3.25rem

2.5rem

heading-large

4.375rem

3rem

2.25rem

2rem

heading-xlarge

4.5rem

heading-medium

2.25rem

heading-small

1.5rem

heading-xsmall

1.375rem

1.25rem

1.125rem

heading-xxsmall

1rem

Paragraphs

Base classes

p-large

1.375rem

1.0625rem

p-regular

1.0625rem

p-small

0.9375rem

Font-family

Base classes

Overview

ff-freigeist

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ff-freigeist-mono

Lorem ipsum dolor sit amet, consectetur

ff-work-sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Text alignments

Base classes

text-align-center

text align center

text-align-left

text align left

text-align-right

text align center

Letter spacing

Base classes

Properties

ls-0.5

letter-spacing: -0.05em

ls-0.3

letter-spacing: -0.03em

ls-0.2

letter-spacing: -0.02em

Line height

Base classes

Properties

lh-1.5

line-height: 1.5-

lh-1.2

line-height: 1.2-

lh-2

line-height: 2-

lh-1.5

line-height: 1.5-

Font style

Base classes

Properties

italic

font-style:italic

Button Classes

Base classes

Overview

button-primary

Explore for Free

button-primary

Meet Oyster

button-secondary

Read the full case study

Base + Combo Classes

button-primary

is-transparent

Explore for Free

button-primary

is-white

Explore for Free

button-primary

is-white

Watch the Product Video

button-primary

is-white-border

Explore for Free

button-primary

is-white-border

Meet Oyster

Margin [mb=margin-bottom]

Base classes

Margin on different breakpoints

mb-96

6rem

mb-72

4.5rem

mb-56

3.5rem

mb-48

3rem

mb-40

2.5rem

mb-32

2rem

mb-24

1.5rem

mb-20

1.25rem

mb-16

1rem

mb-12

.75rem

75rem

.75rem

mb-8

.5rem

Margin [margin-auto]

Base classes

Margin on different breakpoints

ml-auto

margin-left:auto

Aspect Ratio

Base classes

Description

ratio-landscape

/* aspect-ratio: 3/2 */

ratio-square

/* aspect-ratio: 1/1 */

ratio-widescreen

/* aspect-ratio: 16:9 */

ratio-netflix

/* aspect-ratio: 2:1 */

Padding

Padding on all sides

Base classes

padding on different breakpoints

p-4

.25rem

padding-all-side

p-8

.5rem

padding-all-side

p-16

1rem

padding-all-side

p-24

1.5rem

padding-all-side

p-32

2rem

padding-all-side

p-48

3rem

padding-all-side

p-56

3.5rem

padding-all-side

Padding

Padding on left and right

Base classes

padding on different breakpoints

px-4

.25rem

padding-left-right

px-8

.5rem

padding-left-right

px-16

1rem

padding-left-right

px-20

1.25rem

padding-left-right

px-24

1.5rem

padding-left-right

px-32

2rem

padding-left-right

px-48

3rem

padding-left-right

Padding

Padding top and bottom

Base classes

padding on different breakpoints

py-4

.25rem

padding-top-bottom

py-8

.5rem

padding-top-bottom

py-12

.75rem

padding-top-bottom

py-16

1rem

padding-top-bottom

py-20

1.25rem

padding-top-bottom

py-24

1.5rem

padding-top-bottom

py-32

2rem

padding-top-bottom

py-48

3rem

padding-top-bottom

py-64

4rem

padding-top-bottom

py-96

6rem

padding-top-bottom

Padding

Padding left

Base classes

padding on different breakpoints

pl-4

.25rem

padding-let

pl-8

.5rem

padding-let

pl-12

.75rem

padding-let

pl-16

1rem

padding-let

pl-20

1.25rem

padding-let

pl-24

1.5rem

padding-let

pl-32

32px

padding-let

Padding right

Base classes

padding on different breakpoints

pr-2

32px

padding-right

pr-4

32px

padding-right

pr-8

32px

padding-right

pr-12

32px

padding-right

Padding bottom

Base classes

padding on different breakpoints

pb-2

32px

padding-bottom

pb-4

.25rem

padding-bottom

pb-8

.5rem

padding-bottom

pb-12

.75rem

padding-bottom

pb-16

1rem

padding-bottom

pb-32

2rem

padding-bottom

pb-48

3rem

padding-bottom

pb-64

4rem

padding-bottom

pb-96

6rem

padding-bottom

pb-sm-0

6rem

padding-bottom

Padding top

Base classes

padding on different breakpoints

pt-4

32px

padding-top

pt-8

32px

padding-top

pt-12

32px

padding-top

pt-16

32px

padding-top

pt-20

32px

padding-top

pt-24

32px

padding-top

pt-32

32px

padding-top

pt-48

32px

padding-top

pt-64

32px

padding-top

pt-96

32px

padding-top

Section Padding

Base classes

padding on different breakpoints

s-py-128

8rem

4.5rem

s-py-96

6rem

4.5rem

s-py-64

4rem

4.5rem

s-py-32

2rem

4.5rem

Border

Base classes

Properties

b-0

border:0px

bt-0

border-top: 0px solid

bt-1

border-top: 1px solid

bt-2

border-top: 2px solid

bt-3

border-top: 3px solid

bt-4

border-top: 4px solid

bb-1

border-bottom: 1px solid

bb-2

border-bottom: 2px solid

bb-3

border-bottom: 3px solid

bb-4

border-bottom: 4px solid

b-gray-2

border-color:var(--gray--gray-2);

b-gray-3

border-color:var(--gray--gray-3);

b-gray-4

border-color:var(--gray--gray-4);

Border radius

Base classes

Properties

radius-0

border-radius:0px

radius-4

border-radius:4px

radius-8

border-radius:8px

radius-10

border-radius:10px

radius-12

border-radius:12px

radius-16

border-radius:16px

radius-20

border-radius:20px

radius-24

border-radius: 24px

radius-32

border-radius: 30px

radius-40

border-radius: 40px

radius-80

border-radius: 80px

Border radius: top

Base classes

Properties

radius-t-8

border-top-radius:8px

radius-t-20

border-top-radius:20px

radius-t-32

border-top-radius:32px

radius-top-40

border-top-radius:40px

radius-t-32

border-top-radius:32px

radius-t-80

border-top-radius:80px

radius-tl-32

border-top-left-radius:32px

radius-tl-40

border-top-left-radius:40px

radius-tl-80

border-top-left-radius:80px

radius-tr-32

border-top-right-radius:32px

radius-tr-40

border-top-right-radius:40px

radius-tl-32-md

border-top-right-radius:32px /* from tablet bp */

radius-tr-32-md

border-top-right-radius:32px /* from tablet bp */

Border radius: bottom

Base classes

Properties

radius-b-8

border-bottom-radius:8px

radius-b-20

border-bottom-radius:20px

radius-b-40

border-bottom-radius:40px

radius-bl-32

border-bottom-left-radius:32px

radius-bl-40

border-bottom-left-radius:40px

radius-br-32

border-bottom-right-radius:32px

radius-br-40

border-bottom-right-radius:40px

Border radius: left

Base classes

Properties

radius-l-8

border-left-radius:8px

radius-l-60

border-left-radius:60px

radius-l-32-md

border-left-radius:32px /* from tablet */

Border radius: right

Base classes

Properties

radius-r-32-md

border-right-radius:32px /* from tablet */

Z-index

Base classes

Properties

z-neg-1

z-index: -1

z-0

z-index: 0

z-1

z-index: 1

z-2

z-index: 2

z-3

z-index: 3

Position

Base classes

Properties

pos-rel

position: relative

relative

position: relative

absolute

position: absolute

pos-sticky

position:sticky

pos-fixed

position:fixed

pos-static

position:static

pos-full

top:0%, right:0%, bottom:0%, left:0%

inset-0

top:0%, right:0%, bottom:0%, left:0%

pos-tl

top:0%, left:0%

pos-tr

top:0%, right:0%

pos-bl

bottom:0%, left:0%;

pos-br

bottom: 0; right: 0;

pos-top-100

top:100px

sticky-t-0

top:0

Box shadow

Base classes

Properties

shadow-0

box-shadow:none

shadow1

box-shadow: 0px 6px 20px rgba(0,0,0,0.1);

Display

Base classes

Properties

d-flex

display:flex

d-grid

display:grid

d-block

display:block

d-inline-block

display:inline-block

d-inline

display:inline

d-none

d-none-md

display:none

d-none-sm

display:none

d-block-md

display:none

d-block-sm

display:none

Flex utility classes

Base classes

Properties

dir-col

flex-direction:column

justify-center

justify-cotents:center

justify-start

justify-cotents:flex-start

justify-end

justify-cotents:flex-end

justify-space-between

justify-contents:space-between

align-start

align-items:flex-start

align-end

align-items:flex-end

align-center

align-items:center

flex-wrap

flex-wrap:wrap

flex-no-wrap

flex-wrap:no-wrap

flex-grow-1

flex-grow: 1

Flex/grid gap classes

Base classes

Properties

gap-10

gap:1rem

gap-16

gap:1rem

gap-20

gap:1.25rem

gap-24

gap:1.5rem

gap-32

gap:2rem

gap-48

gap:3rem

gap-56

gap:3.5rem

gap-x-16

column-gap: 1rem

gap-x-20

column-gap: 2rem

gap-x-24

column-gap: 1.5rem

gap-x-32

column-gap: 2rem

gap-x-48

column-gap: 3rem

gap-y-16

row-gap: 1rem

gap-y-20

row-gap: 1.25rem

gap-y-24

row-gap: 1.5rem

gap-y-32

row-gap: 2rem

gap-y-48

row-gap: 3rem

Width

Base classes

Properties

w-full

width:100%

h-full

height:100%

hw-full

height, width:100%

w-1/2

width: 50%

w-1/3

width: 33.333333%;

w-1/4

width: 25%

Height

Base classes

Properties

h-full

height:100%

Patterns Library

Illustrations

Writings

Icons

Stock images

A person wearing headphones and a green blazer writes in a notebook, focused, with an open laptop, smartphone, and books on a wooden table in a cozy café.

Smiling woman with glasses in a yellow top holds a smartphone, seated indoors at a bright, modern space. Warm, friendly expression.

A woman in a beige blazer sits at a desk by a large window, smiling at her smartphone. A laptop is open in front of her, and the setting is calm and bright.

Man in glasses and blue sweater uses a tablet at a desk with a laptop, plant, and coffee mug. The scene conveys focus and productivity.

Individual using a laptop and sipping coffee, engaged with the Oyster HR platform.

Person holding a sheet of paper while talking on the phone.

A woman with long brown hair and a grey shirt smiles outdoors with greenery in the background.

Three women engaged in conversation in a modern office setting, discussing work-related topics.

A woman with short hair smiles while talking on a phone at a bright desk. She's writing notes, with a laptop and coffee cup nearby. Sunny and productive atmosphere.

Product UI

Integration options are displayed on a screen with logos of Workday, Zapier, BambooHR ATS, Greenhouse, QuickBooks Online, NetSuite, Xero, and Slack. A smiling man is pictured in the top right corner. The background is green with line illustrations, creating a modern, friendly tone.

QuickBooks expense management interface displayed on the Oyster HR platform, showcasing financial tracking features.

Bamboo HR and Bobb logos displayed, representing the Oyster HR platform for streamlined human resource management.

Office worker sitting at a desk, focusing on tasks, showcasing a productive workspace setup.

Smiling woman in a hijab at a desk, with text showing "Countries hired in: 12," "Engaged team members: 26," and "Pending hires: 10." Profiles of three diverse team members are shown.

Graphic titled 'Misclassification protection' features the 'Oyster Shell' service, offering financial coverage against penalties up to $50,000. Includes a checklist of covered expenses, with an orange abstract background conveying security and reliability.

Three smiling individuals are above icons labeled health care, dental care, paid time off, and more, set against a blue gradient background.

Collage on a green background with dotted world map. Three smiling individuals in circles are connected by arrows around "Work from Anywhere" text.

Background images

A variety of colorful pens and pencils, including red and blue, stand upright in a beige holder against a white background, conveying creativity.

A small globe coin bank sits on a white surface next to a leafy plant in a glass vase. A framed picture is partially visible in the background.

Three people engage with a city map, pointing and discussing routes. The mood is focused, with visible arms and hands showing dynamic interaction.

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-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-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-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-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

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

Grid - Align

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

align-start

align-center

align-end

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

Max-width

Base classes

blurb-10-col

blurb-8-col

blurb-6-col

blurb-4-col

blurb-3-col

max-full-sm