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

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

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

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

Primary button

Enabled

Hover

Disabled

Primary button for cards

Enabled

Hover

Disabled

Secondary button

Enabled

Hover

Disabled

Text button

Enabled

Ver detalles

Hover

Ver detalles

Enabled

Ver detalles

Hover

Ver detalles

Icons

BoxIcons

Foundation

Components

Cart Button

Enabled

Disabled

Enabled

Disabled

Dropdown

Text inputs

Disabled

Active

Error

Checkbox

Counter

1

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.