ProDemos Design System

Colors

The design system has a set of named colors, that you can access in html through classes (class="pds-m-foo blue") or in css using variables (var(--pds-color-blue)).

The available modifier classes involving color are pds-m-filled, pds-m-colored, pds-m-bordered,

The design system also has a set of theme colors, named fill, stroke, accfill, and accstroke , that you can access in html through classes (class="pds-m-foo fill-60") or in css using variables (var(--pds-color-fill-60)).

The exact colors of these properties depend on the `theme` used in that context. You can select a theme in html through classes (class="pds-t-blue01") or in sass using a mixin (@include pds-theme(yellow01)).

named colors

white
black black-120 black-110 black-80 black-60 black-40 black-20 black-10
creme creme-120 creme-110 creme-80 creme-60 creme-40 creme-20 creme-10
yellow yellow-120 yellow-110 yellow-80 yellow-60 yellow-40 yellow-20 yellow-10
orange orange-120 orange-110 orange-80 orange-60 orange-40 orange-20 orange-10
red red-120 red-110 red-80 red-60 red-40 red-20 red-10
pink pink-120 pink-110 pink-80 pink-60 pink-40 pink-20 pink-10
purple purple-120 purple-110 purple-80 purple-60 purple-40 purple-20 purple-10
blue blue-120 blue-110 blue-80 blue-60 blue-40 blue-20 blue-10
green green-120 green-110 green-80 green-60 green-40 green-20 green-10


Theme colors

Creme 01 (fill, stroke) Creme 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Yellow 01 (fill, stroke) Yellow 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Orange 01 (fill, stroke) Orange 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Red 01 (fill, stroke) Red 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Pink 01 (fill, stroke) Pink 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Purple 01 (fill, stroke) Purple 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Blue 01 (fill, stroke) Blue 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10
Green 01 (fill, stroke) Green 01 accent (accfill, accstroke)
120 110 80 60 40 20 10 120 110 80 60 40 20 10


Examples

Named colors through html

<div class="pds-m-filled blue-80">BLUE 80</div>
BLUE 80

Named colors through css

.demo-color-css { background-color: var(--pds-color-blue-80); }
BLUE 80

Named colors through sass

.demo-color-sass { background-color:pds-color(blue-80); }
BLUE 80

Theme colors through html

<div class="pds-t-blue01"> <div class="pds-m-filled"> <div class="pds-m-bordered accent-80"> FILL THEME, BORDER ACCENT-80 </div> </div> </div>
FILL THEME, BORDER ACCENT-80

Theme colors through css

background-color: var(--pds-color-fill); border-color: var(--pds-color-accfill-80);
FILL THEME, BORDER ACCENT-80

Theme colors through sass

@include pds-theme(blue01); background-color: var(--pds-color-fill); border-color: var(--pds-color-accfill-80);
FILL THEME, BORDER ACCENT-80