Settings
These are the design tokens of our styles The variables listed in this section are scattered about our files.
Border radius
Occasionally we use a border-radius for buttons and borders.
| Variable Name | Default | Description | |
|---|---|---|---|
| $border-radius-b | 3px | Subtle radius |
ferris-ds 7www.wbez.org 6 |
| $border-radius-l | 20px | Very round, usually used on action buttons. |
ferris-ds 2www.wbez.org 1 |
Breakpoints
We import the column-setter library for our responsive utilities. Our own custom breakpoints are as follows:
| Variable Name | Default | Description | |
|---|---|---|---|
| $bp-xs | 320px | Mobile |
ferris-ds 1www.wbez.org 1 |
| $bp-s | 520px | Mobile |
ferris-ds 6www.wbez.org 4 |
| $bp-m | 650px | Tablet |
ferris-ds 2www.wbez.org 4 |
| $bp-l | 845px | Small Desktop |
ferris-ds 3www.wbez.org 18 |
| $bp-xl | 1080px | Desktop |
ferris-ds 1 |
| $bp-xxl | 1300px | Large Desktop |
ferris-ds 2www.wbez.org 4 |
Font families
Two font variables used throughout our CSS
| Variable Name | Default | Description | |
|---|---|---|---|
| $sans-type | 'Source Sans Pro', Arial, sans-serif |
ferris-ds 1 |
|
| $slab-type | 'Charter', 'Palatino Bold', serif |
ferris-ds 1 |
|
| $font-family-primary | $sans-type | Main font applied to :root. |
ferris-ds 1 |
| $font-family-secondary | $slab-type | Accent font in our case used for editorial purposes. |
ferris-ds 1 |
Font sizings
Font sizes used at :root
| Variable Name | Default | Description | |
|---|---|---|---|
| $font-root | 18px | Desktop font root size |
ferris-ds 2 |
| $font-root-tablet | 18px | Tablet font root size | |
| $font-root-mobile | 16px | Mobile font root size |
ferris-ds 1 |
Letter spacing
Consistent letter-spacing value
| Variable Name | Default | Description | |
|---|---|---|---|
| $font-letter-spacing-s | .02em | Used sometimes in card headline |
ferris-ds 1 |
| $font-letter-spacing-b | .03em | Default used with uppercase usually |
ferris-ds 3www.wbez.org 1 |
| $font-letter-spacing-l | .05em | Bring on that kerning |
ferris-ds 2 |
Line height
Consistent line-height values
| Variable Name | Default | Description | |
|---|---|---|---|
| $line-height-s | 1.25 | Tight leading |
ferris-ds 7www.wbez.org 2 |
| $line-height-m | 1.4 | Heading spacing |
ferris-ds 2www.wbez.org 1 |
| $line-height-b | 1.6 | Default leading used on p tags | |
| $line-height-l | 2 | More heading spacing |
Size units
Sizes in comparison to base pixel root
| Variable Name | Default | Description | |
|---|---|---|---|
| $size-xxxl | 3rem | size xxxl |
ferris-ds 1 |
| $size-giant | 2.5rem | size giant |
www.wbez.org 18ferris-ds 6 |
| $size-xxl | 2rem | size xxl |
ferris-ds 4 |
| $size-xl | 1.75rem | size xl |
ferris-ds 6www.wbez.org 2 |
| $size-l | 1.5rem | size l |
ferris-ds 7www.wbez.org 9 |
| $size-m | 1.2rem | size m |
www.wbez.org 6ferris-ds 5 |
| $size-b | 1.1rem | size b |
www.wbez.org 12ferris-ds 12 |
| $size-s | .92rem | size s |
ferris-ds 10www.wbez.org 8 |
| $size-xs | .85rem | size xs |
www.wbez.org 8ferris-ds 9 |
| $size-xxs | .7rem | size xxs |
ferris-ds 6www.wbez.org 5 |
| $size-xxxs | .55rem | size xxxs |
ferris-ds 6www.wbez.org 3 |
| $size-tiny | .275rem | size tiny (only used for margin) |
www.wbez.org 13ferris-ds 6 |
| $size-0 | 0 | Zero. Zilch. Nada. |
Swatch set - Branding - Core
Colors specific to our brand.
#252525
Body copy
#000000
Black
#ed0000
Primary branding
#cf0000
Darker primary variant
#dcddde
Light gray
#636466
Medium gray
#ffffff
White
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.
#ffd03d
Complementary
#24bcb7
Complementary
#5151bd
Complementary
#1d9cd3
Complementary
#ffd7ff
Bright contrast
#adf45b
Bright contrast
#99a8ff
Bright contrast
#88f7ff
Bright contrast
#f79e1c
Dark contrast
#016480
Dark contrast
#5f2b7b
Dark contrast
#263c80
Dark contrast
Swatch set - Grays
In search of that perfect gray.
#ffffff
White
ferris-ds 5
www.wbez.org 2
#f3f3f3
Kinda white
www.wbez.org 6
ferris-ds 4
#dcddde
Gray light
ferris-ds 10
www.wbez.org 6
#636466
A little bit darker now
ferris-ds 9
www.wbez.org 6
#4a4a4a
A little bit darker now
www.wbez.org 3
ferris-ds 1
#252525
A little bit darker now
www.wbez.org 2
ferris-ds 12
#000000
True black
ferris-ds 4
Swatch set - Social
Used for social sites branding consistency.
#2d60c4
ferris-ds 1
#55acee
ferris-ds 1
#517fa4
ferris-ds 1
#bb0000
YouTube
ferris-ds 1
#1371bf
Feedburner
ferris-ds 1
Swatch set - States
These are special variables assigned to specific elements and states.
#ec0101
Same as $color-primary
ferris-ds 1
#ec0101
Same as $color-primary
ferris-ds 2
#f51c1c
Error
ferris-ds 2
#11a06b
Success