Our color system celebrates the WilmU brand through a harmonious and recognizable color palette that contributes to a purposeful and accessible user experience.
The primary color category should stand out as the resounding color on a given page.
Green is the main WilmU brand color.
$Primary
#00843D
$Primary1
#F5FAF7
$Primary2
#DCF0DD
$Primary3
#73B474
$Primary4
#014E25
Accent colors should be used to either support a section or draw attention to an element.
Yellow, a staple of the WilmU brand, is our main accent color and should be used for the primary CTA button on a given page.
$accent
#F9C22B
$accent1
#FDF2D2
$accent2
#E4CC87
$accent3
#E2AE3D
Neutral colors function much like that of white space - they give users a break from content and allow time to better digest and prioritize information on the page. Neutral colors aid in providing contrast and drawing attention to an element.
$white
#FFFFFF
$neutral
#EEEEEE
$neutral1
#D1D1D1
$neutral2
#949494
$neutral3
#605F60
$neutral4
#2A2926
Embed the code into the html and change the class to match the correct color. You can use any of the color or background classes listed below on elements within the html. In css you can reference the color codes when styling an element. In SCSS you can call the variable of the color.
See the Pen Color Primary by Wilmington University (@WilmU01) on CodePen.
We have established a preset list of classes that may be used for background and color.
.BG-primary = background $primary .BG-primary1 = background $primary1.BG-primary2 = background $primary2 .BG-accent = background $accent .BG-accent1 = background $accent1 .BG-neutral = background $neutral.BG-neutral1 = background $neutral1 .BG-neutral2 = background $neutral2 .BG-neutral3 = background $neutral3 .BG-neutral4 = background $neutral4 .BG-white = background $white .Color-primary = color $primary .Color-primary4 = color $primary4 .Color-accent = color $accent.Color-accent3 = color $accent3 .Color-white = color $white .Color-neutral4 = color $neutral4