Styleguide
Color Pallete
BRAND COLORS
#C8102E
#000000
#ffffff
GREYSCALE COLORS
#F7F7F7
#F1F1F1
#E8E8E8
#D2D2D2
#B8B8B8
#ADADAD
#888888
#666666
#444444
UTILITY COLORS
PRIMARY HEADLINE
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Lora : Regular, Medium, Semibold,. Bold : Title & Headlines
SECONDARY HEADLINE + PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate odio ut enim blandit volutpat maecenas. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Integer quis auctor elit sed vulputate.
DM Sans : Regular, Light, Medium, Bold : Subcopy, Body Copy, & CTAs
TYPOGRAPHY STYLES
products you can’t live without
Best Sellers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
DESKTOP TYPE SCALES
H1 Title Example
H2 Title Example
H3 Title Example
H4 Title
H5 Title
H6 Title
Subheading Type Scale - All caps
Subheading styles are linked between desktop and mobile screens. Meaning a large subheading style should be used in both desktop and mobile designs as these styles correspond/link in the dev styleguide. If you wish for mobile to have a separate corresponding style create additional coordinating subheading styles similar to how the heading (H1-H6) styles are set up.
SUBHEADING Large
Subheading Regular
Subheading Small
Subheading Type Scale - SentEnce Case
Subheading styles are linked between desktop and mobile screens. Meaning a large subheading style should be used in both desktop and mobile designs as these styles correspond/link in the dev styleguide. If you wish for mobile to have a separate corresponding style create additional coordinating subheading styles similar to how the heading (H1-H6) styles are set up.
Subheading Large
Subheading Regular
Subheading Small
paragraph Type Scale
Subheading styles are linked between desktop and mobile screens. Meaning a large subheading style should be used in both desktop and mobile designs as these styles correspond/link in the dev styleguide. If you wish for mobile to have a separate corresponding style create additional coordinating subheading styles similar to how the heading (H1-H6) styles are set up.
Paragraph - Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa vitae tortor condimentum lacinia quis vel. Varius vel pharetra vel turpis nunc eget lorem dolor.
Paragragh - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa vitae tortor condimentum lacinia quis vel. Varius vel pharetra vel turpis nunc eget lorem dolor.
Paragragh - Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa vitae tortor condimentum lacinia quis vel. Varius vel pharetra vel turpis nunc eget lorem dolor.
Paragragh - XSmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa vitae tortor condimentum lacinia quis vel. Varius vel pharetra vel turpis nunc eget lorem dolor.
UX ELEMENTS
FORM FIELDS
CHECKBOXES
RADIO BUTTONS
TABLES
| Order Value | Standard Ground | 3-Day |
|---|---|---|
| $0.00 - $25.00 | $25.01 - $50.00 | $50.01 - $100.00 |
| $0.00 - $25.00 | $25.01 - $50.00 | $50.01 - $100.00 |
| $16.99 | $19.99 | $24.00 |
| $16.99 | $19.99 | $24.00 |
BLOCK QUOTE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod temp or sed incididunt ut labore et dolore magna aliqua. Vulputate odio ut enim blandit volutpat maecenas. Dapi bus ultrices in iacul is nunc sed augue lacus viverra vitae. Integer quis auctor elit sed vulputate.
- First Last