6. 17 cm
5 cm
0.125 cm
0.2 cm
20151 Cloud Services Rebranding
Visual Identity
7. 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)
Shree Devanagari 714 Regular
size : 27 pt
kerning : optical
tracking : 10
stroke : 0.75 pt (round corner)
3 cm
2 cm
1 cm 1 cm
0.5 cm 0.5 cm
Shree Devanagari 714 Regular
size : 44 pt
kerning : optical
tracking : 0
stroke : 0.75 pt (round corner)
Special Symbols
Shree Devanagari 714 Regular
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
1 Cloud Services Rebranding
Visual Identity
8. 4 cm
4 cm
4 cm
0.75 cm 0.5 cm
0.75 cm
Shree Devanagari 714 Regular
size : 27 pt
kerning : optical
tracking : 10
stroke : 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 Regular
size : 20 pt
stroke : 0.75 pt + 0.25 pt (round corner)
Shree Devanagari 714 Regular
size : 27 pt
kerning : optical
tracking : 75
stroke : 0.75 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
1 Cloud Services Rebranding
Visual Identity
9. 17 cm
5 cm
0.125 cm
0.2 cm
1 Cloud Services Rebranding
Visual Identity
27. #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
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
28. 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
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
Question 02
Question 03
Question
BasicBasic Inverted
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
Question 02
Question 03
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
Question 02
Question 03
Lists, Collapse
2 Basic elements
29. 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 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
No-image - user-initials - light-background
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
Primary button active color
Success button active color
Info button active color
Warming button active color
Danger button active color
Color Guide
With badge
Badge position Badge position
Only shape Only shapeValues in the badge
With badge
99+
99+
Avatar
UI
2 Basic elements
30. 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 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
No-image - user-initials - light-background
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
Primary button active color
Success button active color
Info button active color
Warming button active color
Danger button active color
Color Guide
With badge
Badge position Badge position
Only shape Only shapeValues in the badge
With badge
99+
99+
Avatar
2 Basic elements
31. —
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
32. 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
33. 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
34. Table
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Bordered
Striped
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
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 Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
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
Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
2 Basic elements
35. Table
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Bordered
Striped
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
table input
content
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Placeholder…
Value
Value
Label
Label
Label
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 Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
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
Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
2 Basic elements
36. Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Bordered
Striped
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
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 Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
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
Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Placeholder…
Value
Value
Label
Label
Label
2 Basic elements
37. Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Bordered
Striped
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data Hover
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Placeholder…
Value
Value
Label
Label
Label
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 Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
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
Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Table Data Table Data Table Data
Placeholder…
Value
Value
Label
Label
Label
2 Basic elements
38. ( )
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
Title
Subtitle
2 Basic elements
39. 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
Title
Subtitle
2 Basic elements
