This paragraph contains a primary colour link and a secondary colour link.
Component showcase
Abundance v2 helper layer
This page outlines the new components added to the system to deliver the v2 Abundance design update. All the content on the homepage mockup, the content page mockup, and the new buy process, is created using the existing CSS helper classes and the set of additions below. This page is running a local CSS fragment to deliver these changes, plus some hacks to show the small number of broader design changes desired (see below for more detail on these).
Text roles
Repeated component text styles
These are small reusable text roles used inside cards, charts, stats, notes and compact content modules. We will add these directly into the text.scss partial as agreed to make these available in the CSS for use.
si-eyebrow
Small uppercase label used for section labels, card labels and compact metadata.
si-body-compact
Compact body copy for captions, small card text, warnings, supporting details and explanatory notes.
si-action-text
Used for small action labels, compact links and button-like text inside cards.
si-stat: £1.2m
Used for statistics and compact numeric callouts.
Display
Large display heading role for hero moments.
abv2-card-copy — supporting card copy with a slightly larger editorial feel than compact body text.
Helper extensions
Colour and button helpers
Small helper additions for colour accents and white buttons on coloured backgrounds.
Section masks
Top and bottom mask helpers
These helpers create the angled transition shapes used between white and coloured sections.
Example masked colour section.
Editorial bands
Decorative editorial dividers
These are full-bleed decorative dividers. Colour and shape are separated so shapes can be reused with different brand colours.
Card shells
Card primitives
These examples intentionally avoid detailed inner content so the card shell treatments can be assessed on their own.
si-card--secondary
abv2-card-soft
abv2-card-soft--bordered
Colour cards
Colour card permutations
The card visual treatment is custom, but the layout should be delivered using normal row/column helpers rather than a dedicated colour-card grid.
Default
Pink
Teal
Yellow
Green
Pink light
Teal light
Boxout cards
Boxout card permutations
For callouts and use within other pages and processes.
abv2-boxout
Reusable boxout panels
A generic contained panel for declarations, summaries, confirmation rows, notes and grouped key-value content.
Default
White boxout
Useful for neutral grouped content and confirmations.
Teal
Declaration panel
Used for ISA declarations, amount summaries and positive emphasis.
Compact yellow
Critical reference
Useful for important payment details or compact warnings.
Media frames
Image and video frames
Shared media-frame helpers used across homepage, council and editorial contexts.
Default
Square
Case square
Wide iframe
Blob helpers
Dot mask and numbered blobs
The dot mask helper can be combined with colour helpers and size-specific number helpers.
1
Card blob number
2
Yellow blob
3
Teal blob
1
Step number
Link helpers
Chip, support and related links
Three compact link patterns used for navigation, supporting documents and related reading.
Chip links
Support links
Form controls
White field controls
Reusable white-on-colour input and select treatments for calculators and selectors.
£
Bar chart
Default bar chart height
A generic horizontal bar chart for allocations, category breakdowns and use-of-funds data.
Bar chart
Compact bar chart height
A more compact variant for editorial cards or denser chart contexts.
Warning list
Checklist-style warning panel
A compact caution list that reuses colour cards and numbered blob helpers.
1
Warning item
Short explanation of the warning item.
2
Second warning item
Short explanation of the warning item.
Editorial notes
Note, disclaimer and quote candidates
Small content patterns used inside editorial or explanatory pages.
Note: A neutral editorial note.
Disclaimer: A cautionary inline disclaimer.
A compact quote treatment.
Citation
Buy process
Buy journey components
Lightweight custom elements added for the buy journey where native UAT helpers were not quite enough: selectable route cards, compact investment amount rows and reusable boxout panels.
abv2-route-choice
Two-up selectable route cards
Used for radio-card decisions such as investment route, portfolio type and payment method.
abv2-buy-invest-item
Compact investment amount row
Used where a council investment needs title, compact facts and an amount input in a stable row layout.
Other small changes to visual language
This page outlines the smaller system-level visual updates that sit alongside the new component additions. They are being actioned on this test page via local CSS overrides.
General updates
- Update the favicon. File to be supplied. This will use the same underlying mark as the current favicon, but with updated v2 colour values.
- Update the blockquote style so the main quote copy uses the standard
body--lgtext treatment rather than the current bespoke treatment.
Navigation bar updates
The navigation should use the updated v2 font and colour treatment so that global navigation feels consistent with the rest of the refreshed page system.
Font updates
Set the font for the following navigation buttons to $si-font-primary:
.btn.btn-primary--bordered.mobile-hide.si-btn.si-mega-menu__dropdown-btn.js-account-menu-button.brand-navbar__login-btn.btn.btn-primary--bordered.m-b-spacer-md--mobile
Text transform updates
Remove the uppercase text transform from the following navigation buttons:
.btn.btn-primary--bordered.mobile-hide.si-btn.si-mega-menu__dropdown-btn.js-account-menu-button.btn.btn-primary--bordered.m-b-spacer-md--mobile
Colour and logo updates
- Set the grey navigation text, including navbar items and the login link, to
$abundance-neutral-900. - Change the logo PNG. File to be supplied. This will use the same underlying logo as the current version, but with updated v2 colour values.
Footer updates
The footer should move from the current neutral treatment to the Abundance yellow footer treatment used in the v2 mockups.
- Change
.footerbackground colour to$abundance-yellow/#ffb72c. - Replace the current
.bg-colour--neutral--300.bg-mask.bg-mask--t-convexfooter transition with the new.bg-mask--abv2-footer-peakmask. - Set the new footer peak mask fill colour to
$abundance-yellow/#ffb72c.