Style Guide
A comprehensive component library for our website, logo suite downloads and brand colour values
Typography
Fonts and sizes used through the entire website
Heading 1
Element
Class
Class
Class
Class
Class
Heading 2
Element
Class
Class
Class
Class
Heading 3
Element
Class
Heading 4
Element
Class
Heading 5
Element
Class
Heading 6
Element
Class
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lists
- List A
- List B
- List C
- List A
- Nested List 1
- Nested List 2
- Nested List 1
- List B
- List C
- List A
- List B
- List C
- List A
- Nested List 1
- Nested List 3
- Nested List 1
- List B
- List C
Misc
Block Quote
Colours
Brand colours exported from the a Figma Library.
Figma
JSON token files hosted on GitHub. Please make sure they are linked correctly.Text Color
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Buttons & UI
Various links and buttons used throughout.
Forms
Contact forms and other interactive user input fields.
Option 1
Option 2
Tracking
Hidden fields for UTM parameter capture and page URL
<!-- Requires fcd-utm-hidden-fields.js -->
<input type="hidden" class="utm_source" name="utm_source" value="">
<input type="hidden" class="utm_medium" name="utm_medium" value="">
<input type="hidden" class="utm_campaign" name="utm_campaign" value="">
<input type="hidden" class="utm_term" name="utm_term" value="">
<input type="hidden" class="utm_content" name="utm_content" value="">
<!-- Requires fcd-capture-page-url.js -->
<input type="hidden" id="pageurl" name="PageURL" value="">
<!-- CF7 fields
[hidden utm_source default:get]
[hidden utm_medium default:get]
[hidden utm_campaign default:get]
[hidden utm_term default:get]
[hidden utm_content default:get]
-->Cloudflare Turnstile
Hidden fields for UTM parameter capture and page URL
<head>
<!-- Cloudflare Turnstile -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head><!-- Cloudflare Turnstile -->
<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY" data-callback="javascriptCallback"></div><script> is commented out.HTML Elements
A collection of global UI elements & HTML components. This section is used to reference anything from badges to global HTML elements.
Modal
This uses an HTML <dialog> to get all of the accessibility benefits for free. The modal should always come before the button that opens it. To update the modal contents, select it in the navigator, and add any value to open attribute in the element settings.
fcd-open-modal.js on GitHub (Release v1.0.7 or higher)Modal
Theme Switcher
Controls the dark / light / system colour preferences and stores the value inside the local browser storage.
fcd-theme-switcher/logic-part1.js and fcd-theme-swtcher/logic-part2.js on GitHub (Release v1.1.3). A configuration script must be placed in the <head> - a sample is found in GitHub.Generic Notices
A collection of notices used to indicate errors, success, and warnings
General
Warning
Success
Error
System Notices
These are used by scripts (i.e. click to copy URL)
Success
Error
Site Notices
Used within the navbar primarily but can be place anywhere.
Dismssable
Fixed
Custom CSS Cursor
This contains an elements for a custom cursor. Code that operates it is also shown (GSAP already integrated)
Javascript
document.addEventListener("DOMContentLoaded", ()=>{
gsap.set(".cursor", {xPercent:-50, yPercent: -50});
let xTo = gsap.quickTo(".cursor", "x", {duration: 0.6, ease: "power3"});
let yTo = gsap.quickTo(".cursor", "y", {duration: 0.6, ease: "power3"});
window.addEventListener("mousemove", e => {
xTo(e.clientX);
yTo(e.clientY);
});
})</body>. It is only required to enable the .cursor HTML element (a dot that follows the users mouse). Otherwise, pure CSS can be used with the HTML.Cusor HTML
CSS
body:has( a:hover) .cursor,
body:has( button:hover) .cursor,
body:has( [data-cursor]:hover) .cursor{
width: 3em;
height: 3em;
background-color: rgba(255, 76, 36, 0.3);
}
@media (hover: none) and (pointer: coarse) {
.cursor {
display: none;
}
}
/* ------------------------- Big Pixel Cursor ------------------------- */
/* Default cursor */
body.is--cursor,
body.is--cursor * {
cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg") 2 0, auto;
}
/* Text cursor */
body.is--cursor p,
body.is--cursor p span,
body.is--cursor h1,
body.is--cursor h2,
body.is--cursor h3,
body.is--cursor h4,
body.is--cursor h5,
body.is--cursor h6,
body.is--cursor input[type="text"],
body.is--cursor input[type="email"],
body.is--cursor textarea,
body.is--cursor [data-text] {
cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/6714e4e1f367de40becf9029_cursor-text%402x.svg") 9 19, text;
}
/* Hover cursor */
body.is--cursor a,
body.is--cursor a *,
body.is--cursor a p,
body.is--cursor button,
body.is--cursor button *,
body.is--cursor input[type="submit"],
body.is--cursor input[type="submit"] *,
body.is--cursor input[type="button"],
body.is--cursor input[type="button"] *,
body.is--cursor [data-submit],
body.is--cursor [data-submit] *,
body.is--cursor [data-hover],
body.is--cursor [data-hover] *,
body.is--cursor [data-anchor-target],
body.is--cursor [data-vimeo-player-init],
body.is--cursor [data-vimeo-player-init] *,
body.is--cursor .vimeo-bg__btn,
body.is--cursor .vimeo-bg__btn *,
body.is--cursor input[type="radio"],
body.is--cursor input[type="checkbox"],
body.is--cursor select,
body.is--cursor .radiocheck-label{
cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg") 12 0, pointer;
}cursor: pointer; property has to be overriden manually - there's no simple way to check (as of July 2026)global-code and requires .is--cursor on the <body> to work.Global HTML elements
A collection of notices used to indicate errors, success, and warnings
Swiper Pagniation
Swiper Scrollbar
Toastify
TippyJS Tooltip
.u-tippy to initialise. Tippy theme is currently set to light - can be changed in project settings.ChartJS Instance
Bokeh Chart Instance (Experimental)
NOTE: A Python library which converts Python data into a HTML chart. Guide can be found here.
Style Guide - System Dialogue
NOTE: A Python library which converts Python data into a HTML chart. Guide can be found here.
Utility CSS
These are often used throughout a project for space, padding and margin changes.
Spacers
Utility CSS
These are often used throughout a project for space, padding and margin changes.