Design System Inspiration of Octopus Energy

1. Visual Theme & Atmosphere

Octopus Energy is the UK's most awarded energy supplier, and its digital presence makes an immediately striking and distinctive impression: a deep cosmic indigo (#100030) canvas saturated with electric magenta (#f050f8) and cyan (#60f0f8) — a palette that feels more like a rave-poster-turned-utility-brand than anything a traditional energy company would dare. This is fully intentional. Octopus has built an identity that positions clean energy as something exciting, modern, and even joyful, rather than the dull obligation of switching suppliers. The result is a screen that glows at you from the dark like a neon sign in a midnight sky.

The custom typeface Chromatophore — named after the pigment cells in octopus skin — carries all text at a single weight family (400 for body, 500 for headings and buttons). It is a humanist sans-serif with just enough warmth to counterbalance the electric palette, never feeling cold or corporate. Headlines sit at 36px weight 500 on a 1.5 line-height, colored in the signature cyan (#60f0f8), providing a cool counterpoint to the hot magenta CTA. Body copy uses the near-white #f0ffff (azure-tinted white) rather than pure white, softening the contrast against the deep background.

What makes the system work is the disciplined three-color hierarchy: deep indigo for canvas, magenta for action, cyan for headlines. The mascot Constantine the Octopus provides the warmth and character that illustration-heavy energy brands need; the visual system gives it a technological edge. There are effectively no drop shadows — this is a flat, glow-based system where brightness and color temperature create depth.

Key Characteristics:

• Chromatophore custom font at weight 500 for all interactive elements — tactile, brand-exclusive
• Deep indigo (#100030) as the page canvas — dark-mode-native before dark mode was fashionable
• Signature magenta (#f050f8) reserved strictly for primary CTAs and borders
• Cyan (#60f0f8) for all major headings — cool complement to the hot CTA
• Azure-tinted near-white (#f0ffff) for body text — gentler than pure white on dark backgrounds
• Zero shadows — depth via color temperature and background tint variation (#180048)
• 12px border-radius on all interactive elements — rounded but not pill
• Cookie-banner button system doubles as the primary component pattern

2. Color Palette & Roles

Primary Action

• Octopus Magenta (#f050f8): The single primary action color — CTA button backgrounds, borders on outlined buttons. The brand's most saturated and eye-catching hue, inspired by the deep-water bioluminescent signature. Used only for action; never decorative.
• Deep Indigo (#100030): Page canvas and primary background. The "night sky" base that makes the magenta and cyan pop. Also used as foreground text color on magenta buttons to create readable contrast.

Surface

• Canvas Alt (#180048): Slightly lighter indigo for elevated card surfaces, sticky nav background (rgba(16, 0, 48, 0.9)), and product feature cards. Creates hierarchy without shadow.
• Brand Accent Blue (#5840ff): A vivid blue-violet, seen in secondary branded areas — appears on feature illustration backgrounds and accent surfaces.

Text & Heading

• Cyan (#60f0f8): H1 and H2 heading text color across the site. An electric aqua-teal that reads as energetic and modern against the dark indigo canvas.
• Foreground (#f0ffff): Primary body text, nav links, and secondary elements. Azure-white rather than pure white — it has warmth.
• Muted (#a49fc8): Tertiary text and fine-print items on the dark canvas.
• On-primary (#100030): Text color used on magenta buttons — the deep indigo as foreground ensures readable contrast.

3. Typography Rules

Font Family

• Primary: Chromatophore — Octopus Energy's custom typeface, named after octopus chromatophores (pigment cells). Fallback: helvetica, arial, sans-serif.
• No monospace/code variant observed on marketing surfaces.

Hierarchy

Principles

• Single typeface, all surfaces: Chromatophore carries 100% of the typographic load. No secondary or mono companion visible on the marketing surface.
• Medium weight as the default: Weight 500 is used for all interactive and heading elements; weight 400 for body paragraphs only.
• H1 = H2 in size: The 36px heading scale does not differentiate H1 from H2 by size — context and color do the hierarchy work (cyan for main, white for sub).
• Line height 1.5 throughout: A single, generous line-height ratio applies across all sizes — simplified and consistent.

4. Component Stylings

Buttons

Primary (Standard)

• Background: #f050f8
• Text: #100030
• Radius: 12px
• Padding: 12px 16px
• Font: 16px Chromatophore weight 500
• Border: 2px solid #f050f8
• Use: Standard primary action (cookie accept "That's cool", navigation CTAs)

Primary (Large / Tariff CTA)

• Background: #f050f8
• Text: #f0ffff
• Radius: 12px
• Padding: 16px 20px
• Font: 18px Chromatophore weight 500
• Height: 56px
• Border: 2px solid #f050f8
• Use: Large hero CTA — "Get a quote" on tariffs page

Outlined / Secondary

• Background: transparent
• Text: #f050f8
• Radius: 12px
• Padding: 12px 16px
• Font: 16px Chromatophore weight 500
• Border: 2px solid #f050f8
• Use: Secondary option alongside primary (cookie "Fine tune")

Ghost / Nav

• Background: transparent
• Text: #f0ffff
• Radius: 12px
• Padding: 12px 16px
• Font: 16px Chromatophore weight 500
• Border: 2px solid transparent
• Use: Navigation link-buttons — "Energy", "Heat pumps", "Log in"

Inputs

There are two distinct postcode input surfaces on the site, and they are styled differently.

Hero Homepage Postcode Input (#hero-quote-form-field-postcode)

• Background: #ffffff (white)
• Text: #000000 (black)
• Font: 18px Arial weight 600 (system font, not Chromatophore)
• Radius: 12px 0px 0px 12px (left-rounded; the attached CTA button is on the right)
• Height: 60px
• Padding: 16px
• Use: Postcode entry in the homepage hero "Get a quote" attached-CTA form

Hero "Get a Quote" Attached CTA Button (paired with the hero input above)

• Background: #f050f8
• Text: #f0ffff
• Radius: 0px 12px 12px 0px (right-rounded; completes the pill formed with the input)
• Padding: 16px 20px
• Font: 18px Chromatophore weight 400
• Border: 2px solid #f050f8
• Use: Inline submit button attached to the hero postcode field

Tariffs Page Postcode Input (#postcode)

• Background: transparent (rgba(0,0,0,0))
• Text: #f0ffff
• Font: 18px Chromatophore weight 400
• Radius: 0px (no rounding — full-width standalone field)
• Height: 60px
• Padding: 16px
• Border: 2px solid transparent
• Use: Full-width postcode entry on the /tariffs/ page, separate from the large magenta "Get a quote" button below it

Cards

Product Feature Card

• Background: #180048
• Text: #100030
• Radius: 12px
• Use: Product category cards (Energy / Heat pumps / Solar & batteries / Electric vehicles) sitting on the deeper #100030 canvas

Badges

Trust Indicator Pill

• Background: #180048
• Text: #f0ffff
• Radius: 9999px
• Font: 12px Chromatophore weight 400
• Use: Award and rating trust pills ("Which? Recommended Provider", "Rated 4.8 stars")

Navigation

Top Nav

• Background: rgba(16, 0, 48, 0.9) (sticky, slightly translucent)
• Text: #f0ffff for links, #60f0f8 for logo wordmark
• Font: 16px Chromatophore weight 500
• Radius: 12px on nav items
• Height: ~60px
• Use: Sticky global nav with product category links + "Log in" ghost button

---

Verified: 2026-06-23 Tier 1 sources: https://octopus.energy/ (homepage, live DOM computed style); https://octopus.energy/tariffs/ (tariff products page, secondary live inspect) Tier 2 sources: getdesign.md/octopusenergy — 0 results (not listed); styles.refero.design/?q=octopus+energy — no matching brand card found Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 16px
• Scale observed: 4px, 8px, 12px, 16px, 20px, 24px, 48px, 64px
• Postcode input inner padding: 16px; button padding: 12–24px

Grid & Container

• Centered single-column hero with the 36px cyan headline anchoring the top
• 4-column product cards below (Energy / Heat pumps / Solar / EV) on desktop
• Full-width dark sections; no container border — the indigo bleeds edge to edge
• Max content width: approximately 1200px centered

Whitespace Philosophy

• Dark-canvas breathing room: generous vertical padding between sections keeps the dark canvas from feeling claustrophobic
• Color as separator: different tints of indigo (#100030 vs #180048) create section breaks without any visible borders or shadows
• Illustration as content: the Constantine octopus mascot fills hero space that other brands give to photography — character, not whitespace

Border Radius Scale

• Standard (12px): all buttons, inputs, nav items — consistent and rounded
• Card (12px): product feature cards match the button system
• Full pill (9999px): trust indicator badges only

6. Depth & Elevation

Shadow Philosophy: Octopus Energy is a shadow-free system. Live inspection confirmed box-shadow: none across all major elements — buttons, cards, nav, and hero. Depth is handled entirely by background-color contrast between the two indigo tints (#100030 vs #180048), creating a low-key depth that preserves the neon-on-dark aesthetic. Shadows would add a material realism that conflicts with the brand's otherworldly, bioluminescent feel.

7. Do's and Don'ts

Do

• Use Chromatophore at weight 500 for all headings and buttons
• Use magenta (#f050f8) exclusively for primary CTAs and their borders
• Use cyan (#60f0f8) for H1 and H2 headings on the dark canvas
• Keep the page canvas dark (#100030) — the brand's identity lives in the contrast
• Use #f0ffff azure-white for body text rather than pure #ffffff
• Apply 12px radius to all interactive elements — consistent and rounded
• Use #180048 for card and elevated surfaces instead of shadows
• Keep typography at weight 500 for interactive elements, 400 for body

Don't

• Use drop shadows — Octopus is a flat, glow-based system
• Use magenta for decorative or text elements — it signals action only
• Use a light canvas (#ffffff) for any page section — the brand lives in darkness
• Use pure white text (#ffffff) — the brand uses azure-tinted #f0ffff
• Use font weight 700 or bold — Chromatophore 500 is the maximum
• Use rounded pills on buttons — 12px is the brand's radius cap (pills are for badges only)
• Mix cyan into interactive elements — cyan is for headings, magenta is for action
• Use a secondary typeface — Chromatophore is the sole font across all surfaces

8. Responsive Behavior

Breakpoints

Touch Targets

• Nav buttons at 46px height with 12px 16px padding — well within touch target guidelines
• Large CTA buttons at 56px height on tariff pages — generous for mobile
• Postcode input at 60px height for easy tap

Collapsing Strategy

• Hero headline stays at weight 500, scales down on mobile
• 4-column product cards collapse to 2-up then single column
• Sticky nav compresses to hamburger toggle at mobile
• Dark background sections maintain full-width indigo treatment

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Octopus Magenta (#f050f8)
• Page canvas: Deep Indigo (#100030)
• Card surface: Indigo Alt (#180048)
• Heading text: Cyan (#60f0f8)
• Body text: Azure White (#f0ffff)
• Muted text: Muted Purple-Grey (#a49fc8)
• On-primary text: Deep Indigo (#100030)
• Accent blue: Brand Accent (#5840ff)

Example Component Prompts

• "Create a hero section: #100030 background. Headline 36px Chromatophore weight 500, color #60f0f8, line-height 1.5. Body text 18px weight 400, #f0ffff. Postcode input: 60px height, #ffffff white background, #000000 black text, 18px Arial weight 600, radius 12px 0 0 12px (left-rounded). Inline 'Get a quote' CTA button: #f050f8 bg, #f0ffff text, 18px Chromatophore weight 400, radius 0 12px 12px 0 (right-rounded), 16px 20px padding, 2px solid #f050f8 border."
• "Design a product card: #180048 background, #100030 text, 12px radius. Product name at 16px Chromatophore weight 500, #100030. No shadow."
• "Build a trust badge pill: #180048 bg, #f0ffff text, full 9999px radius, 12px Chromatophore weight 400, 4px 12px padding."
• "Create a nav bar: rgba(16, 0, 48, 0.9) bg, sticky. Nav links 16px Chromatophore weight 500, #f0ffff, 12px radius, 12px 16px padding. Logo text in #60f0f8. Log in ghost button: transparent bg, #f0ffff text, 12px radius."

Iteration Guide

1. Canvas is always dark (#100030) — the hero postcode input is an exception (white #ffffff bg, #000000 text, Arial 600) for readability inside the attached-CTA component
2. Magenta (#f050f8) is action-only; don't spread it to headings or decorative elements
3. Cyan (#60f0f8) is heading-only; don't use on buttons
4. Standalone buttons use 12px full radius; attached-CTA pairs split the radius (input: left-round 12px 0 0 12px, button: right-round 0 12px 12px 0); full-width tariffs input uses 0px radius
5. No shadows anywhere — use #180048 for elevation
6. Body text is #f0ffff (not #ffffff) — the azure tint is intentional; #ffffff only appears as the hero postcode input background
7. Font is Chromatophore weight 500 for headings/buttons, weight 400 for body; the hero postcode input uses Arial weight 600 (system font, not Chromatophore)

---

10. Voice & Tone

Octopus Energy's voice is warm, direct, and cheeky — the energy brand that doesn't talk like an energy brand. Where competitors use utility-grade corporate prose ("Switching is simple — just provide your account details"), Octopus uses the friendly confidence of a trusted friend who happens to know a lot about renewable energy. The homepage headline "Join the UK's most popular energy supplier" isn't a claim — it's a casual invitation. The brand's playfulness is genuine rather than performed; it flows from a founding mission (make clean energy affordable and accessible) rather than a marketing brief.

Voice samples (verbatim from live homepage):

• "Join the UK's most popular energy supplier" — H1 hero headline, welcoming not boastful. (verified live 2026-06-23)
• "Everything you need for a cheaper, greener home & business" — H2 section heading, benefit-led. (verified live 2026-06-23)
• "Great value energy for your home or business" — H2, plain and accessible. (verified live 2026-06-23)
• "Our standard prices have always been cheaper than the price cap" — body copy, confident claim with data behind it. (verified live 2026-06-23)

Forbidden register: corporate energy jargon, fear-of-missing-out pricing urgency, vague greenwashing ("we care about the planet"), defensive contract language foregrounded in user flows, and excessive exclamation points.

11. Brand Narrative

Octopus Energy was founded in 2015 by Greg Jackson (CEO) as a vertically-integrated energy retailer and technology company, built on the conviction that the UK energy market was broken — overpriced, opaque, and hostile to innovation. The company's proprietary Kraken platform (a cloud-based energy management system) powers Octopus's ability to offer smart tariffs, agile pricing, and direct-to-bill renewable energy at a scale that incumbents cannot match.

The brand's defining move was refusing the norms of utility-brand communication: instead of institutional imagery and corporate language, Octopus built a brand around an octopus mascot called Constantine, a playful illustration character whose many arms hold products (energy, heat pumps, solar, EV charging) like a friendly multi-tasker. The deep indigo and magenta palette — far from any competitor's safe blues and greens — signals that this is a technology company wearing a utility's licence, not the other way around.

By 2023-2024, Octopus Energy had become the UK's largest domestic energy supplier by customer numbers, with the Which? Recommended Provider status held for nine consecutive years. The Kraken platform has been licensed internationally (to E.ON, EDF, Origin Energy in Australia, and others), making the company's technology as significant a revenue stream as its retail energy business.

What Octopus refuses: greenwashing without substance, the incumbent utility's "cheapest deal" race to the bottom, and the assumption that sustainability has to be dull. What it embraces: radical transparency on pricing, a brand that feels like a tech company, and the position that clean energy is a source of joy and pride for households — not just an obligation.

12. Principles

1. Technology over incumbency. Octopus's Kraken platform is the product; the energy licence is the delivery mechanism. UI implication: the interface feels like a tech product — custom font, dark canvas, electric palette — not a utility bill.
2. Warmth in the unexpected place. A grid-connected household energy company built a beloved mascot. UI implication: Constantine appears in hero illustrations; the brand earns affection through character, not just price.
3. Transparency as differentiation. In a market famous for opaque pricing, Octopus publishes its tariff rates prominently and compares them to the price cap on its own homepage. UI implication: pricing copy is upfront, direct, and data-backed.
4. Clean energy as cause and commerce. The brand never separates "cheap" from "green" — they are the same offer. UI implication: sustainability language is woven into product descriptions, not siloed in a CSR section.
5. One action, one color. Magenta (#f050f8) means "do this now." UI implication: the CTA button stands as the only saturated warm hue on the deep indigo canvas — it cannot be missed.

13. Personas

Personas below are fictional archetypes informed by publicly observable Octopus Energy user segments (UK households switching energy suppliers, early-adopter EV and solar homeowners, sustainability-conscious renters), not individual people.

Sarah Thornton, 37, Manchester. A dual-income household manager who switched to Octopus because a neighbour mentioned the 4.8-star rating. She doesn't care deeply about energy tariff mechanics — she wants the cheapest bill and no drama when something goes wrong. The postcode-to-quote funnel on the homepage converted her in under two minutes. She now uses the app primarily to track usage and has signed up for an Agile tariff after reading about EV overnight charging savings.

James Okafor, 44, Bristol. A sustainability-oriented homeowner who installed solar panels through Octopus Solar and added a home battery. He chose Octopus because the Kraken technology means his excess solar export is automatically credited at market-rate, not a fixed export tariff. He is the kind of user who reads the blog and recommends Octopus to colleagues with EVs.

Priya Mehta, 28, London. A renter in a flat who cannot control which supplier her landlord uses, but has bookmarked Octopus for when she moves. The brand's tone resonates with her; she follows the @OctopusEnergy account partly because Constantine the mascot makes energy content feel like something she actually wants to read.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion supports the brand's energy and warmth without becoming frivolous. The Constantine mascot illustration may entrance with a gentle float-in on hero load. Button hover shows a subtle brightness shift on the magenta (#f050f8 → slightly lighter); outlined buttons fill on hover. No spring or bounce — the brand is playful but its energy infrastructure must feel dependable. Under prefers-reduced-motion: reduce, all transitions collapse to instant; Constantine does not animate on load.