Individual Voluntary Arrangement (IVA)
A formal agreement to repay what you can afford
- Typically lasts 5 to 6 years
- Single, affordable monthly repayment
- Remaining debt written off at the end
Internal reference
Clarity Insolvency design system
The single source of truth for the redesign: logo, colour, type, spacing and components.
Every value on this page is rendered from the live design tokens in
src/styles/global.css,
so what you see here is exactly what the site ships.
01 · Logo
Logo
The primary logo pairs the circular swirl mark with the wordmark set in Plus Jakarta Sans. Use it on white or light surfaces. Keep clear space equal to the height of the mark on all sides, and never redraw, stretch or recolour it.
/logo-clarity.svg
Reversed (on dark) · pending.
There is no dark-background version of the current logo yet. On dark surfaces, avoid the
logo until a reversed asset is supplied. (The old /logo-dark.svg
uses a retired mark and should not be used.)
Do
Give it room to breathe, keep the swirl mark and wordmark locked together.
Don't
Stretch, rotate, add shadows, or place on a busy or low-contrast background.
Favicon
The swirl mark alone is used as the favicon (/Avatar_Clarity.ico).
02 · Colour
Colour
The 2026 redesign palette is the source of truth and maps directly to the Figma variables. A single deep-blue accent is reserved for section eyebrows; the neutral slate scale handles everything else.
Primary accent (eyebrows only)
#304C89
Primary
--color-primary
Deep blue. Used only for section eyebrows (text-primary).
Not in the Figma variables. Candidate to remap to the redesign blues.
2026 redesign palette (mapped to Figma variables)
#1AA06A
CTA
--color-cta
Primary green call-to-action button.
#158A5B
CTA hover
--color-cta-hover
Darker green for CTA hover state.
#15213A
Ink
--color-ink
Headings and primary text ink.
#55A2D3
Accent blue
--color-accent-blue
Outcome-card stat values.
#EDF5FB
Accent blue soft
--color-accent-blue-soft
Debt-solutions section surface.
#00BC7D
Step
--color-step
Numbered process-step accents.
#F5F4F3
Sand
--color-sand
FAQ section surface.
#F9B741
Star
--color-star
Gold star glyph beside the review score (not the Trustpilot badge).
Brand utilities (hardcoded, no token yet)
Present in the Figma variables and live components but not yet defined as Tailwind tokens.
#0084D1
Link
Figma: Text/text-link
Inline text links. Also the primary blue in the logo swirl mark.
#00B67A
Trustpilot green
Figma: brand ref
Trustpilot rating badge tiles, hardcoded in TrustpilotStars.astro.
Neutrals · slate scale
slate-900
Hero / footer / dark CTA
slate-800
Body text
slate-700
Body copy
slate-600
Body / nav
slate-500
Fine print / captions
slate-400
Fine print on dark
slate-300
Body on dark / borders
slate-200
Hairlines / dividers
slate-100
Quiet fills
slate-50
Alternating section band
white
Nested card surface
03 · Typography
Typography
Heading · --font-heading
Aa
Plus Jakarta Sans
400 · 500 · 600 · 700 · 800. Applied to every h1–h6.
Body · --font-sans
Aa
Be Vietnam Pro
300 · 400 · 500 · 600 · 700. Default for all body copy.
Serif · --font-serif
Aa
Source Serif 4
400. Occasional pull-quotes via .font-serif.
Type scale
text-xs
12px
Personal insolvency advice
Micro labels / dense fine print
text-sm
14px
Personal insolvency advice
Caption / fine print
text-base
16px
Personal insolvency advice
Body, buttons
text-lg
18px
Personal insolvency advice
Lead / intro paragraphs
text-xl
20px
Personal insolvency advice
Larger body, sub-emphasis
text-2xl
24px
Personal insolvency advice
h3 card titles
text-3xl
32px
Personal insolvency advice
h2 section headings
text-4xl
40px
Personal insolvency advice
h3 large / legal h1
text-5xl
48px
Personal insolvency advice
Large display
text-6xl
56px
Personal insolvency advice
Hero h1
text-7xl
72px
Personal insolvency advice
Reserved decorative display
Weight ladder
Made clear
Light · 300 · Dense bullets, captions
Made clear
Regular · 400 · Body (default)
Made clear
Medium · 500 · Emphasised body
Made clear
Semibold · 600 · h3, card titles, buttons
Made clear
Bold · 700 · h2 section headings
Made clear
Extrabold · 800 · Hero h1 display
04 · Spacing
Spacing
The class number equals the pixel value: p-24 = 24px,
p-160 = 160px. This is the opposite of stock Tailwind.
-8
8px
-16
16px
-24
24px
-32
32px
-40
40px
-48
48px
-64
64px
-80
80px
-96
96px
-160
160px
05 · Radius
Border radius
rounded-xs
4px · Trust tiles / FAQ toggle
rounded-form
8px · Inputs, buttons
rounded-button
12px · Rectangular buttons
rounded-card
16px · Card surfaces
rounded-thumbnail
24px · Image / media
rounded-photo
36px · Process photo
06 · Shadow
Shadows
shadow-subtle
--shadow-subtle
All card elevations
shadow-card-lg
--shadow-card-lg
Floating / raised cards
07 · Components
Components
Buttons
Four variants from Button.astro. All use rounded-form, font-semibold, min-height 56px (64px at size="lg").
Cards
The actual card patterns used on the homepage. Each is shown as it appears in index.astro.
Debt-solution card
White card, bg-slate-900 header, bg-accent-blue bullet dots.
Review card
rounded-button, border-2 border-slate-200, no shadow.
Hero outcome card
EXAMPLE: BEFORE
Total unsecured debt owed
£8,275
EXAMPLE: AFTER A SOLUTION
Debt written off
up to 59%
New monthly payment
£110 pm
shadow-card-lg, dark panel + text-accent-blue stats.
Trust tile
4.6 ★
On Trustpilot
IPA
Licensed IPs
3.5K
Helped monthly
rounded-xs, bg-white/50, gold ★ glyph.
Process step
Free initial chat
A confidential conversation with no obligation.
A numbered list, not a card. Number in text-step.
FAQ row
How much does advice cost?
Faq.astro: dark square rounded-xs +/× toggle.
Form input
rounded-form, focus ring ring-primary/20.
Internal reference for Clarity Insolvency Limited. Tokens live in
src/styles/global.css; the homepage
(src/pages/index.astro) is the canonical pattern reference.
This page is noindex and not linked in site navigation.