Toolkit

Use this as a styleguide to manage a website’s look and feel, from 'agile' prototype to production.

Use with Elements to evolve your website in collaboration with designers and developers.

Colors

Choose a range of grays as foundation colors. Translucence can be added to work with overlays.

brand-color

brand-color-1
brand-color-1-bg
brand-color-2
brand-color-2-bg
brand-color-3
brand-color-3-bg
brand-color-4
brand-color-4-bg

evo-gray

evo-gray-darkest
evo-gray-darkest-bg
evo-gray-darker
evo-gray-darker-bg
evo-gray-dark
evo-gray-dark-bg
evo-gray
evo-gray-bg
evo-gray-light
evo-gray-light-bg
evo-gray-lighter
evo-gray-lighter-bg
evo-gray-lightest
evo-gray-lightest-bg

black & white

evo-black
evo-black-bg
evo-white
evo-white-bg

Fonts

Text is optimized for legibility and should be limited to between 45 to 75 characters in width.

Text inherits either font, and/or a color, from the branding guide, and can be customized within this styleguide.

brand-font

brand-font-1

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

evo-font

evo-font-1

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

evo-font-2

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )

evo-header

evo-header-biggest
experience design made simple
evo-header-bigger
experience design made simple
evo-header-big
experience design made simple
evo-header
experience design made simple
evo-header-small
experience design made simple
evo-header-smaller
experience design made simple
evo-header-smallest
experience design made simple

evo-subheader

evo-subheader-biggest
experience design made simple
evo-subheader-bigger
experience design made simple
evo-subheader-big
experience design made simple
evo-subheader
experience design made simple
evo-subheader-small
experience design made simple
evo-subheader-smaller
experience design made simple
evo-subheader-smallest
experience design made simple

evo-text

evo-text-biggest
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text-bigger
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text-big
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text-small
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text-smaller
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
evo-text-smallest
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.

evo-text (list)

Note: simply apply the .evo-text classes to unordered lists.

evo-text-biggest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text-bigger
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text-big
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text-small
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text-smaller
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-text-smallest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap

evo-list-bullets

Note: evo-list-bullets feature custom SVG bullet icons.

evo-list-bullets-biggest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets-bigger
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets-big
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets-small
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets-smaller
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-bullets-smallest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap

evo-list-lines

Note: lines will stretch across their container by default.

evo-list-lines-biggest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines-bigger
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines-big
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines-small
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines-smaller
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap
evo-list-lines-smallest
  • gather inspiration
  • brainstorm ideas
  • sketch designs
  • set timeline roadmap

Inputs

Combine and customize icons, buttons, forms, and text to create unique inputs.

evo-icon

Pair with .evo-text and .evo-subheader classes.

evo-icon-biggest
evo-icon-bigger
evo-icon-big
evo-icon
evo-icon-small
evo-icon-smaller
evo-icon-smallest

evo-icon-header

evo-icon-header-biggest
evo-icon-header-bigger
evo-icon-header-big
evo-icon-header
evo-icon-header-small
evo-icon-header-smaller
evo-icon-header-smallest

evo-button

evo-button-biggest
button
evo-button-bigger
button
evo-button-big
button
evo-button
button
evo-button-small
button
evo-button-smaller
button
evo-button-smallest
button

evo-form-text

evo-form-text-biggest
evo-form-text-bigger
evo-form-text-big
evo-form-text
evo-form-text-small
evo-form-text-smaller
evo-form-text-smallest

evo-form-dropdown

evo-form-dropdown-biggest
evo-form-dropdown-bigger
evo-form-dropdown-big
evo-form-dropdown
evo-form-dropdown-small
evo-form-dropdown-smaller
evo-form-dropdown-smallest

evo-form-checkbox

evo-form-checkbox-biggest
evo-form-checkbox-bigger
evo-form-checkbox-big
evo-form-checkbox
evo-form-checkbox-small
evo-form-checkbox-smaller
evo-form-checkbox-smallest

evo-form-radio

evo-form-radio-biggest
evo-form-radio-bigger
evo-form-radio-big
evo-form-radio
evo-form-radio-small
evo-form-radio-smaller
evo-form-radio-smallest

Layout

Bring order and organization to any design and quickly adjust parameters to your liking.

evo-line

evo-line-heaviest
evo-line-heavier
evo-line-heavy
evo-line
evo-line-thin
evo-line-thinner
evo-line-thinnest

evo-image

evo-image-widest
evo-image-wider
evo-image-wide
evo-image
evo-image-tall
evo-image-taller
evo-image-tallest

evo-space

evo-space-biggest
evo-space-bigger
evo-space-big
evo-space
evo-space-small
evo-space-smaller
evo-space-smallest

Interactions

Interactive styles for common UI elements, synchronized with overall brand colors and fonts.

Text Links

default
  • I am a link
  • Default link state
  • Visited link state
  • Hover link state
  • Active link state
brand-color-1
I am a link
  • Default link state
  • Visited link state
  • Hover link state
  • Active link state
brand-color-2
I am a link
  • Default link state
  • Visited link state
  • Hover link state
  • Active link state
brand-color-3
I am a link
  • Default link state
  • Visited link state
  • Hover link state
  • Active link state
brand-color-4
I am a link
  • Default link state
  • Visited link state
  • Hover link state
  • Active link state

Paragraph Links

default

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

  • Default link state
  • Visited link state
  • Hover link state
brand-color-1

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

  • Default link state
  • Visited link state
  • Hover link state
brand-color-2

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

  • Default link state
  • Visited link state
  • Hover link state
brand-color-3

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

  • Default link state
  • Visited link state
  • Hover link state
brand-color-4

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

  • Default link state
  • Visited link state
  • Hover link state

Text Highlights

default

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

brand-color-1-highlight

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

brand-color-2-highlight

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

brand-color-3-highlight

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

brand-color-4-highlight

Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions.

Default Button

default
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-1
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-2
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-3
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-4
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled

Solid Button

solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-1-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-2-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-3-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-4-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled

Ghost to Solid Button

ghost-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-1-ghost-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-2-ghost-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-3-ghost-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled
brand-color-4-ghost-solid
submit
link
link
visited
visited
hover
hover
active
active
disabled
disabled

Form States

evo-form-text
evo-form-dropdown
evo-form-checkbox
evo-form-radio
evo-form-text
evo-form-dropdown
evo-form-checkbox
evo-form-radio
evo-form-text
evo-form-dropdown
evo-form-checkbox
evo-form-radio