vital ui kit

Bear Lee

2006-2009

60

Woody Lee

/UI

Vitals ESP 2015 2015

2014 2013

UI Kit

GSS FED 2016

Rebranding1 Cloud Services RebrandingVisual Identity

17 cm

5 cm

0.125 cm

0.2 cm

2015 1 Cloud Services RebrandingVisual 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 Regularsize : 27 ptkerning : optical tracking : 10stroke : 0.75 pt (round corner)


3 cm2 cm

1 cm 1 cm

0.5 cm 0.5 cm


Special SymbolsShree Devanagari 714 Regularsize : 33 ptstroke : 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

1 Cloud Services RebrandingVisual Identity

4 cm

4 cm

4 cm

0.75 cm 0.5 cm

0.75 cmShree Devanagari 714 Regularsize : 27 ptkerning : optical tracking : 10stroke : 0.75 pt (round corner)

0.75 cm

4 cm 0.75 cm

0.3 cm 0.3 cm

Special Symbols (resize based on the middle line)Shree Devanagari 714 Regularsize : 20 ptstroke : 0.75 pt + 0.25 pt (round corner)


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


17 cm

5 cm

0.125 cm

0.2 cm


UI1 Cloud Services RebrandingVisual Identity

UI kit

2 How to startUI kit

General Ledger

CRM

Payroll

VAT

Official Document

Knowledge

FormDoc

Task & Meet

UI kit 2 How to start

UI kit

UI kitUI kit


UI2 How to start

UI kit

1.

2. UI / UX

3.


#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


#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


- Secondary- Grayscale

-Tertiary

2 Basic elements

#00B4FF

#0040BF

#006A7C

#EB5000

#555555

#00C3FF

#35D4C3

#FFB400

#00ECF6

#95F7C8

#FFE815




#0E86FE



color-Secondary


color-Grayscale


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 BootstrapPrimary, Success, Info, Warning, Alarm

2 Basic elements

#00B4FF

#0040BF

#006A7C

#EB5000

#555555

#00C3FF

#35D4C3

#FFB400

#00ECF6

#95F7C8

#FFE815




#0E86FE



color-Secondary


color-Grayscale


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


! Download

"# $ %

" $ %

& Delete ' Print ( Search ) Prev

With icon

Icon

*

Next +

Attached

Attached on top

One Two

FourThree

Attached on bottom

HoverActiveInputs

placeholder…

placeholder…

placeholder…

placeholder…

Default

Focus

Disabled

ErrorNot editable

ErrorEditable

http://semantic-ui.com/elements/input.html

Basic

background: $color-alarm-100border: 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 profile pictures have their initials as avatars. Users without profile pictures have their initials as avatars.

xl xl

xl 4pxl 4px m 3px s 2pxxs 2px




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 colorSuccess button active color Info button active color Warming button active colorDanger 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

UI2 Basic elements

Image Image

Round Square

Users without profile pictures have their initials as avatars. Users without profile pictures have their initials as avatars.

xl xl





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 BoxRoundSquare

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

• • • • • • •

[email protected]

+0 Ext

Year !

"

#

Dieter Rams

Example: James Allen

Username is availableThis is a alternate name for your account, used by some network services. Enter 8 lowercase characters or fewer withno spaces. Example: jallen

Your account has been locked because you have reached themaximum number of invalid logon attempts.

Please enter a valid email address

RequiredYYYY

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 table2 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

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… Link

TitleSubtitle

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

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… Link

TitleSubtitle

2 Basic elements

3 Product application

- Official Document

UI Kit

15 20

2016.04

UI UI kit


!

!

#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

#F8F8F8Secondary

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

infoBadge

Badge

()


!

!

#EEF2FC

#F7F9FD

#D8E2F5

#95ABD3

#C3D1EB

#7189B6

#456296

#2A4880

#1E3868

#00C3FF

#0E86FE

#555555

#333333

#0D0D0D

#888888

#aaaaaa

#cccccc

#dddddd

#F0F0F0

#F8F8F8

Primary

!"


!

!

#EEF2FC

#F7F9FD

#D8E2F5

#95ABD3

#C3D1EB

#7189B6

#456296

#2A4880

#1E3868

#00C3FF

#0E86FE

#555555

#333333

#0D0D0D

#888888

#aaaaaa

#cccccc

#dddddd

#F0F0F0

#F8F8F8


1 -

!

"

#$

#%

&

'

(


!

"

#$

#%

&

'

(

1 -

!

"

#

!

$

!%

&

'

(

!

"

#

!

$

!%

&

'

(


1 -

Hover Active

!

"

#

!

$

!%

&

'

(

Hover

Active


2 -


2 -

!

( )

" " #

1 - 13 13 $ %1 2 3


!

2 -

!

( )

" " #

1 - 13 13 $ %1 2 3

UI


!

2 -

!

( )

" " #

1 - 13 13 $ %1 2 3

Pill tabSecondary


!

2 -

!

( )

" " #

1 - 13 13 $ %1 2 3

Tab Tab Tab Header pill


!

2 -

!

( )

" " #

Tab Tab Tab Header pill


!

Tab

Tab

2 -

!

( )

" " #

1 - 13 13 $ %1 2 3


!

3 - Table

Table Grid


!

( )

" " #

1 - 13 13 $ %1 2 3

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/2710

1020001029 104/04/272

!

3 - Table

!

( )

" " #

1 - 13 13 $ %1 2 3

Table

! 1020002746 "#4

! 1030003638 $10

! 10300007419

% 1020001029 8

! 10010000277

% 1020001029 "6

& 1001000027 " $5

& 10200036383

% 102000741 " $2

& 1020001029 "1

'


3 - Table

!

( )

" " #

Table

! 1020002746 "#4

! 10300007419

% 1020001029 8

! 10010000277

% 1020001029 "6

& 1001000027 " $5

& 10200036383

% 102000741 " $2

& 1020001029 "1

'

Icon fontIcon font

Speed icon

gi-type

! "# $

icon

table grid


UI UI Kit

QA



PS.

4 ExtensibilityUI kit

UI kit


CMS 2016


UI kit


Primary


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


Secondary

Grayscale


color-Secondary

#555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8color-Grayscale



color-Secondary


#2BCD86


Pinterestalarm


color-Secondary


#2BCD86



color-Secondary



color-Secondary

2016-10-13 !

•!Dec. 20, 2016 08:30

Inputs

inputs

Material design

UI kit

Design Kickoff

FEDFront-End Design Department

UWILLyou will experience

X

Government Project Taipei City

Government Project Department of Executive

https://dribbble.com/gss

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