Visual Style Guide: User Interface Elements

Key elements which ensure that all ePub digital experiences are visually consistent. It is especially important to adhere to word count recommendations.

User Interface Elements


Use the same margins for separating sections, from left and right. The same goes for titles, subtitles and body copy.

Be careful with margins for mobile and tablet. For mobile, use a minimum of 15 pixel margins from left and right. To add more white space, use 20-30 pixel margins.

Buttons/Calls to Action

Bear in mind the hierarchy of buttons. The most important button should be the most visible. If you have different CTAs close together, don’t use the same button style. Show which one is the most important to click, and which are additional ones.

  • URLs Don’t use an exact copy of the URL link, instead put a link inside the text. Or create some copy and add the CTA ‘read more’/‘view more’ etc. The second option is more appealing.
  • External or Internal Links Choose wisely. External links are better because you don’t need to go back to the previous experience, instead you can see the link in a different tab.

Button hierarchy

CTAs should be the most visible.

Still an important button, but not as visible.


An additional button, which can be used for links, for example.


Be consistent. Use fonts from the same (or similar) family at the same stroke size, in monochrome or in colour.


For mobile and tablet, icons can’t be put in a line. If it’s important for you to have text and an icon on the same line, you need to upload an image.


Don’t use more than two animation styles. Use fade in or up/down for copy to have a more appealing look.

Foleon's animations:

  • Fade in;
  • Zoom in;
  • Blur in;
  • Fly in;
  • Fade in down;
  • Fade in up;
  • Fade in left;
  • Fade in right;
  • Reveal in left;
  • Reveal in right.


You can use pop-ups to add content or create an additional menu with clickable (add space) sections, as we have done with the Overview in these ePub guidelines.

  • Don’t create an overlay within an overlay;
  • Avoid scrolling;
  • Keep titles as short as possible.

The International Trade Centre is the joint agency of the World Trade Organization and the United Nations.


Visual Style Guide: Typography