calcular - Rafa Monteiro

UI guideline
General Styles and Components V.01
This is material design.
For more information, please visit http://
STYLES
COMPONENTS
TYPOGRAPHY
HEADER
FONT FAMILY
1em = 1rem ~ 16pt
1em = 1rem ~ 14pt
MOBILE INTERNAL DIVIDER METRICS
MOBILE < 768
LIGHTBOX
TEXT FIELDS
DIVIDERS
1em = 1.15 rem ~ 18pt
MOBILE METRICS
DESK METRICS
MOBILE METRICS
DESK INTERNAL DIVIDER METRICS
1em = 1rem ~ 16pt
1em
1em= =1.2
1 rem ~ 14pt
16pt
FILLED
Arial
compra sem cadastro
label*
inputed
Inputed
title
padding: 10pt ~ 0.75em
passo 2 de 4: identificação
passo 2 de 4: entrega
100%
border: 0
subtitle
10pt ~ 0.7em
height: 1pt
TOUCH FONT SIZE
padding: 12pt ~ 0.75em
DESK FONT SIZE
100%
background: #E5E5E5
font-size 16px ~ 1rem
font-size: 14px ~ 1rem
Body Text Starts Here
And Ends here
label font-size: p ~ 14pt
border: 0
vale compra ou vale
presente
inputed font-size: p ~ 14pt
height: 1pt
inputed font-size: H5 ~ 18pt
padding: 12pt ~ 0.85em
background: #E5E5E5
padding-top: 20pt ~ 1.10em
margin-bottom: 10pt ~ 0.7em
vales
100%
Se você recebeu um vale, pode uitilzá-lo para
pagar suas compras no site.
Insira o código dele no campo “Possui cupom
ou vale?”, clique em “Aplicar”, confira se o
valor foi calculado corretamente e conclua a
compra.
Na compra do Vale-Presente não é emitida
nota fiscal. A nota fiscal é gerada para o
produto comprado com o vale.
action Title
padding-bottom: 10pt ~ 0.55em
padding-left-right: 10pt ~ 0.55em
margin-bottom: 10 pt ~ 0.55em
DESKTOP > 768
label*
FILLED
Inputed
FILLED
5pt ~ 0.35em
error message
label*
TEXT STYLES
Inputed
TEXT STYLES
a maior loja. os menores preços.
H1
font-size: 41px ~ 2.6rem
color: #666666
line-height: 49px ~ 1.2em
margin: 31px 0 ~ 0.75em 0
H1
font-size: 36px ~ 2.6rem
color: #666666
line-height: 43px ~ 1.2em
margin: 27px 0 ~ 0.75em 0
minha cesta
identificação
pagamento
obrigado
8pt ~ 0.45em
error message
label font-size: H6 ~ 14pt
Subtitle font-size: H4 ~ 20pt
MOBILE EXTERNAL DIVIDER METRICS
DESK EXTERNAL DIVIDER METRICS
margin: 10pt ~ 0.7em
Action font-size: p ~ 16pt
Label*
caixa expresso
minha cesta
pagamento
10pt ~ 0.7em
Inputed
obrigado
padding top-bottom: 10pt ~ 0.75em
100%
border: 0
padding top-bottom: 12pt ~ 0.75em
label font-size: p ~ 14pt
FILLED
height: 2pt
inputed font-size: p ~ 14pt
background: #CCCCCC
padding: 12pt ~ 0.85em
color label: #CCC;
label*
minha cesta
entrega
pagamento
obrigado
color label: #666;
label*
FILLED
FILLED
color input: #CCC;
___.___.___-__
border: 1pt solid #666666;
FILLED
label*
color label: #666;
Typing|
color input: #333;
color label: #666;
border: 1pt solid #CCC;
label*
border: 1pt solid #666666;
label*
MOBILE METRICS
color input: #CCC;
border: 1pt solid #666666;
Typing|
color input: #333;
border: 1pt solid #666666;
border: 1pt solid #CCC;
Inputed
label*
1em = 1.25 rem ~ 20pt
___.___.___-__
color input: #CCC;
label*
background: #F8F8F8;
Input Disabled
color input: #666;
border: 1pt solid #CCC;
Inputed
label*
border: 1pt solid #E5E5E5;
padding top-bottom: 15pt ~ 1.10em
button
H4
font-size: 18px ~ 1.3rem
color: #666666
line-height: 21px ~ 1.2em
margin: 13.5px 0 ~ 0.75em 0
height: 15pt
color label/error: #E60014;
label*
color input: #666;
Inputed
font-size: H4 ~ 18pt
label*
Input Disabled
label*
Inputed
border: 1pt solid #E60014;
error message
font-weight: bold
padding top-bottom: 13.5pt ~ 0.75em
font-size: H4 ~ 20pt
padding left-right: 30pt ~ 1.7em
font-weight: bold
margin bottom: 9pt ~ 0.5em
color input: #CCC;
FILLED
label*
error message
border: 1pt solid #CCC;
label*
color input: #CCC;
border: 1pt solid #CCC;
Input
label*
FILLED
color input hover: #666666;
background: #E5E5E5;
Input
label*
default
Input
TOGGLE
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
hover
color: #FFFFFF
1em = 1rem ~ 16pt
1em = 1rem ~ 14pt
MOBILE METRICS
pressed
hover
Text font-size: p ~ 16pt
Action font-size: p ~ 16pt
width: 360px
Medium
label*
hint text somente quando acionado o text field
title
|
subtitle
vale compra ou vale presente
Body Text Starts Here
And Ends here
DESK METRICS
pessoa física
pessoa jurídica
pessoa física
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
vales
action Title
pessoa jurídica
font-size: p ~ 16pt
font-size: p ~ 14pt
padding: 12pt ~ 0.75em
padding: 10pt ~ 0.75em
color input: #CCC;
border: 1pt solid #CCC;
label*
pressed
480px
label
background: #C40011
FILLED
cupom
Title font-size: H3 ~ 27pt
FILLED
Se você recebeu um cupom de desconto, pode uitilzá-lo para
pagar suas compras no site. Insira o código dele no campo
“Possui cupom ou vale?”, clique em “Aplicar”, confira se o
valor foi calculado corretamente e conclua a compra. Na
compra do Vale-Presente não é emitida nota fiscal. A nota
fiscal é gerada para o produto comprado com o vale.
Subtitle font-size: H4 ~ 20pt
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.15)
Text font-size: p ~ 16pt
color: #FFFFFF
action label
font-size: 14px ~ 1rem
color: #666666
text-decoration: underline
line-height: 20px ~ 1.4em
margin: 10.5px 0 ~ 0.75em 0
Se você recebeu um vale, pode uitilzá-lo para
pagar suas compras no site. Insira o código dele no campo
“Possui cupom ou vale?”, clique em “Aplicar”, confira se o
valor foi calculado corretamente e conclua a compra. Na
compra do Vale-Presente não é emitida nota fiscal. A nota
fiscal é gerada para o produto comprado com o vale.
disabled
color: #FFFFFF
action label
font-size: 16px ~ 1rem
color: #666666
text-decoration: underline
line-height: 22px ~ 1.4em
margin: 12px 0 ~ 0.75em 0
continuar
Subtitle font-size: H4 ~ 20pt
label*
background: #FC0D1B
caption
font-size: 12px ~ 0.85rem
color: #666666
text-decoration: underline
line-height: 16px ~ 1.35em
margin-bottom: 9px 0 ~ 0.75em 0;
360px
Input
background: #E60014
p
font-size: 14px ~ 1rem
color: #666666
line-height: 20px ~ 1.4em
margin: 10.5px 0 ~ 0.75em 0
Se você recebeu um vale, pode uitilzá-lo
para pagar suas compras no site. Insira o
código dele no campo “Possui cupom ou
vale?”, clique em “Aplicar”, confira se o
valor foi calculado corretamente e conclua a
compra. Na compra do Vale-Presente não é
emitida nota fiscal. A nota fiscal é gerada
para o produto comprado com o vale.
padding: 22pt ~ 1.40em
FILLED
default
H6
font-size: 12px ~ 0.9rem
color: #666666
line-height: 14.5px ~ 1.2em
margin: 9px 0 ~ 0.75em 0
vales
Title font-size: H3 ~ 27pt
label*
caption
font-size: 14px ~ 0.85rem
color: #666666
text-decoration: underline
line-height: 18px ~ 1.35em
margin-bottom: 10.5px 0 ~ 0.75em 0
Body Text Starts Here
And Ends here
color error: #E60014;
color input: #666;
border: 1pt solid #E60014;
margin bottom: 10pt ~ 0.5em
H5
font-size: 16px ~ 1.12rem
color: #666666
line-height: 20px ~ 1.2em
margin: 12px 0 ~ 0.75em 0
vale compra ou vale
presente
color input: #CCC;
background: #F8F8F8;
border: 1pt solid #E5E5E5;
padding top-bottom: 15pt ~ 0.75em
p
font-size: 16px ~ 1rem
color: #666666
line-height: 22px ~ 1.4em
margin: 12px 0 ~ 0.75em 0
title
action Title
background: #F2F2F2
100%
FILLED
Small
border: 0
button
H6
font-size: 14px ~ 0.9rem
color: #666666
line-height: 17px ~ 1.2em
margin: 10.5px 0 ~ 0.75em 0
TABLET METRICS
subtitle
1em = 1.25 rem ~ 18pt
DESK METRICS
1em = 1rem ~ 16pt
color input: #666;
label*
DESK HR DIVIDER METRICS
H3
font-size: 24px ~ 1.7rem
color: #666666
line-height: 29px ~ 1.2em
margin: 18px 0 ~ 0.75em 0
continuar
background: #CCCCCC
compra sem
cadastro
a maior loja. os menores preços.
margin-bottom: 10pt ~ 0.7em
border: 1pt solid #CCC;
FLOW AND BUY BUTTON
H5
font-size: 18px ~ 1.12rem
color: #666666
line-height: 22px ~ 1.2em
margin: 13,5px 0 ~ 0.75em 0
Se você recebeu um cupom de desconto,
pode uitilzá-lo para pagar suas compras no
site.
Insira o código dele no campo “Possui cupom
ou vale?”, clique em “Aplicar”, confira se o
valor foi calculado corretamente e conclua a
compra.
Na compra do Vale-Presente não é emitida
nota fiscal. A nota fiscal é gerada para o
padding: 22pt ~ 1.40em
error font-size: H6 ~ 14pt
margin-bottom: 10pt ~ 0.55em
a maior loja. os menores preços.
cupom
Text font-size: p ~ 16pt
inputed font-size: H5 ~ 18pt
H2
font-size: 30px ~ 2.15rem
color: #666666
line-height: 36px ~ 1.2em
margin: 22.5px 0 ~ 0.75em 0
H4
font-size: 20px ~ 1.3rem
color: #666666
line-height: 24px ~ 1.2em
margin: 15px 0 ~ 0.75em 0
Title font-size: H3 ~ 27pt
padding: 12pt ~ 0.85em
height: 2pt
H3
font-size: 27px ~ 1.7rem
color: #666666
line-height: 32px ~ 1.2em
margin: 20px 0 ~ 0.75em 0
inputed font-size: p ~ 14pt
error font-size: H6 ~ 12pt
border: 0
H2
font-size: 34px ~ 2.15rem
color: #666666
line-height: 41px ~ 1.2em
margin: 25.5px 0 ~ 0.75em 0
100%
label font-size: p ~ 14pt
pessoa física
Action font-size: p ~ 16pt
Toggle Deselected
color: #666
border: 2pt solid #666;
pessoa jurídica
pessoa física
pessoa jurídica
padding: 22pt ~ 1.40em
MOBILE METRICS
disabled
pessoa física
background: #C47674
pessoa física
Toggle Selected
color: #FFF
background: #666;
pessoa jurídica
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
width: 480px
DESK METRICS
pessoa jurídica
label não selecionado
color: #FFFFFF
COLORS
label não selecionado
continuar
label não selecionado
label não selecionado
inputed font-size: H5 ~ 18pt
inputed font-size: H5 ~ 18pt
inputed font-size: p ~ 14pt
inputed font-size: p ~ 14pt
margin: 10pt ~ 0.55em
margin: 10pt ~ 0.55em
margin: 9pt ~ 0.65em
margin: 9pt ~ 0.65em
width: 24pt ~ 1.35em
width: 24pt ~ 1.35em
width: 22pt ~ 1.6em
width: 22pt ~ 1.6em
height: 24pt ~ 1.35em
height: 24pt ~ 1.35em
height: 22pt ~ 1.6em
height: 22pt ~ 1.6em
1em = 1.25 rem ~ 20pt
TABLET METRICS
Large
COLLAPSE
FILLED
FILLED
MAIN AND ALERT COLORS
default
button
label selecionado
1em = 1.25 rem ~ 20pt
Primary
Secondary
Tertiary
Quaternary
background: #E60014
background: #99E000
background: #FFF000
background: #24CBFF
480px
FILLED
label selecionado
label não selecionado
1em = 1.25 rem ~ 18pt
MOBILE METRICS
hover
label não selecionado
title
color label: #666;
background: #E60014;
DESK METRICS
color label: #666;
background: #E60014;
color label: #666;
border: 1pt solid #CCC;
vale compra ou vale presente
subtitle
Body Text Starts Here
And Ends here
color label: #666;
border: 1pt solid #CCC;
vales
action Title
font-size: H4 ~ 20pt
2.2em ~ 44pt
font-weight: bold
Error
Validated
Atention
Information
border: 1px solid #E60014
border: 1px solid #99E000
border: 1px solid #FFF000
border: 1px solid #24CBFF
open
radio selecionado
padding top-bottom: 15pt ~ 0.75em
margin bottom: 10pt ~ 0.5em
pressed
width: 480px
open
Se você recebeu um vale, pode uitilzá-lo para
pagar suas compras no site. Insira o código dele no campo “Possui cupom ou
vale?”, clique em “Aplicar”, confira se o valor foi calculado corretamente e
conclua a compra. Na compra do Vale-Presente não é emitida nota fiscal. A
nota fiscal é gerada para o produto comprado com o vale.
color label: #E60014;
border: #666;
font-size: H4 ~ 18pt
2.2em ~ 44pt
radio não selecionado
padding: 10pt 0 ~ 0.6em 0
label hover
color label: #666;
border: 1pt solid #CCC;
color label: #666;
border: 1pt solid #666;
cupom
radio error
100%
disabled
font-size: H4 ~ 20pt
FLOW AND BUY BUTTONS
radio selecionado
color label: #666;
border: 1pt solid #666;
color label: #E60014;
border: #E60014;
padding: 12pt 0 ~ 0.6em 0
600px
radio não selecionado
color label: #666;
border: 1pt solid #CCC;
Se você recebeu um cupom de desconto, pode uitilzá-lo para pagar suas
compras no site. Insira o código dele no campo “Possui cupom ou vale?”,
clique em “Aplicar”, confira se o valor foi calculado corretamente e conclua a
compra. Na compra do Vale-Presente não é emitida nota fiscal. A nota fiscal é
gerada para o produto comprado com o vale.
Title font-size: H3 ~ 27pt
Subtitle font-size: H4 ~ 20pt
Text font-size: p ~ 16pt
Default
Hover
Pressed
Disabled
background: #E60014;
background: #FC0D1B;
background: #C40011;
background: #C47674;
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
color: #FFFFFF
color: #FFFFFF
color: #FFFFFF
color: #FFFFFF
radio hover
FILLED
FILLED
open
open
color label: #666;
border: 1pt solid #666;
ACTION BUTTON
1em = 1.15 rem ~ 18pt
ACTION BUTTONS
MOBILE METRICS
1em = 1.15 rem ~ 16pt
DESK METRICS
DESK METRICS
Action font-size: p ~ 16pt
radio error
width: 600px
color label: #E60014;
border: 1pt solid #E60014;
hover
1em = 1rem ~ 14pt
selected
DESK METRICS
INPUT + BOTÃO
selected
Default
Hover
Pressed
Disabled
background: #EFEFEF;
background: #E5E5E5;
background: #999;
background: #F8F8F8;
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.15)
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
color: #666
color: #666
color: #666
color: #CCC
font-size: p ~ 14pt
font-weight: bold
padding top-bottom: 6pt ~ 0.40em
padding top-bottom: 12pt ~ 0.75em
padding left-right: 17pt ~ 1.10em
font-size: H5 ~ 18pt
padding left-right: 28pt ~ 1.7em
margin bottom: 8pt ~ 0.5em
font-weight: bold
margin bottom: 8pt ~ 0.5em
MOBILE METRICS
1em = 1.25 rem ~ 20pt
insira o CEP
2.2em ~ 44pt
7pt ~ 0.4em
FILL STYLES
open
FILLED
não sei meu CEP
Focus
Toggle Deselected
Toggle Selected
border: 1pt solid #CCC;
border: 1pt solid #666;
border: 2pt solid #666;
background: #666;
selecione
background: #00ADEF
Error
Validated
Border Light Gray
Light Gray
border: 1pt solid #E60014;
border: 1pt solid #99E000;
border: 2pt solid #CCC;
background: #F8F8F8;
insira o CEP
7pt ~ 0.4em
460px
calcular
21235-565
Title font-size: H3 ~ 24pt
não sei meu CEP
não sei meu CEP
Subtitle font-size: H4 ~ 18pt
Text font-size: p ~ 14pt
selecione
width size icon: 26pt
hover
Action font-size: p ~ 14pt
height size icon: 26pt
insira o CEP
margin top-bottom: 9pt ~ 0.45em
selecione
margin right: 9pt ~ 0.45em
7pt ~ 0.4em
insira o CEP
calcular
20551-000
pressed
hover
insira o CEP
calcular
21235-565
font-size: p ~ 16pt
padding: 14pt 0 ~ 0.7em 0
color: #FFFFFF
não sei meu CEP
FILLED SMALL
default
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
action Title
100%
100%
Default
calcular
insira o CEP
calcular
2.2em ~ 44pt
GENERAL STYLES
default
subtitle
Text Starts Here And Ends here
margin bottom: 9pt ~ 0.5em
INPUT STYLES
FILLED
MOBILE METRICS
padding top-bottom: 13.5pt ~ 0.75em
FILLED
title
1em = 1.15 rem ~ 18pt
font-size: H5 ~ 16pt
100%
Small
selecione
button
button
continuar
padding: 22pt ~ 1.40em
calcular
20551-000
CEP inválido
padding: 20pt ~ 1.40em
width: 460px
CEP inválido
não sei meu CEP
não sei meu CEP
selecione
FILLED
Disabled
Border Dark Gray
background: #30C6ff
background: #F8F8F8;
border: 1pt solid #666666;
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
border: 1pt solid #E5E5E5;
FILLED
disabled
calcular
color: #FFFFFF
font-size: H5 ~ 18pt
open
height: 52pt
padding left-right: 15pt ~ 0.85em
pressed
ICONS
vale compra ou vale presente
selected
background: #0093CB
vales
box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.15)
color: #FFFFFF
Se você recebeu um vale, pode uitilzá-lo para pagar suas
compras no site. Insira o código dele no campo “Possui cupom ou
vale?”, clique em “Aplicar”, confira se o valor foi calculado
corretamente e conclua a compra. Na compra do Vale-Presente
não é emitida nota fiscal. A nota fiscal é gerada para o produto
comprado com o vale.
1em = 1.15 rem ~ 16pt
DESK METRICS
NAVIGATION
disabled
calcular frete e o prazo de entrega para seu CEP
RADIO BUTTON
background: rgba(0, 173, 239, 0.2)
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.15)
calcular
_____-___
não sei meu CEP
cupom
color: #FFFFFF
Se você recebeu um cupom de desconto, pode uitilzá-lo para
pagar suas compras no site. Insira o código dele no campo
“Possui cupom ou vale?”, clique em “Aplicar”, confira se o valor foi
calculado corretamente e conclua a compra.
Na compra do Vale-Presente não é emitida nota fiscal. A nota fiscal
é gerada para o produto comprado com o vale.
padding: 10pt ~ 0.625em
CARDS
SOCIAL MEDIA
1em = 1 rem ~ 16pt
1em = 1.15 rem ~ 18pt
TABLET METRICS
$
calcular frete e o prazo de entrega para seu CEP
MOBILE METRICS
5pt ~ 0.312em
FILLED
Component
CEP inválido
continuar
Container
calcular
BANDEIRAS
480px
não sei meu CEP
10pt ~ 0.625em
default
button
calcular
20551-___
hover
font-size: H5 ~ 18pt
section title
section title
Text Starts Here
And Ends here
Text Starts Here
And Ends here
font-size: H5 ~ 16pt
height: 40pt
Medium
padding left-right: 20pt ~ 1.25em
font-weight: bold
padding top-bottom: 13.5pt ~ 0.75em
margin bottom: 9pt ~ 0.5em
pressed
width: 480px
title
100%
ALERT BOX
INPUT
HEADER
FILLED
margin top-bottom: 20pt ~ 1.25em
disabled
Text Starts Here And Ends here
?
Radio Button
SERVICES
12pt ~ 0.75em
Product
Marketplace (partner)
seguro
roubo e furto
1em = 1.2rem ~ 18pt
MOBILE METRICS
GENERAL
TIMELINE
2
section title
section title
Text Starts Here
And Ends here
Text Starts Here
And Ends here
não sei meu CEP
calcular frete e o prazo de entrega para seu CEP
20551-___
calcular
não sei meu CEP
font-size: H5 ~ 18pt
1em = 1.2rem ~ 16pt
1
width: 32pt ~ 1.8em
2
3
height: 32pt ~ 1.8em
font-size: H5 ~ 16pt
Title font-size: H5 ~ 18pt
width: 28pt ~ 1.8em
Body font-size: p ~ 16pt
height: 28pt ~ 1.8em
padding: 10pt ~ 0.65em
13pt ~ 0.833em
15pt ~ 0.833em
CEP inválido
580px
Title font-size: H3 ~ 24pt
section title
Text font-size: p ~ 14pt
Text Starts Here
And Ends here
padding: 20pt ~ 1.40em
Action font-size: p ~ 14pt
width: 580px
CARD PAINEL
FILLED
margin: 6pt ~ 0.40em
margin-left extra primeiro radio button: 14pt ~ 0,90em
1em = 1 rem ~ 16pt
MOBILE METRICS
FILLED
action Title
Subtitle font-size: H4 ~ 18pt
DESK METRICS
3
calcular
Text Starts Here
And Ends here
14pt ~ 0.90em
1
_____-___
section title
CARROSEL PAGINATION
PAINEL
calcular frete e o prazo de entrega para seu CEP
Radio Button Vertical
12pt ~ 0.75em
EVALUATION
subtitle
1em = 1 rem ~ 16pt
FILLED
FILLED
vale compra ou vale presente
FILLED
Selected
1
BREAKPOINTS
2
color: #FFFFFF
Deselected
Selected
1
color: #666666
background: #E60014
Hover
2
color: #FFFFFF
color: #666666
background: #E60014
background: #E5E5E5
2
vales
Deselected
color: #666666
DESKTOP > 992
section title
section title
section title
Text Starts Here
And Ends here
Text Starts Here
And Ends here
Text Starts Here
And Ends here
Se você recebeu um vale, pode uitilzá-lo para pagar suas compras no site. Insira o
código dele no campo “Possui cupom ou vale?”, clique em “Aplicar”, confira se o valor
foi calculado corretamente e conclua a compra. Na compra do Vale-Presente não é
emitida nota fiscal. A nota fiscal é gerada para o produto comprado com o vale.
section title
cupom
Text Starts Here
And Ends here
Se você recebeu um cupom de desconto, pode uitilzá-lo para pagar suas compras
no site. Insira o código dele no campo “Possui cupom ou vale?”, clique em “Aplicar”,
confira se o valor foi calculado corretamente e conclua a compra.
Na compra do Vale-Presente não é emitida nota fiscal. A nota fiscal é gerada para o
produto comprado com o vale.
color: #666
color: #666
border: 1pt solid #666;
border: 1pt solid #CCC;
padding: 15pt ~ 1.10em
ICON BUTTON AND ACTION LABEL
background: #FFFFFF;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10)
continuar
1em = 1 rem ~ 14pt
1em = 1rem ~ 16pt
MOBILE ICON BUTTON METRICS
1em = 1rem ~ 14pt
DESK METRICS
100%
DESK ICON BUTTON METRICS
padding: 17pt ~ 1.10em
Component
background: #FFFFFF;
padding: 12pt ~ 0.9em
padding: 14pt ~ 0.9em
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10)
42pt ~ 3em
46pt ~ 3em
42pt ~ 3em
46pt ~ 3em
section title
section title
section title
section title
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Large
title
subtitle
CARD PAINEL
width container: 990px
FILLED
FILLED
Text Starts Here And Ends here
action Title
Container
1em = 1 rem ~ 14pt
DESK METRICS
MOBILE ICON BUTTON CLOSE METRICS
DESK ICON BUTTON CLOSE METRICS
700px
Title font-size: H3 ~ 24pt
padding: 16pt ~ 1em
padding: 12pt ~ 0.9em
42pt ~ 3em
46pt ~ 3em
Subtitle font-size: H4 ~ 18pt
Text font-size: p ~ 14pt
Action font-size: p ~ 14pt
margin top-bottom: 18pt ~ 1.25em
42pt ~ 3em
46pt ~ 3em
20px
padding: 20pt ~ 1.40em
width: 700px
20px
Radio Button
FILLED
100%
FILLED
TABLET 768 - 992
FILLED
padding: 15pt ~ 1.10em
11pt ~ 0.75em
background: #FFFFFF;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10)
11pt ~ 0.75em
section title
section title
section title
section title
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
vale compra ou vale presente
vales
FILLED
MOBILE ACTION LABEL METRICS
46pt ~ 3em
action Label
DESK ACTION LABEL METRICS
padding: 12pt ~ 0.9em
padding: 14pt ~ 0.9em
section title
section title
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Se você recebeu um vale, pode uitilzá-lo para pagar suas compras no site. Insira o código dele no campo
“Possui cupom ou vale?”, clique em “Aplicar”, confira se o valor foi calculado corretamente e conclua a
compra. Na compra do Vale-Presente não é emitida nota fiscal. A nota fiscal é gerada para o produto
comprado com o vale.
action Label
42pt ~ 3em
Title font-size: H5 ~ 16pt
cupom
Body font-size: p ~ 14pt
Se você recebeu um cupom de desconto, pode uitilzá-lo para pagar suas compras no site. Insira o código
dele no campo “Possui cupom ou vale?”, clique em “Aplicar”, confira se o valor foi calculado corretamente
e conclua a compra. Na compra do Vale-Presente não é emitida nota fiscal. A nota fiscal é gerada para o
produto comprado com o vale.
padding: 9pt ~ 0.65em
margin: 6pt ~ 0.40em
FILLED
FILLED
continuar
action Label
action Label
FILLED
LOADING AND PLACEHOLDER
width container: 750px
section title
section title
section title
section title
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
section title
section title
Text Starts Here And Ends
here Lorem Ipsum
Text Starts Here And Ends
here Lorem Ipsum
SLIDER
1em = 1 rem ~ 16pt
MOBILE METRICS
1em = 1rem ~ 16pt
MOBILE LOADING METRICS
42pt ~ 2.65em
1em = 1rem ~ 14pt
CARDS
width: 37pt ~ 2.65em
14pt ~ 0.9em
14pt ~ 0.9em
Swiper Active
height: 37pt ~ 2.65em
37pt ~ 2.65em
42pt ~ 2.65em
Swiper Inactive
12pt ~ 0.9em 12pt ~ 0.9em
padding: 14pt ~ 0.9em
font-size: H6 ~ 12pt
image-size: 68 x 68px
padding: 12pt ~ 0.9em
1em = 1 rem ~ 16pt
FILLED
1em = 1 rem ~ 16pt
MOBILE SWIPER METRICS
fill: #E60014;
width: 42pt ~ 2.65em
height: 42pt ~ 2.65em
Realizado em 23/07/2017
12pt ~ 0.9em
animation-rotation: 360º
37pt ~ 2.65em
fill: #E60014;
SWIPER TRACKING TIMELINE
DESK METRICS
DESK LOADING METRICS
animation-rotation: 360º
1em = 1 rem ~ 14pt
MOBILE METRICS
FILLED
28pt ~ 1.75em
image-size: 68 x 68px
Pedido
efetuado
28pt ~ 1.75em
FILLED
12pt ~ 0.75em
20px
20px
MOBILE PLACEHOLDER METRICS
TABLET 480 - 768
DESK PLACEHOLDER METRICS
height: 16pt ~ 1em
16pt ~ 1em
MOBILE < 480
background: #F8F8F8;
endereço de entrega
endereço de entrega
Allan Roubertie
RUA Avenida Rainha Elizabeth da
Bélgica, 1989
Ipanema
Rio de Janeiro - RJ
CEP 21235-565
Allan Roubertie
RUA Avenida Rainha Elizabeth da
Bélgica, 1989
Ipanema
Rio de Janeiro - RJ
CEP 21235-565
FILLED
width: 36pt ~ 2.25rem
Pedido
efetuado
FILLED
height: 36pt ~ 2.25rem
font-size: 14pt ~ H6
width: 58pt ~ 3.625rem
Realizado em 23/07/2017
height: 58pt ~ 3.625rem
14pt ~ 1em
color: #666666
color: #666666
background: #999999
background: #E5E5E5
Current
status
Current
status
Next
status
Next
status
Error
status
Atention
status
height: 14pt ~ 1em
100%
background: #F8F8F8;
padding: 20pt ~ 1.25em
PAINEL STATUS
margin top-bottom: 6pt ~ 0.4em
color: #666666
color: #666666
background: #E60014
background: #FFF000
Error
status
FILLED
FILLED
1em = 1 rem ~ 16pt
MOBILE METRICS
1em = 1 rem ~ 14pt
DESK METRICS
SWIPER FILLED
TABS DESKTOP
22pt ~ 1.428em
Previsão
31
1em = 1 rem ~ 14pt
width container: 100%
DESK METRICS
Atention
status
20pt ~ 1.428em
Previsão
Status de pagamento
31
Pago
Pedido
Status de pagamento
Pago
03-472809686-0
Valor total
07/2017
07/2017
Pedido
efetuado
Autorização
de pagamento
Nota fiscal
eletrônica
Pedido
efetuado
Nota fiscal
eletrônica
Pedido
efetuado
Autorização
de pagamento
Nota fiscal
eletrônica
Pedido
efetuado
Autorização
de pagamento
Produto(s)
entregue(s)
R$ 10.456,76
22pt ~ 1.428em
30pt ~ 2.15em
20pt ~ 1.428em
Pedido
03-472809686-0
cartão de crédito
cartão de crédito
cartão de crédito
selecione
selecione
cartão de crédito
font-size: h5 ~ 16pt
Valor total
11px
11px
MOBILE METRICS
1em = 1rem ~ 14pt
color: #666666
1em = 1 rem ~ 14pt
padding: 20pt ~ 1.428em
DESK SWIPER METRICS
font-size: h3 ~ 27pt
font-size: span ~ 57pt
border: 5pt ~ 0.214em
20pt ~ 1.25em
10% desconto
width: 120pt ~ 7.5em
18pt ~ 1.30em
10% desconto
height: 20pt ~ 1.25em
Swiper Active
color: #666666
width: 110pt ~ 7.85em
Swiper Inactive
padding: 22pt ~ 1.10em
height: 18pt ~ 1.30em
font-size: h6
Nota fiscal
eletrônica
border: 3pt ~ 0.214em
font-size: h5 ~ 18pt
DESKTOP METRICS
Autorização
de pagamento
font-size: span ~ 55pt
font-size: h6 ~ 14pt
1em = 1rem ~ 16pt
Autorização
de pagamento
font-size: h3 ~ 24pt
R$ 10.456,76
selecione
Pedido
efetuado
font-size: h6 ~ 12pt
22pt ~ 1.428em
FLAGS DE DESCONTO
width container: 480px
20pt ~ 1.428em
20pt ~ 1.428em
font-size: h6
110pt ~ 7.85em
120pt ~ 2.65em
Pedido
efetuado
20pt ~ 1.428em
FILLED
10% desconto
background: #85C702
Previsão
background: #85C702
31
950pt
padding-top tab: 30pt ~ 2.15em
11px
10pt ~ 0.714em
FILLED
FILLED
10% desconto
FILLED
padding container: 20pt ~ 1.45em
11px
Previsão
Status de pagamento
31
Pago
07/2017
07/2017
width tab: 235pt ~ 16.8em
Status de pagamento
Pedido
Aguardando
pagamento
03-472809686-0
ALERT BOX
Previsão
31
Valor total
R$ 10.456,76
FILLED
height: 42pt ~ 3rem
Valor total
R$ 10.456,76
1em = 1rem ~ 16pt
MOBILE METRICS
Status de pagamento
Pedido
Pago
03-472809686-0
07/2017
height: 22pt ~ 1.571rem
width: 42pt ~ 3rem
Pedido
03-472809686-0
Pedido
efetuado
font-size: 12pt ~ H6
width container: 950pt ~ 67.85em
Tab font-size: p ~ 14pt
width: 22pt ~ 1.571rem
color: #666666
color: #666666
background: #999999
background: #E5E5E5
Current
status
Next
status
Valor total
color: #666666
color: #666666
R$ 10.456,76
background: #E60014
background: #FFF000
Next
status
Error
status
Atention
status
Atention
status
Error
status
1em = 1rem ~ 14pt
Current
status
DESK METRICS
cartão de crédito
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
selecione
cartão de crédito
cartão de crédito
cartão de crédito
selecione
selecione
SWIPER FILLED
LIST VIEW
100%
Pedido
efetuado
font-size: p ~ 14pt
100%
padding top-left-bottom: 10pt ~ 0.75em
font-size: p ~ 16pt
padding right: 42pt ~ 3em
padding top-bottom: 12pt ~ 0.75em
width bar: 40pt ~ 2.85em
Pedido
efetuado
padding right: 46pt ~ 3em
width bar: 12pt ~ 0.75em
Minha conta
Minha conta
Meus pedidos
Minha conta
Segunda via de boleto
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
Segunda via de nota fiscal
Meus pedidos
FILLED
Meus dados de acesso
border: 1px solid #99E000
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
bar color: #99E000
color: #666
Meus cartões de acesso
Meus cartões de crédito
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
Meus dados cadastrais
Meus dados de acesso
Meus cartões de crédito
border: 1px solid #24CBFF
i
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
bar color: #24CBFF
color: #666
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Meus endereços
Meus endereços
Minhas avaliações
Minhas avaliações
Meus vales
Meus vales
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
100%
border: 1px solid #018CC1
bar color: #018CC1
color: #666
bar width: 3pt ~ 0.25em
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
100%
font-primary: P ~ 16pt
padding: 18pt ~ 1.10em #666666
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
border: 1px solid #FFF000
bar color: #FFF000
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
eiusmod tempor incididunt ut labore et dolore magna aliqua.
background: #FFFFFF;
font-primary: P ~ 14pt #666666
font-secundary: H6 ~ 12pt #666666
padding: 15pt ~ 1.10em
background: #FFFFFF;
color: #666
FILLED
FILLED
border: 1px solid #E60014
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor
incididunt ut labore et dolore magna.
bar color: #E60014
color: #666
Minha conta
Minha conta
Meus pedidos
Meus dados de acesso
Minha conta
Meus pedidos
Segunda via de boleto
Segunda via de nota fiscal
Meus dados cadastrais
Meus dados de acesso
Meus cartões de acesso
Meus cartões de crédito
Meus cartões de crédito
Meus endereços
Meus endereços
Minhas avaliações
Minhas avaliações
Meus vales
Meus vales
Produto(s)
em transporte
Produto em
transporte
Produto(s)
em transporte
Produto em
transporte
DESK METRICS
padding left: 12pt ~ 0.75em
FILLED
Nota fiscal
eletrônica
1em = 1 rem ~ 14pt
1em = 1 rem ~ 16pt
MOBILE METRICS
Autorização
de pagamento
background-hover: #E5E5E5;
color: #666666
Autorização
de pagamento
Nota fiscal
eletrônica
Pedido
efetuado
Autorização
de pagamento
Nota fiscal
eletrônica
Produto(s)
em transporte
Produto em
transporte