Styles
Common templates, compositions and general guidance on how to create consistent content.
Jump to
Typography
As a general rule, headings should be concise and deliver the intended message in as few words as possible. This is even more important when using ‘all caps’ headings as the characters take up more space within a container.
Standard headings
Display headings
Display headings are used for decorative typographic elements on a page. For example a single stat block of text on a page. For bespoke business level pages that have shorter content sections, headings 1 and 2 may use these sizes to add greater impact to the page.
Eyebrows
Eyebrows are optional text that sit above a Heading 1. They are used to provide additional descriptive context when the heading below is SEO driven.
- Eyebrows should not be long sentences
- Eyebrows do not need to be keyword optimised
Note: When using an eyebrow, you will need to use it as a paragraph block, and style it to be an eyebrow - to reduce confusion with screen readers.
Paragraph levels
Lead
Paragraph
Character lengths
Recommended character lengths (inc. spaces) for headings and other useful information for content writing across the site.
Note: Character lengths are a guide, not a target. Visually you should be able to tell when there is too much content within a component.
Standard headings
Recommended max character length of 72 characters.
Display headings
Recommended max character length of 35 characters.
Eyebrow
Two to five key words.
Paragraph
Small
Standard cards and supporting content for infographics. Recommended max character length of 140 characters.
Medium
Copy used in heroes, dialog boxes, block quotes and full-width cards. Recommended max character length of 225 characters.
Large
Standard paragraph content running down a page. Recommended max character length of 715 characters.
Button
Button copy should be action orientated words or short sentences. Be mindful of this when adding them. We recommend a maximum of four words. Learn more about buttons.
Spacing
Responsive
Every element on a webpage can be considered ‘box’. This box has content, and around that content, there are layers.
Margin
Margin is the space outside the border of an element, separating it from other elements. For example, the empty space around a parcel, ensuring it doesn't touch other parcels. Margins do not add to the element's actual size but create distance between elements.
Padding
Padding is the space inside the border of an element, between the content and the border. It's like the cushioning inside a parcel. Adding padding increases the element's total size, pushing the border further away from the content.
When two elements sit on top of each other, their vertical margins don't stack; instead, they merge. If the top element wants a 50px gap below it and the bottom element wants a 20px gap above it, they don't create an 70px space. They "overlap" until the larger gap is satisfied. In this case, the 50px gap wins, and the smaller margin is simply absorbed into that space.
How margins overlap
How padding works
Spacers
Spacers are the tokens you apply to both margins and padding. The Primary spacers provide a graded change in spacing without creating too many similar gaps that disrupt the grouped hierarchy of elements. Secondary spacers provide further options for elements that require additional clearance not provided by the primary options.
Primary spacers
Secondary spacers
Standard content
Spacing after headings and paragraph’s have default values applied within Keystone.
Desktop spacing
Mobile spacing
Standard content
When using a background colour for a container of content, use the largest of spacing values.
Desktop spacing
Mobile spacing
Supporting nuances
Adjacent containers
These are used for content of equal importance as the content they sit next to, this is used for better visual balance. The spacing for these containers is spacer-6 around all edges. A background colour or a 2px border can be used when styling these.
However Liferay can interfere by keeping the padding of the content within the container which will throw the balance off. If this happens, reduce the spacer down by one or two (situationally dependent) to achieve the correct optical balance.
In-content containers
In-content containers are used for content that is in addition to the main content or house a key takeaway. These have a padding of spacer-4 around it’s edges to allow the information to stand out but not dominate the primary content.
Dialog box
The box itself should align with content below it, not the content within it.
Correct alignment
Incorrect alignment
Buttons
Buttons use the same spacing whether they are side by side or when stacking vertically.
Illustration banners
Follow the steps below to achieve a banner that correctly aligns an illustration to the base of a container.
- Apply padding to the top of the grid
- Set the vertical alignment of the grid to bottom
- Apply padding of the same value as step one, but to the last content element placed in the grid. In this case it is the button but is often a heading or paragraph.
- If a slight gap appears between the illustration and the block below, set a negative margin of -8px to fix it.
Images
Dimensions
We primarily use three ratios of images. These ratios cover the majority of our component library. These images resize to the container they placed in.
- Primarily use JPGs at a file size of around 100KB.
- Do not use PNGs due to large file sizes.
- Use SVGs for illustrations. These do not have a template but file size rules still apply.
Access our image library from the comms hub.
Colour
Section colours
RSPCA Blue, Rabbit White, Swallow blue and Butterfly Blue are used as background colours for sections of content on a page. Fox red is used for stat blocks only as this is too inaccessible to house standard content.
Highlights
Fox Red and Lizard Green are primarily used in small amounts on a page such as icons, eyebrows and illustrations.
Illustrations
Illustrations should use no more than a mix of four colours. A dark or darker colour can be used alongside it’s corresponding base colour when creating illustrations. In some cases a second or third base colour is needed to emphasise parts of an illustration.
Palette
Using darker shades
Using standard base colours
Components
Block quote
This block quote is ideally placed adjacent to standard body copy and when used you have a long quote.
Learn more about block quotes.
Block quote (Decorative)
This block quote can be used with and without an image and should be used full width on the page. Only use short quotes due to the size of typography.
Card
There is no character cap for body copy within a card. However, try to keep content the same length when using multiple cards. You can mix up the line lengths to achieve a balanced set of cards.
Learn more about the Card.
Download card
- You can upload JPG, PDF and PNG files.
- The file type, file size and page count will automatically display when a piece of media is uploaded.
- Do not use the actual file name of the media uploaded. Instead use a shorter, more user-friendly file name.
Learn more about the Download card.
Donate module
Heading 1
The donate module container width is very short so it is recommended to use a max of up to 30 characters or roughly 1–2 words.
Intro
An optional 1–2 line short sentence that sits below the heading. Example: "Your donation will make a difference. Together we can save lives”.
Donate copy
A 1–2 line short sentence. Example: "£12 a month could help us rehabilitate and release more wildlife”.
Learn more about the Donate module.
Layouts
7x5 (Fixed)
This is the default content layout used when styling body content alongside images. It’s built using the first 6 columns, leaving 1 empty for visual space then using the final 5. The centre column is left empty to give the content the room it needs to breath.
This column will not display when a page is published live even if it is visible in staging especially on mobile view.
7x5 (Full width)
Uses the 7x5 Grid, placed within a fluid container that can be recoloured. This ensures content remains aligned with those placed in fixed containers elsewhere on a page.
Two column (Fixed)
This layout has two columns of empty space to create equal column widths.
Two column (Full width)
Uses the two column fixed as a base placed within a fluid container that can be recoloured. This layout has two columns of empty space to create equal column widths.
Statistics
Statistic banners should feature either one or three stats. If a stat references a source you must display that source along the bottom to meet compliance standards.
- Use subscript numbers for stats as these should not interfere with the more commonly used asterisks you find in the body copy of a page.
- When using three stats, use the eyebrow heading style and ensure they all match copy lengths to create perfect desktop alignment.
- When using one stat, use the display heading sizes of L, XL or 2XL, whichever fits the space best.
Three column
One column
Related content
Use this composition at the bottom of a page to link to other similar pages across the site. The default title is ‘Related content’ but this can be renamed as appropriate.
Related content gallery
This layout is intended to be used when there is a fourth page of related content or when one has priority over others.
