All classes begin with "ob-" followed by more detail of what the class represents.
This framework uses an 8pt grid system and each class ending in a number (e.g. -1) is multiplied by 8 with the exception of "-half" which = 4px.
To add your colors here, follow the Oxy Builder Blocks DSM Set Up Documentation sheet.
Margins use multiples of 8, with the exception of -half, which equals 4px.
Margins - Top, Right, Bottom, Left
Negative Top Margins
Negative Right Margin
Negative Bottom Margins
Negative Left Margin
Y Margins Top with Bottom
X Margins Right with Left
Make sure to set your Sections Global "Container Padding" Styles located in Settings > Global Styles > Sections. Suggested Container Padding is Top & Bottom to 80px > Left & Right to 24px
Padding use multiples of 8, with the exception of -half, which equals 4px.
Padding - Top, Right, Bottom, Left
Y Paddings Top with Bottom
X Paddings Right with Left
This framework uses a (soft) 4px baseline grid and the line-height is set based on these fonts. You will need to adjust accordingly for the fonts you choose since font heights vary. I say soft because you always need to be somewhat flexible in design.
In case you would like to learn a bit more about a 4px baseline grid, this a great little article here and for tools to help you with spacing you can use Grid Lover here, or Golden Ratio Typography (GRT) Calculator here.
Title Sizes and Details: H1 - H6
FS= Font Size
Set h1-h6 tags in global settings
To calculate your unitless LH use this equation:
Line Height in PX / Font Size in PX = Unitless Line Height
Example: 80px LH / 64px FS = 1.25
Display Font Sizing
Each button has 3 sizes, small, medium, and large
Each button uses the 4 states below: Normal, Focused, Hover, and Pressed (Active).
Based on your color palette you may need to adjust some of your button states.
To edit them select the button and click the "state" button and select the state you would like to edit. Update each button accordingly to keep your buttons consistent throughout your design.