alex m. chong design system
01
Simple Landing
The primary entry point. Hero statement with muted-word technique, supporting subhead, and CTA cluster. Full-bleed on dot-grid background. Use when the page's job is to set the voice and direct visitors into the system, not to surface specific content.
Design Leadership & Practice
I am a strategist. An educator. A designer of everyday interactions. A strong believer in ethics and education. A leader of design culture and craftsman of design communities. I will train the next generation of minds through deliberated technological interactions.
I coach and train design teams & individuals to produce their strongest, most creatively invigorated work — at the intersection of leadership, strategy, and the discipline of design.
02
Editorial Landing
A layered home page that opens with the hero statement, flows into a profile descriptor, and showcases all content types with their filters in a single scroll. Use when the landing page itself is meant to surface ongoing work — not just direct attention elsewhere.
Hi — I'm Alex, and I care deeply about leading the discipline of design and shaping its future for organizations.
Director of UX · Design Coach · Educator based in Toronto.
What I do
Design Leadership, Product Strategy & Innovation Partner
Alex is a product design leader, strategist & coach who specializes in complex problems that exist outside of typical processes or frameworks.
A way of thinking differently about what design can do — well beyond fixing your process.
Specializing in the messy, ambiguous problems that sit outside typical frameworks — where design thinking matters most.
Latest thinking
View All →
UX Industry
A Discipline Reset
UX 2.0 SeriesPart 1 of 3

UX 1.0 was built around scarcity. AI dissolved it.

Reframe
Mar 4, 2026 · 14 min
TalkIn 6 Days
Toronto
Toronto, ON
Centre for Social Innovation
May 12, 2026Wed · 7 PM
Design Leadership in the Age of AI

A live conversation on leading teams through disruption.

Introspection 001

The designers struggling most with AI were already struggling.

The tool surfaced a gap that was already there.

May 4, 2026
About
alex m. chong
Director of UX · Design Coach · Educator

A way of thinking differently about what design can do — well beyond fixing your process.

Twelve years shipping consumer and enterprise software from concept to implementation. Worked across agencies, startups, accelerators, and product companies.

Now focused on the intersection of design leadership, practice development, and what happens to the discipline when AI removes all the easy excuses.

Details
Location
Toronto, Ontario
Education
MID · BAS
Years Active
12+
12+
Years
40+
Coached
6
Industries
3
Countries
03
Editorial Index
A content index that opens with a featured article showcase rather than a hero statement, then surfaces ongoing work in three category showcases (For Designers, Leading Design, Experiments). Use when the page's job is to lead with the most recent or most important piece, then orient visitors across the rest of the catalogue.
— Featured · UX Industry

A Discipline Reset

UX 1.0 was a discipline built around scarcity — scarce access to users, scarce ability to prototype, scarce tools to test. AI dissolved the scarcity entirely.

Mar 4, 2026 · 14 min read
Series
UX 2.0 — Part 1 of 3
For Designers — 3 of 12 View all →
For Designers
Burnout Lives Below Workload
Apr 2, 2026 · 9 min
For Designers
Signal vs Noise: A Filter for Post-AI Design Decisions
Apr 20, 2026 · 12 min
For Designers
The New Generalist: Why Specialists Are Quietly Losing Ground
May 5, 2026 · 11 min
Leading Design — 3 of 8 View all →
Leading Design
The Designer Who Runs the Room
Feb 12, 2026 · 17 min
Leading Design
Why Most Design Teams Address Symptoms
Jan 22, 2026 · 12 min
Leading Design
The Quiet Authority Problem in Design Teams
Mar 8, 2026 · 14 min
Experiments — 3 of 5 View all →
Prototype · Live
Decision Filter — UX Choices in 5 Steps
Concept
A Coaching System Built on Field Notes
Prototype · In Progress
Browser-Based Critique Tool
04
Full Page Index
The standard content listing layout. Filter bar, card grid across all content types, pagination. Use when the page surfaces the full catalogue and the user is browsing rather than landing.
Writing
Latest thinking
48 articles
UX Industry
A Discipline Reset
UX 2.0 SeriesPart 1 of 3

UX 1.0 was built around scarcity. AI dissolved it.

ReframeDiscipline
Mar 4, 2026 · 14 min
Leading Design
Signal vs Noise
Framework

When every tool claims to accelerate your work, you need a filter more than a workflow.

Mental Model
Apr 20, 2026 · 12 min
Introspection 001

The designers struggling most with AI were already struggling.

The tool surfaced a gap that was already there.

May 4, 2026
TalkIn 6 Days
Toronto
Toronto, ON
Centre for Social Innovation
May 12, 2026Wed · 7 PM ET
Design Leadership in the Age of AI

A live conversation on leading teams through disruption.

For Designers
Burnout Lives Below Workload
Principle

Most designers hit the wall when they've lost the thread.

BurnoutHonest
Apr 3, 2026 · 8 min
Prototype
Live
UX Audit Generator

Feed it a description — it hypothesizes the UX debt.

May 2026
Launch
Showing 6 of 48
05
Article
Single-column long-form reading layout. Constrained max-width, generous line-height, pull quote and tag footer. The reading template — every long-form post uses it.
Writing UX Industry
UX Industry · Mar 4, 2026 · 14 min read

A Discipline,
Reset.

UX 2.0 Series Part 1 of 3

UX 1.0 was a discipline built around scarcity — scarce access to users, scarce ability to prototype, scarce tools to test. AI dissolved the scarcity entirely.

For two decades, UX justified its existence through its methods. The research process, the prototype handoff, the usability study — these were the discipline. They were hard to do without a specialist, which gave the role its shape.

When the tools commoditize, what's left is the thinking. And here's the uncomfortable truth: a lot of designers were executing a process. The thinking part lived somewhere else, with someone else, on a different team's docket.

"The gap between strategist and executor sits openly in the room now."

UX 2.0 is the return of foundational design thinking as the core competency — well beyond a story about new tools.

Tagged
Discipline History Reframe UX 2.0
Experience
Director of UX
2022 – Present
Freelance · Toronto
Fractional design leadership for early-stage and scaling startups. Product strategy, design systems, and coaching embedded in product teams.
Head of Design
2019 – 2022
Series B SaaS · Toronto
Led a team of 6 designers across product, brand, and research. Established design systems infrastructure and shifted org to design-led product development.
Senior Product Designer
2016 – 2019
Agency · Taipei & Toronto
End-to-end product design across fintech, health, and enterprise clients. Taipei studio lead for 18 months.
Education
Masters of Interaction Design
OCAD University
2014
Bachelor of Architectural Studies
University of Waterloo
2011
Expertise
Design Leadership
Product Strategy
Design Systems
Career Coaching
Workshop Facilitation
Industries
SaaS · Fintech · Health
Education · Enterprise
Climate · Civic Tech
Based In
Toronto, Ontario
Previously Taipei, Taiwan
06
Services Page
Full-page services listing. Large index numbers as visual anchors, rule-separated rows, scoped engagement CTA per service. Use when offerings deserve their own page rather than a card grid.
What I Do
Design leadership at the level
your company actually needs.

I work with early-stage and scaling startups as a fractional design partner — bringing the strategic altitude and craft-level precision of a seasoned design director, without the full-time overhead.

01
Fractional Design Leadership
Embedded design direction for early-stage and scaling startups. Strategic presence without the full-time overhead — from team-building and process to product vision and stakeholder alignment.
Ongoing 2–4 days/week Remote or Toronto
02
Product & UX Strategy
Shaping what gets built and why. From opportunity framing through to validated direction and a roadmap your team can actually execute. Delivered as a sprint engagement or ongoing advisory.
Sprint or Advisory 2–6 weeks
03
1:1 Design Coaching
Structured coaching for mid-to-senior designers navigating career inflection points, leadership transitions, and creative health. Built around your actual situation.
Bi-weekly sessions 3-month minimum Remote
04
Workshops & Talks
Live sessions on design leadership, post-AI workflows, and building a practice worth having. Delivered for in-house teams, conferences, and accelerator cohorts.
Half or full day In-person or Remote

Unsure what you need? Most lasting conversations start there.

07
About Page
A self-contained narrative page. Lowercase Instrument Serif italic name as the primary mark, three-paragraph bio in the editorial voice, sidebar metadata column, and a strip of milestones below. Use when introducing the practitioner — the page should feel like a personal letter set into the system's chrome.
About
alex m. chong
Director of UX · Design Coach · Educator

A way of thinking differently about what design can do — well beyond fixing your process.

Twelve years shipping consumer and enterprise software from concept to implementation. Worked across agencies, startups, accelerators, and product companies.

Now focused on the intersection of design leadership, practice development, and what happens to the discipline when AI removes all the easy excuses.

Details
Location
Toronto, Ontario
Education
MID · BAS
Years Active
12+
08
Resume
A document-style CV laid out as a constrained two-column grid. Left column is the role/employer/dates ledger, right column is the metadata and download/contact actions. Treats the resume as a typeset document, not a UI form.
Resume — March 2026
alex m. chong
Director of UX · Design Coach · Toronto, ON
2024 — Now
Director of UX
Independent · Practice & Coaching
2020 — 2024
Head of Design
An enterprise SaaS company · Toronto
2016 — 2020
Senior Product Designer
A consumer fintech startup · Toronto
2014 — 2016
UX Designer
An interactive agency · Toronto
01
Section Dividers
Rules as structure. Dividers carry the visual rhythm between blocks — most pages need at most two of these, used consistently. Choose the variation that matches the section's job: "we're moving on," "this is a new chapter," or "this is the start of a counted list."

The simplest divider. Use the rule weight that matches the boundary's importance: --rule for structural breaks, --rule-30 for soft section boundaries (page chrome edges, layout-nav bottom), --rule-faint for content separators (table rows, type-row dividers).

--rule · structural
--rule-30 · soft boundary
--rule-faint · content separator

For "we're moving on to a new section." The centred label gets the eyebrow treatment (Barlow Condensed 11px 700 uppercase, primary). Most common between editorial blocks. Don't use it more than 2–3× per page — it's a heavy mark.

Writing

For counted sequences (services, principles, chapters). Index number on the left as a strict typographic anchor, the rule extends through the middle, the section name closes on the right. Reads like a contents listing in a book.

04 —
Design Principles

A wider, heavier divider for major group breaks inside a flat content layout (e.g. between Articles / Events / Experiments on the cards page). Eyebrow on the left, full-width bottom rule. Used sparingly — typically once per "section" of a long scroll.

Articles
Plain ruleA boundary inside a section — between paragraphs, table rows, sidebar groups. Choose weight by importance. Centred labelA break between major editorial blocks. Reads as "new chapter." Numbered labelCounted sequences — services, principles, ordered chapters. Use when order matters. Section stripTop-of-group divider in a flat scrolling layout — content cards, events listing. .section-headerNot a divider — the heading row at the top of a documentation block. Includes a primary rule under it.
02
Two-Column Editorial
Primary layout for service/about sections. Left column carries the heading and CTA, right column carries the editorial voice.
Design Leadership,
Product Strategy &
Innovation Partner
Alex is a product design leader, strategist & coach who specializes in complex problems outside typical processes. Twelve years shipping consumer-ready and enterprise-grade software from concept to implementation.
A way of thinking differently about what design can do — well beyond fixing your process.
A strong design leader and educator who inspires teams to produce their strongest work — specializing in the messy, ambiguous problems that sit outside typical frameworks.
03
Full-Width Statement
Large display statement with muted-word technique, subhead, and CTA cluster. Used at the top of landing variations.
Hi — I'm Alex, and I care deeply about leading the discipline of design and shaping its future for organizations.
I coach and train design teams & individuals to produce their strongest, most creatively invigorated work.
04
Stat Row
Four-cell ruled grid. Numbers in display weight, Instrument Serif italic on the suffix. Rules do all the structural work.
12+
Years Shipping
40+
Designers Coached
6
Industries
3
Countries
05
Service / Feature List
Two-column ruled list. Top rule is full primary, secondary rows use rule-30. Padding carries the spacing — no additional decoration.
What I Offer
Fractional Design Leadership
Embedded design direction for early-stage and scaling startups. Strategic presence without the full-time overhead.
Product Strategy
Shaping what gets built and why. From opportunity framing through to validated direction and roadmap.
1:1 Design Coaching
Structured coaching for mid-to-senior designers navigating career inflection points, leadership, and creative health.
Workshops & Talks
Live sessions on design leadership, post-AI workflows, and building a practice worth having.
06
Pull Quote
Instrument Serif italic inside a left-rule callout. The 3px rule is the heaviest element on the page — use sparingly.
"The gap between strategist and executor sits openly in the room — and that gap is exactly where strong design leadership lives."
alex m. chong — UX 2.0: The Discipline Is Being Corrected
07
Bio / Profile Block
Portrait placeholder + metadata on the left, full bio + CTAs on the right. Portrait scales with the column — always circle, always border-faint.
Portrait
Based in Toronto, ON
Open to conversations
About
Director of UX. Design coach. Educator.
Twelve years shipping consumer and enterprise software from concept to implementation. Worked across agencies, startups, accelerators, and product companies. Now focused on the intersection of design leadership, practice development, and what happens to the discipline when AI removes all the easy excuses.
Masters of Interaction Design · Bachelor of Architectural Studies · Based in Toronto, previously Taipei.
08
Testimonials
Social proof in the document register. No stars, no avatars, no coloured cards. The quote is the thing — Instrument Serif italic carries the voice, attribution sits below in Barlow Condensed.
"Alex thinks about how design creates the conditions for stronger decisions. Working with him changed how our entire team frames problems."
Jordan Lee
VP Product · Series B SaaS
“He has an unusual ability to make the abstract feel inevitable. The team trusted his direction because he always showed his reasoning.”
Priya Nair
Founding Designer · Fintech
“The coaching sessions changed how I think about my own career — what I do next, and what kind of designer I want to be.”
Marcus Chen
Senior UX Designer · Enterprise
“Our product direction became dramatically clearer. Alex brought both the strategic altitude and the craft-level precision we didn’t know we needed.”
Sam Okafor
CEO · Early-Stage Startup
“Exactly the design partner we needed, at exactly the moment we needed them.”
Rachel Torres
CPO · Health Tech
“He asks the kind of questions that surface what you should be solving instead.”
David Kim
Design Lead · Scale-up
09
Top Bar
The site's primary navigation row. Lowercase Instrument Serif italic logotype on the left, rectangular nav pills on the right. Sits flush above page content with a --rule-30 bottom edge — boundary, not weight.
height52px padding0 var(--space-48) backgroundvar(--neutral) border-bottom1px solid var(--ink-30) layoutflex space-between · vertical centre logoInstrument Serif italic 20px · primary nav pillBarlow 12px / 600 · padded 6px 14px · 1px primary border · 4px radius
10
Hero Writing
The opening statement on a landing or content page. A display-weight Barlow paragraph with the muted-word technique threaded through it, optionally closing on an Instrument Serif italic word for emphasis. The voice of the system, fully committed.
Design Leadership & Practice
I am a strategist. An educator. A designer of everyday interactions. A strong believer in ethics and education. A leader of design culture and craftsman of design communities. I will train the next generation of minds through deliberated technological interactions.
I coach and train design teams & individuals to produce their strongest, most creatively invigorated work — at the intersection of leadership, strategy, and the discipline of design.

Hero Writing carries the system's only allowance for sustained Instrument Serif italic — typically the eyebrow line above and one or two words inside the display block. Every other typographic choice serves the muted-word rhythm. Don't add accent colour outside .ac; don't drop below 22px on any italic.

11
Featured Article
A magazine-style hero block that gives one specific piece headline treatment. Used at the top of an Editorial Index, sometimes inline as an "Editor's Pick" at the top of a content listing. Carries category, title, excerpt, meta, and a CTA — all the moves of a card, scaled to page-feature weight.
— Featured · UX Industry

A Discipline Reset

UX 1.0 was a discipline built around scarcity. AI dissolved that scarcity entirely.

Mar 4, 2026 · 14 min read
Series
UX 2.0 — Part 1 of 3
01
Card Anatomy
All card types share the same shell — flat, bordered, near-square, no shadow. Depth comes from border contrast on hover. What changes between types is the header tone, the body content, and the footer. Use this as the mental model before reaching for a specific card type.
backgroundvar(--surface) — light cards · var(--c-experiment-prototype/concept) — dark cards border1px solid var(--ink-18) · darkens to var(--primary) on hover border-radiusvar(--r-card) = 4px (near-square) box-shadownone — depth is border-only overflowhidden — nothing peeks past the corners layoutflex column · header → body → meta-strip paddingscoped via --pad (24px on cards)

Every card resolves to the same three-zone structure. The header announces type and identity (category label, dark zones for events, gradient for masterclass). The body carries the headline + supporting content. The meta-strip closes with utilitarian metadata and a forward arrow.

.card-headerType / category labels and bookmark icon. Dark on event & experiment cards. .card-bodyTitle + excerpt + tags or framework badge. The reading content of the card. .meta-stripMetadata row at the bottom — date, read time, action arrow. See section 05 for the full anatomy.

Each card sets a single CSS custom property — --c-current — based on its data-category. Every coloured element inside the card (category label, series pill border, framework badge, journal rule, sdot indicator) reads from that single token. Adding a new category is one line of CSS — pick a colour from the pool, point --c-current at it.

defaultfaint border, surface bg :hoverborder darkens to primary — only depth signal .pastapplied to past events. Dark zones overlay at var(--ink-72), content remains legible.
02
Article Cards
Editorial entries for the writing track. Category label, italic title, optional series pill, excerpt, tag row, and meta strip with date and read time.
UX Industry

A Discipline Reset

UX 2.0 Series Part 1 of 3

UX 1.0 was a discipline built around scarcity — scarce access to users, scarce ability to prototype, scarce tools to test. AI dissolved the scarcity entirely.

Discipline HistoryReframe
Mar 4, 202614 min read
UX Industry

What a Post-AI Workflow Actually Looks Like

UX 2.0 Series Part 2 of 3

The designers thriving right now changed how they think before they changed how they work.

AI WorkflowActionable
Mar 28, 202611 min read
UX Industry

UX 2.0 Is a Thinking Problem

UX 2.0 Series Part 3 of 3

Everyone is talking about which AI tools designers should learn. Nobody is asking whether the role itself needs to change. Those are very different conversations.

Role EvolutionUncomfortable
Apr 14, 20269 min read
Leading Design

The Designer Who Runs the Room

Principle

Design leadership is about building the conditions where stronger decisions get made — with or without you in them.

Design InfluenceFoundational
Feb 12, 202612 min read
Leading Design

Why Most Design Teams Address Symptoms

The symptoms are always visible — slow output, constant rework, misaligned stakeholders. The cause sits a layer below.

Team HealthDiagnosis
Jan 22, 202613 min read
For Designers

Burnout Lives Below Workload

Principle

Most designers hit the wall when they've lost the thread connecting their work to something they actually care about.

BurnoutHonest
Apr 3, 20268 min read
For Designers

Your Career Belongs to You

Principle

Most designers wait for something their job is structurally unable to provide. Growth that belongs to you has to be built by you — manager, team, and next role each play their own game.

Career OwnershipReframe
Mar 18, 20267 min read
For Designers

The Practice Outside the Practice

Every designer I know who stayed creatively alive for decades had something they made that no one was paying them for. The pattern repeats.

Creative HealthSlow Burn
Feb 27, 20266 min read
For Designers

Prompting Is Specifying

The designers getting the most out of AI articulate intent better — which was always the job.

AI PromptingReframe
Apr 10, 20266 min read
UX Industry

The Medium Shapes the Designer

Principle

Every tool you default to is quietly training you to think in its constraints. The designers who stay sharp are the ones who keep changing their medium on purpose.

Tools & ThinkingSlow Burn
Feb 5, 20265 min read
Leading Design

The Three Layers of Design Influence

Framework

Most design leaders get stuck at Layer 1 — execution quality. Layer 2 is process ownership. Layer 3 is decision framing. Each requires a fundamentally different kind of presence.

Design InfluenceStructured Model
Jan 14, 202610 min read
For Designers

The Creative Recovery Loop

Framework

A four-stage model for restoring creative momentum after burnout or stagnation: Reduce, Restore, Reorient, Re-engage. Most designers skip straight to the last step and wonder why nothing sticks.

Creative HealthProcess Model
Mar 2, 20268 min read
UX Industry

Signal vs Noise: A Filter for Post-AI Design Decisions

Framework

When every tool claims to accelerate your work, you need a filter more than a workflow. This model maps which decisions require human judgment — and shows how that line keeps moving.

Decision-MakingMental Model
Apr 20, 202612 min read
03
Event Cards
Talks, workshops, and masterclasses. Dark header carrying the event type plus countdown or past pill. Location/remote zone with ghost city text. Format pills below the title.
Talk In 6 Days
Toronto
Toronto, ON
Centre for Social Innovation
May 12, 2026 Wed · 7:00 PM ET

Design Leadership in the Age of AI

A live conversation on leading teams through disruption — making better decisions and staying human.

Workshop Next Week
Toronto
Toronto, ON
Gladstone House · 16 seats
May 28, 2026 Wed · 10:00 AM – 1:00 PM

Designing for Decisions

A half-day session for designers ready to operate at the level of strategy. Built around real problems.

Talk Tomorrow
Remote
Remote Talk
Join from anywhere
May 7, 2026 Thu · 12:00 PM ET

The State of Design Leadership in 2026

What does design leadership look like when AI, hiring uncertainty, and organizational pressure are reshaping the role from every direction?

Talk Today!
Remote
Remote
12 seats · Join from anywhere
May 6, 2026 Thu · 9:00 AM – 5:00 PM ET

Reclaiming Creative Agency as a Senior Designer

On burnout, self-trust, and the conditions that restore creative momentum when the work has stopped feeling like yours.

Masterclass In 2 Months

The Coaching Designer

A two-day intensive on building a coaching practice as a working designer — for those ready to lead through questions.

Oct 2 – 3, 2026 · 9 AM – 5 PM ET
Virtual · 2 Days
Register Now 12 Seats · Online
$349
04
Experiment Cards
Working drafts and prototypes. Deep tonal background with SVG decoration, status dot, and a Launch / Read CTA bar. Distinct from articles to signal "in progress."
Prototype
Live

UX Audit Generator

Feed it a product description — it hypothesizes the most likely UX debt before you open a single screen.

AI ToolInteraction Design
May 2026
Launch
Concept

Thinking Mode Selector

An interactive model that maps your current cognitive state to the AI interaction mode that matches — so you're directing it from intent.

Interaction ModelAI Collaboration
Apr 2026
Read
Prototype
In Progress

Scope Estimator

Forces tradeoff conversations before the first sprint. Enter constraints — it outputs a range, a confidence level, and a warning.

Decision ToolAI Tool
Apr 2026
Preview
Concept

Constraint Builder

An interactive design space where you add constraints one by one and watch the solution space shift. A working model of why limitation produces better design.

Interaction DesignSpeculative
Mar 2026
Read
05
Journal Cards
Short reflective entries. Italic Instrument Serif quote with a left-rule in the journal category colour, a thin excerpt, and a date in the meta strip.
Contemplation 001

I keep returning to the idea that constraints reveal what creativity actually is.

The blank page is paralysis with a better story.

Apr 29, 2026
Insight 001

Seniority in design is being the person who changes what the room is trying to do.

That's a completely different skill — and almost no one teaches it. We spend years getting better at execution and almost no time learning how to shift the frame before execution starts...

Apr 17, 2026
Introspection 001

The designers struggling most with AI were already struggling to articulate why their decisions mattered.

The tool surfaced a gap that had been sitting quietly for years. That gap is a design thinking problem...

May 4, 2026
06
Card Navigation & Filtering
Cards live behind a controller — type pills choose the card family, category pills filter within it. The logic is OR multi-select: enabling more pills shows more results, never narrows them. "All" is a master toggle that clears every category at once. With nothing selected, "All" auto-re-engages so the user is never looking at an empty set.
Type
25 cards
Topic
Default state"All" engaged on every row · everything visible Click "All"deselects every other pill in that row · "All" stays on Click a categorythat pill toggles · "All" deselects the moment a category is on Multiple categoriesOR-logic — show cards matching ANY active pill Deselect last category"All" auto-re-engages · the user never sees an empty set Visual hoverborder + text shift to category colour (preview the brand) Visual activefilled category colour, white text — pill becomes the brand for that filter
07
Card Meta Strip
The unified bottom zone of every card. Same structure across article, journal, and experiment types — information left, arrow right. The only thing that changes is the surface tone and what the metadata says.
Article
Mar 4, 2026 · 14 min
Journal
May 4, 2026
Experiment
May 2026 · Launch
fontBarlow Condensed 13px / 600 / uppercase letter-spacing0.12em colorvar(--muted) on light · var(--white-45) on dark padding11px var(--space-20) border-topvar(--rule-faint) on light · 1px solid var(--white-06) on dark layoutflex space-between (.row-between utility) arrow15px / weight 400 · var(--secondary) on light · var(--white-45) on dark
01
Color System
A warm neutral foundation with one chromatic accent. Every colour is exposed as a CSS custom property — always reference by token name. Category colours are semantic — they carry content identity, kept out of chrome.
Primary
--primary
#191715
Secondary
--secondary
#494846
Muted
--muted
#818080
Neutral
--neutral
#E8E8E8
Canvas BG
--canvas-bg
#F3F2F1
Surface
--surface
#F8F8F8
Accent
--accent
#6B7F6E
White
--white
#FFFFFF
Ink Mid
--ink-mid
#646361
Ink Faint
--ink-faint
#716F6E
Primary Hover
--primary-hover
#333333

For light surfaces — borders, dividers, subtle hovers, dark overlays. Reach for these instead of inventing fresh rgba alphas. Five steps cover every realistic use.

Hover · zebra
--ink-08
primary 8%
Faint divider
--ink-12
primary 12%
Card border
--ink-18
primary 18%
Section divider
--ink-30
primary 30%
Past-card overlay
--ink-72
primary 72%

Used inside event headers, masterclass gradients, and experiment cards where text and detail sit on a near-black ground.

Ghost detail
--white-06
white 6%
Subtle border
--white-15
white 15%
Muted text
--white-45
white 45%
Primary text
--white-85
white 85%

A pool of 18 chromatic colours, all at the same restrained intensity, named by the colour itself (not by the category that happens to use it). Categories pick from this pool; the design system has no opinion about which category gets which hue. Add a new category by adding a new .card[data-category="…"] { --c-current: var(--c-…); } mapping at the bottom of the cards block.

Rust
--c-rust
#765150
Terracotta
--c-terracotta
#7D4631
Clay
--c-clay
#765E44
Amber
--c-amber
#81642A
Ochre
--c-ochre
#786E4A
Olive
--c-olive
#6E7448
Moss
--c-moss
#607549
Forest
--c-forest
#49634B
Sage
--c-sage
#4D705A
Teal
--c-teal
#4A716E
Ocean
--c-ocean
#4A6677
Denim
--c-denim
#46556A
Indigo
--c-indigo
#4D567A
Purple
--c-purple
#5D5376
Violet
--c-violet
#6C4D7A
Plum
--c-plum
#785071
Mauve
--c-mauve
#6F4B61
Rose
--c-rose
#7A5160

Series pills, framework badges, and journal rules use a tinted version of their category colour. Don't define new tokens for every category × alpha combination — use color-mix(in srgb, var(--c-terracotta) 35%, transparent) at the call site. Standard alphas: 20% (ghost dot), 35% (border), 40% (badge border).

Two near-black tones used only as the full-bleed background of experiment cards. Separate from the category pool — these create the surface for content rather than carrying its identity.

Prototype
--c-experiment-prototype
#1C1028
Concept
--c-experiment-concept
#0A1F1A
Page backgroundvar(--neutral) Canvas surfacevar(--canvas-bg) Card surfacevar(--surface) All headingsvar(--primary) Body copyvar(--secondary) Metadata / de-emphasisvar(--muted) Inline highlightsvar(--accent) — text only Text on darkvar(--white) Button hover (dark)var(--primary-hover) Structural bordersvar(--rule) — 1px primary Section dividersvar(--rule-30) — 30% primary Card / row bordersvar(--rule-faint) — 18% primary
02
Typography
Two families, strictly bounded roles. Barlow carries all structural type. Instrument Serif italic appears only where the human voice breaks through — used as voice, not decoration.
var(--text-display)54px · hero display var(--text-h0)48px · large display var(--text-h1)40px · h1 var(--text-h2)32px · h2 var(--text-h3)28px · serif section intro / event title var(--text-h4)24px · h3-equivalent var(--text-h5)22px · card title / pull quote var(--text-body-lg)20px · body-lg / lead var(--text-body)18px · body — moderate var(--text-md)16px · default body var(--text-sm)15px · body-sm var(--text-base)14px · button / nav / base UI var(--text-meta)13px · metadata / table cell var(--text-pill)12px · pill / micro body var(--text-label)11px · eyebrow / mono / uppercase label var(--text-tiny)10px · status badge var(--text-micro)9px · extreme micro
display
54px / 500 / lh 66px / -0.02em
Weight 500 — power from scale not stroke
Design Leadership
h1
40px / 600 / -0.015em / lh 1.15
Upcoming Talks
h2
32px / 600 / -0.01em / lh 1.2
Design Principles
h3
24px / 600 / lh 1.3
Product Strategy & UX
body-lg
20px / 500 / lh 1.7
Weight 500 minimum on this bg
I coach and train design teams & individuals to produce their strongest work.
body-md
16px / 500 / lh 1.65
Alex is a product design leader and coach who specializes in complex problems outside typical processes.
body-sm
15px / 500 / lh 1.5
Based in Toronto · Director of UX · Open to conversations
meta / label
Barlow Condensed 12–13px / 700
uppercase · letter-spacing 0.12–0.18em
Pills and labels only
Leading Design · Apr 28, 2026 · 14 min

Same font, weight, and size as surrounding text. Only color changes. Creates depth and rhythm inside a statement without adding hierarchy. This is the primary expressive tool in display copy.

Design culture and craft
I am a strategist. An educator. A designer of everyday interactions.

Minimum 22px · Saturated colour only · Italic weight 400 only · Inline only via display:inline-block · Max 2 instances per page

hero inline
1.15× context size
inline-block prevents clipping
shaping its future
section intro
24–28px / secondary color
First sentence of a major section
A way of thinking differently about what design can do — well beyond fixing your process.
pull quote
22px / primary color
With left border rule
"The gap between strategist and executor sits openly in the room now."
journal title
21px / category rule color
Bumped above body text size
The designers struggling most with AI were already struggling to articulate why their decisions mattered.
✓ Instrument Serif

Hero emphasis word · Section intro sentence · Pull quote in article · Journal entry title · About page statement · Logotype

✗ Never Instrument Serif

Body copy · Navigation · Buttons · Labels · Metadata · Captions · Anything below 22px · Anything in muted color

03
Spacing
A 10-step scale tied to the 8px base. The token name embeds the px value — var(--space-24) = 24px. Use only inside padding, margin, gap, and inset — keep border widths, blur radii, and font sizes on their own scales.
var(--space-4)4px · hairline gap · pill inner padding var(--space-8)8px · base unit · default gap inside compact rows var(--space-12)12px · between label + control · tight stack var(--space-16)16px · md spacing · between paragraph + spec var(--space-20)20px · grid gap on cards · controller row var(--space-24)24px · lg · default card padding · header spacing var(--space-32)32px · between groups · sidebar group block var(--space-48)48px · page gutter · canvas outer padding · 2xl var(--space-64)64px · hero block bottom · 3xl var(--space-96)96px · major section spacing · 4xl
--space-4
--space-8
--space-12
--space-16
--space-20
--space-24
--space-32
--space-48
--space-64
--space-96
04
Sections, Headers & Dividers
The structural vocabulary of every documented page. Use this anatomy whenever you're laying out content inside a canvas — it's how the rest of the system stays consistent.

A canvas is a stack of .section blocks. Each section opens with a .section-header (number + title + description), then any combination of .section-label eyebrows and .preview-frame showcases.

XX
Section Title
A short paragraph naming what this section documents and why a reader would care.
.preview-frame · rendered preview lives here
.preview-frame · second example
.sectionWraps every documented item in a canvas. Provides 80px bottom margin and a scroll-anchor for the sidebar. .section-headerOpens every section. Number + title + description. Underlined with var(--rule) (full primary). Don't omit the description — it's where the section earns its place. .section-numTwo-digit ordinal in mono. Sequential within the canvas. JetBrains Mono 11px muted. .section-titleBarlow 22px / 600. The h-level for a documentation block. .section-descBody-sm secondary. Caps at ~600px width to keep the eye-line short. .section-labelSmall Barlow Condensed eyebrow above a preview or sub-block. Auto-spaces 80px above siblings (except first child of a section). Use for "Variants", "States", "Anatomy", etc. .preview-frameDot-grid bordered container for the actual rendered example. Inherits surface tone, leaves padding to the inline style of the instance.

Three line-weight tokens, all derived from the primary ink. Choose one axis — line-weight (thin vs thick) or line-darkness (full vs faint). Thick at low opacity reads muddy in both directions.

var(--rule) · 1px primary
Structural — section-header underline, sidebar separator, table header. The strongest mark.
var(--rule-30) · 1px primary at 30%
Boundary — topbar bottom edge, layout-nav, layout-footer. Visible but stepped back.
var(--rule-faint) · 1px primary at 18%
Separator — card borders, table row dividers, type-row separators, preview-frame edges.

Two ways to mark a sub-block of content. .section-label is the small inline eyebrow used everywhere in this documentation. .section-strip (defined elsewhere) is a heavier full-width strip with a bottom rule, reserved for major group dividers within a flat layout.

Used at the top of a content row (a strip of cards, a list of articles inside an Editorial Index). The eyebrow names the group and shows a count; the "View all" link sits flush right. The eyebrow tints with the group's category colour — set --c-current on .group-header and the eyebrow inherits it.

For Designers — 3 of 12 View all →
.cards-grid · content row
Leading Design — 3 of 8 View all →
.cards-grid · content row
.group-headerflex space-between · margin-bottom: var(--space-20). Set --c-current here to tint the eyebrow. .group-header-eyebrowBarlow Condensed 11px / 700 / uppercase / 0.20em letter-spacing. Inherits var(--c-current). .group-header-linkSame family/size/weight as the eyebrow but tighter letter-spacing (0.14em) and primary colour. Hover fades opacity to 0.5.
05
Buttons & CTAs
Three tiers of call-to-action, each stepping back from the previous. The type is always the thing — buttons exist to clarify action, not to compete with content.
Primary
backgroundvar(--primary) colorvar(--surface) border1px solid var(--primary) radiusvar(--space-4) padding11px var(--space-24) fontBarlow 14px 600 hoverbg var(--primary-hover)

Use for the single most important action on a section. One primary button per content zone maximum.

Secondary
backgroundvar(--surface) colorvar(--primary) border1px solid var(--primary) radiusvar(--space-4) padding11px var(--space-24) fontBarlow 14px 600 hoverbg primary, color surface

Supporting action alongside a primary. Use when two actions share equal or near-equal weight.

Tertiary
border-bottom1.5px solid var(--primary) backgroundtransparent fontBarlow 14–15px 600 hoveropacity 0.45

Low-emphasis links and nav. No box. The bold weight retains authority without the visual weight of a bordered button.

Design Leadership
Fractional design leadership for early-stage and scaling startups navigating complex product decisions.

One primary · One secondary · One tertiary. The eye reads them in order. Never two primary buttons in the same zone.

✓ Do

Use one primary per content zone · Let the hierarchy guide reading order · Use underline link for low-stakes navigation · Arrow suffix (→) on forward navigation

✗ Don't

Two primary buttons side by side · Using accent colour (var(--accent)) as button fill · Pill radius on buttons — system uses 4px · All-caps button text

06
Navigation
A centered pill-button bar. All nav links share the same component — there is no separate "active" styling beyond what hover provides. The handwritten logotype sits outside the type system entirely.
backgroundvar(--surface) border1px solid var(--primary) border-radiusvar(--space-4) paddingvar(--space-8) 18px marginvar(--space-4) between pills fontBarlow 13px 600 letter-spacing0.02em — mixed case hoverbg var(--primary), color surface wrappingflex-wrap — breaks to 2 rows on narrow
Default Coaching
Hover Coaching
07
Filter Controls
OR multi-select content filters. Category identity is expressed through colour — hover reveals the category colour, active fills it. Barlow Condensed only — these are the designated space for the condensed variant.

Click to toggle. Hover any inactive pill to preview its category colour.

fontBarlow Condensed 12px 700 uppercase letter-spacing0.14em border-radius3px padding6px 14px default border1px solid var(--primary) default bgsurface hoverborder + text → category colour activecategory colour fill, white text logicOR — multiple selections allowed all deselectedAll re-activates automatically
✓ Do

Use for content type and category filtering · Allow multiple selections simultaneously · Always include an All option · Show active count or result count nearby when possible

✗ Don't

Use Barlow Condensed outside of pills · Use for AND logic without making that explicit · Use more than 8 pills in a row — wrap is fine but consider grouping

08
Pills & Badges
Four distinct pill types serving different purposes. All use Barlow Condensed. The shapes are similar — the distinction lives in color, fill, and context of use.
UX 2.0 Series Part 2 of 3
fontBarlow Condensed 12–13px 600 uppercase bordercategory colour at 35% opacity colorcategory colour bgtransparent radius4px useMulti-part article series only
Principle Framework

Sits below the article title. Signals that the article is a foundational position or structured model — not a news piece or opinion.

Free $249 In-Person Remote In 6 Days Past
fontBarlow Condensed 13px 700 uppercase radius3px padding3px 10px displayinline-flex align-items:center line-height1.4 — ensures vertical alignment useEvent cards only, ev-footer zone
01
CMS Panel
A content management tool in the same aesthetic as the public site. Same ink, rules, and type — no visual mode-switching between editing and reading.
Content
Articles 12
Events
Journal 3
Experiments
Site
Pages
Talks
Settings
Preferences
Articles
12
Total
8
Published
3
Draft
1
Scheduled
Leading Design
TitleCategoryStatusDate
The UI Technician Is Already ObsoleteLeading DesignPublishedApr 28, 2026
Design-Native Spec-Driven AI DevelopmentUX IndustryPublishedApr 10, 2026
Why Design Systems Fail Without CultureFor DesignersScheduledMay 14, 2026
The Vantage Point No One Can AutomateLeading DesignDraft
Coaching as Distinct from MentorshipFor DesignersDraft
02
Coaching Dashboard
Client engagement tracking. Card-based layout — each client is a card with their focus, progress, and next action visible at a glance.
Coaching
Active Clients
8
Active
3
This Week
24
Sessions YTD
2
Pending
Jordan Lee
Active
Session May 12
Career transition · Senior → Lead
Progress 6 / 12
Priya Nair
Active
Session May 15
Leadership · Team of 1 → 4
Progress 3 / 8
Marcus Chen
Paused
No upcoming
Creative health · Burnout recovery
Progress 4 / 6
Sam Okafor
Starting
Session May 20
Specialism · IC to practice lead
Progress 0 / 8
03
Analytics View
Site and content performance with colour-coded content categories, coloured bar charts, and category breakdown.
Site Analytics
4,812
Page Views
↑ 14%
1,234
Visitors
↑ 8%
3:42
Avg. Read Time
↔ stable
12
Inquiries
↑ 3
Top Articles
A Discipline Reset 1,402
UX Industry
Burnout Lives Below Workload 1,138
For Designers
Signal vs Noise 867
Leading Design
The Medium Shapes the Designer 612
Leading Design
By Category
UX Industry 1,840
Leading Design 1,479
For Designers 1,138
Events 891
Journal 312
04
Mobile App
Three-screen mobile app concept — article reader, event detail, and coaching session view. Same tokens, adapted for touch.
9:41 ●●●
alex m. chong
UX Industry

A Discipline Reset

Mar 4, 2026 · 14 min read

UX 1.0 was built around scarcity. AI dissolved it.

For two decades, UX justified its existence through its methods. The research process, the prototype handoff — these were the discipline.

"The gap between strategist and executor sits openly in the room now."

Reframe UX 2.0
9:41 ●●●
Talk
Design Leadership in the Age of AI
Toronto
Toronto, ON
Centre for Social Innovation
May 12, 2026 Wed · 7:00 PM ET

A live conversation on leading teams through disruption — making better decisions and staying human.

In-Person Free In 6 Days
9:41 ●●●
Session 7 of 12
Jordan Lee
Career transition · Senior → Lead
6 of 12 sessions complete
Today's Focus
Navigating the promotion conversation
Session Notes
Has been avoiding the direct conversation with manager. Fear of being told to wait without a path forward. Key reframe: the ask is for clarity on what the path looks like.