Inverse 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-1-bg
brand-color-2
brand-color-2-bg
brand-color-2-bg
brand-color-3
brand-color-3-bg
brand-color-3-bg
brand-color-4
brand-color-4-bg
brand-color-4-bg
evo-gray-inverse
evo-gray-darkest-inverse
evo-gray-darkest-inverse-bg
evo-gray-darkest-inverse-bg
evo-gray-darker-inverse
evo-gray-darker-inverse-bg
evo-gray-darker-inverse-bg
evo-gray-dark-inverse
evo-gray-dark-inverse-bg
evo-gray-dark-inverse-bg
evo-gray-inverse
evo-gray-inverse-bg
evo-gray-inverse-bg
evo-gray-inverse-light
evo-gray-light-inverse-bg
evo-gray-light-inverse-bg
evo-gray-lighter-inverse
evo-gray-lighter-inverse-bg
evo-gray-lighter-inverse-bg
evo-gray-lightest-inverse
evo-gray-lightest-inverse-bg
evo-gray-lightest-inverse-bg
black & white
evo-black
evo-black-bg
evo-black-bg
evo-white
evo-white-bg
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-inverse
evo-header-inverse-biggest
experience design made simple
evo-header-inverse-bigger
experience design made simple
evo-header-inverse-big
experience design made simple
evo-header-inverse
experience design made simple
evo-header-inverse-small
experience design made simple
evo-header-inverse-smaller
experience design made simple
evo-header-inverse-smallest
experience design made simple
evo-subheader-inverse
evo-subheader-inverse-biggest
experience design made simple
evo-subheader-inverse-bigger
experience design made simple
evo-subheader-inverse-big
experience design made simple
evo-subheader-inverse
experience design made simple
evo-subheader-inverse-small
experience design made simple
evo-subheader-inverse-smaller
experience design made simple
evo-subheader-inverse-smallest
experience design made simple
evo-text-inverse
evo-text-inverse-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-inverse-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-inverse-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-inverse
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-inverse-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-inverse-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-inverse-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-inverse (list)
Note: simply apply the .evo-text classes to unordered lists.
evo-text-inverse-biggest
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse-bigger
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse-big
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse-small
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse-smaller
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-text-inverse-smallest
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse
Note: evo-list-bullets feature custom SVG bullet icons.
evo-list-bullets-inverse-biggest
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse-bigger
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse-big
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse-small
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse-smaller
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-bullets-inverse-smallest
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse
Note: lines will stretch across their container by default.
evo-list-lines-inverse-biggest
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse-bigger
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse-big
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse-small
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse-smaller
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
evo-list-lines-inverse-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-inverse
Pair with .evo-text and .evo-subheader classes.
evo-icon-inverse-biggest
evo-icon-inverse-bigger
evo-icon-inverse-big
evo-icon-inverse
evo-icon-inverse-small
evo-icon-inverse-smaller
evo-icon-inverse-smallest
evo-icon-header-inverse
evo-icon-header-inverse-biggest
evo-icon-header-inverse-bigger
evo-icon-header-inverse-big
evo-icon-header
evo-icon-header-inverse-small
evo-icon-header-inverse-smaller
evo-icon-header-inverse-smallest
evo-button-inverse
evo-form-text-inverse
evo-form-text-inverse-biggest
evo-form-text-inverse-bigger
evo-form-text-inverse-big
evo-form-text-inverse
evo-form-text-inverse-small
evo-form-text-inverse-smaller
evo-form-text-inverse-smallest
evo-form-dropdown-inverse
evo-form-dropdown-inverse-biggest
evo-form-dropdown-inverse-bigger
evo-form-dropdown-inverse-big
evo-form-dropdown-inverse
evo-form-dropdown-inverse-small
evo-form-dropdown-inverse-smaller
evo-form-dropdown-inverse-smallest
evo-form-checkbox-inverse
evo-form-checkbox-inverse-biggest
evo-form-checkbox-inverse-big
evo-form-checkbox-inverse
evo-form-checkbox-inverse-small
evo-form-checkbox-inverse-smaller
evo-form-checkbox-inverse-smallest
evo-form-radio-inverse
evo-form-radio-inverse-biggest
evo-form-radio-inverse-bigger
evo-form-radio-inverse-big
evo-form-radio-inverse
evo-form-radio-inverse-small
evo-form-radio-inverse-smaller
evo-form-radio-inverse-smallest
Layout
Bring order and organization to any design and quickly adjust parameters to your liking.
evo-line-inverse
evo-line-inverse-heaviest
evo-line-inverse-heavier
evo-line-inverse-heavy
evo-line-inverse
evo-line-inverse-thin
evo-line-inverse-thinner
evo-line-inverse-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
evo-link-inverse
- I am a link
- Default link state
- Visited link state
- Hover link state
- Active link state
brand-color-inverse-1
I am a link
- Default link state
- Visited link state
- Hover link state
- Active link state
brand-color-inverse-2
I am a link
- Default link state
- Visited link state
- Hover link state
- Active link state
brand-color-inverse-3
I am a link
- Default link state
- Visited link state
- Hover link state
- Active link state
brand-color-inverse-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
Solid Button
Ghost to Solid Button
Form States
evo-form-text-inverse
evo-form-dropdown-inverse
evo-form-checkbox-inverse
evo-form-radio-inverse
evo-form-text-inverse
evo-form-dropdown-inverse
evo-form-checkbox-inverse
evo-form-radio-inverse
evo-form-text-inverse
evo-form-dropdown-inverse
evo-form-checkbox
evo-form-radio