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 color guidelines.
Brand Colors
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:
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
True Blue
#0074D9
rgba(0,116,217,1);
Oxford Blue
#002D41
rgba(0,45,65,1);
White
#FFFFFF
rgba(255,255,255,1);
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.
Everglades
#008000
rgba(0,128,0,1);
Dark Tangerine
#F49D10
rgba(244,157,16,1);
Crimson
#DC143C
rgba(220,20,60,1);
UCLA Blue
#54698D
rgba(84,105,141,1);
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".
Chalkboard
#3C4144
rgba(60,65,68,1);
Slate
#757575
rgba(117,117,117,1);
Dust Bunny
#C8C9CA
rgba(200, 201, 202, 1);
Effervescent
#F4F6F9
rgba(244,246,249,1);
Spooky Ghost
#FBFBFD
rgba(251,251,253,1);
Old Swan
#F7F9FA
rgba(247,249,250,1);
Egghead
#F6F7F9
rgba(246,247,249,1);
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.
Deep Sea
#003563
rgba(0,53,99,1);
Denim
#00559E
rgba(0,85,158,1);
True Blue
#0074D9
rgba(0,116,217,1);
Tarheels
#77C0FF
rgba(119,192,255,1);
Winter is Coming
#0074D9
rgba(0,116,217,.12);
Midnight
#283243
rgba(40,50,67,1);
Old Grape
#3E4E68
rgba(62,78,104,1);
UCLA Blue
#54698D
rgba(84,105,141,1);
Storm
#54698D
rgba(84,105,141,.50);
London Fog
#54698D
rgba(84,105,141,.20);
Dark Forest
#004500
rgba(0,69,0,1)
Everglades
#08000
rgba(0,128,0,1);
Limey
#00BB00
rgba(0,187,0,100);
Easter Grass
#00BB00
rgba(0,187,0,.50);
Pastel Green
#00BB00
rgba(0,187,0,0.20);
Mud Pie
#503304
rgba(80,51,4,1);
Gold Coin
#C07A09
rgba(192,122,9,1);
Dark Tangerine
#F49D10
rgba(244,157,16,1);
Dusty Sunflower
#F49D10
rgba(244,157,16,.50);
Morning Light
#F49D10
rgba(244,157,16,20);
Eggplant
#4C0715
rgba(76,7,21,1);
Fruit Punch
#A60F2D
rgba(166,15,45,1);
Crimson
#DC143C
rgba(220,20,60,1);
Energizer Bunny
#DC143C
rgba(220,20,60,.50);
Bubblegum
#DC143C
rgba(220,20,60,.20);
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.