# Color

Infopiphany UI uses colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for users.

# Guidelines

These guidelines are the framework upon which we have built our system for how color is used in Infopiphany UI.

Communication over decoration

Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Our use of color should be purposeful, rational, and should serve to support the purpose of the content.

Communicate using colors

# Colors should be accessible

When choosing colors, consider users who are color blind or who have low vision. Never use color alone to convey information.

# Color should focus attention

The use of color should help bring attention to what matters most. Color should support the hierarchy of the page. Use restraint.

# Color palettes


  • #3B5999
  • #1DA1F2
  • #DD4B39
  • #E4405F
  • #BD081C
  • Social Media Palette

  • #F6FAFE
  • #E4F0FB
  • #B8D3F4
  • #71A7EA
  • #4185D8
  • Infopiphany UI Palette

  • #176ED9
  • #1460BD
  • #0078B7
  • #1152A2
  • #0E4486
  • Infopiphany UI Palette

  • #811723
  • #C00C12
  • #E00609
  • #F00305
  • #FF0000
  • Infopiphany UI Palette

  • #159723
  • #1ECB12
  • #22E509
  • #24F205
  • #26FF00
  • Infopiphany UI Palette