Thanh toán trong 2 giây

GUIDELINES
August 2017
 GUIDELINES
MERCHANT ZALO PAY
MỤC LỤC

1. Bar 3. Controls

1.1 Navigation Bars 3.1 Buttons

1.2 Status Bars 3.2 Labels
3.3 Pickers
2. Views 3.4 Progress Indicators
3.5 Segmented Controls
2.1 Action Sheets 3.6 Switches
2.2 Alerts 3.7 Text Fields
2.3 Tables
2.4 Web Views 4. Visual Specification

4.1 Font Specification

4.2 Color
1. BAR

1.1 Navigation Bars

45
iOS
- Height: 45px
- Background color: #008FE5
- Color text & icon: #FFFFFF

12 12

26x26 18 - Semibold 26x26

12 12

14 - Regular 18 - Semibold 14 - Regular

Android
62
- Height: 62px
- Background color: #008FE5
- Color text & icon: #FFFFFF

16 32 16

24x24 20 - Medium 24x24

16 16

13 - Regular 20 - Medium 13 - Regular

1.2 Status Bars

- Height: 24px
- Background color: #008FE5
- Text color: #FFFFFF
2. Views

2.1 Action Sheets/Bottom Sheets

16 16

iOS 56

- Text main: 16pt - #24272B

- Text sub: 13pt - #727F8C
- Icon: 30px x 30px
- Radius: 13px
- Text button align: Center

10 10
Android
16 16
- Text main: 15pt - #24272B
- Text sub: 13pt - #727F8C 56
- Icon: 30px x 30px
- Text button align: Left
2.2 Alerts/Dialogs

Rule text button: Text button important 20

340
bold and to the left

iOS
30
- Text content: 14pt - #24272B
- Text content align: Center
- Text button: 16pt - #008FE5 30
- Icon: 60px x 60px
- Rule text button: Text button important 46

bold and to the left

Android
- Text content: 14pt - #24272B - left
20
- Text button: 16pt - #008FE5 340

- Icon: 60px x 60px

20
24 24

24
24
54

24 24
 Text main

2.3 Table 12 60 12

Default
- Text main: 16pt - #24272B
- Icon: 26px x 26px Default

Value 1
- Text main value: 16pt - #008FE5

Value 2 (Normal) 12 12

- Text main value: 16pt - #C7C7CC

Value 1
Value 2 (Fill)
- Text main value: 16pt - #24272B

Text main value

Text main value

Value 2 (Normal) Value 2 (Fill)

 Text tile group Text main

Group list 1
- Text title group: 13pt - #727F8C
- Text main: 16pt - #24272B 12 12
- Text money
+ Receivemoney: 20pt - #06BE04 - Medium 76
+ Money pay: 20pt - #24272B - Medium
- Text sub: 13pt - #727F8C 16
Group list 1
10
Group list 2 16

- Icon: 40px x 40px

Text sub Text money

Text sub

Group list 2
2.4 Web Views
Loading
- Text main: 16pt - #24272B
- Text button: 14pt - #008FE5
- Loading color: #129D5A

Text main

Text main

Text button
3. Controls

3.1 Buttons
#008fe5

Có 3 trạng thái #49BBFF

Default, Press, Disabled
#C7CAD3
- Size text button: 18pt
- Height: 54px
- Margin left: 12px #04BE04
- Margin right: 12px
#21D921

#4ABBFF

#91D6FF

Fill: #E5F5FF
Stroke: #4ABBFF
Fill: #F5FCFF
Stroke: #93D8FF

#008fe5

#49BBFF
3.2 Labels

- Text main: 16pt - #ACB3BA

- Text sub: 13pt - #ACB3BA

Text main

Text sub
3.3 Pickers

- Text button: 14pt - #008FE5

- Text title: 16pt - #24272B
Text button Text title
- Text picker: 20pt - #24272B

44

36
Text picker
3.4 Progress Indicators

Activity Indicator
- Size: 145px x 145px 215
- Color: #77777A - Alpha: 90%
- Radius: 10px

145
Progress Bars 48
- Size: 2px
145 20 Activity Indicators
- Color: #129D5A
- Radius: 10px

Progress Bars
3.5 Segmented Controls/Tabs

iOS
- Height: 28px
- Text size: 13pt
- Radius: 3px 30 30

Android
- Height: 54px
- Text size: 15pt
- Line active color: #CEEBFD
54
3.6 Switches

iOS Android
3.7 Text Fields

Có 4 trạng thái

Normal
60 Normal
- Label: 16pt - #ACB3BA - Regular
- Line: 2px - #E3E6E7
Active
Active 20x20 - #C7C7CC

- Title label: 13pt - #008FE5 - Regular 12 12

- Label: 16pt - #24272B - Regular 8 Error

- Line active: 2px - #008FE5

Error Fill
- Title label: 13pt - #FF0000 - Regular
- Label: 16pt - #24272B - Regular
- Line error: 2px - #FF0000
Multi label
Fill
- Title label: 13pt - #FF0000 - Regular
- Label: 16pt - #24272B - Regular
4. Visual Specification

4.1 Font Specification

iOS Font: SF UI Text

Text number money, 48pt

Text number money, 42pt
Text number money, 38pt
Text main, 16pt - #24272B

Text sub, 14pt - #727F8C

TEXT TITLE GROUP, 13pt - #727F8C

Text note, 13pt - #727F8C

Text note, 13pt - #008FE5

Text error, 13pt - #FF0000

Color text

#24272B #727F8C #ACB3BA #008FE5 #06BE04 #FF0000

Android Font: Roboto

Text number money, 48pt

Text number money, 42pt
Text number money, 38pt
Text main, 15pt - #24272B

Text sub, 13pt - #727F8C

TEXT TITLE GROUP, 13pt - #727F8C

Text note, 12pt - #727F8C

Text note, 12pt - #008FE5

Text note, 12pt - #FF0000

Color text

#24272B #727F8C #ACB3BA #008FE5 #06BE04 #FF0000

4.1 Color

Color text

#24272B #727F8C #ACB3BA #008FE5 #06BE04 #FF0000

Color icon

#ACB3BA #C7C7CC #4286F6 #129D5A #F6B501 #DE4438

THANK YOU
Thanh toán trong 2 giây