Passion Atomic Design System

This design system includes all of the elements that we need to build pages in Webflow. You are able to copy and paste elements into other pages. DO NOT change any of the styling of the elements. We follow an atomic design structure.

What is atomic design? Atomic Design is a methodology inspired by chemistry. Just as all matter is made out of atoms that combine to form molecules, which in turn make up more complex organisms, Atomic Design involves breaking a website down into its basic components and then working up from there to create a site.

Watch this if you have an hour to kill: https://www.youtube.com/watch?v=84LZyZsTiaA

Our pages are built in this order: Structure, atoms, molecules, organisms, templates, and pages.

Structure

8-Point Grid

All of our layouts are based off an 8 point grid, shown below:

Responsive Flexbox Grid

Columns need to be nested within  a "-grid-row" and a direct child of a "-container".  All columns start off at equal-widths by defining the class of "-col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

-col
-col
-col
-col
-col
-col
-col
-col
-col
-col

Responsive Grid

To define our 12 column grid, all classes must precede with the initial class of "-col". Examples of how to use this below:

col-1

col-11

col-6

col-6

col-4

col-8

col-9

col-3

Text Align

is--align-left

is--align-center

is--align-right

Float

is--float-left

is--float-right

Vertical Align

is--align-top

-col
-col
-col

is--align-middle

-col
-col
-col

is--align-bottom

-col
-col
-col

Margins

All margins follow an 8px grid (8/16/24/32....). mt = top margin, mb = bottom margin, mr = right margin, ml = left margin, mx = horizontal margin and my = vertical margin.

is--m(side)--(px value). For example: is--mt-40 or is--mx-auto

Atoms

Colors

Brand colors

primary

secondary

cta

Additional

additional1

additional2

additional3

additional4

Black / Gray scale

secondary

secondary_900

secondary_800

secondary_700

secondary_600

secondary_500

secondary_400

secondary_300

System

error

success

link

Typography

t1

Heading hero

h1

Heading H1

h2

Heading H2

h3

Heading H3

h4

Heading H4

h5

Heading H5

h6

Heading H6

body--text-l

Body Text L

body--text-m

Body Text M

body--text-s

Body Text S

body--text-xs

Body Text XS

body--heading-xl

Body heading XL

body--heading-l

Body heading L

body--heading-m

Body heading M

body--heading-s

Body heading S

subtitle-text-l

Subtitle L

subtitle-text-m

Subtitle M

subtitle-text-s

Subtitle S

Colour Typography

To color text add the name of the colour after: is--text-(colourname) - Example below...

is--text-white

is--text-primary

is--text-gradient

Components

Buttons

btn-primary

Call to action

btn-ghost-white

Call to action

btn-text

Read more