Colors
UI Colors
| Swatch | CSS Variable | Comment |
|---|---|---|
--accent-color |
||
--text-color |
||
--text-color-flipped |
Is this used for anything else than incognito links? | |
--link-color |
||
--link-color-flipped |
||
--mute-color |
||
--mute-color-flipped |
||
--code-text-color |
||
--code-background-color |
Some variables may be set to other variables or currentColor (read more) and may therefor change with context.
Palette OLD STUFF
Primary color
pink
#F71D52
R 247, G 29, B 82
CYAN
PANTONE
Secondary emphasis
fawn
blue
gray
dark-gray
Mostly for UI, shadows, highlights, etc
orange
red
rose
dark-blue
cyan
cyan-bright
light-gray
sand
Mostly for gradient stops
magenta
azure
green
Gradients
Gradients can be played with here.
Animated gradients
In text
Animated gradient
<h1 class="display-2 --moving-background-gradient">Animated gradient</h1>In logo
<div class="logo logo--huge logo--outline logo--center --moving-background-gradient"></div>User Interface Colors
NOTES: background shadow Text color [$sg-text-color]
Accent colors
NOTES: blue orange (only for corporate and sales themes?)