Overview

Colors

Color is an important mechanism for illustrating both mood and tone. Within this pallet you should find both the colors we use and how they should be used when utilizing this style guide.

Backgrounds

Deque uses stark tones as background to ensure a wide range of foreground colors which meet contrast standards. We use a deep blue for our top bar and eggshell for our workspaces.

  • Top bar: @top-bar-bg (#283640)
  • Top bar (active): @top-bar-bg-active (#02101A)
  • Main workspace: @workspace-bg (#FDFDFE)
  • Tile: @tile-bg #FFFFFF

Text

Our text colors use mostly grey tones, with slightly darker shades for header texts. We've taken many of the common hues for the web and massaged them to feel more modern.

  • Workspace text: @text-base (#666666)
  • Workspace header text: @header (#4D4D4D)
  • Workspace header text (dark): @header-dark (#333333)
  • Top bar text: @top-bar-text (#D4DDE0)
  • Link: @link (#3C7AAE)
  • Error: @error (#D93251)
  • Disabled: @disabled (#CCCCCC)

Top bar accents

These accents are used exclusively in the top bar and toast composites. They are bright, clean and sharp without being hype-saturated or neon.

  • Top bar primary: @top-bar-accent-primary (#6CDAF2)
  • Top bar warning: @top-bar-accent-warning (#FFDD75)
  • Top bar error: @top-bar-accent-error (#FE6D6B)
  • Top bar success: @top-bar-accent-success (#62E86B)

Focus

We try and use focus indications which are specific to the element being focused. However, many of the focus stylings are a derivative of this color.

  • Focus: @focus (#C11BDE)