UI Style Guide

Download as pdf or txt
Download as pdf or txt
You are on page 1of 1

COLOR

UI Primario

#454545 #5A5959 #BCBCBC #F3F3F3 #F9F9F9 #064158 #266782 #01B9E6 #BAE4F5

Texto

#5A5959 #454545 #BCBCBC #FFFFFF

TIPO DE LETRA

Roboto Light Roboto Regular Roboto Regular Bold

AaBbCcDd AaBbCcDd AaBbCcDd


Roboto Slab Light Roboto Slab Regular Roboto Slab Regular Bold

AaBbCcDd AaBbCcDd AaBbCcDd

TIPOGRAFA

Heading 1
font-family: Roboto; LOREM IPSUM DOLOR SIT
AMET, CONSECTETUR
font-size: 60px;
font-weight: bold;
color: #454545;
letter-spacing: 0;
line-height: 60px;

Heading 2
font-family: Roboto;
LOREM IPSUM DOLOR SIT AMET,
CONSECTETUR ADIPISCING ELIT.
font-size: 40px;
font-weight: bold;
color:#454545;
letter-spacing: 0;
line-height:48px;

Heading 3
font-family: Roboto;
font-size: 20px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in
lacinia eros, sed euismod magna.
font-weight: boldl;
color: #5A5959;
letter-spacing: 0;
line-height:30px;

Prrafo
font-family: Roboto;
font-size: 18px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet lorem
font-weight: normal;
color: #5A5959;
letter-spacing: 0;
imperdiet lorem erat.
line-height: 30px;

Entrada
Noticia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet lorem imperdiet
font-family: Roboto;
font-size:16px;
lorem erat.
font-weight: normal;
color: #5A5959;
letter-spacing: 0;
line-height: 21px;

TAG
font-family: Roboto; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet lorem imperdiet
lorem erat.
font-size12px;
font-weight: normal;
color: #BCBCBC;
letter-spacing: 0;
line-height: 16px;

You might also like