Color

Color is used to communicate information hierarchy and group information by content.

Seafoam
  • Background color for page content

    • #74CFBE

    Kelp
    • Footer background color
    • Background color for page content

    #033335

    Clownfish
    • Highest section heading element on the page. Orients users to the content of the page.

    #BF4E30

    Sea Urchin

    This can be used an accent color or a background.

    #DCCDE8

    Abyss
    • Main text color
    • Outline color for default, hover, and disabled state buttons

    #000000

    Whitecap
    • Navigation header
    • Main page background
    • Buttons : Background for default state and hover state buttons
    • Section heading elements and body text on dark backgrounds

    #FFFFFF

    Accessibility

    Colors were chosen with accessibility in mind. All color choices were made with the help of Web AIM Contrast Checker. Colors are only to be paired together in accordance to the Contrast Checker. Light backgrounds must have dark text and dark backgrounds must have light text..