Table of Contents

Colors

White
#FFFFFF
$color-white

Gray Light
#F2F2F2
$gray-light

Gray
#E9E9E9
$gray

Gray Dark
#898989
$gray-dark

Gray Darker
#545352
$gray-darker

Gray Darkest
#343433
$gray-darkest

Black
#000000
$black

Pearl
#fffcf4
$pearl

Brown Dark
#362e24
$brown-dark

Maroon
#9f2739
$maroon

Fonts

BEBAS NEUE PRO BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Filosofia OT Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+
Filosofia OT Unicase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

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
Text Link
Text Link SMALL

UI Elements

Drop Down
Size Selector
Size: Select One
S
M
L
XL
XXL
XXXL
Slider Dots
Arrows
Checkbox
Color Swatches
Color: Select One
Quantity Selector
Close Icon
Large
Small

Icons & Logos

Icons
Logos
Mobile
Desktop

Forms

Not a valid email address
Email pop ups
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.

16x9
6x4
4x3
1x1
3x4
4x6
9x16
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.

.frame
.frame--16x9
.frame--sm-6x4
.frame--md-1x1
.frame--lg-3x4
.frame--xl-4x6