fixxo
Design System Screens Chat flow
Design System v3

White, black, one purple.

Built to sit beside Google, Apple, OpenAI and Urban Company — a clean white product surface, a neutral grotesque, generous radii, soft elevation, and one confident accent. No serif, no paper, no texture, no gradients, and no stock photography anywhere in the product.

01

Brand mark

A rounded frame — the home as the AI sees it — with a single offset point: the fault, found. One frame, one point, the way the product gives one pro, one price, one accountable party. Plus a clean lowercase wordmark. Built to hold at 16px and to read as a product company, not a trade directory. No bolt, wrench, house, roof, spark, shield or checkmark — every one of those is a category cliché and a generated-default tell.

Mark · 48 / 30 / 20px

One SVG scales to every size — no redrawn variants. Files: mark · app icon · favicon · mono.

Wordmark
fixxo

Inter 700 · −0.045em · sentence case in prose (Fixxo)

Lockup
fixxo
Rejected on purpose: bolt, wrench, house outline, roof, spark, shield-with-check, handshake, and any serif or script treatment. Also gone: the earlier warm-paper/serif direction — it read as editorial stationery, not a product.
02

Colour

Pure white canvas, cool near-black ink, one vivid purple. Neutrals are true cool grey with no warm cast. The accent appears once per decision — the primary action, the active tab, or the live state.

Canvas
#FFFFFF
Surface
#F7F7F8
Line
#EAEAEC
Ink
#0D0D0F
Purple
#6D28D9
Purple lift
#A78BFA
Accent scale
50#F5F3FF
100#EDE9FE
200#DDD6FE
300#C4B5FD
400#A78BFA
500#8B5CF6
600#7C3AED
700 ←#6D28D9
800#5B21B6
900#4C1D95
Semantic status
VerifiedInsurance expiring BlockedOn the way

Status is a 6px dot plus a label — the pattern Google and Apple use. It survives greyscale, and it never relies on colour alone.

Rules: three active hues maximum. White canvas, never warm paper. Ink is a cool near-black, never pure #000. No gradients, no glow, no glassmorphism. Contrast measured against APCA, not eyeballed.
03

Typography

One neutral grotesque — Inter — the same silhouette family the products we benchmark against use. Weight does the hierarchy work: 400 body, 500 controls, 600 headings, 700 display. Numbers are always tabular. No serif, no display face, no mono in the product UI.

Display · 48 / 700One pro. One price.
H1 · 36 / 700The job starts as a conversation
H2 · 24 / 600Water heater replacement
Body · 15 / 400Your payment is held until you approve the finished work. Marcus is paid after the photo check.
Label · 13 / 500Verified at dispatch
Data · tabular$312.00 · 0.94 · 96%
Craft

Headings text-wrap: balance, body pretty. Tracking tightens with size (−0.011em body → −0.03em display). Body never below 15px.

Measure

Prose and chat hold 62–66 characters. Full width is reserved for tables and figures.

Fallback

Inter → system UI. Never mix in a serif or a second sans.

04

Space, shape, depth

A clean 4px grid. Radii are generous — the Material/HIG range — because that is what a modern product surface reads as. Depth is a soft, low-contrast shadow, never a heavy drop.

Scale
4
12
20
32
64
Radius

8 small · 12 controls · 16 cards · 24 sheets · pill for tags and switches.

Elevation
Resting
Raised card
Floating / sheet
05

Components

Rounded controls, soft surfaces, text-led actions. All six states defined on every interactive element.

Buttons
Input & composer
Status & tags
Licence verified Insurance expires in 6 days Background screen blocked On the way · 8 min Awaiting your approval
Chat turn
There's rust at the bottom and water pooling.
Reading image1.2s
That's a tanked electric heater failing at the seam. This is a replacement, and in Virginia a water heater is licensed work at any price.
Matching candidate
1
MT
Marcus T. · Kelleher0.94
412 water-heater jobs · 96% first-visit fixOn your street · 6 min away
Timeline
Brief confirmed
09:44
On the way
10:22
You approve
Brief & placeholder
TradePlumbing · water heater
UrgencyToday · active leak
LicenceVA DPOR plumber, verified

Media placeholder — no stock photography ships in the product:

06

Rules & anti-patterns

Two failure modes to avoid: the generic AI SaaS starter, and the affected editorial/serif look we shipped last time. Both are rejected here.

DoWhite canvas, cool near-black ink, one purple — used once per decision.
DoOne neutral grotesque (Inter), tabular figures for every number.
DoGenerous radii (12–24px) and soft, low-contrast elevation.
DoStatus as a dot plus a label. Plain sentences. Real numbers.
Don'tWarm paper, serif display type, or any editorial/stationery affectation.
Don'tStock photography, random faces, or placeholder imagery of any kind in the product.
Don'tGradients, glow, glassmorphism, or floating colour orbs.
Don'tBolt, wrench, house, roof, spark or shield-cliché icons. No emoji.
Don'tPure #000/#fff inverted dark mode, or invented metrics.
07

Tokens & handoff

Figma

Import design/tokens.json (W3C DTCG) via Tokens Studio → colors, text styles, spacing, effects.

Code

design/v3/tokens.css for CSS variables (light + dark), design/v3/app.css for components.

Tailwind

Merge design/tailwind.tokens.cjs into theme.extend.

Brand book

BRAND.md for narrative and voice, DESIGN.md for the contract.

Media policy: the product UI ships without photography. Job photos are the customer's own uploads; avatars are initials. Where a marketing surface needs an image, it is a commissioned shoot — never stock, never generated.