1.1 #Base.Breakpoints Breakpoints
We use the following standard set of breakpoints and corresponding prefixes to generate size-based utilities. As often as possible, we should be using these breakpoints before any others. You may use the breakpoints in SCSS like so:
@media screen and (min-width: map-get($breakpoints, {breakpoint_prefix})) {
CSS here
}
| Breakpoint prefix | Breakpoint Size |
|---|---|
| 'sm' | 576px |
| 'md' | 768px |
| 'lg' | 1024px |
| 'xl' | 1366px |
| 'xxl' | 1920px |
Source:
resources/sass/_variables.scss, line 4
1.2 #Base.Colors Colors
-
$black #000 -
$gray-16 #28292C -
$gray-40 #5D5E65 -
$gray-45 #696A72 -
$gray-80 #C6C6C9 -
$gray-90 #E2E2E4 -
$gray-95 #F0F1F1 -
$gray-98 #F9F9FA -
$gray-99 #FCFCFC -
$white #fff -
$blue-16 #0A2463 -
$blue-30 #173FA0 -
$blue-48 #3367F2 -
$blue-90 #DDE1FD -
$purple-16 #3D0B67 -
$purple-30 #6618A6 -
$purple-90 #E8DEFD -
$red-30 #881F0E -
$red-45 #C8321A -
$red-90 #FDDBD9 -
$green-30 #2F4F0E -
$green-48 #4E7F1C -
$green-75 #81CC33 -
$green-97 #E4FED6 -
$orange-16 #3A2505 -
$orange-45 #8F611A -
$orange-75 #F5A933 -
$orange-90 #FDDDC2
Source:
resources/sass/_variables.scss, line 29
1.2.1 #Base.Colors.Branding Marketing Brand Colors
These are colors that are typically only used when dealing with a specific product offering (e.g. ODDER), or exclusively for marketing aesthetics, rather than general product UI design.
-
$odder-light #ECFBF7 -
$odder-dark #357B87 -
$odder-light-blue #D7F4EE -
$odder-navy-blue #0E2A6D
Source:
resources/sass/_variables.scss, line 112
1.2.2 #Base.Colors.Deprecated Deprecated Colors
These are older colors that you may see scattered throughout the codebase but they should be avoided in general.
-
$marilyn #ff4e56
Source:
resources/sass/_variables.scss, line 131