Colors

Colors

Color Color name Color code Where to use
Main blue Main blue #318CCC Backgrounds, buttons
Secondary blue Secondary blue #3AABED Metadata header
Light blue Light blue #CBE8F6 Selected item
Light blue 2 Light blue 2 #E5F3FF Hover
Main white Main white #FFFFFF Backgrounds, text color, inactive icon
Main black Main black #000000 Text color
Gray 1 Gray 1 #333333 Base text color
Gray 2 Gray 2 #666666 Header text (inactive)
Gray 3 Gray 3 #676767 Metadata card heading
Gray 4 Gray 4 #808080 Metadata card italic sub-heading
Gray 5 Gray 5 #999999 Metadata card left text
Gray 6 Gray 6 #B3B3B3 Search button, Task pane menu item (upper)
Gray 7 Gray 7 #CCCCCC Pane header (active)
Gray 8 Gray 8 #E6E6E6 Pane header (inactive)
Gray 9 Gray 9 #F2F2F2 Dialog background

How to use and when

Vault view colors

Vault view colors

  1. Main blue, #318CCC
  2. Gray 8, #E6E6E6
  3. Gray 6, #B3B3B3
  4. Gray 6, #B3B3B3
  5. Gray 7, #CCCCCC
  6. Gray 6, #333333
  7. Light blue, #CBE8F6
  8. Main black, #000000
  9. Main white, #FFFFFF
  10. Gray 2, #666666
  11. Gray 8, #E6E6E6

Metadata colors

Metadata colors

  1. Gray 3, #676767
  2. Gray 9, #F2F2F2
  3. Gray 4, #808080
  4. Main blue, #318CCC
  5. Main white, #FFFFFF (icon)
  6. Main black, #000000
  7. Gray 5, #999999

Create vault colors

Create vault view colors

  1. Gray 1, #333333
  2. Main white, #FFFFFF
  3. Gray 9, #F2F2F2
  4. Gray 1, #333333
  5. Light blue, #CBE8F6
  6. Gray 1, #333333
  7. Main blue, #318CCC