Styleguides
Typography
H900 Ubuntu
H800 Ubuntu
H700 Ubuntu
H600 Ubuntu
H500 Ubuntu
H400 Ubuntu
H900 Ubuntu
H800 Ubuntu
H700 Ubuntu
H600 Ubuntu
H500 Ubuntu
H400 Ubuntu
H900 Ubuntu
H800 Ubuntu
H700 Ubuntu
H600 Ubuntu
H500 Ubuntu
H400 Ubuntu
Paragraph type 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut at iusto eius culpa maiores earum repudiandae nihil, commodi suscipit nesciunt provident, autem eligendi officia laudantium cupiditate est vel aperiam laborum?
Paragraph type 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eos eligendi assumenda odio! Eius illum beatae vel, a esse facilis atque nemo tenetur, eaque, provident tempora? Earum facilis ut vel?
Type styles
- Strong
- Emphasis
- Inline link
- Strike
- Sup
Blockquotes
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
The author of the quote
Lists
|
|
Numeric bullet
|
|
Child lists (to match the RTE styles) |
|
Responsive tables
Order | Date | Payment Status | Fulfillment Status | Total |
---|---|---|---|---|
#1001 | December 22, 2015 | Authorized | Unfulfilled | $43.03 |
#1002 | December 23, 2015 | Authorized | Unfulfilled | $44.03 |
#1003 | December 24, 2015 | Authorized | Unfulfilled | $45.03 |
#1004 | December 25, 2015 | Authorized | Unfulfilled | $46.03 |
#1005 | December 26, 2015 | Authorized | Unfulfilled | $47.03 |
#1006 | December 27, 2015 | Authorized | Unfulfilled | $48.03 |
Colors
Primary Colors
$color-green
#00FF00
$color-turquoise
#00FFFF
$color-fucsia
#FF00FF
$color-yellow
#FFFF00
Achromatic
$color-white
#F1F1F1
$color-grey
#454545
$color-dark-grey
#21282F
$color-black
#1A1A1A
Gradients
$gradient-green
#00FF00
#29FD7E
#00FFFF
$gradient-black
#1A1A1A
#454545
$gradient-red
#EA1414
#FF00FF
$gradient-sunset
#EA1414
#FF00FF
$gradient-green-darken
#EA1414
#FF00FF
$gradient-blue-grey
#21282F
#455463
Scales
$color-black
#1A1A1A
100%
$color-black-80
#4D4D4D
80%
$color-black-60
#808080
60%
$color-black-40
#b3b3b3
40%
$color-black-20
#e6e6e6
20%
Shadows
Cards
$card-shadow
Bar
$bar-shadow
Light 50%
$neon-light-50
Buttons and links
Icons
BoxIcons
Foundation
Components
Cart Button
Dropdown
Label
Text inputs
Checkbox
Counter
Product Cards
Product Title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. At illum laudantium quos nemo, vitae praesentium.
Product Title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. At illum laudantium quos nemo, vitae praesentium.