Canyon Tire Sales Logo

Canyon Tire Sales DSM

Design System Manager & Framework
DSM V0.5 -  By Oxy Builder Blocks
Keep this page open in another browser window to copy & paste the classes easily

Quick Notes:
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.

Example:

  1. "ob-m-3" will add 24px to top, bottom, left, and right margins, "ob-mt-2" will add 16px top margins
  2. "ob-p-3" will add 24px to top, bottom, left, and right padding, "ob-pb-2" will add 16px bottom padding.
  • Any time you see "md" in a class name it refers to the size
  • Any time you see "med" in a class name it refers to the color
Keep this page open in another browser window to copy & paste the classes easily
Color Palette Generators: 
  1. https://mycolor.space/ 
  2.  https://coolors.co/
  3. http://colormind.io/

Helpful coloring tools: 

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-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
Small Button
ob-btn-prime-md
Medium Button
ob-btn-prime-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Secondary

ob-btn-sec-sm
Small Button
ob-btn-sec-md
Medium Button
ob-btn-sec-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Tertiary

ob-btn-tri-sm
Small Button
ob-btn-tri-md
Medium Button
ob-btn-tri-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Success

ob-btn-success-sm
Small Button
ob-btn-success-md
Medium Button
ob-btn-success-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Warning

ob-btn-warn-sm
Small Button
ob-btn-warn-md
Medium Button
ob-btn-warn-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Error

ob-btn-error-sm
Small Button
ob-btn-error-md
Medium Button
ob-btn-error-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Black

ob-btn-black-sm
Small Button
ob-btn-black-md
Medium Button
ob-btn-black-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Dark

ob-btn-dark-sm
Small Button
ob-btn-dark-md
Medium Button
ob-btn-dark-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Medium

ob-btn-med-sm
Small Button
ob-btn-med-md
Medium Button
ob-btn-med-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button Light

ob-btn-light-sm
Small Button
ob-btn-light-md
Medium Button
ob-btn-light-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

Button White 

ob-btn-white-sm
Small Button
ob-btn-white-md
Medium Button
ob-btn-white-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed
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
Small Button
ob-btn-prime-ol-md
Medium Button
ob-btn-prime-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Secondary

ob-btn-sec-ol-sm
Small Button
ob-btn-sec-ol-md
Medium Button
ob-btn-sec-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Tertiary

ob-btn-tri-ol-sm
Small Button
ob-btn-tri-md
Medium Button
ob-btn-tri-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Success

ob-btn-success-ol-sm
Small Button
ob-btn-success-ol-md
Medium Button
ob-btn-success-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Warning

ob-btn-warn-ol-sm
Small Button
ob-btn-warn-ol-md
Medium Button
ob-btn-warn-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Error

ob-btn-error-ol-sm
Small Button
ob-btn-error-ol-md
Medium Button
ob-btn-error-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Black

ob-btn-black-ol-sm
Small Button
ob-btn-black-ol-md
Medium Button
ob-btn-black-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Dark

ob-btn-dark-ol-sm
Small Button
ob-btn-dark-ol-md
Medium Button
ob-btn-dark-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Medium

ob-btn-med-ol-sm
Small Button
ob-btn-med-ol-md
Medium Button
ob-btn-med-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button Light

ob-btn-light-ol-sm
Small Button
ob-btn-light-ol-md
Medium Button
ob-btn-light-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed

OL Button White 

ob-btn-white-ol-sm
Small Button
ob-btn-white-ol-md
Medium Button
ob-btn-white-ol-lg
Large Button
Normal State
Normal
Focused State
Focused
Hover State
Hover
Pressed State
Pressed