Use in Projects
2 minute read
Rosely comes in many formats to cover a wide range of project types and tech stacks. Its colors and palettes have especially been designed for UI elements and code syntax highlighting often found in projects build with web technologies like websites.
Usage
Next to the available color swatches for your favorite applications, Rosely is available in many module formats for various CSS preprocessors.
Sass
Sass is a CSS preprocessor and extension language. Rosely can be used simply by declaring the colour palettes as variables:
$rosely0: #27272a;
$rosely1: #615F5F;
$rosely2: #A49E9E;
$rosely3: #F4EEE8;
$rosely4: #EC809E;
$rosely5: #F7CACA;
$rosely6: #F8D7DD;
$rosely7: #F4DEDE;
$rosely8: #85677B;
$rosely9: #B565A7;
$roselyA: #BE9CC1;
$roselyB: #D2C4D6;
$roselyC: #D2386C;
$roselyD: #64BFA4;
$roselyE: #3CADD4;
$roselyF: #EADA4F;
// Example
body {
background-color: $rosely5;
color: $rosely0;
}
Less
Less is a dynamic CSS preprocessor and extension language that was influenced by Sass and has influenced the newer SCSS syntax.
@rosely0: #27272a;
@rosely1: #615F5F;
@rosely2: #A49E9E;
@rosely3: #F4EEE8;
@rosely4: #EC809E;
@rosely5: #F7CACA;
@rosely6: #F8D7DD;
@rosely7: #F4DEDE;
@rosely8: #85677B;
@rosely9: #B565A7;
@roselyA: #BE9CC1;
@roselyB: #D2C4D6;
@roselyC: #D2386C;
@roselyD: #64BFA4;
@roselyE: #3CADD4;
@roselyF: #EADA4F;
body {
background-color: @rosely5;
color: @rosely0;
}
Stylus
Stylus is a dynamic CSS preprocessor and extension language that was influenced by Sass and Less.
rosely0 = #27272a;
rosely1 = #615F5F;
rosely2 = #A49E9E;
rosely3 = #F4EEE8;
rosely4 = #EC809E;
rosely5 = #F7CACA;
rosely6 = #F8D7DD;
rosely7 = #F4DEDE;
rosely8 = #85677B;
rosely9 = #B565A7;
roselyA = #BE9CC1;
roselyB = #D2C4D6;
roselyC = #D2386C;
roselyD = #64BFA4;
roselyE = #3CADD4;
roselyF = #EADA4F;
body {
background-color: @rosely5;
color: @rosely0;
}
CSS
The CSS specification supports the definition of custom properties, often referred to as CSS variables, that contain specific values to be reused throughout a document.
They are set using custom property notation (e.g. --rosely8: #88c0d0;) and are accessed using the CSS var() function (e.g. color: var(--rosely8);).
:root {
--rosely0: #27272a;
--rosely1: #615F5F;
--rosely2: #A49E9E;
--rosely3: #F4EEE8;
--rosely4: #EC809E;
--rosely5: #F7CACA;
--rosely6: #F8D7DD;
--rosely7: #F4DEDE;
--rosely8: #85677B;
--rosely9: #B565A7;
--roselyA: #BE9CC1;
--roselyB: #D2C4D6;
--roselyC: #D2386C;
--roselyD: #64BFA4;
--roselyE: #3CADD4;
--roselyF: #EADA4F;
}
body {
background-color: var(--rosely5);
color: var(--rosely0);
}