Brand Primary - Cimpress · 2017. 6. 14. · Body font stack Menlo, Monaco, monospaced Monospace...

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



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



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





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


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


IPSUM Dolor sit amet consectetur adipiscing elit adipiscing elit proin


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





Vitae accumsan sem placerat






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





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




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



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




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



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.



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


LOREM IPSUM


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


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




Vitae accumsan sem placerat et






Line-height: 2.125emLeft Indent 1.250emdisc 6x6 solid #8090A2circle 6x6 1px border inside #8090A2

Unstyled




Vitae accumsan sem placerat et






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


Tertiary

Use with primary and secondary call to actions

Button Button Button Button


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


Hover

Selected

Button group light


Inline text editing 3D preview

Hover

Editing tools Image sharpening

Selected


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]



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 protected]

Email address

#[email protected]

Email address *

[email protected]#Email address

Email address Button

Email address * Button

Email addressButton


Button


Email address *Button


Button

Button


Button


Success # [email protected] address


Button


Warning #[email protected]

Email address


Button


Required w/ success # [email protected] address *


Button

Button w/ icon left

Button w/ icon right

Secondary button

Tertiary 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

Date post:	20-Aug-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

Brand Primary - Cimpress · 2017. 6. 14. · Body font stack Menlo, Monaco, monospaced Monospace...

Documents