Brand colors
#d73f3c
Main highlight
#1d1f26
Footer color
#252730
Heading color
#505259
Body text color
#cbcbcd
Border color
Typography
A a
Roboto
Bold
A a
Roboto
Regular
A a
Roboto Slab
Regular
A a
Roboto Condensed
Bold
A a
Oswald
Bold
A a
Oswald
Regular
Headings
The quick brown fox jumps over the lazy dog
H1 • 32px ; 42px - • Roboto Slab / 400
The quick brown fox jumps over the lazy dog
H2 • 28px ; 38px - • Roboto / 700
The quick brown fox jumps over the lazy dog
H3 • 20px ; 30px - • Roboto / 700
The quick brown fox jumps over the lazy dog
H4 • 18px ; 28px - • Roboto / 400
The quick brown fox jumps over the lazy dog
H5 • 16px ; 16px - • Roboto / 400
The quick brown fox jumps over the lazy dog
H6 • 14px ; 14px - • Roboto / 400
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph • 18px ; 28px - • Roboto / 400
Block quotes
Block Quote
Block quote • 18px ; 22px - • Font name / font weight
Lists
Unordered lists
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ordered lists
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Custom list
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Other
This is some text inside of a div block.
Caption • 14px ; 20px - • Roboto / 400
This is some text inside of a div block.
Small • 12px ; 20px - • Roboto / 400
Links and Buttons
Button Text
Red Button • 18px ; 64px - • Roboto Condensed / 700
Button Text
Black Button • 18px ; 64px - • Roboto Condensed / 700
Button Text
Custom Link • 18px ; 26px - • Roboto Condensed / 700
Text Link
All links • 18px ; - • Roboto / 400
Forms and Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Custom Code
* {-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {color: #ffffff; background: #CE0000;} /* change to brand color */
::selection {color: #ffffff; background: #CE0000;} /* change to brand color */
* {font-variant-ligatures: none;}
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* add this to custom footer code: <script> document.addEventListener("touchstart", function(){}, true); </script> */
}
.w-input::-webkit-input-placeholder {color:#9A9EA3;}
.w-input:-moz-placeholder {color:#9A9EA3; opacity: 1;}
.w-input::-moz-placeholder {color:#9A9EA3; opacity: 1;}
.w-input:-ms-input-placeholder {color:#9A9EA3;}
.submit:focus, .w-button:focus {outline:0;}
strong {font-weight: 700!important;}
input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; background-image: none; }
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {color: #ffffff; background: #CE0000;} /* change to brand color */
::selection {color: #ffffff; background: #CE0000;} /* change to brand color */
* {font-variant-ligatures: none;}
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* add this to custom footer code: <script> document.addEventListener("touchstart", function(){}, true); </script> */
}
.w-input::-webkit-input-placeholder {color:#9A9EA3;}
.w-input:-moz-placeholder {color:#9A9EA3; opacity: 1;}
.w-input::-moz-placeholder {color:#9A9EA3; opacity: 1;}
.w-input:-ms-input-placeholder {color:#9A9EA3;}
.submit:focus, .w-button:focus {outline:0;}
strong {font-weight: 700!important;}
input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; background-image: none; }
Components
Components will be determined by the design and implemented per project.