Colors

  • Copy

    #28A842
    evite_green

  • Copy

    #00A0D1
    evite_blue

  • Copy

    #0093BF
    evite_blue_dark

  • Copy

    #57BBE3
    evite_blue_light

  • Copy

    #FCB03E
    evite_gold

  • Copy

    #DB1A1A
    error_color

  • Copy

    #FF7C36
    evite_orange

  • Copy

    #FF6998
    evite_magenta

  • Copy

    #B86BC9
    evite_purple

  • Copy

    #18CCC6
    evite_teal

  • Copy

    #ED702D
    evite_orange_dark

  • Copy

    #E8407B
    evite_magenta_dark

  • Copy

    #9D52B0
    evite_purple_dark

  • Copy

    #00A6A0
    evite_teal_dark

  • Copy

    #F5F5F7
    gray1

  • Copy

    #E1E3E6
    gray2

  • Copy

    #B9BCC0
    gray3

  • Copy

    #91959C
    gray4

  • Copy

    #6F7378
    gray5

  • Copy

    #2E3136
    gray6

Typography

Google Fonts View Lato on Google Fonts

Lato Regular - Weight: 400

Lato Bold - Weight: 700



Core Styles

$voice - Headline/Subtitle - Variable size, $gray6, bold) One per view.


$heading - Headline/Title - Regular, $gray6, 30px/36px


$subtitle - Subtitle - Bold, $gray6, 18px/22px


$body-copy - Default Body Copy - Regular, $gray6, 16px/23px

$body-copy-light - Light Body Copy - Regular, $gray4

$body-copy-bold - Bold Body Copy - Bold


$supporting-copy - Supporting Copy - Regular, $gray6, 14px/18px

$supporting-copy-light - Light Supporting Copy - Regular, $gray5


$ui-text - UI Text - Bold, capitalized


$label - Section Label - Bold, $gray5, 12px/14px


$fine-print - Footer copy, etc. - Regular, $gray5, 12px/14px

Icons

Note: These are the icons we have currently - we will need some of these to be re-designed or removed to adhere to the following guidelines:

* Icons NEED to have no white-space for accurate sizing

* All icons should have an outpne (Not colored in, UNLESS it's an "on" state)

* Line thickness should be consistent within the icon, and across all icons

* No icons should be 3D

(Switch to SVG?) Standard max-width: 24px; Large: 40px

Full Icon Set

We source our icons from Fontello.
Use config.json found within assets/fonts/evite to import the icon set.

View icons: small | large

  • Loading icon list...

Utility Icons

Standard

Large