The Casphone family,
unified by design.
A single design system powers all three Casphone websites. They share the same typography, spacing, components and neutral palette — and are told apart by one thing only: their brand accent colour.
00 — Overview
How to read this system
This document is the source of truth for designers and AI agents building any of the three sites. Read it top-down: foundations define the tokens, components assemble them, and the brand sections show the tokens in action. Nothing in a component is hard-coded to blue, magenta or violet — every coloured element references a --brand-* token that the theme supplies.
Shared skeleton
Identical neutrals, type scale, spacing, radii, shadows and component anatomy on every site. The customer always feels the same Casphone quality.
One variable changes
A brand = a single swapped set of --brand-* custom properties. Repairs is blue, Mobile is magenta, NBN is violet. That's the whole difference.
Built for agents
Every token is named, tabulated and exportable (CSS + JSON). §13 is a copy-paste contract so an automated build produces consistent, accessible UI.
01 — Brand architecture
A master brand with three offers
Casphone is the master brand. Each site is a branded offer — same parent, same trust, a focused product. Naming is always “Casphone” + descriptor. The accent colour and descriptor word are the only identity differences.
Casphone — the flagship. Phone, tablet, computer & console repairs across 30+ stores.
Casphone Mobile — SIM-only & device plans on the Telstra wholesale network.
Casphone NBN — unlimited home & business internet, no lock-in, local support.
02 — Logo & lockups
One wordmark, three lockups
The lockup is the Casphone “C” mark + the casphone wordmark (Plus Jakarta Sans, 800) + a sub-brand descriptor set in tracked caps, locked beneath the wordmark and flush to its right edge, over a hairline rule that spans the wordmark’s full width. The one “C” mark is shared by all three brands and simply recolours to each accent.
Primary lockups · side by side
Repairs · no descriptor needed (flagship)
Mobile · sub-brand stacked under the wordmark
NBN · sub-brand stacked under the wordmark
On dark
Mark only (favicon / app icon)
03 — Colour system
Neutrals do the work, accents do the talking
The neutral and semantic palettes are shared and fixed across all three brands. Only the accent ramp swaps. Each brand primary (--brand-600) clears WCAG AA for white text and for text on white (≈5.2–5.7:1).
Brand accents · the three primaries
Blue ramp · Casphone (Repairs)
Magenta ramp · Casphone Mobile
Violet ramp · Casphone NBN
Neutral / Slate (shared)
Semantic (shared)
04 — Typography
Two typefaces, one voice
Plus Jakarta Sans (700–800) for headlines and the wordmark — friendly, modern, a little geometric. Inter (400–600) for body, UI and numbers — neutral and highly legible. Both are free on Google Fonts and weigh little.
05 — Space, radius & elevation
A 4px grid, soft corners, gentle shadows
Spacing steps on a 4px base. Corners are generously rounded for an approachable, modern feel. Shadows are soft and low-contrast — brand “glow” is reserved for primary CTAs only.
Spacing scale (px)
4
8
16
24
32
48
64
96
Radius
Cards 16–20px · buttons & pills 999px · inputs 12px.
Elevation
Layout
Max content width 1180px · gutters 24px (mobile 16px) · 12-column grid, 24px gap · breakpoints sm 640 · md 768 · lg 1024 · xl 1280. Sections breathe with 72–96px vertical rhythm.
06 — Icon & imagery
Line icons, warm photography
Icons are 2px stroke, rounded caps/joins, 24px grid — one consistent set across all sites. The logo mark is the shared Casphone “C” — identical on all three sites, only the colour changes — while category icons (repair, SIM, connection) share one line style. Photography is bright, real and local; product shots on clean neutral backgrounds.
Repair
Screen, battery
SIM plan
Mobile
NBN
Internet
Warranty
Protected
Same day
Fast
Local
30+ stores
No lock-in
Month to month
Support
Real people
07 — Buttons & controls
The same controls, recoloured by theme
Primary buttons carry the brand fill + glow. Secondary and ghost variants stay quiet. Notice every control below is identical markup — only the wrapping .theme-* class differs.
Casphone · Blue
Casphone Mobile · Magenta
Casphone NBN · Violet
Anatomy & states (shown in NBN violet)
08 — Cards & plan cards
The pricing card is the workhorse
Mobile and NBN both sell plans; Repairs sells fixed-price services. They share one card anatomy: label → headline price → feature list with brand ticks → CTA. The “Most popular” state uses a brand ring + ribbon. Real data below is pulled from the live plan configs.
- 30–60 min in-store
- Premium-grade parts
- 12-month warranty
- Telstra wholesale network
- No lock-in contract
- Unlimited talk & text
- Data banking included
- Unlimited data
- No lock-in, no credit check
- Great for 4K & small families
- Local store support
Feature cards
Unlimited
No excess charges, ever.
Local support
A real team near you.
Stat block
09 — Nav, hero & footer
Page-level patterns
The header, hero and footer are shared layouts. The footer is always the deep --ink charcoal with a brand-accented logo, so cross-selling between the three sites feels native.
Header / nav · Casphone Mobile
Hero · Casphone NBN
Footer · shared dark, brand-accented (NBN)
10 — The three brands, in full
Each brand as a mini-page
The same components, assembled into a representative slice of each homepage. Read these top-to-bottom to feel each brand’s personality — then jump to §11 to see them lined up.
11 — Side by side
One system, three accents
This is the proof. Each row is the same component rendered under .theme-repairs, .theme-mobile and .theme-nbn. The structure never moves; only the colour changes.
Logo lockup
Primary CTA + badge
Hero headline + eyebrow
Fix the things you love.
We have better plans.
Big speed. Local support.
Featured plan / service card
- Under 1 hour
- 12-mo warranty
- No lock-in
- Telstra network
- Unlimited data
- No credit check
12 — Voice & messaging
One personality, three jobs
Casphone always sounds friendly, local, plain-spoken and confident — never corporate or jargon-heavy. Each brand flexes that voice toward its job.
“Australia’s favourite phone repairs.”
Reassuring & expert. We fix what matters, fast, with a warranty. Lead with trust and speed.
Tone: calm, capable, local.
CTAs: Get a price · Find a store · Book a repair
“We have better plans.”
Upbeat & value-led. Big network, small price, no lock-in. Playful but clear — never gimmicky.
Tone: bold, simple, friendly.
CTAs: See SIM plans · Bring my number · Switch today
“Big speed. Local support.”
Honest & modern. Unlimited, no lock-in, no credit check, real local help. Demystify speeds.
Tone: clear, confident, helpful.
CTAs: Find my plan · Check my address · Get connected
FAQ accordion (shared component · NBN theme)
13 — Tokens for agents
The implementation contract
Everything above is generated from these tokens. An agent building any site should consume them verbatim. Components reference --brand-* only — never raw hex — so theming is a single class swap.
Theme a brand in 3 steps
/* 1 · Define the shared tokens once (neutrals, semantic, type, radius, shadow) on :root */ :root { --ink: #0B1120; --slate-200: #E2E8F0; --font-head: "Plus Jakarta Sans"; --r-lg: 16px; /* …see full :root in this file… */ } /* 2 · Each brand = one swapped accent ramp */ .theme-nbn { --brand-600: #7C3AED; /* primary */ --brand-700: #6D28D9; /* hover */ --brand-tint: #F5F3FF; /* soft bg */ --brand: var(--brand-600); --brand-grad: linear-gradient(135deg,#8B5CF6,#6D28D9,#4F46E5); } /* 3 · Components only ever read --brand-* */ .btn--primary { background: var(--brand); color: var(--brand-contrast); }
Brand accents · JSON
{
"brands": {
"repairs": {
"domain": "casphone.com.au",
"label": null,
"primary": "#2563EB",
"hover": "#1D4ED8",
"tint": "#EFF6FF"
},
"mobile": {
"domain": "casphonemobile.com.au",
"label": "Mobile",
"primary": "#C81E91",
"hover": "#A8157A",
"tint": "#FDF2FB"
},
"nbn": {
"domain": "casphonenbn.com.au",
"label": "NBN",
"primary": "#7C3AED",
"hover": "#6D28D9",
"tint": "#F5F3FF"
}
}
}
Shared (all brands): --ink #0B1120 · --slate-500 #64748B · --slate-200 #E2E8F0 · --slate-50 #F8FAFC · --success #16A34A · --error #DC2626 · radius 16/12/999 · fonts Plus Jakarta Sans / Inter.
14 — Do's & don'ts
Guardrails
Five rules keep the family coherent and accessible across every build.
--brand-600 for large flat fills behind paragraphs of text.--brand-600 or darker; use --brand-700 for links on white.--brand-* tokens so a theme swap recolours everything.Casphone Group Design System · v1.0
One system. Three brands. Infinite consistency.