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

Other Colors

Black

#FEEDE2

bg-blue-1

Success

#55AAC3

bg-success

Error

#F85B5B

bg-error

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

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.

Margin [mb=margin-bottom]

Base classes

Margin on different breakpoints

mb-96

96px

88px

56px

mb-72

72px

64px

40px

mb-56

56px

48px

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

Padding

Base classes

padding on different breakpoints

p-4

4px

p-8

8px

p-16

16px

32px

p-24

32px

p-32

32px

p-48

32px

p-56

32px

px-8

32px

px-16

32px

px-20

32px

px-24

32px

px-32

32px

px-48

32px

px-64

32px

px-96

32px

py-2

32px

py-4

32px

py-8

32px

py-12

32px

py-16

32px

py-20

32px

py-24

32px

py-32

32px

py-48

32px

py-64

32px

py-96

32px

pl-2

32px

pl-4

32px

pl-8

32px

pl-12

32px

pl-16

32px

pl-20

32px

pl-24

32px

pl-32

32px

pl-48

32px

pl-64

32px

pt-2

32px

pt-4

32px

pt-8

32px

pt-12

32px

pt-16

32px

pt-20

32px

pt-24

32px

pt-32

32px

pt-48

32px

pt-64

32px

pr-2

32px

pr-4

32px

pr-8

32px

pr-12

32px

pr-16

32px

pr-20

32px

pr-24

32px

pr-32

32px

Section Padding

Base classes

padding on different breakpoints

s-py-128

128px

72px

s-py-96

96px

72px

s-py-64

64px

72px

s-py-32

32px

72px

Letter spacing

Base classes

Properties

ls-0.5

letter-spacing: -0.05em

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

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: .5rem

radius-16

border-radius:1rem

radius-24

border-radius: 1.5rem

radius-40

border-radius: 2rem

radius-80

border-radius: 5rem

radius-t-0

border-top-left-radius: 0rem

border-top-right-radius: 0rem

radius-b-0

border-bottom-left: 0rem

radius-t-4

border-top-left-radius: 4px

border-top-right-radius: 4px

radius-t-16

border-top-left-radius: 1rem

border-top-right-radius: 1rem

radius-t-20

border-top-left-radius: 1.25rem

border-top-right-radius: 1.25rem

radius-t-24

border-top-left-radius: 1.5rem

border-top-right-radius: 1.5rem

radius-t-40

border-top-left-radius: 2.5rem

border-top-right-radius: 2.5rem

radius-t-40

border-top-left-radius: 5rem

border-top-right-radius: 5rem

radius-80

border-radius: 1.25rem

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

pos-abs

position: absolute

pos-sticky

position:sticky

pos-fixed

position:fixed

pos-static

position:static

pos-full

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

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

Flex utility classes

Base classes

Properties

dir-col

flex-direction:column

justify-center

justify-cotents:center

justify-start

justify-cotents:center

justify-end

justify-cotents:center

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

flex-grow: 0

flex-shrink-1

flex-shrik: 1

order-1

order:1

order-none

order: 0

Flex/grid gap classes

Base classes

Properties

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%

Typography

Headings

Base classes

heading-xxlarge

font-sizes:

80px

66px

52px

40px

heading-large

font-sizes:

54px

48px

36px

32px

heading-xlarge

font-sizes:

70px

58px

44px

36px

heading-medium

font-sizes:

36px

24px

heading-small

font-sizes:

24px

20px

18px

heading-xsmall

font-sizes:

22px

20px

18px

heading-xxsmall

font-sizes:

16px

14px

Max-width

Base classes

blurb-10-col

blurb-8-col

blurb-6-col

blurb-4-col

Paragraphs

Base classes

p-large

font-sizes:

22px

20px

17px

p-regular

font-sizes:

17px

16px

15px

p-small

font-sizes:

15px

14px

Text alignments

Base classes

text-align-center

text align center

text-align-left

text align left

text-align-right

text align center

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

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.

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

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

Richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Colors

Background Colors

Gray

Off Whites

Yellow

Purple

Pink

Green

Blue

Orange

Other Colors

Base classes

Overview

Colors

Text Colors

Base classes

Margin [mb=margin-bottom]

Base classes

Padding

Base classes

Section Padding

Base classes

Letter spacing

Base classes

Line height

Base classes

Font style

Base classes

Border

Base classes

Border radius

Base classes

Z-index

Base classes

Position

Base classes

Box shadow

Base classes

Display

Base classes

Flex utility classes

Base classes

Flex/grid gap classes

Base classes

Width

Base classes

Height

Base classes

Typography

Headings

Base classes

Max-width

Base classes

Paragraphs

Base classes

Text alignments

Base classes

Font-family

Base classes

Base classes

Richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Get A Free Demo