Reference kit

Accent

01Brand

Colour

Aubergine, Pink and Stone carry the brand. Pastels live in blobs and labels, never in text. Taken from their Design System and Redesign Figma files.

Aubergine #0E012E · Text, logo, nav, footer, dark bands
Pink #F050F7 · One primary button per view, eyebrows on dark, Penny
Stone #F9F3F0 · Page background
White #FFFFFF · Cards, fields, text on dark
Orange #FF9B63 · Blobs, Home and About
Lime #D0F99F · Blobs, coaching
Blue #C6F3FE · Blobs, advice
Yellow #FFF27C · Icon blobs, washi tape
Teal #2A9A86 · Ticks and positive values
Base #423C52 · Secondary text

Type

Degular for everything. Headings Semibold with -1% tracking, body Medium. The font is licensed to Octopus Money, so it stays inside Salo and their hosting.

The future you want starts with a plan

H1 · Degular Semibold68px / 0.9 · mobile 40px

Breaking the mould

H2 · Degular Semibold48px / 0.9 · mobile 34px

Bring all the pieces of your financial life together

H4 · Degular Semibold28px / 1.0

Your pensions, savings, investments. It's hard to be sure how they all fit together now and in the future.

Body · Degular Medium16px / 1.45

Proud to be different

Eyebrow · Degular Medium16px, Pink 700 on light, Pink on dark

Lines from their Redesign Figma, used as samples. Live copy comes from the copy doc.

Imagery

Real people, cut out with a white outline and set on a textured blob. Office moments and life goals in polaroids. All taken from their Figma files.

Cut-outs · homepage and product heroes
Team · coaches and advisers
Planning for childcare or education
Saving for a dream holiday
Life goals · polaroids, titled by a goal

Office and team photos are theirs. Hero cut-outs and lifestyle photos came with the redesign; confirm the licences before they go live. Sources are logged in assets/website/README.md.

02Elements

Shapes and texture

Their organic blobs in a pastel with the crumpled-paper texture, the 45px curve into every Aubergine band, and torn paper under polaroids.

Orange · home, about and coach pages
Lime · coaching
Blue · advice and icons
Curved edge · 45px, wherever Stone meets Aubergine
Saving for holidays
Torn paper · under a polaroid or a step card
Doodles · Aubergine line, beside a photo

Highlights

A pink brush stroke under one word, sentence-case eyebrows and washi-tape labels. One per section.

Proud to be differentBreaking the mould
Brush stroke · under one word, on dark or light
Our approachEverything in one clear forecast
Eyebrow · Pink 700 on light, Pink on dark
Step 2
Washi label · for steps, from How it works

Buttons

44px, 2px corners, Degular Bold 15, sentence case. Primary goes lighter on hover. One pink button per view.

Primary · default, hover, focus, pressed, disabled
Book a sessionBook a sessionBook a sessionBook a sessionBook a session
Secondary · default, hover
Learn moreLearn more
Tertiary · Pink 700, hover Pink 800
On Aubergine · primary, secondary, secondary hover Focus on dark · Pink outline
Login

Image treatments

A cut-out on a textured blob, a photo cut to a blob, polaroids and a data card. Data cards are always labelled illustrative.

Cut-out on a blob · head breaks the top edge
Photo in a blob · office and team moments
IllustrativeSaving for a new car
On track82%
Data card · over a portrait, labelled illustrative

03Motion

Loading in

Calm, warm and clear. People rise out of their blobs, words lift into place, then the pop-up cards settle on top. Every frame replays while it's on screen. The people never follow the cursor; only the small cards drift a touch.

50+ advisers
& coaches

The future you want starts with a plan

With a clear financial forecast and expert, 1-to-1 support, you'll feel confident you're making the right decisions with your money.

Book a session
Saving for a new car£12,00082% complete
Dedicated advisers
Refreshingly humanProven expertiseExceptional valueA force for good
Figures illustrative
Homepage hero, cut-outs on blobs · their Phase 1 hero. Blobs swell, people rise out of them, the headline lifts word by word, then their frosted pop-up cards settle on top of the people and the figure counts once. On a fine pointer only the cards drift, a few pixels

Stocks and Shares ISA

Invest with a coach in your corner

Open an ISA, a pension or a general investment account. Every account comes with unlimited one-to-one coaching, at no extra cost.

Start investingHow it works
Saving goal£84,00082% complete
JakeChelmsford
Figures illustrative · placeholder line
Investing hero, with pop-up cards · built from their "Financial planning graphic". The lime blob swells, Jake rises, their coin doodle draws itself in, then the saving-goal card and name pill settle on top. Written for the investing proposition in the brief
Your coach

1-to-1 support

Get to know your coach

Every account comes with unlimited one-to-one access to a financial coach, at no extra cost.

Book a sessionMeet our coaches
Coach-led hero, with booking · the brief says the coach is the heart of the offer, so the coach leads. The coach rises, the booking card settles on top, days pop in and one is picked. The card drifts gently on a fine pointer; the coach stays put

Meet our coaches

From all walks of life, up and down the country, all of us at Octopus Money share a mission to help everyone make the most of their money.

Team rise, with hover · coaches rise one by one, 110ms apart. Hover or tab to a card: it lifts, the blob turns and "Meet Tom" appears, as in their coach card. Always shown on touch. Names are placeholders

Our approach

Everything in one clear forecast

We bring everything into one clear, visual forecast, so you can see where you are today.

About us
Section load-in · eyebrow, headline, line and button step in, while the photo wipes up inside its blob and settles from 112%
Stocks and Shares ISAInvest up to your yearly allowance
Personal PensionPlan the retirement you want
1-to-1 coachingIncluded with every account
Cards step in · three cards rise 130ms apart, then each icon draws itself in its pastel blob. For "Our services"

Mobile

Six phone screens, each a page you can scroll. Everything arrives as it comes into the screen, sized for a 390px phone, with no cursor effects. Tap the menu, the accordions and the carousels.

50+ advisers
& coaches

The future you want starts with a plan

With a clear financial forecast and expert, 1-to-1 support, you'll feel confident about your money.

Book a session
Saving for a new car£12,00082% complete
Refreshingly humanProven expertiseExceptional valueA force for good

Our services

Accounts built around your goals

Stocks and Shares ISAInvest up to your yearly allowance
Personal PensionPlan the retirement you want

How it works

  1. Step 1Choose your accountAn ISA, a pension or a general investment account.
  2. Step 2Meet your coachUnlimited one-to-one sessions, at no extra cost.
  3. Step 3Watch your plan growSee every account in one place.

Buying a dream home

My coach helped me see exactly when we could afford to move. Having a clear plan made it feel real.

Sam · Teacher

No pressure. No obligation.

Just a chance to see how we can help.

Book a session
As with all investing, your capital is at risk.
Homepage · hero, USP icons drawing in, services, steps, a coach carousel, a testimonial and the call to action

1-to-1 support

Get to know your coach

Every account comes with unlimited one-to-one access to a financial coach, at no extra cost.

Select a day
891011121314

Your team

Team 1
Alex MorganFinancial adviser

Alex helps people plan for retirement and make sense of their pensions.

Saving for a dream home
Rob PatelInvestment coach

Rob loves helping first-time investors feel confident.

Saving for a new bike

Ready when you are

Book a session
Coach page · the coach rises, a booking strip settles on top, then their team pod opens like an accordion. Names are placeholders
Menu and coach grid · tap the menu: the panel opens down, links rise 60ms apart and the icon turns into a close. Coaches rise in pairs as you scroll

Stocks and Shares ISA

Invest with a coach in your corner

Start investing
Saving goal£84,00082% complete

At a glance

  • Unlimited 1-to-1 coaching included
  • Open an account in minutes
  • Transfer an ISA you already have

What you pay

x.xx%Platform feex.xx%Fund costs£0Coaching

Questions

Yes. We'll handle the transfer for you, and your coach can talk you through it.

Every account comes with unlimited one-to-one coaching, at no extra cost.

As with all investing, your capital is at risk.
Product page · Jake and his saving goal, ticks lifting in, a fee bar that builds once with figures in place, and an FAQ that opens. Fee figures are placeholders

About us

Proud to be different

Planning for childcare or education
Saving for a dream holiday
Planning for the retirement you want

Our history

Part of a bigger story

2000octopuslegacyIt all started with Octopus Investments.
2015Octopus helped launch Octopus Energy.
2023octopusmoneyOctopus Money was born to make money help fair for everyone.

Join the team

See our roles
About page · polaroids drop onto their blob, Penny peeks, then the story cards with their orange tabs rise on the curve into Aubergine. Story lines from their design, facts to confirm

People we've helped

JulieBristol
Portfolio value£667,000+15%
“Leaving a legacy

Knowledgeable and focused on what would benefit me most.

Lucy · Architect
“Securing your family's future

Supportive and encouraging. I have someone helping me plan.

Justin · Builder
“Buying a dream home

A clear plan made it feel real.

Sam · Teacher
Buying a property

Buying a property

Whether it's your first home or trading up, we'll build a plan to get you there.

Stories · Julie's portfolio card counts up, quotes swipe sideways, and a goal collage tapes itself down while their key doodle draws. Quotes and figures are placeholders

Curves

Their 45px curve is where Stone meets Aubergine. Here it swells as you scroll into it, bounces with scroll speed, wipes between photos and flattens as a photo settles.

What we're known for

We start with your life, not just your money

Keep scrolling. The band below swells into place.

Bring all the pieces together

Refreshingly humanProven expertiseExceptional valueA force for good
Curve grows with scroll · the section sticks while you scroll. The Aubergine band rises, its curve swelling to its deepest at the halfway point, then settling flat as the band fills. Each USP icon draws as the band reaches it

What we're known for

We start with your life, not just your money

Bring all the pieces of your financial life together.

Curve swells on arrival · the curve grows up into place, then the band's copy lifts in. 800ms

The faster you scroll, the deeper the curve

Then it eases back to their 45px.

Curve bounces with scroll speed · the edge deepens with the speed of the scroll and springs back to 45px when you stop
Curve wipe between photos · every 3.8s the next photo rises from the bottom behind a curved edge, the curve flattening as it fills the frame. 1200ms

Planning for the retirement you want

Curved photo edge flattens · the photo's bottom edge starts as a deep curve and flattens as it reaches the middle of the screen

Part of a bigger story

We're part of the Octopus Group, building businesses that outlive us.

Band rises over a photo · as the frame scrolls up, the Aubergine band slides up over the photo, its curve deepest while it moves

No pressure. No obligation.

Book a session
Company and team · Legal · Careers
Footer pulls up · the footer's top edge starts dipped, then pushes up into their convex curve as you reach the end of the page

Scroll

Sticky panels hold one side while the other moves. Scrolling always moves the page at normal speed: these sections stick, they never hijack. Some respond to how fast you scroll and ease back when you stop.

Your accountStocks and Shares ISAOpened in minutes
Your next sessionTuesday, 10:30With Priya, your coach
Portfolio value£367,000+15%
Step 1

Choose your account

An ISA, a pension or a general investment account. You can open one in minutes and transfer the accounts you already have.

Step 2

Meet your coach

Unlimited one-to-one sessions, at no extra cost. Your coach helps you set goals and stick to them.

Step 3

Watch your plan grow

See every account in one place, and check in with your coach whenever life changes.

Figures illustrative
Sticky split, image fixed · the photo side holds still while the steps scroll past. As each step reaches the middle, the photo crossfades, its blob morphs to the next of their shapes and the pop-up card swaps

Everything in one place

Bring all the pieces of your financial life together

Your pensions, savings and investments, in one clear forecast.

Pension
Investments
Savings
Partner pension
Rainy day fund
All in one forecast
Sticky split, text fixed · the headline holds on the left while their five pieces slide in from the right one at a time, each icon drawing as it lands, then the forecast line draws them together

How it works

Step 1

Choose your account

An ISA, a pension or a general investment account.

Opening my first ISA
Step 2

Meet your coach

Unlimited one-to-one sessions, at no extra cost.

Chatting to my coach
Step 3

Watch your plan grow

See every account in one place.

Saving for family days out
How it works, on the page scroll · their Phase 2 timeline. The pink line fills as you read, each step lifts to full strength as the line reaches its dot, and its doodle draws

Account 1 of 3

Stocks and Shares ISA

Invest up to your yearly allowance, with a coach on hand.

Learn more

Account 2 of 3

Personal Pension

Plan the retirement you want, and see how it's growing.

Learn more

Account 3 of 3

General Investment Account

More room to grow, once your ISA allowance is used.

Learn more
Stacked product cards · solid cards, no see-through. Each one slides up over the last, and the one underneath eases back to 94% and darkens slightly
Blob morphs on scroll · as the frame crosses the screen, the photo's blob moves through their three shapes and the lime blob behind turns the other way
Saving goal£84,00082% complete
Portfolio value£367,000+15%
JakeChelmsford
Figures illustrative
Cards with inertia · the faster you scroll, the more the cards trail and tip. They settle back with a soft spring when you stop
Leaving a legacyBuying a dream homeSaving for a dream holidayPlanning for retirementSecuring your family's futureLeaving a legacyBuying a dream homeSaving for a dream holidayPlanning for retirementSecuring your family's future
Strip moves with scroll speed · life goals slide only while you scroll, in your direction and at your speed, then glide to a stop. Nothing moves on its own
Planning for childcare or education
Saving for a dream holiday
Planning for the retirement you want
Saving for holidays
Buying a property
Holiday fund
Planning for retirement
Family days out
Saving for a dream holiday
Planning for childcare
Sideways drift · two rows of life goals slide in opposite directions as the page scrolls

Parallax

Layouts where each layer moves at its own pace as the page scrolls: image left and copy right, copy in the middle with images either side, type over a photo. Gentle, on desktop only.

Holiday fund£2,40060% complete

Our approach

Everything in one clear forecast

Your pensions, savings and investments. It's hard to be sure how they all fit together. We bring them into one clear, visual forecast, so you can see where you are today and what to do next.

See how it works
Figures illustrative
Image left, copy right · the blob moves slowest, the photo a little faster, the copy faster again, and the pop-up card and doodle fastest of all
Family days out

Proud to be different

Breaking the mould

We combine the best of humanity, smart technology and deep investment expertise.

Book a session
MarkLeeds
Copy in the middle, images either side · the polaroid drifts up slowly on the left, the cut-out faster on the right, and the copy holds steady between them
Saving for a dream holiday
DanEngineer from Chelmsford
Parallax layers · the blob slowest and turning, then Dan, the polaroid and his name pill fastest. Off on phones

See your future

Type over a photo · big type travels up over the photo at more than twice its speed. White on a dark part of the photo, with a soft shade behind
Childcare
A first home
Retirement
Cascade · three polaroids step down the frame, each one travelling faster than the last, so they fan out and close up as you scroll

Meet the team

Real people, up and down the country

Meet our coaches
Copy over the image edge · the copy card overlaps the photo and rises faster than it, so it slides further over the edge as you scroll

Text

Type arrives quietly: words lift from a mask, letters come into focus, a brush stroke paints under one word. Headings only. Body copy, risk lines and figures never animate.

We start with your life, not just your money

Word rise · each word lifts out of a mask. 700ms, 60ms apart

Bring all the pieces of your financial life together

Soft focus · letters come out of a light blur, 22ms apart. The calmest text load-in

Proud to be different

Breaking the mould

Brush stroke · the words rise, then their pink brush paints under the last one. 900ms

Our story

Over 25 years of industry experience

Brush on scroll · the brush paints along under the words as the frame moves up the screen, and back again if you scroll up

See your future

Explore different scenarios and trade-offs

Eyebrow types in · 40ms a letter with a Pink 700 caret, then the headline lifts

People we've helped

Leaving a legacySecuring your family's futureBuying a dream home

Titled by the life goal, as in their testimonials.

Rolling goal · the title slides up and out, then the next one rises in after it, so they never overlap. Every 2.8s, with a pause button

It's hard to be sure how your savings, investments and pensions all fit together. We bring everything into one clear, visual forecast.

Read-along · words darken as the frame moves up the page, as if read aloud. Tied to scroll, no easing

Leaving a legacy

Really knowledgeable and focused on what would benefit me most. For the first time I'm confident about my plans.

Lucy · Architect
Testimonial · the quote mark pops, the goal title rises, then the quote and name. Placeholder quote, written for the concept

Icons and doodles

Their hand-drawn icons and doodles draw themselves in, as if sketched with a pen. They redraw on hover. The ticks are their teal ticks.

Refreshingly humanOngoing support from real, friendly people
Proven expertiseExperienced investment specialists behind every plan
Exceptional valueCoaching included with every account
A force for goodA B Corp built to change the industry for the better
USP band · their four white icons draw in one after another, 250ms apart, each title lifting as its icon finishes. From the band under their homepage hero. Supporting lines are placeholders

Exceptional value

Coaching included, at no extra cost.

Icon in a blob · the lime blob swells, the coin stack draws itself in, then the title lifts. 1600ms draw

Stocks and Shares ISA

At a glance

  • Unlimited 1-to-1 coaching included
  • Invest up to your yearly allowance
  • Transfer an ISA you already have
Service card ticks · from their "Our services" cards. The icon draws in its blob, then each teal tick pops and its check draws, 200ms apart
JulieBristol
Doodles around a person · Julie rises, then their bar chart and cloud doodles draw beside her in turn and her name pill slides in
PensionInvestmentsSavingsPartner pensionRainy day fund
Ticklist with Penny · their "Graphic 1": the pill settles under him, ticks pop in one by one, then Penny climbs on top. Penny needs sign-off
Icon tiles · hover or tab to a tile: the blob morphs to the next of their shapes and the icon redraws itself. The whole tile is one link

What we're known for

  • Everyone goes through our training and accreditation
  • Ongoing support and mentorship from our head office
  • Every call recorded for quality
  • Dedicated team to monitor and review calls
Checklist draws in · each box's check draws, then its line lifts, 220ms apart. From their coaches page
Video play button · their small square pink play button. On hover or focus it grows, the triangle nudges forward and the still eases in to 104%

Images

People and photos sit in their blobs. Blobs swell and morph between their own shapes, photos settle from a slight zoom, polaroids drop like paper on a desk, and one photo hands over to the next.

Life at Octopus Money

Gallery · their gallery: three photos in view, square arrow buttons and pink dots. It snaps a photo at a time. The photo in the middle eases up to full size; the others sit back at 94%
Your coach
Cut-out rises · the blob swells, then the person rises out of it with the head breaking the top edge. Their coin doodle draws last
Blob grows and morphs · the photo opens from a small blob that grows and changes into their shape. 1400ms
Blob opens the next photo · the next photo grows out of a small blob in the middle, morphs through their shapes and opens to fill the frame. Every 3.6s
Planning for childcare or education
Saving for a dream holiday
Planning for the retirement you want
Polaroids drop in · each one drops, turns and settles, 160ms apart. Penny peeks over once (needs sign-off)
Planning for childcare or education
Saving for holidays
Planning for the retirement you want
Polaroid shuffle · every 3s the front polaroid slides off and goes to the back of the pile. Pause button included
Crossfade in a morphing blob · every 4s the photo crossfades and the blob eases into the next of their shapes. 1200ms
Buying a property

Buying a property

Whether it's your first home or trading up, we'll build you a plan to get there.

Goal collage · from "How we've helped people like you". Torn paper first, then the photo settles, their tape sticks it down and the key doodle draws

Pop-up cards

Their frosted cards from the redesign's "Graphics" set: a saving goal, a portfolio value, dedicated advisers, a name pill. They always sit on top of the person, arrive last and count once. Figures are illustrative.

Saving for a new car£12,00082% complete
JakeChelmsford
Figures illustrative
Saving goal · Jake rises, the coin doodle draws, then the card pops on top, the bar fills and the figure counts. The name pill slides in last
JulieBristol
Portfolio value£667,000+15%
Figures illustrative
Portfolio value · Julie's chart doodle draws, her pill slides in, the card rises and counts, then the +15% pops with its arrow
Dedicated advisers
ChantelleFinancial adviser
Dedicated advisers · the card settles, then each adviser pops in, 80ms apart. Chantelle's role slides in under her
NikkiAccountant from Bristol
Portfolio value£367,000+15%
Figures illustrative
Name and value · their "Graphic 3" for Nikki, on orange. The pill and card arrive from opposite sides
£250 addedTo your Stocks and Shares ISA
Session bookedTuesday at 10:30 with Priya
Goal reachedHoliday fund: £3,000
Example notifications
Updates stack up · three small updates slide in over the photo, 800ms apart, each icon drawing as it lands. Their tone, written for the concept
Your next sessionTuesday 15 June, 10:30With Rob, your coach
Join the callReschedule
Next session card · a larger card for account pages. It rises, the coach's avatar pops, and the human doodle draws alongside. Name and date are placeholders
Saving goal£84,00082% complete
Portfolio value£367,000+15%
Holiday fund£2,40060% complete
DanEngineer from Chelmsford
Figures illustrative
Cards take turns · on one portrait, the card swaps every 3.2s: it lifts away and the next rises in and counts. Pause button included
PensionInvestmentsSavings

Everything in one place

On Aubergine · the same cards on a dark band. Frosted white holds up on dark, with Aubergine text

Infographics

Their forecast card, opened up into a family of calm charts in their chart colours. Shapes draw in once, numbers count once, and every chart is labelled illustrative. Fees never count or move.

See your futureIllustrative · no real figures
PensionInvestmentsCash
Forecast draws in · from their "Our approach" card. Each layer wipes in left to right, 180ms apart, in their chart colours
4pots, one plan
  • Investments 40%
  • Pension 30%
  • Cash 18%
  • Rainy day fund 12%
Illustrative mix
Your mix · each slice draws round the ring in turn, then its legend line lifts. Rounded ends, a small gap between slices

Your goals

New car82%
Holiday fund60%
First home35%
Retirement18%
Illustrative
Goals at a glance · bars grow one after another in teal, each percentage counting with its bar
Portfolio valueIllustrative
Today£367,000+15% this year
Growth line with a pop-up · the line draws left to right with a soft fill beneath, a dot rides its end, then their frosted card pops above it and counts

Everything in one place

Bring all the pieces of your financial life together

PensionInvestmentsSavingsPartner pensionRainy day fund
Your forecast
All the pieces come together · their five pieces float in from around the frame, then glide into the forecast card, which opens and draws its line. From their "Bring all the pieces together" message

Our story

Over 25 years of industry experience

We're part of the Octopus Group, a family of businesses doing things differently. We set out to build businesses that will outlive us.

2000octopuslegacyIt all started with Octopus Investments.
2015octopusenergyOctopus helped launch Octopus Energy.
2023octopusmoneyOctopus Money was born to make good money help available to more people.
Our story timeline · their timeline cards with the orange tab. The line draws, then each card rises and its year's tab folds down. Lines from their About page design; facts to confirm

What you pay

x.xx%Platform feex.xx%Fund costs£0Coaching, included
Fees, explained · the bar builds once, part by part. The figures are on screen from the start and never count. Their audit asked for a fee graphic. Fee figures to come from the live site
82%New car
60%Holiday
35%First home
Illustrative
Goal rings · three rings fill in turn, 200ms apart, each in its own chart colour

50+

advisers & coaches Figure to confirm

Odometer · each digit rolls into place, 1600ms. Only on a confirmed figure
82%
Illustrative

Saving for a new car

On track for your goal.

Goal ring · the ring fills and the percentage counts once, 1600ms

Cards and grids

Every card answers back on hover and keyboard focus: it lifts, its blob turns, its arrow steps forward. Carousels snap a card at a time and can be dragged, swiped or stepped with the arrows.

Service cards · their "Our services" cards. On hover or focus the card lifts, the icon's blob morphs, the icon redraws, the ticks nudge in turn and "Learn more" steps forward. Placeholder lines, investing-led

People we've helped

Leaving a legacy

Really knowledgeable and focused on what would benefit me most. I'm confident about my plans.

Lucy Architect
Securing your family's future

Supportive and encouraging. I have someone helping me plan for the future.

Justin Construction manager
Buying a dream home

I'm so excited. I can finally see exactly when we'll be able to move.

Michael Finance consultant
Saving for a dream holiday

My coach made it simple. We're going next summer.

Grace Nurse
Planning for retirement

For the first time, all my pensions make sense together.

Raj Engineer
Testimonial carousel · their quote cards, titled by the life goal, with pink arrows and dots. Cards lift on hover. Placeholder quotes, as in their design
Team 1Book a session
Ben CarterFinancial adviser

Ben helps people bring their pensions and savings into one plan, and stay on track as life changes.

Saving for a dream home
Tom HughesInvestment coach

Tom loves helping first-time investors feel confident about their choices.

Saving for a new bike
Adviser team accordion · their "Pod style 2". "Meet the team" opens the panel with a smooth reveal and the plus turns into a minus; each profile rises in. Names and bios are placeholders
Bento grid · five tiles in one grid: a photo, a figure, a person, a quote and a call to action. Each lifts on hover, the photo eases in, the doodle redraws and the arrow box fills. Placeholder lines
Resource cards · the photo sits in a blob that morphs on hover while the photo eases in to 106%. The arrow steps forward. Placeholder titles
Photo grid · on hover or focus a photo's corners soften into a blob-like curve, the photo eases in, and its caption rises from a frosted strip
Coach carousel · their coach cards in a row that snaps a card at a time, with their square arrow buttons. "Meet Tom" appears on hover and focus
Proof cards · three tiles with their doodles. On hover the card lifts, the pastel deepens and the doodle redraws itself

Cursor

Kept to a few, quiet moments. Cursor effects run only on a fine pointer and each has a keyboard and touch equivalent. Nothing important lives only on hover.

Magnetic button · within 170px the primary button leans towards the cursor, up to 9px, and goes lighter. A lime blob behind it follows a beat later, then settles back

Planning for retirement

See the life you're planning for

Blob reveal · a blob-shaped window follows the cursor a beat behind and shows the photo under the Stone panel. It grows when the cursor is over the frame. On touch or focus it rests on the right
Planning for childcare or education
Polaroid tilt · the polaroid turns towards the cursor up to 12°, a soft light follows, and the blob behind leans the other way
Magnetic arrow button · their 44px square arrow button, with the same pull and a blue blob behind. The arrow turns to point forward on hover

Ambient

Slow, quiet movement behind content. Only while on screen, always with a pause button, never behind body copy.

No pressure. No obligation.

Just a chance to see how we can help.

Breathing blobs · three blobs morph slowly between their shapes, 9s a cycle, behind a short headline
Saving for a rainy day
Penny peeks · Penny rises over the polaroid's edge, waves once and stays. Small, once, never looping. Needs sign-off at the fresh-eyes review
Certified B CorporationPart of the Octopus GroupUnlimited 1-to-1 coachingOver 25 years of industry experienceCertified B CorporationPart of the Octopus GroupUnlimited 1-to-1 coachingOver 25 years of industry experience
Credentials strip · a 40s loop that runs only on screen, with a pause button. Regulated lines, such as protection wording, go in exactly as supplied and never move

Timing

One lead motion per section, at most one supporting. Arrivals settle softly, buttons follow their 300ms ease out, and anything on scroll follows the scroll.

MotionDurationEasing
Buttons, links and focus300msEase out
Card lift, hover blob morph400 to 600msSoft
Menus, accordions, tabs, header fold450 to 500msIn-out
Word rise700ms, 60ms a wordSoft
Soft focus900ms, 22ms a letterSoft
Eyebrow type-in40ms a letterLinear
Brush stroke900msIn-out
Blob swell1000msSoft
Cut-out rise1000 to 1100ms, 200ms after its blobSoft
Icon and doodle draw1100 to 1600ms, 250ms apartIn-out
Pop-up card800ms, after the personSoft
Name pill700ms, 150 to 300ms after the cardSoft
Blob grow and morph1300 to 1400msIn-out
Photo settle1600 to 1800ms, from 112%Soft
Polaroid drop800ms, 160ms apartSoft
Curved edge on arrival800msIn-out
Count-up and odometer1300 to 1600ms, onceIn-out
Chart, ring and bar draw1200 to 1600ms, 180 to 250ms apartIn-out
Crossfade, curve wipe, card swap1200ms, every 3.2 to 4sIn-out
Breathing blobs9s a cycleIn-out
Credentials strip40s a loopLinear
Sticky panels, curve growth, parallax, morph, read-alongTied to scroll positionLinear
Inertia, curve bounce, goal stripTied to scroll speed, settles in about 600msSpring

Ease out: cubic-bezier(0,0,.58,1), their button rule. Soft: cubic-bezier(.22,1,.36,1). In-out: cubic-bezier(.65,0,.35,1). Spring: each frame moves 10% of the way to its target.

04Logo

Logo scale

The supplied wordmark at the sizes the site uses. Clear space is the height of the first "o" on every side.

Octopus Money
236px · desktop header and footer
168px · mobile header
100px · minimum
96px · stacked

Logo usage

Aubergine on light, white on dark. No pink logo. On a photo, sit it on a solid panel.

On Stone · Aubergine
On Aubergine · white

05Rules

From the brief

What their partner brief and the 2025 audit ask of the design, and how the kit answers.

Make the human support obvious

Brief: "That human support is what sets us apart"

Cut-out coaches lead both heroes, the advisers chip sits above the headline and the coach-led hero ends on booking a session.

The homepage starts fresh

Brief: "a completely fresh start"

New hero ideas built from their own Phase 1 hero, cut-outs and blobs, not a new identity.

Brand and identity are decided

Brief: "Already decided, please don't reopen"

Every shape, texture, colour and photo comes from their Figma files. Motion is the new layer.

Explain fees, risk and trust clearly

Brief and audit: fees "too text heavy"

A calm fee graphic that builds once with its figures already in place. Risk lines and regulated wording never animate.

A slick hand-off into booking and account opening

Brief: journeys to "be slick"

One primary button per view, magnetic on a fine pointer, and a booking card that shows the next step.

Penny's role is open

Brief: "Our use of our mascot, Penny"

Penny appears small and once, flagged for sign-off. Never looping, never the hero.

Collage looked less professional

Audit: "collage style… less professional"

One blob group per section. Polaroids in small sets of up to three.

Built on their WordPress, maintained as today

Brief: no proprietary builders or tied-in tools

Every piece is plain CSS and a few lines of script per block. No animation library, no licensed plugin.

Rules

How each piece is used, and why.

PieceUseWhy
Their brandTheir blobs, texture, polaroids, brush, Penny and cut-outs, as suppliedBrand and identity are decided
HeroCut-out people on blobs, one headline, one line, one pink button. The coach visible above the foldHuman support sets them apart
Cut-outsWhite outline, head breaking the blob's top edge, body inside itTheir coach card, at any size
BlobsBehind people, photos and cards. One group per section. Never behind body textCalm, readable layouts
PinkOne primary button per view. Pink 700 for pink text below 24pxPink means action, and must pass AA
MotionOne lead motion per section, at most one supporting. Arrive, settle, stayProfessional, calm, inviting
Text motionHeadings and eyebrows only. Body copy, figures, risk lines and regulated text stay stillCompliance and readability
ScrollSticky splits, parallax, morph and progress follow the scroll position. A few pieces respond to scroll speed and settle when you stop. Never scroll-jackingThe page always scrolls normally
CursorFine pointers only, a few quiet moments, with a keyboard and touch equivalent. People never move with the cursorNothing important only on hover
Pop-up cardsOn top of the person, after the person, counting once. Only the cards may drift a few pixelsTheir Figma graphics, kept calm
Icons and doodlesDraw in as if sketched, redraw on hover or focusTheir hand-drawn style
Menus and accordionsClick or Enter to open, Escape to close, one answer open at a timeKeyboard and screen reader friendly
Placeholder copyWritten from the brief, never brackets. Names, quotes and figures replaced before launchConcepts read like the real thing
LoopsOnly on screen, with a visible pause buttonWCAG 2.2.2
NumbersCount once, and only approved figures. Illustrations labelledFinancial promotion rules
PennySmall, once, on arrivalHer role is under review
Reduced motionEvery piece shows its final state. Loops and parallax offAccessibility

Technical guardrails

The rules every stage follows, from tokens to launch. Load this file into Claude Code before building anything.

octopus-money-website-rules.mdMarkdown, for people and for Claude