Colors & Spacers

For the purposes of these designs, we created vertical spacer classes. It was decided that a separate element for spacing (in most cases) would work best rather than adding padding or margins to the elements. Whenever possible, use the spacer classes to separate elements from each other.

The spacers do not have any background colors attached. They are colored here only for display purposes.

The ones listed below are the ones we are using for the most recent batches of pages.

< back to Styles Menu
DIVIDER LINES (temp: WIP)
class = divider-line--is-celeste
class = divider-line--is-grey
COLORS (text & backgrounds)
background colors
is-celestedark-bg
is-celeste-bg
is-yellow-bg
is-greenlight-bg
is-green-bg
is-greendark-bg
is-teal-bg
text colors & text alignment
is-white-text   ON   is-black-bg
is-white-text   ON   is-celestedark-bg
is-black text   ON   is-celestedark-bg
is-celeste-text   ON   is-white-bg
is-celestedark-text   ON   is-white-bg
is-greendark-text   ON   is-white-bg
I am left justified
class = text-align-left
I am center justified
class = text-align-center
I am right justified
class = text-align-right
NOTE: if text alignment changes per breakpoint per the comp, please create your own class for these cases.
SPACERS (vertical)
spacer--140d-70tm
element
element
Class = spacer--140d-70tm

desktop
h: 140px

tablet, mobile
h: 70px
spacer--100d-50tm
element
element
Class = spacer--100d-50tm

desktop
h: 100px

tablet, mobile
h: 50px
spacer--100d-60t-40m
element
element
Class = spacer--100d-60t-40m

desktop
h: 100px

tablet
h: 60px

mobile
h: 40px
spacer--10dtm
element
element
Class = spacer--100dtm

desktop, tablet, mobile
h: 10px
spacer--20d-10tm
element
element
Class = spacer--20d-10tm

desktop
h: 20px

tablet, mobile
h: 10px
spacer--20d-15tm
element
element
Class = spacer--15d-10tm

desktop
h: 15px

tablet, mobile
h: 10px
spacer--20dtm
element
element
Class = spacer--20dtm

desktop, tablet, mobile
h: 20px
spacer--20dt-0m
element
element
Class = spacer--20dt-0m

desktop, tablet
h: 20px

mobile
h: 0px
spacer--2dtm
element
element
Class = spacer--2dtm

desktop, tablet, mobile
h: 2px
spacer--30d-20tm
element
element
Class = spacer--30d-20tm

desktop
h: 30px

tablet, mobile
h: 20px
spacer--30dt-20m
element
element
Class = spacer--30dt-20m

desktop, tablet
h: 30px

mobile
h: 20px
spacer--40dtm
element
element
Class = spacer--40dtm

desktop, tablet, mobile
h: 40px
spacer--40d-20tm
element
element
Class = spacer--40d-20tm

desktop
h: 40px

tablet, mobile
h: 20px
spacer--40d-30tm
element
element
Class = spacer--40d-30tm

desktop
h: 40px

tablet, mobile
h: 30px
spacer--50dtm
element
element
Class = spacer--50dtm

desktop, tablet, mobile
h: 50px
spacer--60d-40tm
element
element
Class = spacer--60d-40tm

desktop
h: 60px

tablet, mobile
h: 40px
spacer--60d-50tm
element
element
Class = spacer--60d-50tm

desktop
h: 60px

tablet, mobile
h: 50px
spacer--80d-40t-20m
element
element
Class = spacer--80d-40t-20m

desktop
h: 80px

tablet
h: 40px

mobile
h: 20px
spacer--0d-20tm
element
element
Class = spacer--0d-20tm

desktop
h: 0px

tablet, mobile
h: 20px
spacer--0dt-20m
element
element
Class = spacer--0dt-20m

desktop, tablet
h: 0px

mobile
h: 20px
spacer--14dt-20m
element
element
Class = spacer--14dt-20m

desktop, tablet
h: 14px

mobile
h: 20px