Colors

  • Primary
  • #63a541 $kiva-green $green
  • #236133 $kiva-darkgreen $dark-green
  • Secondary
  • #a9d14c $kiva-accent-green $light-green
  • #26b6e8 $kiva-accent-blue $blue
  • #9C021A $kiva-accent-red $red
  • #488443 $kiva-icon-green $graphic-green
  • #49953f $kiva-navdivider-green $divider-green
  • #d8d8d8 $kiva-stroke-gray $light-gray
  • #FEF37B $kiva-alert-yellow $vivid-yellow
  • Background
  • #fafafa $kiva-bg-lightgray $ghost
  • #efefef $kiva-bg-darkgray $platinum
  • Text
  • #333 $kiva-text-dark $charcoal
  • #666 $kiva-text-medium $dark-gray
  • #999 $kiva-text-light $gray
  • #fff $white
  • Text Link
  • #22a9d8 $kiva-textlink $sky-blue
  • #6698a9 $kiva-textlink-visited $faded-blue
  • #0d8ebb $kiva-textlink-hovered $highlight view
  • UI Controls
  • #d2f0f8 $kiva-filter-indicator-bg $pale-blue
  • #26b6e8 $kiva-filter-indicator $blue
  • Graph and chart elements
  • #63a541 $graph-green aka $kiva-green
  • #0d8ebb $graph-blue aka $kiva-textlink-hovered
  • #5141a5 $graph-purple
  • #9c021a $graph-red aka $kiva-accent-red
  • #666 $graph-med-gray aka $kiva-text-medium
  • #f8e71c $graph-yellow aka $kiva-alert-yellow
  • #236133 $graph-dark-green aka $kiva-darkgreen
  • #d2f0f8 $graph-pale-blue aka $kiva-filter-indicator-bg
  • #a54195 $graph-magenta
  • #d8d8d8 $graph-light-gray aka $kiva-stroke-gray

Fonts

Primary font: "Post Grotesk Book", 'Helvetica Neue', Arial, Helvetica, sans-serif;

Primary font italic: "Post Grotesk Book Italic", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "Post Grotesk Bold", "HelveticaNeueBold", "Helvetica", "Arial", sans-serif;

Primary font bold: "Post Grotesk Bold Italic", "HelveticaNeueBold ", "Helvetica", "Arial", sans-serif;

Primary font light: "Post Grotesk Light", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font light italic: "Post Grotesk Light Italic", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Visibility

This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.

You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.

You are in landscape orientation. You are in portrait orientation.

You are on a touch-enabled device. You are not on a touch-enabled device.