Style Guidelines & Brand Assets

View and download official Emailable logos, icons, typography, and colors. Please adhere to the written guidelines when using official Emailable assets.

Colors

  • Primary

    • Copied!

      50 #ecebff
    • Copied!

      100 #dedbff
    • Copied!

      200 #c7c2ff
    • Copied!

      300 #a899ff
    • Copied!

      400 #937aff
    • Copied!

      500 #7e61ff
    • Copied!

      600 #6a4ce1
    • Copied!

      700 #5b33c7
    • Copied!

      800 #3e238b
    • Copied!

      900 #251452
    • Copied!

      950 #11082b
  • Slate

    • Copied!

      50 #f4f4fb
    • Copied!

      100 #e7e7f4
    • Copied!

      200 #d9d9ed
    • Copied!

      300 #c4c4e3
    • Copied!

      400 #aeaed6
    • Copied!

      500 #9692c4
    • Copied!

      600 #8178b0
    • Copied!

      700 #655b95
    • Copied!

      800 #4b4276
    • Copied!

      900 #332b5a
    • Copied!

      950 #1d1641
  • Red

    • Copied!

      50 #fff1f3
    • Copied!

      100 #ffe3e6
    • Copied!

      200 #ffccd4
    • Copied!

      300 #ffa1b1
    • Copied!

      400 #ff708a
    • Copied!

      500 #f93a63
    • Copied!

      600 #e7174e
    • Copied!

      700 #c30d41
    • Copied!

      800 #a30e3d
    • Copied!

      900 #8b103b
    • Copied!

      950 #4e031b
  • Orange

    • Copied!

      50 #fff7ed
    • Copied!

      100 #ffedd5
    • Copied!

      200 #fed7aa
    • Copied!

      300 #fdba74
    • Copied!

      400 #fb923c
    • Copied!

      500 #f97316
    • Copied!

      600 #ea580c
    • Copied!

      700 #c2410c
    • Copied!

      800 #9a3412
    • Copied!

      900 #7c2d12
    • Copied!

      950 #431407
  • Yellow

    • Copied!

      50 #fff9eb
    • Copied!

      100 #fef0c8
    • Copied!

      200 #fddd8b
    • Copied!

      300 #fccb4f
    • Copied!

      400 #fbbd23
    • Copied!

      500 #f5af00
    • Copied!

      600 #f1a200
    • Copied!

      700 #e58e00
    • Copied!

      800 #c87200
    • Copied!

      900 #9c4f00
    • Copied!

      950 #7a3700
  • Green

    • Copied!

      50 #edfcf5
    • Copied!

      100 #d4f7e4
    • Copied!

      200 #abedcd
    • Copied!

      300 #78ddb3
    • Copied!

      400 #3dd198
    • Copied!

      500 #1bc58a
    • Copied!

      600 #0eb47d
    • Copied!

      700 #0d9c71
    • Copied!

      800 #0f805e
    • Copied!

      900 #0c644b
    • Copied!

      950 #085441
  • Cyan

    • Copied!

      50 #ecfeff
    • Copied!

      100 #cffafe
    • Copied!

      200 #a5f3fc
    • Copied!

      300 #67e8f9
    • Copied!

      400 #22d3ee
    • Copied!

      500 #06b6d4
    • Copied!

      600 #0891b2
    • Copied!

      700 #0e7490
    • Copied!

      800 #155e75
    • Copied!

      900 #164e63
    • Copied!

      950 #083344
  • Blue

    • Copied!

      50 #f0f8fe
    • Copied!

      100 #deeefb
    • Copied!

      200 #c4e2f8
    • Copied!

      300 #9bd0f3
    • Copied!

      400 #6db6ed
    • Copied!

      500 #549ee7
    • Copied!

      600 #4687dd
    • Copied!

      700 #3778d2
    • Copied!

      800 #2c5ca5
    • Copied!

      900 #213e6e
    • Copied!

      950 #192e4d
  • Fuchsia

    • Copied!

      50 #fdf4ff
    • Copied!

      100 #fae8ff
    • Copied!

      200 #f5d0fe
    • Copied!

      300 #f0abfc
    • Copied!

      400 #e879f9
    • Copied!

      500 #d946ef
    • Copied!

      600 #c026d3
    • Copied!

      700 #a21caf
    • Copied!

      800 #86198f
    • Copied!

      900 #701a75
    • Copied!

      950 #4a044e

Gradients

All gradients are radial gradients and circular in shape. Their origins are located 20% from the top and right edges of their containing shapes and extend diagonally to the bottom left corner (see below).

Typography

Typeface

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|\{}[]

View on Google Fonts
  • Regular 400

    The default weight. Used for body text, descriptions, etc.

  • Medium 500

    Used for certain links and labels.

  • Semibold 600

    Used for buttons, badges, subheadings, and certain figures.

  • Bold 700

    Used for headings, emphasis, and active states.

Font Colors

Discover why the world’s largest companies choose us to improve email deliverability

Get Started Free

Includes 250 free credits