Token Tool
System Builder
Defines a complete design token set from five inputs: colour, font, spacing, radius, shadow.
Output: copyable :root CSS block with 11-step colour and type scale.
Everything you need to build a coherent digital system — in the browser.
Instruments
Five tools. One workflow.
Interactive browser tools that replace the parts of every project you rebuild from scratch. Each one produces real output you can use immediately.
Brand Tool
Brand Generator
Generates a brand style tile from industry, tone, and colour mood inputs.
Output: colour swatches, font pairing, voice summary, downloadable style brief.
UI Tool
Component Playground
Renders configurable UI components — buttons, cards, forms, navigation, and more.
Output: live preview and HTML/CSS snippet per configuration.
Audit Tool
UX Audit
Runs a structured audit across five UX categories with yes/no/partial questions.
Output: zone labels per category and a prioritised action list.
Document Tool
Resource Generator
Generates structured project documents — style guides, briefs, questionnaires, audit templates.
Output: complete plain-text document, ready to copy or download.
Design Systems
Three complete systems.
Token-based, component-ready, implementation-documented. Each system covers the decisions so you do not have to make them from scratch.
SaaS · Product
Nova
A complete token-based system for SaaS and product interfaces. 4px base grid, 11-step colour scales, 48 component patterns.
Editorial · Content
Meridian
An editorial-first system for content-heavy platforms. Optimised for readability, information density, and long-form navigation.
Agency · Fast Deploy
Axiom
Minimal, high-contrast. For agencies and freelancers who need to deploy fast without compromising on quality.
Frameworks
Structured methodology.
Decision frameworks for the parts of every project where most time is lost: brand architecture, UX hierarchy, and scalable workflow.
Brand Architecture
A 5-stage methodology from discovery to system documentation. Each stage includes inputs, outputs, and common mistakes.
Discovery Visual Identity Documentation
UX Decision Hierarchy
A tiered model for making UX decisions in the right order, from business goal through to visual treatment.
IA Interaction Visual
Scalable Workflow
A repeatable project workflow: Audit → Align → Architect → Build → Document → Handoff. With time estimates and checklists.
Workflow Handoff Freelance
Blueprints
Component patterns you can implement.
Navigation, cards, forms, typography — rendered examples with HTML patterns and CSS variable output. Not inspiration. Implementation.
Navigation Patterns
6 patterns including horizontal bar, sidebar, mega-menu, and mobile drawer.
Card Systems
5 card types: content, product, profile, stat, and action cards.
Form Architecture
4 form patterns: single-column, two-column, wizard, and inline.
Typography Systems
3 type scale approaches: modular, fluid, and editorial.
Field Notes
Short observations. Specific reasoning.
Why tokens must come before components
Starting with a component library without a token system creates debt you will spend years paying back.
The decisions hidden inside a component API
Every prop is a decision. Most component APIs are built by accident. Here is how to build one on purpose.
Brand systems are not style guides
A style guide tells you what colour to use. A brand system tells you why and what happens when you deviate.
Always audit before you redesign
Redesigns that skip the audit phase solve the wrong problems with the wrong confidence.
Academy
Structured courses for practitioners.
Not tutorials. Not overviews. Courses that end with you able to do something you could not do before.
6 Modules
Design Systems Fundamentals
From tokens and typography through to component documentation. The complete foundation.
5 Stages
Brand Identity Workflow
A repeatable process for brand identity projects with concrete deliverables at each stage.
4 Audit Types
UX Audit Methodology
How to structure, conduct, and present a UX audit that leads to action rather than a report nobody reads.
Practitioner methodology
Editorial standards
WCAG 2.1 AA
PIPEDA & GDPR compliant