Structure
We defined the core basics so you can build the complex with less effort.
By default, Client-first uses 4pt spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4pt system.
page-wrapper
section-[section-identifer]
page-padding
container
...(e.g. components, elements, etc.)
page-padding
page-padding
container + optional max-
margin-left: auto
margin-right: auto
width: 100%
max-width: - (optional on container)
value label
container
margin-left: auto margin-right: auto width: 100%
value label
max-full
value label
max-xxlarge
value label
max-xlarge
value label
max-large
value label
max-medium
value label
max-small
value label
max-xsmall
value label
max-xxsmall
4pt system
The values are the preferred sizings for all spacing and element sizing.
4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
96px
128px
160px
192px
256px
320px
384px
448px
512px
640px
768px
896px
1024px
1152px
1280px
1440px
1536px
1920px
2560px
Typography
value label
H1
value label
H2
value label
H3
value label
H4
value label
H5
value label
H6
value label
heading-xxlarge
value label
heading-xlarge
value label
heading-large
value label
heading-medium
value label
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
value label
text-large
value label
text-small
value label
text-tiny
value label
text-linkvalue label
text-quote
value label
text-italic
value label
text-strikethrough
Rich text
We have created a default text-rich-text class that will hold the default styles for our rich text element. Limit your custom class rich text classes. Each time you make one, it's a new class you have to update when you want to change typography styles globally.
Font weight
Style font-weight css to make text or more less bold.
value label
text-xbold
text extra bold
value label
text-bold
text bold
value label
text-semibold
text semibold
value label
text-normal
text normal
value label
text-light
text light
Text alignment
Style text-align css to make text, or other elements, align left, center, or right.
text-left
text-center
text-right
Buttons
Use add-on class .invert-colors when placing button on dark background
Spacing
margin-... is the outer space of an element
padding-... is the inner space of an element
Vertical spacing between elements using margin
Global use of margin-bottom and margin-top
We like to use margin for spacing elements and components!
Margin bottom default
margin-bottom-
Global add-on
value label
margin-bottom-xsmall
value label
margin-bottom-small
value label
margin-bottom-medium
value label
margin-bottom-large
value label
margin-bottom-xlarge
Margin top default
margin-top-
Global add-on
margin-top-xsmall
value label
margin-top-small
value label
margin-top-medium
value label
margin-top-large
value label
margin-top-xlarge
value label
Tablet margin bottom
tablet-marg-bottom-
Global add-on
value label
tablet-marg-bottom-small
value label
tablet-marg-bottom-medium
value label
tablet-marg-bottom-large
value label
tablet-marg-bottom-xlarge
Tablet margin top
tablet-marg-top-
Global add-on
tablet-marg-top-small
value label
tablet-marg-top-medium
value label
tablet-marg-top-large
value label
tablet-marg-top-xlarge
value label
Mobile margin bottom
mobile-marg-bottom-
Global add-on
value label
mobile-marg-bottom-small
value label
mobile-marg-bottom-medium
value label
mobile-marg-bottom-large
value label
mobile-marg-bottom-xlarge
Mobile margin top
mobile-marg-top-
Global add-on
mobile-marg-top-small
value label
mobile-marg-top-medium
value label
mobile-marg-top-large
value label
mobile-marg-top-xlarge
value label
Horizontal spacing between elements using margin
Global use of margin-left and margin-right
We like to use margin for spacing elements and components!
Margin left default
margin-left-
Global add-on
value label
margin-left-xsmall
value label
margin-left-small
value label
margin-left-medium
value label
margin-left-large
value label
margin-left-xlarge
Margin right default
margin-right-
Global add-on
value label
margin-right-xsmall
element
value label
margin-right-small
element
value label
margin-right-medium
element
value label
margin-right-large
element
value label
margin-right-xlarge
element
Tablet margin left
tablet-marg-left-
Global add-on
value label
tablet-marg-left-small
value label
tablet-marg-left-medium
value label
tablet-marg-left-large
Tablet margin right
tablet-marg-right-
Global add-on
value label
tablet-marg-right-small
element
value label
tablet-marg-right-medium
element
value label
tablet-marg-right-large
element
Mobile margin left
mobile-marg-left-
Global add-on
value label
mobile-marg-left-small
value label
mobile-marg-left-medium
value label
mobile-marg-left-large
Mobile margin right
mobile-marg-right-
Global add-on
value label
mobile-marg-right-small
element
value label
mobile-marg-right-medium
element
value label
mobile-marg-right-large
element
Equal spacing in sections using padding
Global use of section padding horizontally and vertically
We like to use padding for spacing sections and sub-sections!
Padding equal default
padding-
Equal padding around the element. The same value is applied to all 4 sides.
value label
padding-small
value label
padding-medium
value label
padding-large
value label
padding-xlarge
Tablet padding equal
tablet-pad-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-small
value label
tablet-pad-medium
value label
tablet-pad-large
value label
tablet-pad-xlarge
Mobile padding equal
mobile-pad-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-small
value label
mobile-pad-medium
value label
mobile-pad-large
value label
mobile-pad-xlarge
Padding vertical equal default
padding-vertical-
Padding-top and padding-bottom is applied on the element. The same value is added to the top and bottom.
value label
padding-vertical-small
value label
padding-vertical-medium
value label
padding-vertical-large
value label
padding-vertical-xlarge
Tablet padding vertical
tablet-pad-vertical-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-vertical-small
value label
tablet-pad-vertical-medium
value label
tablet-pad-vertical-large
value label
tablet-pad-vertical-xlarge
Mobile padding vertical
mobile-pad-vertical-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-vertical-small
value label
mobile-pad-vertical-medium
value label
mobile-pad-vertical-large
value label
mobile-pad-vertical-xlarge
Padding horizontal equal default
padding-horizontal-
Padding-left and padding-right is applied on the element. The same value is added to the left and right side.
value label
padding-horizontal-small
value label
padding-horizontal-medium
value label
padding-horizontal-large
value label
padding-horizontal-xlarge
Tablet padding horizontal
tablet-pad-horizontal-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-horizontal-small
value label
tablet-pad-horizontal-medium
value label
tablet-pad-horizontal-large
Mobile padding horizontal
mobile-pad-horizontal-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-horizontal-small
value label
mobile-pad-horizontal-medium
value label
mobile-pad-horizontal-large
Heading
Remove all spacing
Sets margins and paddings to 0. Useful for removing native Webflow component spacing.
value label
spacing-clean
Colors
Use colors globally
Text color
text-color-grey
text-color-lightgrey
text-color-black
text-muted - adds opacity to text
Background color add-ons and shadows
background-white
background-grey
background-black
background-blue
background-blue-lighteralt
background-blue-lighter
Flex and grids
Grid columns
Recurring simple grid layouts
grid-1-col
grid-2-col
grid-3-col
grid-4-col
Grid rows
Create horizontal spacing between items.
grid-row
item
item
Add-ons to 'Grid rows'
Add these classes in addition to the grid-row classes above for flexible spacing.
grid-row gap-small
item
item
grid-row gap-medium
item
item
grid-row gap-large
item
item
grid-row gap-xlarge
item
item
Simple row and column (flex)
row
item
item
col
item
item
Responsive visibility
Show and hide elements by screensize
Hide classes to set display:none
hide - hide on all devices
hide-tablet - hide starting from tablet resolution
hide-landscape - hide starting from landscape resolution
hide-mobile - hide starting from mobile resolution
Show classes to set display:block
show - show on all devices
show-tablet - display starting from tablet resolution
show-landscape - display starting from landscape resolution
show-mobile - display starting from mobile resolution
Icons
Icon classes
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
Inline SVG icons
Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>
Utility classes
Special add-ons to bring unique components to your site.
Built for developers. This section requires Webflow and CSS knowledge.
z-1 - Bring an element closer on the z-index. Sets z-index to 1.
z-2 - Bring an element closer on the z-index. Sets z-index to 2.
full-size - No maximum width on a container. Sets max-width to none.
full-size-tablet - full-size on tablet. Sets max-width to none on tablet.
full-size-mobile - full-size on mobile. Sets max-width to none on mobile.
align-center - Centers a container on max-xxx the screen. Sets margin left and right to auto.
div-square - Creates and maintains a 1:1 dimension of a div. CSS magic.
layer - Add to div to make it expand the entire size of the parent element. Make sure the parent div has 'position: relative'.
clickable-off - Prevents all click and hover interaction with an element. Sets pointer-events to none.
clickable-on - Enables all click and hover interaction with an element. Sets pointer-events to auto.
crop - Prevents overflow of a container. Sets overflow to hidden.
sticky-on-page - Required add-on to page-wrapper when 'position: sticky' is on a page. Sets overflow to visible.
Client First Guide
Brand Guide
Company assets, logo usage, brand colors, brand voice etc.
We are making updates to the functionality of this page, without increasing build size. Coming soon - better asset management and downloads.
Colors
Primary
#000000
#ffffff
#f5f5f5
Secondary
#0000ff
#ff0000
#cccccc
Questions
ALL comments, suggestions, and notes about this Style System are welcomed. Thank you.
Please post all feedback on https://client-first-secret-beta-feedback.webflow.io/