Style Guide

Colours

Huge Heading

Heading 1

Heading 2

Heading 3

Heading 4

Huge text

Extra extra large text

Extra large text

Large text

Medium text

Base text

Small text

Extra small text

This is a heading 2 & the font is Shippori Mincho (semi-bold)

This is a paragraph of dummy text & the font is Nunito Sans. The following sentence contains all the letters of the alphabet. I like to try various good quality font families with different text sizes & just hope that I can find the best combination. Sugar mice toffee eclairs dolly mixture orange and lemon slices gobstoppers jelly babies love hearts boiled sweets sherbet lemons sugared almonds.

The Ollie theme comes with the Mona Sans font as default and this would also be a good choice.

This is a heading 2 & the font is Mona Sans (semi-bold)

This is a paragraph of dummy text & the font is Mona Sans. The following sentence contains all the letters of the alphabet. I like to try various good quality font families with different text sizes & just hope that I can find the best combination. Sugar mice toffee eclairs dolly mixture orange and lemon slices gobstoppers jelly babies love hearts boiled sweets sherbet lemons sugared almonds.

For more typography suggestions see https://janebwebsitehelp.co.uk/font-options/ .

Very long lines of text are difficult to read, as the section above shows. Here, I’ve put the text inside a Group block with inner content of 804px which should make it easier to read.

This Group has default padding

This Group has padding set to none

This Group has tiny padding

This Group has small padding

This Group has medium padding

This Group has large padding

This Group has extra large padding

This Group has 2xl padding

This Group has 3xl padding

This Group has 4xl padding

This Group is wide width and has medium padding

This Group is full width and has medium padding

  • list item 1
  • list item 2
  • list item 3

This is a link.

This is a Quote block

This is a Pullquote block

This is the citation

Here are some buttons

This is a separator (horizonal rule).


Icons are from https://phosphoricons.com/ (open source MIT license), https://icon-sets.iconify.design/clarity/ (open source MIT license) and Round Icons (I’ve purchased the Standard license).