Scribd
Upload
168 views

UI Style Guide

This document defines the color palette and typography for a user interface. It specifies colors like #454545 and #5A5959 for text, and fonts including Roboto Light, Roboto Regular, and Roboto Slab for headings and paragraphs. The typography section outlines the font, size, weight, color, spacing and line height for various elements like headings 1-3, paragraphs, entries, and tags.

Uploaded by

Carlos Fernando Monzón
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
168 views

UI Style Guide

This document defines the color palette and typography for a user interface. It specifies colors like #454545 and #5A5959 for text, and fonts including Roboto Light, Roboto Regular, and Roboto Slab for headings and paragraphs. The typography section outlines the font, size, weight, color, spacing and line height for various elements like headings 1-3, paragraphs, entries, and tags.

Uploaded by

Carlos Fernando Monzón
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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