Colors
The numbering of the colors works in such a way that the base color gets the number 500. Darker and lighter variants are created from the base color. Darker shades go from 600 - 900 and lighter shades go from 400 - 100.
Primary Colors
These are the splashes of color that should appear the most in your UI, and are the ones that determine the overall "look" of the site. Use these for things like primary actions, links, navigation items, icons, accent borders, or text you want to emphasize.
-
#19216C
color-primary-900 -
#2D3A8C
color-primary-800 -
#35469C
color-primary-700 -
#4055A8
color-primary-600 -
#4C63B6
color-primary-500 -
#647ACB
color-primary-400 -
#98AEEB
color-primary-300 -
#BED0F7
color-primary-200 -
#E0E8F9
color-primary-100
Accent (Supporting) Colors
These colors should be used fairly conservatively throughout your UI to avoid overpowering your primary colors. Use them when you need an element to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.
-
#610316
color-accent-900 -
#8A041A
color-accent-800 -
#AB091E
color-accent-700 -
#CF1124
color-accent-600 -
#E12D39
color-accent-500 -
#EF4E4E
color-accent-400 -
#FF9B9B
color-accent-300 -
#FFBDBD
color-accent-200 -
#FFE3E3
color-accent-100
Neutral Colors
These are the colors you will use the most and will make up the majority of your UI. Use them for most of your text, backgrounds, and borders, as well as for things like secondary buttons and links.
-
#1F2933
color-neutral-900 -
#323F4B
color-neutral-800 -
#3E4C59
color-neutral-700 -
#52606D
color-neutral-600 -
#616E7C
color-neutral-500 -
#7B8794
color-neutral-400 -
#9AA5B1
color-neutral-300 -
#CBD2D9
color-neutral-200 -
#E4E7EB
color-neutral-100 -
#F5F7FA
color-neutral-50 -
#FAFAFA
color-neutral-50
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Strong: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Strong/em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Markup: templates/output/01-settings/fonts.html
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p><em>em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</em></p>
<p><strong>Strong: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</strong></p>
<p><strong><em>Strong/em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</em></strong></p>assets/sass/01-settings/_settings.fonts.scss, line 13
Markup: templates/output/01-settings/iconfont.html
<i class="icon [modifier class]"></i>assets/sass/01-settings/_settings.iconfont.scss, line 5