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)
--rating amber — never re-tinted to the brand. Info blue is allowed even on the blue site; context disambiguates.Accent tones (shared) — set data-tone, read var(--tone…)
Long pages give each section an accent via data-tone="teal"; inside, CSS reads var(--tone), var(--tone-2), var(--tone-soft) and var(--tone-border) — so pages don't read all-brand. The brand stays the only action colour: tones dress illustration chips, icon tiles and soft backgrounds, never buttons or links.
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.
The kicker takes the brand colour on white (--brand), --brand-300 on dark bands. Hero display headlines may gradient-clip their key phrase with --brand-grad.
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 a 96px vertical rhythm; a centred section header sits 52px above its content. Alternate white and slate-50 bands down long pages.
Motion
Hover transitions .16–.2s ease with a translateY(-1px…-4px) lift · ambient loops are slow (~48s orbit) and subtle — never distracting · entry animations pop or draw once, then settle · every loop is disabled under prefers-reduced-motion.
06 — Icon & imagery
Line icons, warm photography
Icons are 2px stroke, rounded caps/joins, 24px grid, fill none, stroke currentColor — one consistent set across all sites, inheriting colour from their parent. Stroke weight scales with context: 2 default · 2.2 inside buttons · 3 inside small pills. 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)
One Button component renders a <button>, an internal link or an external anchor — never hand-roll a styled anchor. .btn--block makes it full-width inside cards. Trailing icons: 17px, stroke 2.2.
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 ramp 50–900 · --success / --danger (each with -soft/-border/-strong) · --rating #F59E0B · accent tones --violet/--teal/--amber/--sky/--coral (each with -2/-soft/-border, applied via data-tone) · radius 12/16/20/999 · shadows --sh-sm/md/lg · max width 1180px · section rhythm 96px · 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.1
One system. Three brands. Infinite consistency.
15 — Social media kit
Social imagery for X, Facebook, Instagram & more
Everything an agency needs to produce on-brand social content for all three Casphone brands. Design on the shared master canvases, stay inside the safe zones, apply one brand accent + the “C” mark on neutral space — and the family stays consistent across every platform.
Design once · the master canvases
Build on a 1080px-wide base (export at 2× for retina where the platform allows). The five core ratios above cover ~95% of all placements; the cover sizes differ per platform — see the table.
Exact sizes per platform — verified for 2026
Notes: LinkedIn Company cover is now
4200×700(6:1) — the old1128×191is deprecated. Instagram’s 2026 grid is3:4, so1080×1440shows uncropped in the grid (4:5 is still best in-feed). The1200×630(1.91:1)og:imageis the universal link-preview card. Profiles crop to a circle — centre the mark.The 9:16 safe zone (Stories · Reels · Shorts · TikTok)
Keep logo & text in the central band.
Clear the top ~13% (profile / close UI) and the bottom ~18–25% (caption, CTA, action rail). Reels & TikTok have a larger bottom dead-zone and a right-side action rail — hold key content in the central 70–80%.
Universal best practice
The template kit · how each brand shows up
Fixed today.
Don’t panic.
better plans.
you paid for.
Local support.
Profile + cover use the brand accent at full strength (the avatar is the “C” app-icon). Feed posts stay neutral with a single accent word + the C mark; stories/reels may use the full brand gradient as an immersive field. Dashed lines on the stories mark the 9:16 safe band.
Creative direction · per brand
Australia’s favourite phone repairs — fast, local, expert fixes you can trust, fully backed.
Voice: the clever local mate who fixes phones — plain-spoken Australian, confident and expert, every claim backed by a real proof point (same-day, 12-month warranty, Apple IRP). Helpful over hype.
Content pillars
Post ideas
Hashtags
Imagery: clean, well-lit shots on neutral backgrounds, a single blue accent (button, badge, case) and lots of whitespace around the C mark. Real devices, real hands, real stores.
Do
Don’t
Better plans, better value — big-network coverage without the big-network catch.
Voice: a switched-on friend who hates jargon and loves a good deal — bold, upbeat, plain-spoken. Magenta is energy: one word, number or CTA, never the whole canvas.
Content pillars
Post ideas
Hashtags
Imagery: generously spaced neutral layouts, a single magenta accent on one word/number/CTA, clean product & real local-store photography, big confident type.
Do
Don’t
Big speed, backed by real local people you can actually walk in and talk to.
Voice: a knowledgeable local neighbour, not a call centre — clear, confident, modern and helpful. Benefit-first, no jargon, no hard sell.
Content pillars
Post ideas
Hashtags
Imagery: warm off-white / soft-grey backgrounds, a single violet accent for the C mark, speed numbers & highlights, real local staff/storefronts, and oversized speed figures (e.g. “2000/500”) as a hero device.
Do
Don’t
casphone-[brand]-[platform]-[format]@2x.png(e.g.casphone-nbn-ig-story@2x.png). Keep one accent + the C mark per asset, design inside the safe zones above, and use PNG for text/logo art, JPG for photography. Open the ready-to-post Press & Social Kit ↗