blox theme

Style Guide

A reference of all global theme styles including typography, colors, buttons, and form elements. These are controlled via Theme Settings.

Colors
Primary
#000000
Secondary
#000000
Heading
#0F172A
Body Text
#0F172A
Link
#374151
Typography
H1 - 52px / 32px mobile

The quick brown fox jumps over the lazy dog

H2 - 42px / 28px mobile

The quick brown fox jumps over the lazy dog

H3 - 34px / 24px mobile

The quick brown fox jumps over the lazy dog

H4 - 26px / 22px mobile

The quick brown fox jumps over the lazy dog

H5 - 20px / 18px mobile
The quick brown fox jumps over the lazy dog
H6 - 16px / 14px mobile
The quick brown fox jumps over the lazy dog
Paragraph - 16px / line-height 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unordered List
  • First list item with sample text
  • Second list item with sample text
  • Third list item with sample text
Ordered List
  1. First ordered item with sample text
  2. Second ordered item with sample text
  3. Third ordered item with sample text
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Link

This is a sample link with hover state

Call To Actions
Primary
Primary Button Disabled
Secondary
Secondary Button Disabled
Tertiary
Tertiary Button Disabled
Four
Four Button Disabled
Five
Five Button Disabled
Six
Six Button Disabled
Button Pair (common pattern)
Get Started Learn More
Get Started Learn More
Get Started Learn More
Badges

Badge styles are configured globally in Theme Settings > /// Badge. Modules use these tiers via the Badge Style picker.

Primary
Primary Badge
Secondary
Secondary Badge
Three
Three Badge
Four (on dark)
Four Badge
Five
Five Badge
Six
Six Badge
Form Elements
Sample Form (Primary Submit)
We'll respond within 24 hours.
Input States
Please enter a valid value.

By submitting this form, you agree to our Terms of Service and Privacy Policy.

Layout Widths
Standard Width - 1400px
Slim Width - 1000px