Keep this page open in another browser window to copy & paste the classes easily

Color Palette Generators:

Helpful coloring tools:

Agency Tools Plugin: (Highly Recommended to use)
Shaderade

To add your colors here, follow the Oxy Builder Blocks DSM Set Up Documentation sheet.

Colors: Base

Primary

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Secondary

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Tertiary

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Success

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Warning

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Error

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.

Colors: Darks & Lights

Black

Darken

80%

N/A

60%

N/A

40%

N/A

20%

N/A

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Dark

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Medium

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

Light

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

White

Darken

80%

60%

40%

20%

Lighten

80%

N/A

60%

N/A

40%

N/A

20%

N/A

Opacity*

80%

60%

40%

20%

Other???

Darken

80%

60%

40%

20%

Lighten

80%

60%

40%

20%

Opacity*

80%

60%

40%

20%

*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.

Keep this page open in another browser window to copy & paste the classes easily

To use any of your background colors add the CSS selector to you element of choice.

Colors: Backgrounds

ob-bg-prime

ob-bg-sec

ob-bg-tri

ob-bg-success

ob-bg-warn

ob-bg-error

ob-bg-black

ob-bg-dark

ob-bg-med

ob-bg-light

ob-bg-white

*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.

Keep this page open in another browser window to copy & paste the classes easily

Margins use multiples of 8, with the exception of -half, which equals 4px.

"ob-m-4" Class = 32px of margin on top, bottom, right and left
"ob-m-half" Class = 4px of margin on top, bottom, right and left

Spacing Margin

Margins - Top, Right, Bottom, Left

ob-m-0 = 0px

ob-m-half = 4px

ob-m-1 = 8px

ob-m-2 = 16px

ob-m-3 = 24px

ob-m-4 = 32px

ob-m-5 = 40px

ob-m-6 = 48px

ob-m-7 = 56px

ob-m-8 = 64px

ob-m-9 = 72px

ob-m-10 = 80px

ob-m-11 = 88px

Top Margin

ob-mt-0 = 0px

ob-mt-half = 4px

ob-mt-1 = 8px

ob-mt-2 = 16px

ob-mt-3 = 24px

ob-mt-4 = 32px

ob-mt-5 = 40px

ob-mt-6 = 48px

ob-mt-7 = 56px

ob-mt-8 = 64px

ob-mt-9 = 72px

ob-mt-10 = 80px

ob-mt-11 = 88px

Negative Top Margins

ob-mt-neg-half = -4px

ob-mt-neg-1 = -8px

ob-mt-neg-2 = -16px

ob-mt-neg-3 = -24px

ob-mt-neg-4 = -32px

ob-mt-neg-5 = -40px

ob-mt-neg-6 = -48px

ob-mt-neg-7 = -56px

ob-mt-neg-8 = -64px

ob-mt-neg-9 = -72px

ob-mt-neg-10 = -80px

ob-mt-neg-11 = -88px

Right Margin

ob-mr-0 = 0px

ob-mr-half = 4px

ob-mr-1 = 8px

ob-mr-2 = 16px

ob-mr-3 = 24px

ob-mr-4 = 32px

ob-mr-5 = 40px

ob-mr-6 = 48px

ob-mr-7 = 56px

ob-mr-8 = 64px

ob-mr-9 = 72px

ob-mr-10 = 80px

ob-mr-11 = 88px

Negative Right Margin

ob-mr-neg-half = -4px

ob-mr-neg-1 = -8px

ob-mr-neg-2 = -16px

ob-mr-neg-3 = -24px

ob-mr-neg-4 = -32px

ob-mr-neg-5 = -40px

ob-mr-neg-6 = -48px

ob-mr-neg-7 = -56px

ob-mr-neg-8 = -64px

ob-mr-neg-9 = -72px

ob-mr-neg-10 = -80px

ob-mr-neg-11 = -88px

Bottom Margin

ob-mb-0 = 0px

ob-mb-half = 4px

ob-mb-1 = 8px

ob-mb-2 = 16px

ob-mb-3 = 24px

ob-mb-4 = 32px

ob-mb-5 = 40px

ob-mb-6 = 48px

ob-mb-7 = 56px

ob-mb-8 = 64px

ob-mb-9 = 72px

ob-mb-10 = 80px

ob-mb-11 = 88px

Negative Bottom Margins

ob-mb-neg-half = -4px

ob-mb-neg-1 = -8px

ob-mb-neg-2 = -16px

ob-mb-neg-3 = -24px

ob-mb-neg-4 = -32px

ob-mb-neg-5 = -40px

ob-mb-neg-6 = -48px

ob-mb-neg-7 = -56px

ob-mb-neg-8 = -64px

ob-mb-neg-9 = -72px

ob-mb-neg-10 = -80px

ob-mb-neg-11 = -88px

Left Margin

ob-ml-0 = 0px

ob-ml-half = 4px

ob-ml-1 = 8px

ob-ml-2 = 16px

ob-ml-3 = 24px

ob-ml-4 = 32px

ob-ml-5 = 40px

ob-ml-6 = 48px

ob-ml-7 = 56px

ob-ml-8 = 64px

ob-ml-9 = 72px

ob-ml-10 = 80px

ob-ml-11 = 88px

Negative Left Margin

ob-ml-neg-half = -4px

ob-ml-neg-1 = -8px

ob-ml-neg-2 = -16px

ob-ml-neg-3 = -24px

ob-ml-neg-4 = -32px

ob-ml-neg-5 = -40px

ob-ml-neg-6 = -48px

ob-ml-neg-7 = -56px

ob-ml-neg-8 = -64px

ob-ml-neg-9 = -72px

ob-ml-neg-10 = -80px

ob-ml-neg-11 = -88px

Y Margins Top with Bottom

ob-my-0 = 0px

ob-my-half = 4px

ob-my-1 = 8px

ob-my-2 = 16px

ob-my-3 = 24px

ob-my-4 = 32px

ob-my-5 = 40px

ob-my-6 = 48px

ob-my-7 = 56px

ob-my-8 = 64px

ob-my-9 = 72px

ob-my-10 = 80px

ob-my-11 = 88px

X Margins Right with Left

ob-mx-0 = 0px

ob-mx-half = 4px

ob-mx-1 = 8px

ob-mx-2 = 16px

ob-mx-3 = 24px

ob-mx-4 = 32px

ob-mx-5 = 40px

ob-mx-6 = 48px

ob-mx-7 = 56px

ob-mx-8 = 64px

ob-mx-9 = 72px

ob-mx-10 = 80px

ob-mx-11 = 88px

Keep this page open in another browser window to copy & paste the classes easily

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.

"ob-p-4" Class = 32px of padding on top, bottom, right and left
"ob-p-half" Class = 4px of padding on top, bottom, right and left

Spacing Padding

Padding - Top, Right, Bottom, Left

ob-p-0 = 0px

ob-p-half = 4px

ob-p-1 = 16px

ob-p-2 = 16px

ob-p-3 = 24px

ob-p-4 = 32px

ob-p-5 = 40px

ob-p-6 = 48px

ob-p-7 = 56px

ob-p-8 = 64px

ob-p-9 = 72px

ob-p-10 = 80px

ob-p-11 = 88px

Top Padding

ob-pt-0 = 0px

ob-pt-half = 4px

ob-pt-1 = 8px

ob-pt-2 = 16px

ob-pt-3 = 24px

ob-pt-4 = 32px

ob-pt-5 = 40px

ob-pt-6 = 48px

ob-pt-7 = 56px

ob-pt-8 = 64px

ob-pt-10 = 80px

ob-pt-11 = 88px

Right Padding

ob-pr-0 = 0px

ob-pr-half = 4px

ob-pr-1 = 8px

ob-pr-2 = 16px

ob-pr-3 = 24px

ob-pr-4 = 32px

ob-pr-5 = 40px

ob-pr-6 = 48px

ob-pr-7 = 56px

ob-pr-8 = 64px

ob-pr-9 = 72px

ob-pr-10 = 80px

ob-pr-11 = 88px

Bottom Padding

ob-pb-0 = 0px

ob-pb-half = 4px

ob-pb-1 = 8px

ob-pb-2 = 16px

ob-pb-3 = 24px

ob-pb-4 = 32px

ob-pb-5 = 40px

ob-pb-6 = 48px

ob-pb-7 = 56px

ob-pb-8 = 64px

ob-pb-9 = 72px

ob-pb-10 = 80px

ob-pb-11 = 88px

Left Padding

ob-pl-0 = 0px

ob-pl-half = 4px

ob-pl-1 = 8px

ob-pl-2 = 16px

ob-pl-3 = 24px

ob-pl-4 = 32px

ob-pl-5 = 40px

ob-pl-6 = 48px

ob-pl-7 = 56px

ob-pl-8 = 64px

ob-pl-9 = 72px

ob-pl-10 = 80px

ob-pl-11 = 88px

Y Paddings Top with Bottom

ob-py-0 = 0px

ob-py-half = 4px

ob-py-1 = 8px

ob-py-2 = 16px

ob-py-3 = 24px

ob-py-4 = 32px

ob-py-5 = 40px

ob-py-6 = 48px

ob-py-7 = 56px

ob-py-8 = 64px

ob-py-9 = 72px

ob-py-10 = 80px

ob-py-11 = 88px

X Paddings Right with Left

ob-px-0 = 0px

ob-px-half = 4px

ob-px-1 = 8px

ob-px-2 = 16px

ob-px-3 = 24px

ob-px-4 = 32px

ob-px-5 = 40px

ob-px-6 = 48px

ob-px-7 = 56px

ob-px-8 = 64px

ob-px-9 = 72px

ob-px-10 = 80px

ob-px-11 = 88px

Typography

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
LH= Line-height

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

h1: Kanit
FS = 40px
LH = 1.2 (tighter) or 1.4 (looser) t

h2: Montserrat
FS = 36px
LH = 1.1 (tighter) or 1.3 (looser)

h3: Montserrat
FS = 30px
LH = 1.3

h4: Kanit
FS = 24px
LH = 1.3

h5: Kanit
FS = 18px
LH = 1.3

h6: Kanit
FS = 16px
LH = 1.5

Keep this page open in another browser window to copy & paste the classes easily

Display Font Sizing

ob-fs-d-lg =

LG Display = 72px

ob-fs-d-md =

MD Display = 64px

ob-fs-d-sm =

SM Display = 48px

Keep this page open in another browser window to copy & paste the classes easily

Font Sizing

ob-fs-2xs = 2x Extra small text = 10px

ob-fs-xs = Extra small text = 12px

ob-fs-sm = Small text = 14px

ob-fs-base = Base text = 16px

ob-fs-md = Medium text = 18px

ob-fs-lg = Large text = 20px

ob-fs-xl = X-Large text = 24px

ob-fs-2xl = 2X-Large text = 30px

ob-fs-3xl = 3X-Large text = 36px

ob-fs-4xl = 4X-Large text = 40px

Keep this page open in another browser window to copy & paste the classes easily

Font Weight

ob-fw-100 = Font Weight 100

ob-fw-200 = Font Weight 200

ob-fw-300 = Font Weight 300

ob-fw-400 = Font Weight 400

ob-fw-500 = Font Weight 500

ob-fw-600 = Font Weight 600

ob-fw-700 = Font Weight 700

ob-fw-800 = Font Weight 800

ob-fw-900 = Font Weight 900

Keep this page open in another browser window to copy & paste the classes easily

Font Styles

ob-fs-bold = Font Style Bold

ob-fs-italic = Font Style Italic

ob-fs-under = Font Style Underline

ob-fs-strike = Font Style Strikethrough

ob-fs-over = Font Style Overline

fb-fs-cap = font style capitalize

ob-fs-upper = Font Style Uppercase

ob-fs-lower = Font Style lowercase

ob-fs-highlight = Font Style Highlight

Keep this page open in another browser window to copy & paste the classes easily

Text Colors

ob-tc-prime

Primary
Aa

ob-tc-sec

Secondary
Aa

ob-tc-tri

Tertiary
Aa

ob-tc-success

Success
Aa

ob-tc-warn

Warning
Aa

ob-tc-tri

Error
Aa

ob-tc-black

Black
Aa

ob-tc-dark

Dark
Aa

ob-tc-med

Medium
Aa

ob-tc-light

Light
Aa

ob-tc-white

White
Aa

Keep this page open in another browser window to copy & paste the classes easily

Text Align

ob-ta-l = Left Text

ob-ta-r = Right Text

ob-ta-c = Center Text

ob-ta-j = Justify Text looks like this

Keep this page open in another browser window to copy & paste the classes easily

Letter Spacing

ob-ls-tr = Tighter = -0.05em

ob-ls-t = Tight = -0.05em

ob-ls-n = Normal = 0

ob-ls-w = Wide = 0.025em

ob-ls-wr = Wider = 0.05em

ob-ls-wt = Widest = 0.1em

Keep this page open in another browser window to copy & paste the classes easily

Line Height

ob-lh-t = Tight = 1.25

ob-lh-n = normal = 1.5

ob-lh-r = Relaxed = 1.75

ob-lh-w = Wide = 2

Keep this page open in another browser window to copy & paste the classes easily

Effects

Box Shadow

ob-bsh-sm
= Small
0px 4px 8px -2px color 20%

ob-bsh-md
= Medium
0px 8px 16px -4px color 20%

ob-bsh-lg
= Large
0px 16px 32px -8px color 20%

Opacity

ob-op-80
= 80% Opacity

ob-op-60
= 60% Opacity

ob-op-40
= 40% Opacity

ob-op-20
= 20% Opacity

Keep this page open in another browser window to copy & paste the classes easily

Borders

Border Style

ob-bst-n
= None

ob-bst-s
= Solid

ob-bst-da
= Dashed

ob-bst-do
= Dotted

Border Width

ob-bw-xs
= 1px

ob-bw-sm
= 2px

ob-bw-md
= 4px

ob-bw-lg
= 8px

Border Radius

ob-br-n
= 0px

ob-br-half
= 4px

ob-br-1
= 8px

ob-br-2
= 16px

ob-br-3
= 24px

ob-br-100
= 100%

Border Color

ob-bc-prime
= Primary Color

ob-bc-sec
= Secondary Color

ob-bc-tri
= Tertiary Color

ob-bc-success
= Success Color

ob-bc-warn
= Warning Color

ob-bc-error
= Error Color

ob-bc-black
= Black Color

ob-bc-dark
= Dark Color

ob-bc-med
= Medium Color

ob-bc-light
= Light Color

ob-bc-white
= Warning Color

Keep this page open in another browser window to copy & paste the classes easily

Solid Buttons

Make sure to set your Global Button and Link Styles located in Settings > Global Styles > Links.

Set the following:

All - Choose your default color (most likely your primary color), Font Weight if different from the standard, Text Decoration, Hover color and Hover Text Decoration
Text Link - Could be the same as above of separate depending on your preference
Link Wrapper - Could be the same as above of separate depending on your preference
Button - Choose your default Font Weight if different from the standard and your default Border Radius—Suggested Radius is 4px

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.

Each button has 3 sizes, small, medium, and large

Button Primary

ob-btn-prime-sm

ob-btn-prime-md

ob-btn-prime-lg

Normal State

Focused State

Hover State

Pressed State

Button Secondary

ob-btn-sec-sm

ob-btn-sec-md

ob-btn-sec-lg

Normal State

Focused State

Hover State

Pressed State

Button Tertiary

ob-btn-tri-sm

ob-btn-tri-md

ob-btn-tri-lg

Normal State

Focused State

Hover State

Pressed State

Button Success

ob-btn-success-sm

ob-btn-success-md

ob-btn-success-lg

Normal State

Focused State

Hover State

Pressed State

Button Warning

ob-btn-warn-sm

ob-btn-warn-md

ob-btn-warn-lg

Normal State

Focused State

Hover State

Pressed State

Button Error

ob-btn-error-sm

ob-btn-error-md

ob-btn-error-lg

Normal State

Focused State

Hover State

Pressed State

Button Black

ob-btn-black-sm

ob-btn-black-md

ob-btn-black-lg

Normal State

Focused State

Hover State

Pressed State

Button Dark

ob-btn-dark-sm

ob-btn-dark-md

ob-btn-dark-lg

Normal State

Focused State

Hover State

Pressed State

Button Medium

ob-btn-med-sm

ob-btn-med-md

ob-btn-med-lg

Normal State

Focused State

Hover State

Pressed State

Button Light

ob-btn-light-sm

ob-btn-light-md

ob-btn-light-lg

Normal State

Focused State

Hover State

Pressed State

Button White

ob-btn-white-sm

ob-btn-white-md

ob-btn-white-lg

Normal State

Focused State

Hover State

Pressed State

Keep this page open in another browser window to copy & paste the classes easily

Outline Buttons

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.

OL Button Primary

ob-btn-prime-ol-sm

ob-btn-prime-ol-md

ob-btn-prime-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Secondary

ob-btn-sec-ol-sm

ob-btn-sec-ol-md

ob-btn-sec-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Tertiary

ob-btn-tri-ol-sm

ob-btn-tri-md

ob-btn-tri-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Success

ob-btn-success-ol-sm

ob-btn-success-ol-md

ob-btn-success-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Warning

ob-btn-warn-ol-sm

ob-btn-warn-ol-md

ob-btn-warn-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Error

ob-btn-error-ol-sm

ob-btn-error-ol-md

ob-btn-error-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Black

ob-btn-black-ol-sm

ob-btn-black-ol-md

ob-btn-black-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Dark

ob-btn-dark-ol-sm

ob-btn-dark-ol-md

ob-btn-dark-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Medium

ob-btn-med-ol-sm

ob-btn-med-ol-md

ob-btn-med-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button Light

ob-btn-light-ol-sm

ob-btn-light-ol-md

ob-btn-light-ol-lg

Normal State

Focused State

Hover State

Pressed State

OL Button White

ob-btn-white-ol-sm

ob-btn-white-ol-md

ob-btn-white-ol-lg

Normal State

Focused State

Hover State

Pressed State

Canyon Tire Sales DSM

Design System Manager & Framework

DSM V0.5 - By Oxy Builder Blocks

Color Palette Generators:

Helpful coloring tools:

Colors: Base

Colors: Darks & Lights

Colors: Backgrounds

Spacing Margin

Spacing Padding

Typography

h1: Kanit
FS = 40px
LH = 1.2 (tighter) or 1.4 (looser) t

h2: Montserrat
FS = 36px
LH = 1.1 (tighter) or 1.3 (looser)

h3: Montserrat
FS = 30px
LH = 1.3

h4: Kanit
FS = 24px
LH = 1.3

h5: Kanit
FS = 18px
LH = 1.3

h6: Kanit
FS = 16px
LH = 1.5

LG Display = 72px

MD Display = 64px

SM Display = 48px

Effects

Borders

Solid Buttons

Outline Buttons

On This Page:

Colors

Spacing

Typography

Backgrounds & Effects

Borders

Buttons - Solid

Buttons - Outline

Canyon Tire Sales DSM

Design System Manager & Framework

DSM V0.5 - By Oxy Builder Blocks

Color Palette Generators:

Helpful coloring tools:

Colors: Base

Colors: Darks & Lights

Colors: Backgrounds

Spacing Margin

Spacing Padding

Typography

h1: KanitFS = 40pxLH = 1.2 (tighter) or 1.4 (looser) t

h2: MontserratFS = 36pxLH = 1.1 (tighter) or 1.3 (looser)

h3: MontserratFS = 30pxLH = 1.3

h4: KanitFS = 24pxLH = 1.3

h5: KanitFS = 18pxLH = 1.3

h6: KanitFS = 16pxLH = 1.5

LG Display = 72px

MD Display = 64px

SM Display = 48px

Effects

Borders

Solid Buttons

Outline Buttons

On This Page:

Colors

Spacing

Typography

Backgrounds & Effects

Borders

Buttons - Solid

Buttons - Outline

h1: Kanit
FS = 40px
LH = 1.2 (tighter) or 1.4 (looser) t

h2: Montserrat
FS = 36px
LH = 1.1 (tighter) or 1.3 (looser)

h3: Montserrat
FS = 30px
LH = 1.3

h4: Kanit
FS = 24px
LH = 1.3

h5: Kanit
FS = 18px
LH = 1.3

h6: Kanit
FS = 16px
LH = 1.5