Evolution.Guide / Design

Style Guide

Use this as a toolkit for the most commonly used UI elements. This collection is curated from the underlying Evo Framework of the design system. Elements may be modified or combined with functional CSS, brand CSS classes, or very rarely inline styles.

Use these style elements by simply copy/pasting the referenced code. You may need to connect to the evo-elements and/or the evo-brand style sheets.

<link rel="stylesheet" href="../css/evo-elements.css">
<link rel="stylesheet" href="../css/evo-brand.css">

Black and White

  • Black
  • HEX#000000
  • RGB( 0, 0, 0 )
  • SASS$evo_black
  • CSSevo-black
  • CSSevo-black-bg
  • CSSline-black
  • CSSevo-box  box-black
  • White
  • HEX#ffffff
  • RGB( 255, 255, 255 )
  • SASS$evo_white
  • CSSevo-white
  • CSSevo-white-bg
  • CSSline-white
  • CSSevo-box  box-white

Grays

  • Gray 18
  • HEX#595959
  • RGB( 89, 89, 89 )
  • SASS$gray_18
  • CSSgray-18
  • CSSgray-18-bg
  • CSSline-gray-18
  • CSSevo-box  box-gray-18
  • Gray 12
  • HEX#A6A6A6
  • RGB( 166, 166, 166 )
  • SASS$gray_12
  • CSSgray-12
  • CSSgray-12-bg
  • CSSline-gray-12
  • CSSevo-box  box-gray-12
  • Gray 8
  • HEX#D9D9D9
  • RGB( 217, 217, 217 )
  • SASS$gray_8
  • CSSgray-8
  • CSSgray-8-bg
  • CSSline-gray-8
  • CSSevo-box  box-gray-8

Typography

Use combinations of CSS classes to create type styling such as text-size-11 evo-font brand-color-1.

Our Work 10

Our Work 8

Our Work 6

Our Work 4
Our Work 3
  • Red Headers

Water Quality 10

Water Quality 8

Water Quality 6

Water Quality 4

Water Quality 3
  • Gray Headers

10

Water Quality 6

Water Quality 4

  • Gray Subheaders
Submit Proposal 3
Submit Proposal 0
  • Red Eyebrow Subheaders

Lorem ipsum dolor sit amet.

  • White Hero Copy

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

  • Intro Copy

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Body Copy

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Small Body Copy

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Smallest Body Copy

Icons

  • Icons
  • Gray Icons
  • White Icons

Images

Use combinations of CSS classes to create image styles and behaviors evo-image image-square image-fpo evo-box box-.

image
  • Image
  • Square Background Image
  • Half Hero Parallax Background Image
  • Image Fixed Height Experiment

Graphics

Use combinations of CSS classes to contain graphics evo-image brand-graphic-1-bg image-size-25 bg-contain.

  • Graphic
  • Graphic Background

Boxes and Lines

Use combinations of CSS classes to create lines and box borders image-size-15 evo-box box-1.

  • Box Borders
  • HR Lines

Lists

List elements evo-list.

  • Breadcrumb List
  • Icons List
  • Bulleted List
  1. CCMP Overview
  2. Habitat & Living Resources
  3. Toxic Contamination
  4. Dredged Material
  5. Pathogenic Contamination
  6. Floatable Debris
  7. Nutrients and Organic Enrichment
  8. Rainfall-Induced Discharges
  9. Public Involvement & Education
  10. Implementing the Plan
  • Ordered List With Lines

Tables

Table elements.

Downloads
Name of Document    Size
Hudson River 3.1 mb
Raritan Bay 183 kb
Arthur Kill 17 mb
Mohawk River 264 kb
Passaic River 314 kb
  • Small Table
2014 Grants
Organization Project    Amount
America Rows and Swims Newburgh To continue and expand projects in connection with the Student Ambassador Program founded by the Newburgh Rowing Club in Newburgh $10,000
Arms-of-the-Sea Productions To purchase equipment for a new Arm-of-the-Sea production dealing with fish advisories for the Hudson River $2,000
The Battery Conservancy To create a moveable waterfront classroom and to develop a Hudson River/NY Harbor ecology themed curriculum for students visiting Battery Park, Manhattan $10,000
Brooklyn Bridge Park Conservancy To fabricate, construct, and install the Discovery Station in the Conservancy's Environmental Education Center in Brooklyn $7,000
City Parks Foundation For education programs and to improve and maintain park trails along the Hudson River in Inwood Hill Park and Riverdale Park in NYC $5,000
  • Large Table
Just a link
  • Link
Just an inverse link
  • Inverse Link
View All Icons
  • Link with icon
View All Icons
  • Inverse Link With Icon

Buttons

Button elements #.

  • Button
  • Inverse Button
  • Button With Icon
  • Inverse Button with Icon

Forms

Form elements #.

  • Mega Search
advanced search
  • Mega Search with Link
  • Large Email
Stay Informed
  • Sign up with your email address and stay up to date on the latest Hudson + Harbor news.
  • Footer Email
  • Text Input
  • Dropdown Input
  • TextArea Input
  • Checkbox Input
  • File Upload
  • Custom File Upload Button
  • Input Buttons
8 characters or more
  • Sample Error Message
  • Disabled Input States

Videos

Video elements #.

  • Video