The Joystick's UI Framework provides you with a wide palette of carefully selected colors to choose from for your project.
Joystick's color theme is based primarily on two main colors - $color-base and $color-alt - along with various shades of grey.
By default, $color-base and $color-alt are set to $bluebonnet and $mint respectively. The color theming of every component in Joystick - from buttons and forms to links and navbars - is derived from these two main colors.
In addition, Joystick also offers three "Stoplight Colors" to be used to convey states: $color-error, $color-warning, and $color-success.
Joystick offers a palette of 10 carefully selected base colors - each with 7 shades of lightness - and a set of $grey shades as well.
Our nature-inspired color names can be accessed in Sass using their base name $bluebonnet along with an optional shade suffix of -light, -lighter, -lightest, -dark, -darker, -darkest. e.g. $plum-light, $pine-darker, or $raspberry-lightest.
If you would like to use colors other than $bluebonnet and $mint as your Base and Alt colors to theme your application, you can change the default colors so long as you are using the Sass version of Joystick in your project.
By default, the Base and Alt colors are mapped to Bluebonnet and Mint respectively.
If you would like to use different colors from the Joystick palette to theme your app, simply include the following Sass at the beginning of your project's Sass file:
/* Import the Joystick color palette */
@import 'PATH_TO_JOYSTICK/joystick-design-system/variables/palette';
/* Redefine your base and alt colors... */
$color-base: $berry !global;
$color-alt: $raspberry !global;
/* ... along with their corresponding shades. */
$color-base-lightest: $berry-lightest !global;
$color-base-lighter: $berry-lighter !global;
$color-base-light: $berry-light !global;
$color-base-dark: $berry-dark !global;
$color-base-darker: $berry-darker !global;
$color-base-darkest: $berry-darkest !global;
$color-alt-lightest: $raspberry-lightest !global;
$color-alt-lighter: $raspberry-lighter !global;
$color-alt-light: $raspberry-light !global;
$color-alt-dark: $raspberry-dark !global;
$color-alt-darker: $raspberry-darker !global;
$color-alt-darkest: $raspberry-darkest !global;
/* Import this file to bring in the rest of Joystick */
@import 'PATH_TO_JOYSTICK/joystick-design-system/joystick-theme';
/* The rest of your project's Sass goes here */This would result in your project using $berry (and its shades) as the Base color and $raspberry (and its shades) as the Alt color.
$lime or $cherry as either your Base or Alt colors as they are used to indicate Error and Success states. This would also apply to $tangerine, but is more forgivable.The Web Content Accessibility Guidelines (WCAG) 2.0 level AA requires a minimum contrast ratio of 4.5 (4.5:1) for normal text and 3 for large text. We have fine-tuned all of the Joystick's color shades so that you can safely use any -darkest shade on any -lighter or -lightest. The inverse is also true: any -lightest shade can be used on any -darker or -darkest shade.
Here are the contrast ratio values for all of the color shade combinations: