{"id":142,"date":"2018-04-27T14:59:42","date_gmt":"2018-04-27T14:59:42","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=142"},"modified":"2018-09-11T22:14:01","modified_gmt":"2018-09-11T22:14:01","slug":"color","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/color\/","title":{"rendered":"Color"},"content":{"rendered":"

Style<\/p>\n

\n\t\tColor
\n\t<\/h1>\n

Color helps establish our company’s brand voice. It helps emphasize meaning to our customers data in order to help them achieve a successful outcome for their organizations mission. Use our established guidelines to apply color where specified. Each CTA, link, form field, as well as other component in the neon system follow specific color guidelines.<\/h4>\n

\n\t\tBrand Colors
\n\t<\/h2>\n

Sometimes, designers or developers will need to create new patterns and features that will rely on the use of additional colors for elements such dividers, cards, and ruling lines. In order to maintain a consistent color scheme, please refer to our color shading index we have created from our primary, secondary, and tertiary brand colors. We have grouped colors into 5 categories:<\/p>\n

\n\t\t
\n\t\tPrimary
\n\t\t<\/a>
\n\t<\/h4>\n

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.<\/p>\n

\t\t\t\t\"Screen<\/p>\n

True Blue<\/h4>\n

#0074D9<\/p>\n

rgba(0,116,217,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

Oxford Blue<\/h4>\n

#002D41<\/p>\n

rgba(0,45,65,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

White<\/h4>\n

#FFFFFF<\/p>\n

rgba(255,255,255,1);<\/p>\n

\n\t\t
\n\t\tSecondary
\n\t\t<\/a>
\n\t<\/h4>\n

Our secondary palette is made up of green, yellow, red, and purple. Each color is selected with purpose in order to provide meaningful feedback within our products. See the Color System below for more information.<\/p>\n

\t\t\t\t\"Screen<\/p>\n

Everglades<\/h4>\n

#008000<\/p>\n

rgba(0,128,0,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

Dark Tangerine<\/h4>\n

#F49D10<\/p>\n

rgba(244,157,16,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

Crimson<\/h4>\n

#DC143C<\/p>\n

rgba(220,20,60,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

UCLA Blue<\/h4>\n

#54698D<\/p>\n

rgba(84,105,141,1);<\/p>\n

\n\t\t
\n\t\tNeutrals
\n\t\t<\/a>
\n\t<\/h4>\n

Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. Typically they are used for text and subtle backgrounds when we don’t want to draw too much attention to a particular touchpoint or convey information such as “to do” or “disabled”.<\/p>\n

\t\t\t\t\"dark<\/p>\n

Chalkboard<\/h4>\n

#3C4144<\/p>\n

rgba(60,65,68,1);<\/p>\n

\t\t\t\t\"lighter<\/p>\n

Slate<\/h4>\n

#757575<\/p>\n

rgba(117,117,117,1);<\/p>\n

\t\t\t\t\"lighter<\/p>\n

Dust Bunny<\/h4>\n

#C8C9CA<\/p>\n

rgba(200, 201, 202, 1);<\/p>\n

\t\t\t\t\"lighter<\/p>\n

Effervescent<\/h4>\n

#F4F6F9<\/p>\n

rgba(244,246,249,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Spooky Ghost<\/h4>\n

#FBFBFD<\/p>\n

rgba(251,251,253,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Old Swan<\/h4>\n

#F7F9FA<\/p>\n

rgba(247,249,250,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Egghead<\/h4>\n

#F6F7F9<\/p>\n

rgba(246,247,249,1);<\/p>\n

\n\t\t
\n\t\tExtended Palettes
\n\t\t<\/a>
\n\t<\/h4>\n

The extended palette consists of all the useable tints and shades of each color in the palette. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in product.<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Deep Sea<\/h4>\n

#003563<\/p>\n

rgba(0,53,99,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Denim<\/h4>\n

#00559E<\/p>\n

rgba(0,85,158,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

True Blue<\/h4>\n

#0074D9<\/p>\n

rgba(0,116,217,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Tarheels<\/h4>\n

#77C0FF<\/p>\n

rgba(119,192,255,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Winter is Coming<\/h4>\n

#0074D9<\/p>\n

rgba(0,116,217,.12);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Midnight<\/h4>\n

#283243<\/p>\n

rgba(40,50,67,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Old Grape<\/h4>\n

#3E4E68<\/p>\n

rgba(62,78,104,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

UCLA Blue<\/h4>\n

#54698D<\/p>\n

rgba(84,105,141,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Storm<\/h4>\n

#54698D<\/p>\n

rgba(84,105,141,.50);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

London Fog<\/h4>\n

#54698D<\/p>\n

rgba(84,105,141,.20);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Dark Forest<\/h4>\n

#004500
\nrgba(0,69,0,1)<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Everglades<\/h4>\n

#08000<\/p>\n

rgba(0,128,0,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Limey<\/h4>\n

#00BB00<\/p>\n

rgba(0,187,0,100);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Easter Grass<\/h4>\n

#00BB00<\/p>\n

rgba(0,187,0,.50);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Pastel Green<\/h4>\n

#00BB00<\/p>\n

rgba(0,187,0,0.20);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Mud Pie<\/h4>\n

#503304<\/p>\n

rgba(80,51,4,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Gold Coin<\/h4>\n

#C07A09<\/p>\n

rgba(192,122,9,1);<\/p>\n

\t\t\t\t\"Screen<\/p>\n

Dark Tangerine<\/h4>\n

#F49D10<\/p>\n

rgba(244,157,16,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Dusty Sunflower<\/h4>\n

#F49D10<\/p>\n

rgba(244,157,16,.50);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Morning Light<\/h4>\n

#F49D10<\/p>\n

rgba(244,157,16,20);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Eggplant<\/h4>\n

#4C0715<\/p>\n

rgba(76,7,21,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Fruit Punch<\/h4>\n

#A60F2D<\/p>\n

rgba(166,15,45,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Crimson<\/h4>\n

#DC143C<\/p>\n

rgba(220,20,60,1);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Energizer Bunny<\/h4>\n

#DC143C<\/p>\n

rgba(220,20,60,.50);<\/p>\n

\t\t\t\t\"Rectangle<\/p>\n

Bubblegum<\/h4>\n

#DC143C<\/p>\n

rgba(220,20,60,.20);<\/p>\n

\n\t\t
\n\t\tUsage
\n\t\t<\/a>
\n\t<\/h4>\n

The following guidelines outline when to use colors in Neon. This color system helps users identify status, see actions, locate help, and to indicate next steps. The consistent use of color keeps cognitive loads low and makes for a unified and engaging user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"

Style Color Color helps establish our company’s brand voice. It helps emphasize meaning to our customers data in order to help them achieve a successful outcome for their organizations mission. Use our established guidelines to apply color where specified. Each CTA, link, form field, as well as other component in the neon system follow specific…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=142"}],"version-history":[{"count":29,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/142\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}