Styleguide Styleguide

Color palette

Primary brand colors

The primary colors of the Vitae brand are purple, red, and white. The colors are used throughout the brand to convey a consistent and distinctive presence in all contexts.

  • Red

    Hex:
    #A4123F
    HSL:
    341, 80, 36
    RGB:
    164, 18, 63
    CMYK:
    25, 100, 67, 17
    Pantone:
    P 7426 C

  • White

    Hex:
    #fff
    HSL:
    0, 0, 0
    RGB:
    255, 255, 255
    CMYK:
    0, 0, 0, 0
    Pantone:
    White

  • Purple

    Hex:
    #1F0E3C
    HSL:
    262, 62, 15
    RGB:
    31, 14, 60
    CMYK:
    93, 98, 39, 53
    Pantone:
    P 275 C

Our primary colors serve in distinct roles.

  • Purple is the basis of the neutral palette. Depending on the context, varying shades and tints can be used (in a limited way).

  • Red is the highlight color and must be used sparingly to bring focus and attention to a specific piece of information.

  • White achieves a blank canvas and minimalist design.

Tints and shades

A range of intermediary tints and shades comprise a gradient with endpoints at white, red, and purple. The red shades, purple tints, and white from this spectrum comprise the secondary color options. Additionally, certain red tints have been included within the secondary color options.

Vitae's color palette

When designers build branded collateral, they must use these specific color shades instead of modifying the brightness or ink density of the primary colors. The brand palette is meant to feel bold and lively; these colors have been chosen to preserve that characteristic throughout the range, and to avoid any washed-out or muddy tones.

Red tints

  • Red (primary)

    Hex:
    #A4123F
    HSL:
    341, 80, 36
    RGB:
    164, 18, 63
    CMYK:
    25, 100, 67, 17
    Pantone:
    P 7426 C

  • Red (tint 1)

    Hex:
    #B13155
    HSL:
    343, 57, 44
    RGB:
    177, 49, 85
    CMYK:
    25, 94, 54, 9

  • Red (tint 2)

    Hex:
    #BE5465
    HSL:
    350, 45, 54
    RGB:
    190, 84, 101
    CMYK:
    22, 80, 49, 4

  • Red (tint 3)

    Hex:
    #CA6D79
    HSL:
    352, 47, 61
    RGB:
    202, 109, 121
    CMYK:
    19, 69, 40, 1

  • Red (tint 4)

    Hex:
    #F8E6E7
    HSL:
    356, 56, 94
    RGB:
    248, 230, 231
    CMYK:
    2, 10, 4, 0

  • White

    Hex:
    #FFFFFF
    HSL:
    0, 0, 0
    RGB:
    255, 255, 255
    CMYK:
    0, 0, 0, 0
    Pantone:
    White

Red shades

  • Red (primary)

    Hex:
    #A4123F
    HSL:
    341, 80, 36
    RGB:
    164, 18, 63
    CMYK:
    25, 100, 67, 17
    Pantone:
    P 7426 C

  • Red (shade 1)

    Hex:
    #990F41
    HSL:
    338, 82, 33
    RGB:
    153, 15, 65
    CMYK:
    0, 54, 35, 40

  • Red (shade 2)

    Hex:
    #8F0D44
    HSL:
    334, 83, 31
    RGB:
    143, 13, 68
    CMYK:
    32, 100, 56, 24

  • Red (shade 3)

    Hex:
    #820449
    HSL:
    327, 94, 26
    RGB:
    130, 4, 73
    CMYK:
    39, 100, 47, 27

  • Red (shade 4)

    Hex:
    #79094A
    HSL:
    325, 86, 25
    RGB:
    121, 9, 74
    CMYK:
    47, 100, 43, 29

  • Red (shade 5)

    Hex:
    #6D074B
    HSL:
    320, 88, 23
    RGB:
    109, 7, 75
    CMYK:
    50, 100, 40, 32

  • Red (shade 6)

    Hex:
    #5F0849
    HSL:
    315, 84, 20
    RGB:
    95, 8, 73
    CMYK:
    57, 100, 38, 37

  • Red (shade 7)

    Hex:
    #490B44
    HSL:
    304, 74, 16
    RGB:
    73, 11, 68
    CMYK:
    69, 100, 37, 41

  • Red (shade 8)

    Hex:
    #3B0D42
    HSL:
    292, 67, 15
    RGB:
    59, 13, 66
    CMYK:
    78, 100, 38, 47

  • Purple (primary)

    Hex:
    #1F0E3C
    HSL:
    262, 62, 15
    RGB:
    31, 14, 60
    CMYK:
    93, 98, 39, 53
    Pantone:
    P 275 C

Purple tints

  • Purple (primary)

    Hex:
    #1F0E3C
    HSL:
    262, 62, 15
    RGB:
    31, 14, 60
    CMYK:
    93, 98, 39, 53
    Pantone:
    P 275 C

  • Purple (tint 1)

    Hex:
    #372851
    HSL:
    262, 34, 24
    RGB:
    55, 40, 81
    CMYK:
    86, 91, 38, 35

  • Purple (tint 2)

    Hex:
    #4E4165
    HSL:
    262, 22, 33
    RGB:
    78, 65, 101
    CMYK:
    75, 78, 36, 22

  • Purple (tint 3)

    Hex:
    #665B7A
    HSL:
    262, 15, 42
    RGB:
    102, 91, 122
    CMYK:
    65, 66, 32, 12

  • Purple (tint 4)

    Hex:
    #7D738E
    HSL:
    262, 11, 50
    RGB:
    125, 115, 142
    CMYK:
    56, 55, 29, 4

  • Purple (tint 5)

    Hex:
    #968EA3
    HSL:
    263, 10, 60
    RGB:
    150, 142, 163
    CMYK:
    44, 42, 24, 1

  • Purple (tint 6)

    Hex:
    #BAB5C3
    HSL:
    261, 10, 74
    RGB:
    186, 181, 195
    CMYK:
    27, 25, 14, 0

  • Purple (tint 7)

    Hex:
    #D2CFD8
    HSL:
    260, 10, 83
    RGB:
    210, 207, 216
    CMYK:
    16, 15, 8, 0

  • Purple (tint 8)

    Hex:
    #E6E5EA
    HSL:
    252, 11, 91
    RGB:
    230, 229, 234
    CMYK:
    8, 7, 4, 0

  • White

    Hex:
    #fff
    HSL:
    0, 0, 0
    RGB:
    255, 255, 255
    CMYK:
    0, 0, 0, 0
    Pantone:
    White

Color usage

  • Use purple and its tints for most applications (e.g. user interface components, layout elements, etc.). This is the neutral color and should be the default choice in most cases.
  • Use red sparingly, to draw attention to key elements or information.
  • A midtone purple tint (such as tint 4 or 5) can be used as an accent color for secondary elements or information.
  • Text should be rendered in primary purple in most contexts. For secondary text (e.g. copyright or legal small-print, image captions, etc.), a lighter tint of purple works well.
  • In print applications, body text can be set with 100% black (key plate only) instead of purple, to avoid registration issues.