Product Screen Shots

Product screenshots are an excellent way to enhance documentation. Strategically positioned screenshots can provide a much better visual balance to the document compared to text alone. Professionally annotated screenshots are even more effective. For instance, if you have a screenshot where you want to highlight several specific features or elements, each element can be annotated and numbered directly on the image. This approach provides clear reference points that can be easily referred to in the article text.

Graphics and Illustrations

When creating content that requires illustrations, info graphics, and diagrams you should aim to create graphic assets rendered in Scalable Vector Graphics (SVG) format.

Content on Hornbill Docs can be rendered in both “light mode” and “dark mode” and this should be considered when designing graphics for inclusion. Using two monochromatic scales one based on a neutral gray scale and the other based on the Hornbill Docs website accent color, you can create surprisingly sophisticated images. By using the recommended color palettes as the basis for your image’s color theme you will help in maintaining consistency in the Hornbill Docs website appearance.

When creating an SVG or PNG (with a transparent background/alpha channel), you should choose color contrasts that work well in both dark and light mode. When selecting colors, test in both light and dark mode to make sure images are visually easy to read and understand.

You can test the dark/light mode rendering by switching modes at the top right of the preview screen.

The following monochromatic color palettes are recommended for use with illustrations and other image assets to ensure there is a consistency of styling and appearance across documents.