Coverforce Framework

UI Studio

Foundation

What we are building

Modern CSS first

CSS Grid for layouts, Flexbox for alignment, data attributes for behaviour, vanilla JS only where needed.

Semantics separate from styling

Use correct heading hierarchy for SEO and accessibility, then use typography classes for visual style.

Framework vs custom

Reusable patterns belong in the framework. One-off campaign styles stay in cf-custom.css.

Assets are governed

Photography, illustrations, logos and article images have a standard structure and intended use.

CF-001

Brand assets

Coverforce positive
Coverforce reverse
Coverforce black
Coverforce white
Coverforce C mark
Coverforce C mark white

CF-002

Typography system

Adelle is reserved for H1 and optional H2 styling. The system font stack handles body, interface text and the thin uppercase eyebrow style.

Display XL using Adelle

Display LG using Adelle

Heading LG using system

Eyebrow uses system 400 uppercase

Lead text gives a bit more presence without becoming a heading.

Body copy stays fast and readable using the system stack.

Foundation

Colour and theme surfaces

CF Yellow
#ffcb03
Yellow tint
#ffdb5b
Yellow tint
#ffe582
Yellow tint
#ffedaa
CF Mango
#f7931d
Use sparingly.
CF Black
#000000
Grey 900
#3f3f3f
Grey 700
#7f7f7f
Grey 500
#d8d8d8
Gradient
45deg → #faa715

CF-004

Hero patterns

Business adviser shaking hands with a client

National strength. Local relationships.

Large enough to deliver. Local enough to care.

Trusted insurance brokers for businesses, individuals and communities across Australia.

Find your local adviserTalk to our team

Split / overlay hero

Text and image hero

This behaves as one hero. On wide screens, text sits in an accented panel beside the image. On smaller screens, the text moves over the image with a dark overlay for contrast.

Explore pattern
People meeting in a glass office

CF-005

Find a Solution

Find a solution

Search our solutions or browse by category to find the right cover for your needs.

▦Industry→ ▤Business Type→ ◉Risk Type→ ♙Personal & Lifestyle→ ◎Associations→

CF-006

Image, media and overlay components

HTML image / 16:9

Notebook on desk in warm sunlight

Overlay image: image + overlay + text

Meeting around a laptop

Text stays readable

Black overlay sits over the image, reducing contrast so white copy can sit safely on top.

Background image card: decorative image

Decorative background image

The image is purely decorative; the card text is the real content.

CF-007

Cards and filterable listings

City building lobby

Business

Commercial & Mid-Market

Cover for complex businesses and organisations.

Cyber security illustration

Cyber

Cyber & Privacy

Protection against cyber threats and data breaches.

Handshake in sunlight

Marine

Marine & Logistics

Specialist cover for cargo, logistics and transit risks.

CF-008

Team cards and bio modal

Staff headshot

Team member

Marketing / Support

Staff headshot

Team member

Adviser

Staff headshot

Team member

Broker

Staff headshot

Team member bio

This modal pattern supports an image, name, role, short biography and contact links without letting the portrait dominate the content.

Asset library

Photography and illustration standards

Master assets stay high quality. The framework defines ratios, cropping, overlays and intended use.

Hero / lifestyle

Works well with overlay and left copy.

Admin / detail

Useful for articles and supporting sections.

Environment

About, locations and culture pages.

Illustration

Explainers, empty states and feature panels.