Background slot 1
Uses --section-background-1-*. If the theme leaves this slot as
none, it stays plain.
Design system
IFS Trusted Advisers
The living reference for every token, primitive, form and scheme. Everything on this
page renders straight from sites/ifs-advisers/theme.css — change the theme,
and every specimen below re-skins together.
ifs-advisersnoindex · gatedno class implies a style
01
Colour
Two tiers. TIER 1 primitives are the raw palette; a scheme maps TIER 2 semantic slots to them. Components only ever name a TIER 2 role, so every pairing below is proven legible.
Tier 1 · Primitives
The palette. Override these per brand and every scheme updates together. Components never touch them.
--neutral-0 … --neutral-950
0
50
100
200
300
400
500
600
700
800
900
950
--brand
--brand-fg
--accent-50
--accent-300
--accent-500
--accent-fg
Transparency overlays — darken (on light) / whiten (on dark) whatever's behind them. Borders, dividers and hovers use these so they adapt to any surface. Shown over a checkerboard.
dark-5
dark-10
dark-15
dark-25
dark-50
dark-75
light-5
light-10
light-15
light-25
light-50
light-75
Tier 2 · Surface pairs
Aa
--background--foregroundAa
--card--card-foregroundAa
--primary--primary-foregroundAa
--accent--accent-foregroundAa
--muted--muted-foregroundDerived slots · alias layer
heading/link/icon/ring/divider/input/highlight follow the scheme's core slots automatically — a scheme need not list them, yet they stay legible on every background.
--heading
Heading colour
--link
--icon
--divider
--highlight
Highlighted phrase rendered here.
--ring
Utility slots
--border
--input
--success
--warning
--danger
02
Typography
One fluid scale, driven by clamp(). Weight, tracking and leading for headings are tokens — never hard-coded on an element.
Type scale
display
Retirement confidence, clearly explained
h1
Advice for the next decision
h2
A practical plan for families
h3
Superannuation strategy
h4
Ongoing review rhythm
lead
Plain-English guidance for people preparing for retirement.
body
Every component below resolves through the active site's semantic token layer.
small
Small print remains readable and token driven.
Heading font
The quick brown fox
--heading-font
Body font
The quick brown fox
--body-font
Heading metrics
Weight, tracking and leading all resolve from tokens.
--weight-heading · --tracking-heading · --leading-heading
Font roles
Display
font-display
Heading
font-heading
Body
font-body
EYEBROW
font-eyebrow
Quote
font-quote
font-button
Every role cascades from --body-font — a single-typeface brand sets one token; an editorial brand points --heading-font at a serif.
03
Spacing & layout
Section rhythm comes from SectionShell spacing; horizontal rhythm from the one container. Numeric spacing derives from --space-unit, so density is a single lever.
Section spacing
content
spacing="compact"
content
spacing="default"
content
spacing="spacious"
Container widths
width="narrow"
standard (default)
width="wide"
width="bleed"
All content sits in Wrapper (.wrap). Never hand-roll mx-auto max-w-* px-*.
Gap rhythm
1
2
3
4
--gap and every p-*/gap-*/m-* scale from --space-unit.
04
Surfaces & elevation
There is exactly one card. Radius and shadow are scales the theme owns — a section never picks an elevation.
The card
One house card, set once
Every <Card> renders identically. There are no flat/outline/raised
props — those imply a per-card style and break universal theming. A brand chooses the card
look once via three tokens and every card on the site follows.
--card-border-w · --card-shadow · --radius-card · --card-padding
Hairline
border-w: 1px · shadow: none
Soft shadow
border-w: 0 · shadow: md
Border + shadow
border-w: 1px · shadow: sm
Above: the same <Card> markup three times — only the theme tokens differ, set on a wrapper to
simulate three brands. This is a theme decision, not a component choice. A genuine one-off can still add a
shadow-* utility to a single card.
Shadow scale
shadow-xs → shadow-2xl
xs
sm
md
lg
xl
2xl
Radius scale · rounded-xs → rounded-2xl
xs
sm
md
lg
xl
2xl
Sharp brand = all steps 0; pill brand = all steps large.
Component radius aliases
button
input
card
media
badge
Derived from the scale; override one only when a brand genuinely diverges.
06
Primitives
The building blocks sections compose from. Every one is theme-owned — none bakes a fixed look.
Logo
Config logo, else text fallback.
Eyebrow
default
muted
Case is --eyebrow-transform — sentence-case brands set none.
Highlight — house treatment + per-use overrides
The house highlight (token-driven default).
An underline override for one phrase.
A box override for strong emphasis.
Switch the whole site between marker / underline / box from --highlight-*.
Badge
Default
Primary
Accent
Outline
Shape is --radius-badge.
IconBadge
--icon-badge-size · --icon-badge-bg · --icon-badge-radius · --icon-badge-border
ImageBadge
Universal image badge for hero/footer credential display. Opt-in via site.badge in site config.
Stat
1200+
Families advised
24
Years advising
98%
Review attendance
Value size is --stat-value-size; animate opts into count-up.
PullQuote
"The process finally made our retirement choices feel understandable."
Rule + italic are --quote-rule-* / --quote-style — not baked in.
Aside / callout
Calm and card-like by default — variant only sets the tone colour. The classic left accent bar is opt-in via --aside-rule-w, never baked in.
Accordion · dividers (default)
Can I choose when to retire?
Yes. The advice process models timing, income needs and trade-offs before you make a decision.
Do you work with SMSFs?
We can help assess whether an SMSF strategy still fits your goals and responsibilities.
Default hairline dividers — no outer border, no horizontal padding.
Accordion · card
Can I choose when to retire?
Yes. The advice process models timing, income needs and trade-offs before you make a decision.
Do you work with SMSFs?
We can help assess whether an SMSF strategy still fits your goals and responsibilities.
Opt-in card variant with border, radius and internal padding.
Divider — horizontal & vertical
LeftRight
Pure hairline: --divider / --divider-w / --divider-style.
Wrapper widths
width="standard"
width="narrow"
width="wide"
Section transitions
The join between two stacked sections is a colour-aware primitive with NEUTRAL slots
(variant="1|2|3") — never a shape name. The theme decides each slot's shape via
--section-transition-<n>-* (flat by default). Below, this page assigns example
shapes to two slots to demonstrate; in production the theme owns them.
Section A · muted
Section B — slot 1 (theme maps it to a straight edge here)
Slot 2 — same markup, theme maps it to a curve
Section backgrounds
Optional decorative backgrounds use NEUTRAL slots (background="1|2|3") on
SectionShell. Slots are off by default and theme-owned through
--section-background-<n>-*; section components never bake gradients.
Background slot 2
Uses --section-background-2-*. If the theme leaves this slot as
none, it stays plain.
Background slot 3
Uses --section-background-3-*. If the theme leaves this slot as
none, it stays plain.
Media · 16/9 & 1/1
SkipLink
Global in Layout; visible only on keyboard focus. Tab to reveal.
07
Icons
Stroke-based SVGs that inherit the active scheme's text-icon colour. Add names to the Icon component; never inline an icon glyph.
Icon set
arrow-right
check
phone
question
user
chart
document
shield
clock
briefcase
piggybank
award
calendar
star
x
search
placeholder
default
scheme-2
scheme-3
scheme-4
scheme-5
scheme-6
08
Forms
Field, Input, Select, Textarea and Checkbox — composed, validated and themed through the same token layer.
Composed form
Error states
Please enter a valid email address.
Message is required.
Hint states
Include country code for international numbers.
We'll match you with the right adviser.
09
Schemes
The same primitive cluster rendered in every scheme — the visual regression net for the token layer. Buttons, links, cards, highlights and asides must read cleanly on each.
10
Motion & effects
Attribute-driven and token-timed. Everything here collapses to 0ms under prefers-reduced-motion.
data-animate="fade"
Fades in
data-animate="slide-up"
Slides up
data-hover="lift"
Hover me
Lifts on hover
Count-up Stat
42k
Animated count-up
Duration tokens
--dur-fast150ms
--dur-base250ms
--dur-slow450ms
Reduced-motion sets all three to 0ms.
Grain
data-grain — opacity 0 by default; activate via --grain-opacity.
11 · Sections
The section library lives on its own page
Full section presets render with this theme and realistic demo content, fed by the catalogue.