Table of Contents
Layout & Page Structure
Native HTML Elements
Headings
Typography
Text SizesText WeightsText StylesText Alignment
Colors
Text ColorBackground Color
Spacing
MarginsPadding
Buttons
Rich Text
Form
Utility
Grids
Switch to Visual ViewVersion 1.0.1

Layout & Page Structure

The core layout and page structure uses on most pages.
Class
Properties
Description
page-wrapper
Utility element to wrap around all elements within a page
Global Styles
Component containing any custom HTML/CSS for the entire project
Navigation
Component containing global main navigation before page-main element, set as <nav>
page-main
Wrap around all body elements, set as <main> HTML tag
Footer
Component containing global footer after page-main element, set as <footer>
container
margin: 0 auto
max-width:
container
padding: 0 
global-padding
Main container wrapping around all content that isn't full-width
section
padding:
section-padding
 0
Adds top and bottom padding for all sections

Native HTML Elements

Styling for native HTML elements within Webflow.
Element
Properties
Body (All Pages)
font-family:
primary font
font-size:
project font size
color:
text primary
background-color:
background color
line-height:
project line height
font-weight: 400
All Paragraphs
font-size: 1rem
line-height:
project line height
All Links
color:
primary 700
All Ordered Lists
font-size: 1rem
margin: 0
padding: 0 0 0 1.5rem
All Unordered Lists
font-size: 1rem
margin: 0
padding: 0 0 0 1.5rem
All Lists Items
margin-bottom: 0.25rem
All Block Quotes
font-size: 1.1875rem
font-weight: 700
margin: 0
padding: 0 0 0 1rem
border-left-width: 0.25rem
border-left-style: solid
border-left-color
primary 700
color:
text heading
line-height:
project line height

Headings

Native headings and heading classes.
Element
Properties
All H1 Headings
font-size: 2.5rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
h1
font-size: 2.5rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
All H2 Headings
font-size: 2rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
h2
font-size: 2rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
All H3 Headings
font-size: 1.75rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
h3
font-size: 1.75rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
All H4 Headings
font-size: 1.5rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading
h4
font-size: 1.5rem
font-weight: 700
margin: 0
line-height:
project line height
color:
text heading

Typography

Default styling for text.

Text Size

Class
Properties
text-size-0.75
font-size: 0.75rem
text-size-0.875
font-size: 0.875rem
text-size-1.0
font-size: 1rem
text-size-1.125
font-size: 1.125rem
text-size-1.25
font-size: 1.25rem
text-size-1.5
font-size: 1.5rem

Text Weight

Class
Properties
text-weight-100
font-weight: 100
text-weight-200
font-weight: 200
text-weight-300
font-weight: 300
text-weight-400
font-weight: 400
text-weight-500
font-weight: 500
text-weight-600
font-weight: 600
text-weight-700
font-weight: 700
text-weight-800
font-weight: 800
text-weight-900
font-weight: 900

Text styles

Class
Properties
text-strikethrough
text-decoration: line-through
text-italics
font-style: italics
text-underline
text-decoration: underline
text-all-caps
text-transform: uppercase

Text alignment

Class
Properties
text-align-left
text-align: left
text-align-right
text-align: right
text-align-center
text-align: center
text-align-justify
text-align: justify

Colors

Styling for text and background colors.

Text Color

Class
Properties
Color
text-primary-600
color: #327cff
text-primary-700
color: #0c60f5
text-primary-800
color: #0049ca
text-secondary-600
color: #ffc039
text-secondary-700
color: #f6ad12
text-secondary-800
color: #e29b01
text-white
color: #ffffff
text-neutral-50
color: #f7fafd
text-neutral-100
color: #e3eaf4
text-neutral-200
color: #d6deea
text-neutral-300
color: #c3cddc
text-neutral-400
color: #9eabc1
text-neutral-500
color: #7587a5
text-neutral-600
color: #52637f
text-neutral-700
color: #3b4961
text-neutral-800
color: #263246
text-neutral-900
color: #0f1929
text-black
color: #000000

Background Color

Class
Properties
Color
bg-primary-600
background-color: #327cff
bg-primary-700
background-color: #0c60f5
bg-primary-800
background-color: #0049ca
bg-secondary-600
background-color: #ffc039
bg-secondary-700
background-color: #f6ad12
bg-secondary-800
background-color: #e29b01
bg-white
background-color: #ffffff
bg-neutral-50
background-color: #f7fafd
bg-neutral-100
background-color: #e3eaf4
bg-neutral-200
background-color: #d6deea
bg-neutral-300
background-color: #c3cddc
bg-neutral-400
background-color: #9eabc1
bg-neutral-500
background-color: #7587a5
bg-neutral-600
background-color: #52637f
bg-neutral-700
background-color: #3b4961
bg-neutral-800
background-color: #263246
bg-neutral-900
background-color: #0f1929
bg-black
background-color: #000000
bg-transparent
background-color: transparent

Spacing

Defined classes for adding margins or padding to elements.

Margins

Class
Properties
margin-top-0
margin-top: 0
margin-top-1
margin-top: 1rem
margin-top-2
margin-top: 2rem
margin-top-3
margin-top: 3rem
margin-bottom-0
margin-bottom: 0
margin-bottom-1
margin-bottom: 1rem
margin-bottom-2
margin-bottom: 2rem
margin-bottom-3
margin-bottom: 3rem
margin-0
margin-bottom: 0
margin-top: 0
margin-1
margin-bottom: 1rem
margin-top: 1rem
margin-2
margin-bottom: 2rem
margin-top: 2rem
margin-3
margin-bottom: 3rem
margin-top: 3rem

Padding

Class
Properties
padding-top-0
padding-top: 0
padding-top-1
padding-top: 1rem
padding-top-2
padding-top: 2rem
padding-top-3
padding-top: 3rem
padding-bottom-0
padding-bottom: 0
padding-bottom-1
padding-bottom: 1rem
padding-bottom-2
padding-bottom: 2rem
padding-bottom-3
padding-bottom: 3rem
padding-0
padding-bottom: 0
padding-top: 0
padding-1
padding-bottom: 1rem
padding-top: 1rem
padding-2
padding-bottom: 2rem
padding-top: 2rem
padding-3
padding-bottom: 3rem
padding-top: 3rem

Buttons

Designed buttons with variations.
Class
Properties
button
font-weight: 700
display: inline-block
padding: 0.75rem 1rem
font-size: 1rem
text-align: center
text-decoration: none
border-radius: 0.25rem
border-style: solid
border-width: 0.125rem
text-decoration: none
white-space: nowrap
background-color:
primary 700
line-height:
project line height
color:
white
border-color
primary 700
button
is-secondary
background-color:
secondary 700
border-color
secondary 700
color:
neutral 900
button
is-reverse
background-color:
white
color:
primary 700
border-color
primary 700
button
is-secondary-reverse
background-color:
white
color:
neutral 900
border-color
secondary 700
button
is-icon
display: flex
flex-direction: row
justify-content: center
align-items: center
gap: 1rem

Rich Text

Default styling applied to native Webflow Rich Text elements.
Class
Properties
rich-text
rich-text
All H1 Headings
margin-top: 1.5rem
margin-bottom: 1.5rem
rich-text
All H2 Headings
margin-top: 1.5rem
margin-bottom: 1.375rem
rich-text
All H3 Headings
margin-top: 1.5rem
margin-bottom: 1.25rem
rich-text
All H4 Headings
margin-top: 1.5rem
margin-bottom: 1.125rem
rich-text
All Paragraphs
margin-bottom: 1rem
rich-text
All Figures
margin-bottom: 1.5rem
rich-text
All Images
margin-bottom: 0.25rem
rich-text
All Figure Captions
font-size: 0.875rem
color:
neutral 500
rich-text
All Ordered Lists
margin-bottom: 1.5rem
rich-text
All Unordered Lists
margin-bottom: 1.5rem
rich-text
All Lists Items
rich-text
All Block Quotes
margin-top: 2rem
margin-bottom: 2rem

Form

Styles and class names for form elements.
Class
Properties
form
margin-bottom: 0
form_group
display: grid
flex-flow: column
gap: 0.25rem
form_label
font-weight: 700
color:
neutral 900
form_input
padding: 1rem
margin: 0
border-style: solid
border-radius: 0.25rem
border-width: 0.0625rem
font-size: 1rem
line-height:
project line height
height:
input height
color:
neutral 700
border-color:
border color
background-color:
white
:placeholder:
neutral 500
form_input
is-textarea
height: 10rem
form_input
is-select
padding: 0
form_checkbox
display: flex
flex-direction: row
align-items: center
padding: 0
margin: 0
form_checkbox-icon
margin: 0 
form icon spacing
 0 0
width: 1rem
height: 1rem
min-width: 1rem
min-height: 1rem
border-radius: 0
border-width: 0.0625rem
border-style: solid
border-color:
border color
form_radio
display: flex
flex-direction: row
align-items: center
padding: 0
margin: 0
form_radio-icon
margin: 0 
form icon spacing
 0 0
width: 1rem
height: 1rem
min-width: 1rem
min-height: 1rem
padding: 0.125rem
border-width: 0.0625rem
border-style: solid
border-color:
border color

Utility

Handy classes that are used in most Webflow projects.
Class
Properties
hide
display: none
hide-tablet
display: none
hide-mobile-landscape
display: none
hide-mobile-portrait
display: none
block
display: block
flex
display: flex
relative
position: relative
center
margin: 0 auto
overflow-hidden
overflow: hidden
overflow-visible
overflow: visible

Grids

Margins and paddings
Class
Properties
grid-2-column
display: grid
grid-template-columns: repeat(2, 1fr)
Mobile Landscapegrid-template-columns: 1fr
column-gap: 1rem
grid-3-column
display: grid
grid-template-columns: repeat(3, 1fr)
Mobile Landscapegrid-template-columns: 1fr
column-gap: 1rem
grid-4-column
display: grid
grid-template-columns: repeat(4, 1fr)
Tabletgrid-template-columns: repeat(2, 1fr)
Mobile Landscapegrid-template-columns: 1fr
column-gap: 1rem
grid-5-column
display: grid
grid-template-columns: repeat(5, 1fr)
Tabletgrid-template-columns: repeat(2, 1fr)
Mobile Landscapegrid-template-columns: 1fr
column-gap: 1rem
grid-6-column
display: grid
grid-template-columns: repeat(6, 1fr)
Tabletgrid-template-columns: repeat(3, 1fr)
Mobile Landscapegrid-template-columns: 1fr
column-gap: 1rem

Changelog

History of changes and improvements to the Piixel Pieces Style Guide.

v1.0.1

July 6, 2024
  • Added Navigation and Footer global components to home page.
  • Simplified home page to make it easier to start a project.
  • Removed unused variables.
  • Typo fixes.

v1.0

May 24, 2024
  • Added code view to all classes and elements.
  • Simplified default page layout and structure.
  • Implemented a new color system with brand, neutral, and utility colors.
  • Improvements to typography and layout variables.
  • Removed some grid layouts.
  • Added new default styling to form checkboxes and radio buttons.
  • Removed some utility classes.

v0.2

January 2, 2024
  • Removed all margins, paddings and spacers from the styleguide.
  • Removed most size variables from the variables panel.
  • Updated layout to remove old margins and paddings.

v0.1

December 12, 2023
  • Initial release of the Piixel Pieces styleguide for beta testing.