• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • LinkedIn
  • Twitter
  • Facebook

Finance Innovation Lab HomepageFinance Innovation Lab

  • Our work
    • Overview
    • Growing purpose-driven finance
    • Shifting mainstream finance
    • Influencing policy, regulation and law
    • Building a powerful community
  • Publications
  • News & blog
  • Events
  • About us
    • About
    • Vision and strategy
    • Culture and values
    • Our people
    • Accounts and funders
    • Support us
    • Work with us
    • Contact
  • Donate

AAA All Blocks style guide

Fonts:

Heading font is Alternate Gothic. It should only be used uppercase.

Body font is Open Sans


Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)
Heading 6 (H6)

Normal paragraph text Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Lead paragraph text Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla.

Short titles can be uppercase. It’s not very readable for longer passages of text though.

This is OK

A long blog post or news item can easily be 20 words long and when used uppercase it can be hard to read.

Don’t type Heading titles or other text using CAPS LOCK. Type them in normally and then use the block option to convert it to uppercase.

Image 2022-07-01 at 3.22.56 pm

Colours – all presets in the Colour picker for most blocks:

Primary colour is green

Secondary colour is teal

Dark colour is the dark brown/grey

Green text should only be used large, uppercase and sparingly

Backgrounds:

Light – vey subtle grey. Mainly used as the background for cards.

Primary Light

Secondary Light


Buttons

Read more
Larger button

Groups / Coloured background examples

Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Title goes here

Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Separators




Quotes

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Citation goes here

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Citation goes here

Widths

Content width

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.

Wide width

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.

Full width

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.

Media & Text block

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Read more

Lists

  • Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
  • Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  • Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
  • Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  1. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
  2. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
  3. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  4. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

COVER BLOCK

Related pages

Culture and values
Culture and values

As an organisation holding others to account, it is vital we live by the culture and values we seek to inspire in others. All our work is underpinned by our values:  Ambition. Holding true to…

Doing something about the Davids

Lab COO Rebecca Sumner Smith and Chair of Trustees Kit Beazley explain how the Lab is using a ‘trustee-in-training’ model to build a stronger board. How diverse is your board? We’ve all heard the statistics…

Changes to the Lab board in 2021

2021 sees some key changes at the Lab, as we say goodbye to chair Sue Charman, and see current trustees Kit Beazley, Nana Francois and Amit Shah stepping up to join existing vice chair David…

Featured Page

Culture and values

Image size

The image at the top of the cards/tiles is 380x254px so you should use that aspect ratio if you want to make sure that any Featured Images that you create won’t get cropped – if you’re adding text to the image for example.

For most images/photos you can let the website resize them and it will look OK. If you want to custom make a Featured image then 1140x762px is a good size canvas to use.

Footer

Our work

  • Growing purpose-driven finance
  • Shifting mainstream finance
  • Influencing law, regulation and policy
  • Building a powerful community

About us

  • Vision and strategy
  • Culture and values
  • Our people
  • Accounts and funders
  • Work with us
  • Support us
  • Contact us
  • Twitter
  • LinkedIn
  • Facebook

Privacy policy


© 2023 Finance Innovation Lab | The Finance Innovation Lab is a Registered Charity (number 1165269) and Company Limited by Guarantee (number 09380418)