Table of Contents

• Colors
• Type
• Typography
• Buttons
• UI Elements
  • Dots
  • Arrows
  • Checkbox
  • Color Swatches
  • Quantity Selector
  • Social Sharing
• Icons & Logos
• Forms
• Utilities
• Frames

Colors

Fonts

Typography

H1 BEBAS NEUE PRO BOLD

H2 BEBAS NEUE PRO BOLD

H3 BEBAS NEUE PRO BOLD

H4 BEBAS NEUE PRO BOLD

H5 BEBAS NEUE PRO BOLD

H6 BEBAS NEUE PRO BOLD

P1 Filosofia OT Regular

P2 Filosofia OT Regular

P3 Filosofia OT Regular

P4 Filosofia OT Regular

CTAs / Buttons

Button Regular

Button Transparent

UI Elements

Icons & Logos

Forms

Input Field Inactive

Input field active

Input field error

Not a valid email address

Email pop ups

Email Join Up

Email Join Up

Email Join Up

Not a valid email address

Text Utilities

• .font-weight-normal
• .font-weight-bold
• .letter-spacing-base
• .text-black
• .text-gray-darkest
• .text-gray-darker
• .text-gray-dark
• .text-gray
• .text-gray-light
• .text-white
• .text-muted
• .text-black-50
• .text-white-50
• .text-primary
• .text-secondary
• .text-success
• .text-info
• .text-warning
• .text-danger

Background Color Utilities

• .bg-black
• .bg-gray-darkest
• .bg-gray-darker
• .bg-gray-dark
• .bg-gray
• .bg-gray-light
• .bg-gray-lighter
• .bg-white
• .bg-primary
• .bg-secondary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger

Frames

Use frames to create elements with defined aspect ratios. All frames require the .frame base class and a modifier class to define their aspect ratio. See /_styles/components/frames.scss to adjust available ratios.

There is also a child element .frame__inner that is positioned absolutely and stretches the full dimensions of the frame.

Responsive Frames

Responsive frame sizing is available and works similar to Bootstrap responsive utilities, any breakpoint class applies to that breakpoint and up. If you add another class for a larger breakpoint it will override any ones applying at smaller breakpoints. Frame sizing being applied to screen sizes smaller than $grid-breakpoints('sm') do not need a responsive class.