Some of my articles will have illustrations, so here I will list the specifications. It will help me maintain the unity of the illustration style.

Reference: 技术文章配图指南

Background

The background width should be 1200 pixels, and there is no limit for height; it’s all dependent on the content.

The background color is #EEEEEE, that’s because my blog used white background, so I should avoid using white as illustrations’ background. And I have tested, this color also looks fine in black background.

Content

Text

This is not a fixed limitation because sometimes we should use the appropriate size according to the content.

  • The size of the title is 32 pixels.
  • The size of the content is 18–24 pixels.
  • Titles should be uppercase and bold, with a font weight of 500.
  • Content should have the first letter capitalized, with a font weight of 400.
  • Text colors:
    • Black: #555555
    • White: #FFFFFF

Text Set

Text color

  • Black: #555555
  • White: #FFFFFF

Shape Color

I used a set of colors from the Coolors website. Chose them because it works fine with white content.

Color set

Other

All the rectangles should be rounded rectangles with a bit of drop shadow.

The radius of rectangles should be 10 pixels.

Line

Restrictions

  • Line thickness is 2 pixels.
  • The radius of the bend is 10 pixels.
  • If it is a dotted line, the length of the dot is 5 pixels, and the pitch is 5 pixels.

Line