Version: 1.2

PART OF THE CiCi DESIGN SYSTEM

Campaign Creators Style Guide

CiCi-2

Introduction

The objective of this style guide is to primarily focus on how the Campaign Creators brand should be applied on the web.

This includes all elements you may need—logos, typeface, colors, and more—to create a consistent look, and feel for Campaign Creator’s brand. We encourage you to absorb this information and reference it often to become a champion of the brand.

Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

logo3

Vertical / Full Color

logo2

Vertical / Black & White

logo-color

Horizontal / Full Color

logo1

Horizontal / Black & White

Color Palette

Theme

60%

Primary #fff

30%

Secondary #F5F8FA

10%

Tertiary #F15A24

Brand Colors

Primary #fff

Secondary #F5F8FA

Tertiary #F15A24

Quarternary #40C9D4

Deep Blue #39464E

Teal Gradient #74E6EC/#40C9D4

Orange Gradient #FDC586/#F9934E

Cool Gradient #ffffff/#DFEAF2

Neutrals

N1 #25343D

N2 #344955

N3 #3B5362

N4 #435E6E

N5 #4A687A

Photography

The following is a quick glance of the type of imagery that is to be used in all of our digital assets. By following this look and feel for images, we can maintain consistency and establish trust.

start-up-office-meeting
laptop
working

Iconography

Snack-Icon
remote-icon
Performance-Icon
Pto-Icon
401k-Icon

Illustrations

Funnel
graphic
Tech
Analytics

Typography

This is Your H1 Font Style

View Properties

This is Your H2 Font Style

View Properties

This is Your H3 Font Style

View Properties

This is Your H4 Font Style

View Properties

This is Your H5 Font Style

View Properties

This is Your H6 Font Style

View Properties

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View Properties

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View Properties

Blockquote

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Lorem Ipsum
Director, Lorem Ipsum

View Properties

Unordered List

  • (Default Disc–Bullet list) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • (Circle) Lorem ipsum dolor sit amet
    • Duis aute irure dolor in reprehenderit in voluptate
      • (Square) Duis aute irure dolor in reprehenderit in voluptate
      • Duis aute irure dolor in reprehenderit in voluptate
      • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    • Excepteur sint occaecat cupidatat non proident
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.

Ordered List

  1. (Default Disc–Bullet list) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    1. (Circle) Lorem ipsum dolor sit amet
    2. Duis aute irure dolor in reprehenderit in voluptate
      1. (Square) Duis aute irure dolor in reprehenderit in voluptate
      2. Duis aute irure dolor in reprehenderit in voluptate
      3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    3. Excepteur sint occaecat cupidatat non proident
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.

User Interface

Text Fields

Label

Default State

Input

Label

Focus State

I

Label

Error Message

abc.com

*Email address invalid

Dropdowns

Label

Default State

Input

Radio Buttons/Checkboxes

Buttons

Primary

Small

#F15A24

#D95120

#B81904

Secondary

Small

#39464E

#39464E

#181D21

Tertiary

Small

#39464E

#657884

#181D21

Quarternary

Small

#40C9D4

#2299A9

#045B70

Dark Background

Buttons

Primary

Small

#F15A24

#D95120

#B81904

Secondary

Small

#657884

Tertiary

Small

#40C9D4

#2299A9

#045B70