Vital UI kit

Woody Lee
/UI
Vitals ESP 2015
2015
2014
2013

Rebranding1 Cloud Services Rebranding
Visual Identity

17 cm
5 cm
0.125 cm
0.2 cm
20151 Cloud Services Rebranding
Visual Identity

17 cm
5 cm
0.125 cm
0.2 cm
Payroll
00B4FF RGB 0 180 255
555555 RGB 85 85 85
0040BF RGB 0 64 191
RGB 0 195 255
RGB 0 236 246
00C3FF
00ECF6
EB5000 RGB 235 80 0
RGB 255 180 0
RGB 255 232 21
FFB400
FFE815
006A7C RGB 0 106 124
RGB 53 212 195
RGB 149 247 200
35D4C3
95F7C8
0.5 cm
0.5 cm
Shree Devanagari 714 Regular
size : 27 pt
kerning : optical
tracking : 10
stroke : 0.75 pt (round corner)
size : 27 pt
kerning : optical
tracking : 10
3 cm
2 cm
1 cm 1 cm
0.5 cm 0.5 cm
size : 44 pt
kerning : optical
tracking : 0
Special Symbols
size : 33 pt
stroke : 0.75 pt + 0.25 pt (round corner)
2 cm 0.75 cm 2 cm
0.5 cm
icon 字型 / 橫向直立規範
icon 橫向文字稍大規範
General Ledger
General Ledger
General Ledger Task & Meet
4 cm
6 cm
積木概念大小比例
10 cm
15 cm
2.5 cm
2 cm
Visual Identity

4 cm
4 cm
4 cm
0.75 cm 0.5 cm
0.75 cm
size : 27 pt
kerning : optical
tracking : 10
0.75 cm
4 cm 0.75 cm
0.3 cm 0.3 cm
Special Symbols (resize based on the middle line)
size : 20 pt
stroke : 0.75 pt + 0.25 pt (round corner)
size : 27 pt
kerning : optical
tracking : 75
1234567890!@#$%^&*()_+
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Shree Devanagari 714 Regular (size 27pt, stroke 0.75pt)
Payroll
Payroll
General Ledger
CRM
Task & Meet
00B4FF RGB 0 180 255
555555 RGB 85 85 85
Payroll Payroll
PayrollKnowledge
General Ledger
CRM
FormDoc
Official Document
目前產品呈現方式
Payroll
Task & Meet
A B C D E F G H
R S T U V W X Y Z
I J K L M N O P Q
Visual Identity

17 cm
5 cm
0.125 cm
0.2 cm
Visual Identity

Visual Identity

UI1 Cloud Services Rebranding
Visual Identity

2 How to start
UI kit
General Ledger
CRM
Payroll
VAT
Official Document
Knowledge
FormDoc
Task & Meet

UI kit
UI kit
2 How to start
UI kit

1.
2. UI / UX
3.
2 How to start
UI kit

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vital Management Tools colors
Vital CRM Tools colors
Payroll
2 Basic elements

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
#0E86FE
#555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
Sooge Blue = color-primary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
color-primary
color-success
color--info
color--alarm
Medium
500
dark
600
darker
700
darkest
800
deepest-dark
900
light
400
lighter
300
lightest
200
deepest-light
100
#A6D2FF
#A5ECCD
#D9ECFF
#CFF5E4
#73B9FE
#7BE3B5
#0E86FE
#2BCD86
#419FFE
#51DA9E
#016DD8
#22A36A
#0153A5
#19794F
#003A73
#104F33
#002040
#082518
#99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733
#FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00
color--warning
#FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200
2 Basic elements

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
color-primary
color-success
color--info
color--alarm
Medium
500
dark
600
darker
700
darkest
800
deepest-dark
900
light
400
lighter
300
lightest
200
deepest-light
100
#A6D2FF
#A5ECCD
#D9ECFF
#CFF5E4
#73B9FE
#7BE3B5
#0E86FE
#2BCD86
#419FFE
#51DA9E
#016DD8
#22A36A
#0153A5
#19794F
#003A73
#104F33
#002040
#082518
color--warning
#0E86FE
color-Secondary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
#00B4FF
Primary
2 Basic elements

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
color-primary
color-success
color--info
color--alarm
Medium
500
dark
600
darker
700
darkest
800
deepest-dark
900
light
400
lighter
300
lightest
200
deepest-light
100
#A6D2FF
#A5ECCD
#D9ECFF
#CFF5E4
#73B9FE
#7BE3B5
#0E86FE
#2BCD86
#419FFE
#51DA9E
#016DD8
#22A36A
#0153A5
#19794F
#003A73
#104F33
#002040
#082518
color--warning
#0E86FE
color-Secondary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
- Secondary
- Grayscale  
-Tertiary
2 Basic elements

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
#0E86FE
color-Secondary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
color-primary
color-success
color--info
color--alarm
Medium
500
dark
600
darker
700
darkest
800
deepest-dark
900
light
400
lighter
300
lightest
200
deepest-light
100
#A6D2FF
#A5ECCD
#D9ECFF
#CFF5E4
#73B9FE
#7BE3B5
#0E86FE
#2BCD86
#419FFE
#51DA9E
#016DD8
#22A36A
#0153A5
#19794F
#003A73
#104F33
#002040
#082518
color--warning
Material design Bootstrap
Primary, Success, Info, Warning, Alarm
2 Basic elements

#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
#0E86FE
color-Secondary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
color-primary
color-success
color--info
color--alarm
Medium
500
dark
600
darker
700
darkest
800
deepest-dark
900
light
400
lighter
300
lightest
200
deepest-light
100
#A6D2FF
#A5ECCD
#D9ECFF
#CFF5E4
#73B9FE
#7BE3B5
#0E86FE
#2BCD86
#419FFE
#51DA9E
#016DD8
#22A36A
#0153A5
#19794F
#003A73
#104F33
#002040
#082518
color--warning
Alarm
color:
#ffffff
background:
$c-alarm-500
Warning
color:
#ffffff
background:
$c-warning-500
Info
color:
#ffffff
background:
$c-info-500
Success
color:
#ffffff
background:
$c-success-500
Primary
color:
#ffffff
background:
$c-primary-500
Default
color:
$c-tertiary-700
background:
$c-tertiary-200
Inverse
color:
#ffffff
background:
$c-secondary-800
2 Basic elements

#0E86FE
color-Secondary
color-Grayscale
color-Tertiary
#676F80 #99A0B2 #E0E5F0
Download Delete Print Search Prev
With icon
Icon
Next
Attached
Attached on top
One Two
FourThree
Attached on bottom
HoverActive
Inputs
placeholder…
placeholder…
placeholder…
placeholder…
Default
Focus
Disabled
Error
Not editable
Error
Editable
http://semantic-ui.com/elements/input.html
Basic
background: $color-alarm-100
border: 1px solid $color-alarm-500
User Account Inbox Schedule Editorials Setting
Hover
Group 001
Group 002
Group 003
User 001
User 002User 002
User 003
Hover
Active
Buttons, Inputs, Menu
( )
2 Basic elements

Basic Basic
light-background dark-background
Links
With dropdown / Tree / Accordion
Links
With dropdown / Tree / Accordion
Item 01 Item 01
Item 01
Item 01
Item 01
Item 02 Item 02
Item 02
Item 02
Item 02 - 1
Item 02 - 2
Item 02 - 3
Item 02
Item 03 Item 03
Item 03
Item 03
Item 03
Item 01
Item 02
Item 02 - 1
Item 02 - 2
Item 02 - 3
Item 03
Collapse
Styled
Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
Lorem Ipsum has been the industry's
standard dummy text ever since the
1500s, when an unknown printer took
a galley of type and scrambled it to
make a type specimen book.
Question 01
Item 02
Question 03
Question 01
Question 02
Question 03
Question
BasicBasic Inverted
Question 01
Question 02
Question 03
Question 01
Question 02
Question 03
Lists, Collapse
2 Basic elements

Image Image
Round Square
Users without proﬁle pictures have their initials as avatars. Users without proﬁle pictures have their initials as avatars.
xl xl
xl 4px
l 4px
m 3px
s 2px
xs 2px
xl 4px
l 4px
m 3px
s 2px
xs 2px
xl 3px
l 2px
m 2px
s 1px
xs 1px
xl 3px
l 2px
m 2px
s 1px
xs 1px
64px 64px
l l
48px 48px
m m
32px 32px
s s
24px 24px
xs xs
16px 16px
No-image - user-initials - light-background
xl
RF KL
64px
l
48px
m
32px
s
24px
xs
16px
xl
RF KL
64px
l
48px
m
32px
s
24px
xs
16px
border-radius Guide
border-radius Guideborder-width Guideborder-width Guide
Primary button active color
Success button active color
Info button active color
Warming button active color
Danger button active color
Color Guide
Color Guide
With badge
Badge position Badge position
Only shape Only shapeValues in the badge
With badge
99+
99+
Avatar
UI
2 Basic elements

Image Image
Round Square
Users without proﬁle pictures have their initials as avatars. Users without proﬁle pictures have their initials as avatars.
xl xl
xl 4px
l 4px
m 3px
s 2px
xs 2px
xl 4px
l 4px
m 3px
s 2px
xs 2px
xl 3px
l 2px
m 2px
s 1px
xs 1px
xl 3px
l 2px
m 2px
s 1px
xs 1px
64px 64px
l l
48px 48px
m m
32px 32px
s s
24px 24px
xs xs
16px 16px
xl
RF KL
64px
l
48px
m
32px
s
24px
xs
16px
xl
RF KL
64px
l
48px
m
32px
s
24px
xs
16px
border-radius Guide
border-radius Guideborder-width Guideborder-width Guide
Color Guide
Color Guide
With badge
Badge position Badge position
Only shape Only shapeValues in the badge
With badge
99+
99+
Avatar
2 Basic elements

—
Avatar
Check list Check list
Check Box Input (default) Check Box Input (default)
Check Box Input (active) Check Box Input (active)
Check Box Input (selected) Check Box Input (selected)
Check Box Input (hover) Check Box Input (hover)
Check Box Input (disable) Check Box Input (disable)
Check Box Input (always selected) Check Box Input (always selected)
Check Box
RoundSquare
Option list
Radio Input (default)
Radio Input (hover)
Radio Input (active)
Radio Input (disable)
Radio Input (selected)
Radio Input (always selected)
Radio
Switch
On
Active
Selected Selected
Selected Active Selected Active
Disable
Off
Round
Basic
With icon
With text
OnOff
Active
Disable
Square
Basic
With icon
With text
2 Basic elements

Inputs
dramsign
• • • • • • •
dieterams@gmsil.com.tw
+0 Ext
Year
Dieter Rams
Example: James Allen
Username is available
This is a alternate name for your account, used by some
network services. Enter 8 lowercase characters or fewer with
no spaces. Example: jallen
Your account has been locked because you have reached the
maximum number of invalid logon attempts.
Please enter a valid email address
Required
YYYY
Month
Taiwan(+886)
20 Year
phone number…
MM
Enter the
Area code
After “0”
please omit if there
is no extension
number
User Name
Email
Birthday
Telephone
Full Name
Password
Password • • • • •
Password strength: weak
• • • • • • •
Password strength: Fair
• • • • • • • • •
Password strength: Good
• • • • • • • • • • •
Password strength: Great
Password • • • • •
Password strength: weak
• • • • • • •
Password strength: Fair
• • • • • • • • •
Password strength: Good
• • • • • • • • • • •
Password strength: Great
Ŏ
Input table
2 Basic elements

Inputs
align-right align-left
Enter Email… Enter Email…
Enter telephone number… Enter telephone number…
Enter mobile phone number… Enter mobile phone number…
Male Male
Australia Australia
Last-NameFitst-Name Last-NameFitst-Name
Introduce youself… Introduce youself…
Email Email
Tele Tele
Mobile phone Mobile phone
Gender Gender
Country Country
Full Name Full Name
Brief Intro Brief Intro
labels on the Left Side
2 Basic elements

Table
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Bordered
Striped
Hover
Hover
Table Data Table Data Table Data Hover
Table
Align
With checkboxs, inputs | list selected background color
Resize
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Table Data 16.0 200,000,000 Oct. 23, 2015 86%
Table Data 2.0 16,500 Aug. 5, 2015 6%
Table Data 30.5 500,000 Dec. 12, 2015 18%
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
2 Basic elements

Table
Basic
Bordered
Striped
Hover
Hover
table input
content
Placeholder…
Value
Value
Label
Label
Label
Align
Resize
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Table Data 16.0 200,000,000 Oct. 23, 2015 86%
Table Data 2.0 16,500 Aug. 5, 2015 6%
Table Data 30.5 500,000 Dec. 12, 2015 18%
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
2 Basic elements

Basic
Bordered
Striped
Hover
Hover
Align
Resize
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Table Data 16.0 200,000,000 Oct. 23, 2015 86%
Table Data 2.0 16,500 Aug. 5, 2015 6%
Table Data 30.5 500,000 Dec. 12, 2015 18%
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Placeholder…
Value
Value
Label
Label
Label
2 Basic elements

Basic
Bordered
Striped
Hover
Hover
Placeholder…
Value
Value
Label
Label
Label
Align
Resize
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Table Data 16.0 200,000,000 Oct. 23, 2015 86%
Table Data 2.0 16,500 Aug. 5, 2015 6%
Table Data 30.5 500,000 Dec. 12, 2015 18%
16.0
2.0
30.5
Table Data 200,000,000 86%
Table Data 16,500 Aug. 5, 2015 6%
Table Data 500,000 Dec. 12, 2015 18%
Oct. 23, 2015
Placeholder…
Value
Value
Label
Label
Label
2 Basic elements

( )
Let’s Get Started
Ŏ
Congrats!
Account locked out
You have entered an incorrect password 5 times,
cannot be log on to in 15 minutes
Confirm
Upload Finished
Confirm
New update available
version 1.2.8
Confirm
Update now
Oops!
Check your connection
Confirm
Confirm
Title
Lorem ipsum dolor sit amet, sea oblique
aliquam oportere ea, id dico interesset eam.
Eu eum quem velit verterem, amet dicat
quaeque ad est. An facer ponderum usu,
ornatus phaedrum nam at… Link
99+
Default Primary
Default Primary
ornatus phaedrum nam… Link
Title
Subtitle
2 Basic elements

Let’s Get Started
Ŏ
Congrats!
Account locked out
You have entered an incorrect password 5 times,
cannot be log on to in 15 minutes
Confirm
Upload Finished
Confirm
New update available
version 1.2.8
Confirm
Update now
Oops!
Check your connection
Confirm
Confirm
Title
ornatus phaedrum nam at… Link
99+
Default Primary
Default Primary
ornatus phaedrum nam… Link
Title
Subtitle
2 Basic elements

- Ofﬁcial Document
UI Kit
15 20
2016.04
UI UI kit
3 Product application

#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#aaaaaa
#cccccc
#dddddd
#F0F0F0
#F8F8F8

#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#aaaaaa
#cccccc
#dddddd
#F0F0F0
#F8F8F8
Secondary
Dom tree list level Hover, Active,
Current

#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#aaaaaa
#cccccc
#dddddd
#F0F0F0
#F8F8F8
Grayscale
(
)  
Placeholder…
Value
General information
Label
Label
Label

#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#aaaaaa
#cccccc
#dddddd
#F0F0F0
#F8F8F8
info
Badge
Badge
(
)

#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#aaaaaa
#cccccc
#dddddd
#F0F0F0
#F8F8F8
Primary

ƻ
1 -
ƻ ƻ

1 -
Hover Active
ƻ
Hover
Active

2 -
( )
1 - 13 131 2 3

2 -
( )
UI

2 -
( )
Pill tab
Secondary

2 -
( )
Tab Tab Tab
Header pill

2 -
( )
Tab Tab Tab
Header pill
Tab
Tab

3 - Table
Table Grid
( )
1020001029 104/04/271
1020001029 104/04/274
1020001029 104/04/273
1020001029 104/04/275
1020001029 104/04/276
1020001029 104/04/277
1020001029 104/04/278
1020001029 104/04/279
1020001029 104/04/272

3 - Table
( )
Table
10200027464
10300007419
10200010298
10010000277
10200010296
10010000275
10200036383
1020007412
10200010291

3 - Table
( )
Table
10200027464
10300007419
10200010298
10010000277
10200010296
10010000275
10200036383
1020007412
10200010291
Icon fontIcon font
Speed icon
gi-type
icon
table grid

UI UI Kit
QA

4 Extensibility
UI kit
CMS
2016

4 Extensibility
UI kit
Primary

4 Extensibility
UI kit
Alarm
color:
#ffffff
background:
$c-alarm-500
Warning
color:
#ffffff
background:
$c-warning-500
Info
color:
#ffffff
background:
$c-info-500
Success
color:
#ffffff
background:
$c-success-500
Primary
color:
#ffffff
background:
$c-primary-500
Default
color:
$c-tertiary-700
background:
$c-tertiary-200
Inverse
color:
#ffffff
background:
$c-secondary-800

4 Extensibility
UI kit
Secondary
Grayscale
 
color-Secondary
color-Grayscale

4 Extensibility
UI kit
 
color-Secondary
color-Grayscal
#2BCD86

4 Extensibility
UI kit
Pinterest
alarm
 
color-Secondary
color-Grayscal
#2BCD86

4 Extensibility
UI kit
color-Secondary

4 Extensibility
UI kit
color-Secondary
2016-10-13
•
Dec. 20, 2016 08:30
Inputs
inputs
Material design  
 
UI kit

FEDFront-End Design Department

Government Project
Taipei City

Government Project
Department of Executive

https://dribbble.com/gss
https://www.instagram.com/uwillx/

Vital UI kit

Recommandé

Recommandé

Contenu connexe

Similaire à Vital UI kit

Similaire à Vital UI kit (20)

Plus de DesBear Li

Plus de DesBear Li (15)

Dernier

Dernier (20)

Vital UI kit