Style Guide

This style guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

Introduction

Any new element created some be added to the "Components" section. This allows you to effortlessly refer to a style and make changes if required.

Get in touch with FCD:
0845 689 2015
hello@fcd.org.uk
Tip: You can use the contact details above and this yellow notice throughout the project.

Logos

XXXXXX

Main
Main
Small
Small

Colours

The swatches marked with the yellow dot (pulled from support colour one) indicates the primary and secondary colours used throughout the website.

Primary
#B84900
#0DB4A4
#26C8B9
#58ddcd
#FFAB5C
#FFCA99
#EBEBEB
Support Colours
#F4D37E
#26C8B9
#F9461F
#09476c
#442420
#21402C
#f8bb3f
Neautrals
#161b20
#1c2329
#232C32
#39474E
#5D737D
#ffffff
#ffffff

Buttons

All the button variations used throughout the website.

Typography

The different text sizes used throughout the site.

h1 L

This is a Heading.

h1

This is a Heading.

h2 - H1 ALT (SEO)

This is a Heading.

h2 - Block

This is a Heading.

h2

This is a Heading.

h2 - Small (Matches H3)

This is a Heading.

h3

This is a Heading.

h4

This is a Heading.

h5
This is a Heading.
h6
This is a Heading.
P L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

P S

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Quote
Research is the foundation of our organization. We started our company by helping others to bridge the cybersecurity gap in emergent cyber-physical systems. It led us to develop revolutionary technology.
Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

Forms

Default fields & grids used to generate forms.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

A collection of global UI elements & HTML components. This section is used to reference anything from badges to global HTML elements.

Introduction

Any new element created some be added to the "Components" section. This allows you to effortlessly refer to a style and make changes if required.

System notices

A collection of notices used to indicate errors, success, and warnings

General
Awesome! We've sent your message.
Success
Awesome! We've sent your message.
Error
Awesome! We've sent your message.

Global HTML elements

A collection of notices used to indicate errors, success, and warnings

NOTE: These HTML elements have a combo class to display here. Remove this when copying to your page.
Global Section
Global Container
Button Holder

SwiperJS

CSS elements used by SwiperJS for custom card sliders.

Swiper Dots
Owl Dots for reviews
owl nav
owl nav for reviews
Owl CSS
Owl Slider Custom CSS
Global CSS Embed
Global CSS

Symbols

All the symbols used throughout the website

Introduction

Any new symbol created, add it below.

NOTE: Please be mindful of changing styles it you are unlinked any symbols. This will affect the layouts everywhere and may prove to be awkward to revert back.
map
Footer

Hero Sections

It is recommended to replace the content through the dynamic fields but you may find it easier to unlink the instance to edit.

Option 1

The “missing link” between IT, IoT, and OT security

We unify the visibility of threat detection between systems and harmonize your operations.

Platform Detection, Analysis and Classification at Speed - Showing Exalens at work seamlessly.
Option 2

Platform Features

We unify the visibility between your cyber-physical systems to boost threat detection and response, and harmonise your operations.

Option 3

Contact us

Have you got a question, request or want to register your interest with us? Get in touch below

Option 4

Protecting our future, by securing our Cyber-Physical society

With deep roots in AI-driven cyber-physical security research and intrusion detection, at Exalens, we are enhancing operational resilience for cyber-physical systems at the OT edge.