How telematics reduces fleet fuel costs
A look at the levers operations managers can pull.
Read articleQuartix design system
The single source of truth for every visual element on Quartix.com. Use this page as the reference when building or modifying any page, widget, or component to keep the site consistent end to end.
01. Foundations
Colour palette
The brand is built on a single core green with supporting neutrals. Avoid introducing new accent colours; if a third colour is needed for a particular widget, stay inside the existing supporting set.
Brand greens
Use Brand Green for primary actions, links, and accents. Dark Green is reserved for hover states on green elements. Green Light is the only acceptable green-tinted background.
Brand Green
--qx-green
#13ab5b
Primary buttons, links, key highlights, eyebrow labels.
Dark Green
--qx-green-dark
#0e8a47
Hover state for primary buttons and links only.
Green Light
--qx-green-light
#e8f7ef
Tinted backgrounds for callouts, chips, check icon backgrounds.
Canonical decision
Existing code contains two dark greens:
#0e8a47
and #0e7d43
. Standardise on #0e8a47
. Update the mega menu and pricing widget on next pass.Neutrals
Three text greys, three background/border greys. Never use pure black for text; #1a1a1a
is the deepest acceptable value.
Text
--qx-text
#1a1a1a
Headings, primary body text.
Text Secondary
--qx-text-secondary
#5a5a5a
Body copy, descriptions, supporting text.
Text Muted
--qx-text-muted
#888888
Metadata, form helpers, captions, disabled states.
Border
--qx-border
#e5e5e5
Card borders, input borders, section dividers.
Background Light
--qx-bg-light
#f8f9fa
Alternate section backgrounds, input fills, hover backgrounds.
White
#ffffff
#ffffff
Default surface background, cards, primary section background.
01. Foundations
Typography
Inter is the canonical typeface across the site, loaded via Google Fonts with a system-font fallback. Weights used: 400, 500, 600, 700. Tracking is tightened slightly on the largest headings.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Lead paragraph for hero introductions and section openers, used sparingly to introduce a section's main point.
Default body text, used for most copy on the site. Comfortable reading size at standard viewing distance.
Smaller text for card descriptions, supporting copy, and dense informational content.
Caption text for metadata, dates, image captions, and form helper text.
Section eyebrow label
Canonical decision
Eyebrow labels use Brand Green throughout the site. Existing code has them in muted grey on some pages; this drops the brand association unnecessarily and should be updated.
01. Foundations
Radius, shadow & spacing
A four-step radius scale and four-step shadow scale cover every surface on the site. Use the named token, not a literal pixel value.
Border radius
Pick the smallest radius that fits the element. Chips and pills are 6px; buttons and inputs are 8px; cards and section blocks are 12px; only large hero pricing panels go to 16px.
Pill / Tag
4px
Chip / Badge
6px · --qx-radius-sm
Button / Input
8px · --qx-radius-md
Card / Section
12px · --qx-radius-lg
Hero pricing
16px · --qx-radius-xl
Canonical decision
FAQ cards on the Autoglass page use 10px and pricing widget tier cards use 16px. Move FAQ cards to 12px (card token). Keep 16px only for pricing tier cards because they sit one visual level above standard cards.
Drop shadows
Shadows are soft and low-opacity. The hover shadow (lg) is the default lift effect for cards. Never use heavy or coloured drop shadows except as deliberate hover accents on primary buttons.
Subtle
--qx-shadow-sm
Resting
--qx-shadow-md
Hover lift
--qx-shadow-lg
Modal / Floating
--qx-shadow-xl
Layout tokens
Standardised layout values used across all sections.
| Token | Value | Use |
|---|---|---|
| Container max-width | 1320px
|
Outer content container |
| Container padding (desktop) | 0 40px
|
Side padding above 720px |
| Container padding (mobile) | 0 20px
|
Side padding under 720px |
| Section padding (desktop) | 80px 0
|
Vertical breathing between sections |
| Section padding (mobile) | 50px 0
|
Reduced for narrow viewports |
| Card hover transform | translateY(-3px)
|
Standard lift on hover |
| Button hover transform | translateY(-2px)
|
Slightly smaller lift |
| Transition duration | 0.2s
|
All non-page-load transitions |
02. Components
Buttons
Six button types cover every interaction on the site. Always pair a primary (green) with a secondary (outline) when offering two actions side by side.
Primary types on light surfaces
Use one Primary button per section as the main call to action. The Outline button is the supporting secondary action.
Default surface
- Primary
- bg #13ab5b · padding 14/28 · radius 8 · weight 600
- Outline
- border 1px #d4d4d4 · hover border #13ab5b · same padding
- Text link
- colour #13ab5b · weight 600 · gap expands on hover
Buttons on dark surfaces
On dark CTA banners and the testimonial section, swap to White (primary) and Outline White (secondary). Outline White uses a 30% transparency border, going to fully opaque on hover.
Dark surface
Buttons on green surfaces
On the green footer bar or the green-gradient CTA banner, the primary becomes a White button (green text). Use Outline White for the secondary, same as on dark.
Green surface
Sizes
Default is the standard size used everywhere. Small is reserved for height-restricted contexts only, like inside the navigation bar. There is no Large variant.
- Default
- padding 14/28 · font 15
- Small
- padding 10/18 · font 13 · only in nav
Form submit (full width)
Inside form cards, the submit button stretches to full width and uses the Primary style.
02. Components
Form elements
All inputs share the same border, radius, padding and focus state. The focus ring is a 3px translucent green halo plus a solid green border.
We will not share your email.
- Input
- border 1px #e5e5e5 · padding 12/14 · radius 8 · font 15
- Label
- weight 600 · size 13 · margin-bottom 6
- Focus ring
- border #13ab5b + box-shadow 0 0 0 3px rgba(19,171,91,0.12)
- Helper text
- size 12 · colour --qx-text-muted · margin-top 6
- Checkboxes & radios
- accent-color: #13ab5b · size 18x18
02. Components
Icons, checks & chips
Three check icon styles for three contexts. Several chip styles for badges, status, and tier identification.
Check icons
Pick the right check for the surface: Filled (green light bg) for benefit lists on white, Solid (green circle white tick) for prominent badges, Outline (green circle, no fill) for process steps or numbered items, Inline (bare green tick) for compact lists.
Filled
Default for benefit lists and feature checklists.
Solid
Trust badges, hero confidence indicators.
Outline
Pricing card features (with circle outline).
Inline
Compact contexts: header trust row, footer bar.
Chips, pills & badges
One canonical chip style is used for badges across the site (Stamp on imagery, Popular on pricing, Tier badges on cards). Same padding, weight, size and radius. The only thing that changes is the colour. Two exceptions: New chip is smaller for navigation use, Featured chip uses a light fill with an icon for hero-level emphasis.
Most popular
Featured read
Info Plus
Canonical chip (green)
11px / 700 / padding 5/12 / radius 6 / uppercase. Used for Popular, Stamp and Tier-Plus.
Info Fleet
Canonical chip (dark)
Same style, dark background. Used for tier-fleet badges.
Exclusive benefit
Featured chip
Light green fill, icon, sentence case. Hero partnership / launch indicator.
New
New chip
Smaller variant for restricted areas like the navigation bar.
Canonical decision
Stamp, Popular and Tier badges all share the same shape. Only colour differs. The current pricing widget Popular chip uses a pill shape (20px radius) and the Resources stamp chip is smaller. Both should move to the canonical 6px radius / 11px / 5-12 padding.
Section eyebrow label
Used above every section title. Always green, uppercase, weight 700, with 1px letter-spacing.
Section label
Recommended style
Section label
Not recommended
02. Components
Cards
All cards share the same base: white background, 1px border #e5e5e5, 12px radius, hover lift of translateY(-3px) with shadow-lg and border-color transparent. The only variation is internal layout and content.
Process card (numbered step)
Used for "how it works" sections. Number circle, title, short description. Always centred.
1
Become a Quartix customer
Get started with vehicle tracking and unlock partner benefits automatically.
2
Set up your account
Activate the partner discount on your fleet account, ready to use.
3
Book when you need it
Mobile service or branch, your choice. Discount applied at booking.
Service / feature card (icon + text)
Horizontal layout, icon left, content right. Two icon background variants: green or supporting blue (only for product/partner accents).
Windscreen Repair
Chips and small cracks repaired quickly, often in under 30 minutes.
Windscreen Replacement
OEM-spec glass with lifetime guarantee, ADAS calibration included.
FAQ card
Question as small heading, answer below in secondary text. No icon, no expand interaction at the card level.
How do I get the discount?
It is included as a benefit when you become a Quartix customer. Set up takes minutes and the discount applies from day one.
Does the discount apply to every vehicle?
Yes. The discount applies across your entire fleet, for every vehicle on your account. No per-vehicle limit.
Accordion (collapsible FAQ)
Used where FAQ length is long. Same card base (12px radius, 1px border, white). Border goes green when item is open, with a soft shadow lift. Chevron rotates 180deg on toggle, and the chevron container background tints green.
The discount is included as a benefit when you become a Quartix customer. Your Autoglass fleet account is set up with the discount applied, ready to use from day one.
Yes, the discount applies across your entire fleet, for every vehicle on your Quartix account. There is no per-vehicle or per-use limit.
Yes. The discount covers all Autoglass services including chip repair, windscreen replacement, side windows, and rear windows.
Yes, you can use the discount whether you visit a branch or have an Autoglass technician come to your location. The mobile service covers the entire UK.
Team card
Square photo, name, role in brand green, short bio clamped to 3 lines with optional expand.
Dan Mendis
Commercial and Operations Director
Dan joined Quartix in 2017 and has had various roles in the business. He became Chief Operating and Financial Officer in 2019.
Sean Maher
Sales Director
Sean started in telematics back in 2002 and joined Quartix in March 2008. Promoted to Sales Director in 2022.
Sally Morton
Finance Director
Sally qualified as a Chartered Accountant with Grant Thornton UK and joined Quartix in 2019 as Group Financial Accountant.
Content cards (resources)
One card structure with content-type variation. Image at top, optional tag chip, optional play overlay for video. Title, meta, description, link.
Blog
Video
Webinar
Guide
Complete guide to fleet electrification
A practical roadmap to switching from ICE to EV.
Download guidePricing tier card
Matches the live pricing widget: 16px radius, 320px column width, and the distinctive offset grey shadow block sitting behind each card. The Enterprise tier uses a green card with a sage-green shadow.
Basic tracking features
Info Point
£9.99 per month per vehicle
Info Point includes:
- 2-minute GPS updates
- 3 years reporting history
- Mobile app access
- Email and phone support
Most popular
Info Plus
£11.99 per month per vehicle
Everything on Info Point plus:
- 1-minute GPS updates
- Geo-fencing
- Detailed trip reporting
- Driver behaviour monitoring
The full service solution
Info Fleet
£13.99 per month per vehicle
Everything on Info Plus plus:
- Driver and vehicle management
- Scheduled and automated alerts
- Fuel card integration
- Fleet check included
Tailored for your business
Enterprise
POA
Contact us for a custom quote
Everything on Info Fleet plus:
- Custom pricing
- API access
- Dedicated account manager
- SSO (coming soon)
Award card
Square image area centred, name and year underneath. Same base card structure as everywhere else.
Fleet News Recommended
2026
What Van? Award
Winner
Green Economy Mark
LSE
Cyber Essentials
Certified
Partner logo card
Used for procurement framework grids and partnership rows where logos sit on their own cards. Centred logo, fixed 90px height, border goes green on hover. Use this only when the logo needs a card around it; for hero strips or marquees use the bare logo treatment below.
Bare logo strip (marquees, hero rows)
When logos sit on their own without a card around them (hero strip, scrolling marquee, "as featured in" bar), they have no border, no background, no card. Just the logos at consistent height, with a subtle opacity that goes to full on hover.
Canonical decision
Logos only get a card border when they're part of a procurement-framework or partnership grid. In any other context (hero strip, marquee, footer line) they sit bare. Never put a card around a logo that already has its own visual container.
03. Patterns
Imagery
Four image treatments. Pick the right one for the placement: rounded for body content, full-bleed for hero backgrounds, overlay for storytelling, video treatment for media.
Body content image
radius 12px · aspect 16:10 · cover fit
Full-bleed background
no radius · section-width · cover fit
Image with overlay
radius 12px · gradient rgba(0,0,0,0.2 to 0.75) · text bottom-aligned
Video / play overlay
radius 12px · centred play button 64px · white bg with green icon
03. Patterns
Section backgrounds
Four section background patterns. Alternate White and Alt for visual rhythm. Use Dark for premium / testimonial moments. Use Green sparingly for emphasis bars and pre-footer reinforcement.
Section label
Standard section
The default background for content sections.
White
background #ffffff
Section label
Alternate section
Used to break up rhythm between white sections.
Alt
background --qx-bg-light #f8f9fa
Section label
Dark section
Testimonials and CTA banners.
Dark
linear-gradient(135deg, #2a2a2a, #1a1a1a)
Section label
Green section
Stats bars and emphasis blocks only.
Green
background --qx-green #13ab5b
03. Patterns
CTA banners
Three CTA patterns for end-of-section, end-of-page, and persistent reinforcement. Use the Dark CTA as the default. Use the Green CTA on people-focused pages (team, careers). Use the Footer Bar as a sticky reminder above the main footer.
Dark CTA (default)
Ready to cut your fleet's costs?
Get in touch and a fleet specialist will walk you through Quartix.
Green CTA (people pages)
Want to join the team?
We are always looking for talented people who share our passion for innovation and customer service.
Footer bar (persistent reminder)
03. Patterns
Common patterns
Reusable composite components that combine multiple primitives.
Stats bar
Four-column stat row on green background. Number large, label small.
Testimonial
Centred on dark background. Green opening quote mark, italic quote, attribution underneath.
“
The Autoglass discount was a bonus we did not expect. First time one of our vans caught a stone chip, we had a technician out the next morning at a fraction of what we would normally pay.
Benefit list (with checks)
Used to surface feature lists alongside body content. Filled green check icons, secondary text colour.
- Exclusive partner discount included from day one
- Covers repair, replacement, side and rear windows
- Nationwide mobile service and 100+ branches
- Lifetime guarantee on all work
Toggle switch
Used in the pricing widget. Green when on, neutral grey when off. Both labels clickable.
Monthly Rental
Own Your Units
04. Reference
Standards summary
A single-screen reference of the canonical values to apply everywhere. If a component in production deviates from these, update it.
| Property | Canonical value | Notes |
|---|---|---|
| Primary brand green | #13ab5b
|
Buttons, links, accents, eyebrows |
| Dark green (hover) | #0e8a47
|
Existing #0e7d43 should be migrated |
| Card border | 1px solid #e5e5e5
|
Always present at rest |
| Card radius | 12px
|
16px only for pricing tier cards |
| Button radius | 8px
|
All sizes |
| Button sizes | Default + Small
|
Small only in nav; no Large variant |
| Input radius | 8px
|
Matches buttons |
| Chip / badge canonical | 5/12 padding · 11px · 6px radius
|
Stamp, Popular, Tier all share this; only colour varies |
| New chip (nav only) | 3/7 padding · 10px · 4px radius
|
Smaller variant for restricted contexts |
| Featured chip | light fill + icon
|
Hero partnership / launch indicator only |
| Card hover | translateY(-3px) + shadow-lg + border transparent
|
Single behaviour, applied universally to all cards |
| Button hover | background colour change only
|
No transform, no shadow, no lift |
| Accordion | single open at a time
|
Opening one closes any other open item |
| Logo with card | border 1px + white bg
|
Only in partnership / framework grids |
| Logo bare (marquee) | no border · 0.75 opacity
|
Hero strips, "as featured in" rows |
| Transition | 0.2s
|
All interactive transitions |
| Container max-width | 1320px
|
With 40/20px side padding |
| Section padding | 80px 0
|
50px on mobile |
| Font family | Inter, system-ui fallback
|
Weights 400/500/600/700 |
| Body line height | 1.65
|
1.6 for small body, 1.5-1.55 in tight contexts |
| Eyebrow label colour | #13ab5b
|
Brand green, not grey |
| Dark section background | linear-gradient(135deg, #2a2a2a, #1a1a1a)
|
Same gradient everywhere |
| Alt section background | #f8f9fa
|
Used to break vertical rhythm |
| Default focus ring | 3px rgba(19,171,91,0.12) + 1px green border
|
Inputs, focused buttons |
Pages to update first
The mega menu still uses
#0e7d43
as dark green and the pricing widget uses an emoji in the "Most Popular" chip. These are the most visible inconsistencies. Awards page card radius (10px on partner logos) should also move to 12px.
