Design Style Guide

A draft guide to styles and components used across this website.

Color

Base

White on Dark-Gray
Dark-Gray on Light-Gray

Cool Color Theme

#69A9B8
#247385
#9EEBCF
#ED6864
#B86987

CSS code exported from Adobe Color:

    /*Color Theme Swatches in Hex*/
    .Cool-1-hex { color: #69A9B8; }
    .Cool-2-hex { color: #247385; }
    .Cool-3-hex { color: #9EEBCF; }
    .Cool-4-hex { color: #ED6864; }
    .Cool-5-hex { color: #B86987; }

    /*Color Theme Swatches in RGBA*/
    .Cool-1-rgba { color: rgba(105, 169, 184, 1); }
    .Cool-2-rgba { color: rgba(36, 115, 133, 1); }
    .Cool-3-rgba { color: rgba(158, 235, 207, 1); }
    .Cool-4-rgba { color: rgba(237, 104, 100, 1); }
    .Cool-5-rgba { color: rgba(184, 105, 135, 1); }

    /*Color Theme Swatches in HSLA*/
    .Cool-1-hsla { color: hsla(191, 35, 56, 1); }
    .Cool-2-hsla { color: hsla(191, 57, 33, 1); }
    .Cool-3-hsla { color: hsla(158, 65, 77, 1); }
    .Cool-4-hsla { color: hsla(1, 79, 66, 1); }
    .Cool-5-hsla { color: hsla(337, 35, 56, 1); }