ferris-ds 🎡

Design system for WBEZ.org

Version: 6.0.2

GitHub data updated: Jan 29, 2020


These are the design tokens of our styles The variables listed in this section are scattered about our files.

Settings > Border radius

Border radius

Occasionally we use a border-radius for buttons and borders.

Variable Name Default Description
$border-radius-b 3px Subtle radius
$border-radius-l 20px Very round, usually used on action buttons.
Settings > Font families

Font families

Two font variables used throughout our CSS

Variable Name Default Description
$sans-type 'Source Sans Pro', Arial, sans-serif  
$slab-type 'Charter', 'Palatino Bold', serif  
$font-family-primary $sans-type Main font applied to :root.
$font-family-secondary $slab-type Accent font in our case used for editorial purposes.
Settings > Font sizings

Font sizings

Font sizes used at :root

Variable Name Default Description
$font-root 18px Desktop font root size
$font-root-tablet 18px Tablet font root size
$font-root-mobile 16px Mobile font root size
Settings > Letter spacing

Letter spacing

Consistent letter-spacing value

Variable Name Default Description
$font-letter-spacing-s .02em Used sometimes in card headline
$font-letter-spacing-b .03em Default used with uppercase usually
$font-letter-spacing-l .05em Bring on that kerning
Settings > Line height

Line height

Consistent line-height values

Variable Name Default Description
$line-height-s 1.25 Tight leading
$line-height-m 1.4 Heading spacing
$line-height-b 1.6 Default leading used on p tags
$line-height-l 2 More heading spacing
Settings > Size units

Size units

Sizes in comparison to base pixel root

Variable Name Default Description
$size-xxxl 3rem size xxxl
$size-giant 2.5rem size giant
$size-xxl 2rem size xxl
$size-xl 1.75rem size xl
$size-l 1.5rem size l
$size-m 1.2rem size m
$size-b 1.1rem size b
$size-s .92rem size s
$size-xs .85rem size xs
$size-xxs .7rem size xxs
$size-xxxs .55rem size xxxs
$size-tiny .275rem size tiny (only used for margin)
$size-0 0 Zero. Zilch. Nada.
Settings > Swatch set - Branding - Core

Swatch set - Branding - Core

Colors specific to our brand.


Body copy




Primary branding


Darker primary variant


Light gray


Medium gray



Settings > Swatch set - Branding - Tertiary

Swatch set - Branding - Tertiary

Colors to be used as a complement or contrast to the core colors.

For detailed guidance and accessibility guidelines, see the WBEZ color palette document.










Bright contrast


Bright contrast


Bright contrast


Bright contrast


Dark contrast


Dark contrast


Dark contrast


Dark contrast

Settings > Swatch set - Grays

Swatch set - Grays

In search of that perfect gray.


A little bit darker now


True black

Settings > Swatch set - Social

Swatch set - Social

Used for social sites branding consistency.











Settings > Swatch set - States

Swatch set - States

These are special variables assigned to specific elements and states.


Same as $color-primary


Same as $color-primary