Pratap 3.0

Brand Suite & Style Guide

A comprehensive component library for our website, logo suite downloads and brand colour values

Brand Pack

Entire logo suite, image library, icons and various other brand assets

Explore Pack

Employer Packs

Pratap's entire collection of featured employer packs

View Resources

Colours

Brand colours exported from the Pratap/UI Figma Library.

Powered by
FCD Brand Framework 2.0
Loading color tokens...

Typography

Fonts and sizes used through the entire website

Powered by
FCD Brand Framework 2.0

Font Family

Body + Headings

General Sans

Body + Headings

Trirong

Interface Font

Inter

Heading 1

H1 Headings

Element

h1
xl

Class

h1
large

Class

h1

Class

Heading 2

H2 Headings

Element

h2
large

Class

h2
medium

Class

h2

Class

Heading 3

H3 Headings

Element

h3

Class

Heading 4

H4 Headings

Element

h4

Class

Heading 5

H5 Headings
Element
h5
Class

Heading 6

H6 Headings
Element
h6
Class

Buttons & UI

Various components like buttons, slider UI (pending), tabs etc.

Button

All buttons following the master-button CSS system are kept but the button component replaces this approach for the majority of use cases. However, due to complexities with certain components (e.g. form <input type="submit"> buttons), both should be kept.
Button
I am a button
I am a button
I am a button
master-button
cc-outlined
I am a button

Tab Navbar

Solid

Forms

A sampel form that can be used within the site.

Send us a message

*
*
*
By submitting this form, you agree to our privacy policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Global

These are often A collection of global UI elements & HTML components. For example, modals and system notices.throughout a project for space, padding and margin changes.

Generic Notices

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

General
Tip: You can use the contact details above to get in touch with us.
Warning
Tip: You can use the contact details above to get in touch with us.
Error
Tip: You can use the contact details above to get in touch with us.

Modal

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

{title}

Every successful growth storyis underpinned by an outstanding finance strategy.

We build finance teams thatsupport growing P&Ls, strengthen balance sheets and deliver shareholderreturns. Our extensive regional network supports CFOs and Finance Directorswith high-calibre talent across permanent, interim and project hires.

From FP&A and FinanceBusiness Partners to Reporting Specialists and up-and-coming part-qualifiedprofessionals, we connect businesses with finance talent that combinestechnical excellence with commercial impact.

This includes, but is notlimited to, positions such as:

  • Finance Directors
  • Financial Controllers
  • FP&A
  • Management Accountants
  • Analysts
  • Part-Qualified and Newly Qualified finance professionals

{title}

{content}

Card

Card component used throughout the site

Empty

Badge

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Example

Paxman

Paxman are global leaders in scalp cooling andcryotherapy, on an ambitious journey to change theface of cancer

Explore partner

Utility CSS

These are often used throughout a project for space, padding and margin changes.

Spacers

Top
05em-spacer
1em-spacer
2em-spacer
3em-spacer
4em-spacer
5em-spacer
6em-spacer

Shadow Effects

u-card-shadow

Position & layout

u-position-relative
u-position-static
layout_flex
container
container
width_42rem
container
container-central

Grids

grid_3
grid_4
grid_5

Text Alignment

u-text-left
u-text-centre

Text Color

u-color-green

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-primary-200

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-grey-400

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-stone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-color-red-600

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Padding

Top
u-pt-0
padding-top: 0;
u-pt-normal
padding-top: 2.5rem;
u-pt-large
padding-top: 2.5rem;
Bottom
u-pb-0
padding-bottom: 0;
u-pb-normal
padding-bottom: 2.5rem;
u-pb-large
padding-bottom: 3.5rem;

Margin

Top
u-mt-0
margin-top: 0;
u-mt-xxs
margin-top: 0.25rem;
u-mt-xs
margin-top: 0.5rem;
u-mt-small
margin-top: 1rem;
u-mt-medium
margin-top: 1.6rem;
u-mt-normal
margin-top: 2.5rem;
u-mt-large
margin-top: 3.5rem;
u-mt-xl
margin-top: 4.5rem;
u-mt-xxl
margin-top: 6rem;
Bottom
u-mb-0
margin-bottom: 0;
u-mb-xxs
margin-bottom: 0.25rem;
u-mb-xs
margin-bottom: 0.5rem;
u-mb-small
margin-bottom: 1rem;
u-mb-medium
margin-bottom: 1.6rem;
u-mb-normal
margin-bottom: 2.5rem;
u-mb-large
margin-bottom: 3.5rem;
u-mb-xl
margin-bottom: 4.5rem;
u-mb-xl
margin-bottom: 6rem;
Copied!