Pattern Prototype
We don't ship interfaces. We ship adoption.
Brand, product and service design, sequenced — so the thing people see and the patterns they never notice are designed by the same hand, to the same standard.
- WCAG 2.2 AA baseline
- Design systems, not screens
- Explainability is a design surface
“Design agencies make things that look good in a deck and die in integration.”
We answer
Our designers work in the repo. Every component we draw exists as a token, a prop table and a state matrix before it is called done.
“Engineering shops ship things that work and nobody uses.”
We answer
Adoption is measured in the same readout as uptime. If usage doesn't move, the design isn't finished.
One client, three lenses
The same engagement, racked into focus three times
Brand, product and service design are sequenced here, not sold separately. Each is the same piece of work seen at a different depth of field — so only one of them is ever the thing in focus.
Brand design
The promise made.
Wordmark, type system, motion signature, voice. The identity ships as a spec rather than a logo file: brand architecture, type and colour tokens, motion grammar, and a voice guide that names the words we won't use.
Product design
The promise kept, on screen.
Information architecture, flows, component system — and the empty, loading, error and permission states. Every state designed, because the unhappy path is where trust is actually won or lost.
Service design
The promise kept, off screen.
The parts with no interface: escalation paths, the human-in-the-loop handoff, what the support agent sees, what happens when the model is unsure. This is where AI products fail, and it is almost never designed.
The paint-on
Not three deliverables. One thing, at three depths of finish
- Wireframe
- System
- Shipped
Same screen, three weeks apart. The wireframe is where the argument is won; the system is where it's made repeatable; the shipped build is where it earns money.
Designing for trust
The surfaces that only exist because there's a model underneath
Four of them. Each one plays once below — hover it to watch again.
Confidence, shown
An answer with no uncertainty signal is a lie with good typography. We design how the system says I'm not sure — and what the user is offered instead.
Provenance
Every generated claim carries a path back to its source. Citation design is interface design.
The correction loop
When the model is wrong, the fastest path to a right answer is a designed surface, not a support ticket.
The handoff
The exact moment a human takes over — what they see, what context they inherit, how the user is told. This is service design, and it is the difference between a copilot and a liability.
Accessibility as engineering
WCAG 2.2 AA is a build requirement, not a design opinion
Contrast ratios live in the token file. Focus order lives in the component spec. Motion respects prefers-reduced-motion — including everything on this page. Screen-reader labels ship in the same PR as the markup. We test with a keyboard before we test with a mouse.
This page respects your motion settings. Turn them on and reload — everything still works.
Computed, not asserted
AA threshold 4.5:1
- #1E1E1E on #FFFFFFink on surface16.67:1AA pass
- #4E4D50 on #F7F7F7ink-muted on surface-alt7.84:1AA pass
- #BA1606 on #F7F7F7brand-red on surface-alt6.12:1AA pass
- #FD7400 on #1E1E1Ebrand-orange on ink6.09:1AA pass
- #FFFFFF on #1E1E1Esurface on ink16.67:1AA pass
Brand orange clears AA against ink and not against white, so the system treats it as a dark-surface text colour and a light-surface accent. That constraint is in the token file, not in a reviewer's memory.
The design system
We hand over tokens, not screens
A screen is a one-off. A token is a decision your team can keep making after we're gone — which is the only version of a handover that is worth the word.
Colour tokens, by contrast against #F7F7F7
Hover a bar for its hex
- ink15.6#1E1E1E, contrast 15.56 to 1, passes AA
- ink-muted7.8#4E4D50, contrast 7.84 to 1, passes AA
- brand-red6.1#BA1606, contrast 6.12 to 1, passes AA
- brand-red-orange5.1#C92C05, contrast 5.10 to 1, passes AA
- brand-deep-orange4.0#DC4503, contrast 4.00 to 1, below AA for text
- ink-subtle3.7#827E7E, contrast 3.74 to 1, below AA for text
- brand-orange2.6#FD7400, contrast 2.55 to 1, below AA for text
Struck-through numbers fall below the 4.5:1 line. Those tokens are for marks, rules and fills — never for text on a light surface. The rule lives in the file, next to the value, which is the difference between a design system and a mood board.
Foundations
The values everything else is built out of.
- Colour
- Ramps with a contrast ratio attached to every approved pair.
- Type
- A scale, not a set of sizes somebody liked on the day.
- Space
- One unit, multiplied. No magic numbers anywhere in the CSS.
- Motion
- Named eases and durations, so “it feels wrong” becomes a value you can change.
- Elevation
- A shadow-sm ladder tied to z-order rather than to taste.
Components
Each one shipped with the contract it has to keep.
- Props
- The full table, with defaults and what each one is actually for.
- States
- Default, hover, focus-visible, active, disabled, loading, error, empty.
- A11y contract
- Role, labelling, keyboard map, focus order — per component, in writing.
- Usage rules
- And the anti-patterns, which is the half most systems leave out.
Governance
What happens to it after we leave.
- Contribution model
- How your team adds a component without going through us.
- Versioning
- Semver on the package, with a changelog a PM can read.
- Deprecation policy
- How a component dies, and the window it dies over.
- Ownership
- Named, dated, and handed over before the final invoice.
A design system you can't maintain without us is vendor lock-in wearing a nice grid.
Proof
The case where design moved a number
- Context
- A GCC beauty platform with a strong brand, heavy paid-social traffic, and a 3.1% mobile conversion rate. Desktop converted fine. Nobody could say why mobile didn't.
- Constraints
- Arabic RTL parity — not as a translation layer bolted onto an LTR build, but as a first-class design direction with equal standing at every review.
- Principle applied
- 03 — We tell clients what they need to hear before what they want to hear. What they wanted was a redesign of the virtual try-on. What they needed to hear was that the Arabic experience was a second-class citizen of their own component library.
- Approach
- We rebuilt the product on a mirrored component system — logical properties, direction-aware iconography, a bidirectional type scale — and redesigned the try-on flow around confidence rather than novelty: fewer options, a shown confidence signal, and a visible path back.
Mobile conversion, measured against the same traffic mix over the following quarter.
See the full caseReady to design the part people don't see?
Brand, product and service in one sequence, with the component system, the state matrix and the accessibility contract handed over in source. Starts with a Discovery Sprint.
The Usool Method
- Principle
- Pattern
- Prototype
- Production
- Proof