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.
All of our layouts are based off an 8 point grid, shown below:
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.
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
is--align-left
is--align-center
is--align-right
is--float-left
is--float-right
is--align-top
is--align-middle
is--align-bottom
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
primary
secondary
cta
additional1
additional2
additional3
additional4
secondary
secondary_900
secondary_800
secondary_700
secondary_600
secondary_500
secondary_400
secondary_300
error
success
link
t1
h1
h2
h3
h4
h5
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
To color text add the name of the colour after: is--text-(colourname) - Example below...
is--text-white
is--text-primary
is--text-gradient