Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
ColorsCIMPRESS STYLEGUIDE
Brand Primary
Secondary Brand
Interaction
PersimmonF0563A
Cobalt3A414C
Coal333943
PlatinumE1E6EB
Slate8090A2
HorizonEDF3F9
Shale697582
SilverEFF3F5
AlloyC4CDD6
WhiteFFFFFF
Ocean0088A9
SkyD4EBF2
Teal006F8A
Granite4F5D75
Success35AD96
WarningFFA23F
Info41B5DC
ErrorD24A35
Messaging
1
Interaction colorsCIMPRESS STYLEGUIDE
Brand Primary
PersimmonF0563A
D63625
BC2111
Cobalt3A414C
212730
0D1116
Interaction
Ocean0088A9
00738E
005C75
SkyD4EBF2
B0D9E6
92C8DA
Teal006F8A
005B70
004456
Granite4F5D75
354259
212C3F
Messaging
22917E
127769
E58628
CC7712
2B9DC1
188AA8
B73721
9E2810
Success35AD96
WarningFFA23F
Info41B5DC
ErrorD24A35
2
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Gotham Rounded Book
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Gotham Rounded Medium
FONT EXAMPLE
Gotham Rounded
ABCDEFGHIJKLMNOPQRSTUVWXYZabcde fgh i j k lmnopqrstuvwxyz
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZabcde fgh i j k lmnopqrs tuvwxyz
Open Sans Regular Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh i jk lmnopqrstuvwxyz
Open Sans Semibold
Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Menlo
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Monaco
Monospaced
The header font is Gotham Rounded and the body font is Open Sans.
Gotham Rounded, San Francisco, Segoe UI, Helvetica Neue,
Arial, sans-serif;
Header font stack
Open Sans, San Francisco, Segoe UI, Helvetica Neue, Arial,
sans-serif;
Body font stack
Menlo, Monaco, monospaced
Monospace stack
FontsCIMPRESS STYLEGUIDE
3
FONT EXAMPLE
Gotham Rounded Book
The quick brown fox jumps over the lazy dog.
2.857em
Gotham Rounded Book The quick brown fox jumps over the lazy dog. 2.357em
Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.857em
Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.571em
Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.500em
TYPE
H1
H2
H3
H4
H5
H6 Gotham Rounded Bold THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
SIZE
2.429em
1.929em
1.500em
1.214em
1.071em
0.786em 1.214em
LINE HEIGHT
Application typographyCIMPRESS STYLEGUIDE
Default for application based UIs. The smaller size is more practical for heavy data content and complex interfaces.
1.0em (14px) Base Font 1.286em (18px) Line Height
4
TYPE FONT EXAMPLE SIZE LINE HEIGHT ADDITIONAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Blockquote
Small Print
Emphasis
Italic
Insertion
Open Sans Light
Open Sans
Open Sans Semibold
Open Sans Italic
Open Sans
1.429em
0.786em
1em
1em
1em
1.857em
1em
1.429em
1.429em
1.429em
1.429em
1.429em
1.429em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Strike-thru
Deleted
Highlight
Open Sans
Open Sans
Open Sans
1em
1em
1em BG #F0553A BG height: 1.286emPadding: R/L 0.714em
BG #EDF3F9 BG height: 1.286em Padding: R/L 0.714em
Paragraph Open Sans Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum. Quisque condimentum tortor ac massa volutpat, non porttitor nibh pharetra. Aliquam pellentesque, felis sit amet elementum ornare, ex ex ullamcorper orci, vitae laoreet ex risus imperdiet orci. Etiam ac est pellentesque, dignissim ipsum quis, posuere velit. Integer orci dui, suscipit vel posuere non, volutpat ut erat. Mauris eget elit eu lectus viverra malesuada id vel enim. Integer libero purus, porta sed sodales sit amet.
1.429em1.0em=14px
Application typography continuedCIMPRESS STYLEGUIDE
5
Application typography continuedCIMPRESS STYLEGUIDE
Bottom Padding 1.286em
Default Horizontal
VITAE ACCUMSAN
Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
LOREM IPSUM
Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
LOREM IPSUM
Dolor sit amet consectetur adipiscing elit adipiscing elit proin
ACCUMSAN Consectetur
LOREM
Placerat
IPSUM
Adipiscing
LOREM IPSUM
VITAE ACCUMSAN Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
IPSUM Dolor sit amet consectetur adipiscing elit adipiscing elit proin
ACCUMSAN Consectetur
LOREM Placerat
IPSUM Adipiscing
Bottom padding 1.286emLabel right padding 0.571em
Definition List
Ordered Unordered Unstyled
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Proin dignissim magna odio
Vitae accumsan sem placerat
Proin dignissim magna odio
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Proin dignissim magna odio
Vitae accumsan sem placerat
Proin dignissim magna odio
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Proin dignissim magna odio
a. Lorem ipsum dolor sit amet
b. Consectetur adipiscing elit
c. Proin dignissim magna odio
I. Lorem ipsum dolor sit amet
II. Consectetur adipiscing elit
III. Proin dignissim magna odio
Line-Height: 1.714emLeft Indent 1.429em
left padding 0.857emLeft Indent 1.143emdisc 4x4 solid #8090A2circle 4x4 1px border inside #8090A2
Left Indent 1.429em
Lists
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
6
JSCimpressJesse
Application typography exampleCIMPRESS STYLEGUIDE
Lorem ipsum laoreet, maximus dictum tincidunt vestibulum at id eleifend luctus amet, Nunc massa tincidunt. Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec.
Lorem ipsum a vestibulum finibus efficitur, ac condimentum consectetur vel efficitur, quam vel felis quis, mi. Pharetra efficitur Nam eget leo, sociosqu tempus, felis. Viverra.
Lorem ipsum aliquet
Morbi ultrices
Ipsum tincidunt
Lorem ipsum litora a tempor ultricies vitae sed erat auctor interdum, at neque non condimentum imperdiet sollicitudin ultrices Morbi ultrices lorem, tortor lacus ligula. Lacus.
Lorem ipsum aliquet lacinia ut tortor ac Morbi sem pulvinar sapien in massa neque aliquet.
Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec.
Lorem ipsum iaculis lectus non Fusce ullamcorper
Congue risus nisi lacus a donec ornare metus
Taciti urna vulputate risus Quisque quis
Tempus ac Fusce ultricies metus
Lorem ipsum ac sisus rhoncus augue ultrices ullamcorper.
Large
7
TYPE FONT EXAMPLE SIZE LINE HEIGHT
Marketing typographyCIMPRESS STYLEGUIDE
Intended for marketing-forward UI’s where content is minimal but needs to be impactful. Line height and overall font scale has been increased.
1.0 em (16px) Base font 1.500em (24px) Line Height
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
H1 Running
H2 Running
H3 Running
Gotham Rounded Book
Gotham Rounded Book
Gotham Rounded Medium
3.438em
2.438em
1.688em
3.813em
2.813em
2.063em
Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.688em
Gotham Rounded Medium The quick brown fox jumps over the lazy dog. 1.625em
H4 Running
H5 Running
H6 Running Gotham Rounded Bold THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
1.375em
1.250em
0.938em 1.500em
8
AdditionalTYPE FONT EXAMPLE SIZE LINE HEIGHT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Small Print
Emphasis
Italic
Insertion
Open Sans
Open Sans Semibold
Open Sans Italic
Open Sans
BG #F0553A BG height: 1emPadding: R/L 0.625em
Border-left 3px solidBorder-color #F0553A Border padding right 1.429em
BG #EDF3F9 BG height: 1.500em Padding: R/L 0.625em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Blockquote Open Sans Light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio
Strike-thru
Deleted
Highlight
Open Sans
Open Sans
Open Sans
0.813em
1em
1em
1em
1.375em
1em
1em
1em
1em
2.000em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim magna odio, vitae accumsan sem placerat et. Etiam tincidunt augue leo, id egestas urna suscipit vestibulum. Quisque condimentum tortor ac massa volutpat, non porttitor nibh pharetra. Aliquam pellentesque, felis sit amet elementum ornare, ex ex ullamcorper orci, vitae laoreet ex risus imperdiet orci.
Running Paragraph Open Sans 1em 1.500em
1.500em
1.500em
1.500em
1.500em
1.500em
1.500em
Marketing typography continuedCIMPRESS STYLEGUIDE
9
Marketing typography continuedCIMPRESS STYLEGUIDE
Normal Horizontal
VITAE ACCUMSAN
Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
LOREM IPSUM
Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
LOREM IPSUM
Dolor sit amet consectetur adipiscing elit adipiscing elit proin
ACCUMSAN
Consectetur
LOREM
Placerat
IPSUM
Adipiscing
VITAE ACCUMSAN Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
LOREM IPSUM Sem placerat et lorem ipsum dolor sit amet consectetur adipiscing elit
IPSUM Dolor sit amet consectetur adipiscing elit adipiscing elit proin
ACCUMSAN Consectetur
LOREM Placerat
IPSUM Adipiscing
Label right padding 0.750emBottom padding 1.500em
Label right padding 0.750emBottom padding 1.500em
Label / Description
10
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Proin dignissim magna odio
a. Lorem ipsum dolor sit amet
b. Consectetur adipiscing elit
c. Proin dignissim magna odio
I. Lorem ipsum dolor sit amet
II. Consectetur adipiscing elit
III. Proin dignissim magna odio
Line-Height: 2.125em
Unordered
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Proin dignissim magna odio
Vitae accumsan sem placerat et
Proin dignissim magna odio
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Line-height: 2.125emLeft Indent 1.250emdisc 6x6 solid #8090A2circle 6x6 1px border inside #8090A2
Unstyled
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Proin dignissim magna odio
Vitae accumsan sem placerat et
Proin dignissim magna odio
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Line-height: 2.125emLeft Indent 1.500em
Lists
JSCimpressJesse
Lorem ipsum laoreet, maximus dictum tincidunt vestibulum at id eleifend luctus amet, Nunc massa tincidunt. Sapien eget inceptos sollicitudin placerat massa lobortis Quisque felis. Amet sollicitudin dui sociosqu amet, sed, a ultrices tincidunt. Per sed ac volutpat, lorem. Vel ornare ante. Donec dolor. In erat. Amet, nibh. Velit Morbi nec.
Lorem ipsum a vestibulum finibus efficitur, ac condimentum consectetur vel efficitur, quam vel felis quis, mi. Pharetra efficitur Nam eget leo, sociosqu tempus, felis. Viverra.
Vestibulum finibus efficitur
Morbi ultrices lorem
Lorem ipsum tincidunt
Lorem ipsum litora a tempor ultricies vitae sed erat auctor interdum, at neque non condimentum imperdiet sollicitudin ultrices Morbi ultrices lorem, tortor lacus ligula. Lacus.
Lorem ipsum aliquet lacinia ut tortor ac Morbi sem pulvinar sapien in massa neque aliquet.
Lorem ipsum iaculis lectus non Fusce ullamcorper
Congue risus nisi lacus a donec ornare metus
Taciti urna vulputate risus Quisque quis
Tempus ac Fusce ultricies metus
Lorem ipsum ac sisus rhoncus augue ultrices ullamcorper.
Call to action
Marketing typography exampleCIMPRESS STYLEGUIDE
11
Secondary
Icon Styles
Use in tandem with a primary call to Option button
!Button
!Button
!Button
!Button
!Button
!Button
Button!
Button !
Marketing styles
Use in conjunction with marketing typography Icon placement is available on left & right
Button
Large
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Default Hover Press Disabled
Button Button Button Button
Default Hover Press Disabled
Tertiary
Use with primary and secondary call to actions
Button Button Button Button
Default Hover Press Disabled
Primary
Primary buttons are used for singular and prioritized call to actions
Small
Sizing
Available for all button styles
Medium
ButtonsCIMPRESS STYLEGUIDE
Group sizing
Left Middle Right
Left Middle Right
Left Middle Right
Button group dark
Inline text editing 3D previewEditing tools
Inline text editing 3D previewEditing tools Image sharpening
Image sharpening
Inline text editing 3D previewEditing tools Image sharpening
Hover
Selected
Button group light
Inline text editing 3D previewEditing tools Image sharpening
Inline text editing 3D preview
Hover
Editing tools Image sharpening
Selected
Inline text editing 3D previewEditing tools Image sharpening
12
Links & status indicatorsCIMPRESS STYLEGUIDE
Default
default state
visited state
disabled state
hover state
13
Status indicator Counters
In progress
Delayed
Error
Cancelled
PostCras justo odio 14
Dapibus ac facilisis in 1
Vestibulum at eros 24
Lorem ipsum commodo In nunc 24
Lorem ipsum nibh 24
Contextual variations
OPTIONS
DEFAULT
DELETE DELETE
TRACE TRACE
OPTIONS
DEFAULT
CONNECT CONNECT
PATCHPATCH
GETPUT
NEW
INFO
GETGETGET
POSTPOST
HEADHEAD
PUT
NEW
INFO
Dropdown Dropdown
Dropdowns
Static link
Dropdown Dropdown
Dropdown
Option
Option
Option
Option
Option
Option
Option
Static link
Dropdown
Option
Option
DropdownsCIMPRESS STYLEGUIDE
Dropdown
Dropdown
Option
Option
Static link
Sizing
Dropdown
Static link
Option
Static link
Static link
Static link
Static link
Split button dropdown
Dropdown
Dropdown
Dropdown
Default Default
Hover Hover
Press Press
Required
States
OptionOption
OptionOption
Static link
Static link
Static link
OptionOption
14
Title *
FormsCIMPRESS STYLEGUIDE
Default inputs Icon w/ inputs Inputs w/ button Inputs w/ button examples
Default inputs w/ messaging
15
Email address
[email protected] address *
Email address
Default
Hover
Email address
[email protected] address
Email address *
Email address *
Active
Populated
Required
Required active
Required populated
[email protected] address
[email protected] address *
Error
Error required
Interdum vel cras inceptos id tortor condimentum augue sit eu consectetur Developers Console
Default w/ extended messageHint
Lorem ipsum neque vitae facilisis. At vitae Sed massa eu faucibus donec
"sapien lectus
Default w/ messageHint
Lorem ipsum neque vitae facilisis at vitae sed massa eu metus aliquet facilisis.
"
Email address#
# Email address
#Email address
# Email address *
# [email protected] address *
#Email address *
Email address
Email address *
[email protected]#Email address
Email address Button
Email address * Button
Email addressButton
[email protected] address *
Button
Email address Button
Email address *Button
[email protected] address
Button
Button
[email protected] address *
Button
[email protected] address
Success # [email protected] address
[email protected] address
Button
[email protected] address
Warning #[email protected]
Email address
[email protected] address
Button
[email protected] address *
Required w/ success # [email protected] address *
[email protected] address *
Button
Button w/ icon left
Button w/ icon right
Secondary button
Tertiary button
Email address $Button
Email address $Button
Email address Button
Email address Button
Primary buttonEmail address Button
Form exampleCIMPRESS STYLEGUIDE
16
Register now
Register
Large
!
!
"
ExtTelephone * 1234
State / Province *
AlertsCIMPRESS STYLEGUIDE
Snackbars Toasts
Lorem ipsum fringilla In consectetur felis.! Lorem ipsum orci aptent felis augue mauris. Rhoncus velit risus metus, efficitur quam. Ad eget.
Lorem ipsum vitae ipsum ultrices. Lacus vitae arcu vitae. Lectus quis, urna Cras ornare Vestibulum.!
Success
Info
Warning
Error
Lorem ipsum orci aptent felis augue mauris. Rhoncus velit risus metus, efficitur quam. Ad eget.
Lorem ipsum ullamcorper. In neque tincidunt neque, augue, odio in a ac a vel."
Lorem ipsum vitae ipsum ultrices. Lacus vitae arcu vitae. Lectus quis, urna Cras ornare Vestibulum.!
Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed.!
Lorem ipsum ullamcorper. In neque tincidunt neque, augue, odio in a ac a vel."
Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed.!
17
Lorem ipsum fringilla In consectetur felis.
Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue.
Lorem ipsum fringilla In consectetur felis.!
! Lorem ipsum tincidunt tincidunt. Non euismod. Imperdiet iaculis. Eleifend quis, justo, dolor. Non accumsan sed.
Lorem ipsum fringilla In consectetur felis."
" Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue.
Lorem ipsum fringilla In consectetur felis.!
Lorem ipsum Proin Suspendisse a ultricies Mauris vitae. At eu vitae Donec eleifend tempor sit a ac pharetra turpis congue.
!
TooltipsCIMPRESS STYLEGUIDE
A vitae magna neque a massa facilisis. Viverra ornare ut odio
TOOLTIP TITLE
Default tooltip
Light tooltip
Imperdiet vehicula. Eu lectus vulputate ex, viverra.
TOOLTIP TITLEFaucibus nisi. Per rhoncus eu. Vestibulum ac, elit.
TOOLTIP TITLEConsequat Aliquam adipiscing odio dui at nibh dolor
TOOLTIP TITLE
Eu lectus vulputate ex, viverra.TOOLTIP TITLE
Consequat Aliquam adipiscing odio dui at nibh dolor Class non.
TOOLTIP TITLE
A vitae magna neque a massa facilisis. Viverra ornare ut odio ac, ac viverra.
TOOLTIP TITLEImperdiet vehicula. Eu lectus vulputate ex, viverra.
TOOLTIP TITLE
18
Checkboxes & radio buttonsCIMPRESS STYLEGUIDE
19
Checkbox
Horizontial rule
Vertical rule
Radio
Mixed
Hover
Inactive
Inactive selected
Default
Selected
Default
Hover
Inactive selected
Inactive
Selected
List Group and TabsCIMPRESS STYLEGUIDE
20
Default List Group Default Tabs
List group item 3
List group item 4
List group item 5
List group item 2
List group item 1
Hover
Selected
Inactive
Tab default Tab Link 4Tab Link 3Tab Link 2Tab Link 1
overflow default Tab Link 4Tab Link 3Tab Link 2Tab Link 1 More
Dropdown link
Dropdown link
Dropdown link
Dropdown link
Overflow active Tab Link 4Tab Link 3Tab Link 2Tab Link 1 More
Tab hover Tab Link 4Tab Link 3Tab Link 2Tab Link 1
Tab active Tab Link 4Tab Link 3Tab Link 2Tab Link 1
PillsCIMPRESS STYLEGUIDE
21
Vertical Horizontial
Pill hover
Pill default
Pill selected
Pill link 4
Pill link 4
Pill link 4
Pill link 3
Pill link 3
Pill link 3
Pill link 2
Pill link 2
Pill link 2
Pill link 1
Pill link 1
Pill link 1
Pill link 3
Pill link 4
Pill link 5
Pill link 2
Pill link 1
Hover
Selected
Inactive