One visual language runs the whole of alexmchong.ca, drawn from a single set of tokens.
A living design system, drawn from the site's real CSS — it builds alexmchong.ca and shows the systematic method behind it.
Every example here is rendered by the same stylesheets that run the live site, so this is a referenceable system, not an aspirational style guide — when the CSS changes, the documentation changes with it. Each value is defined once and referenced by name: the kind of constraint that gives the system room to grow and stay maintainable.
The approach is Bauhaus in spirit — a structured attention to the basics of materiality: texture, structure, typography. It borrows the way brand guidelines were built in the 1980s and the discipline of a corporate computer manual, which is where the grey comes from. It takes that era's structure, not its surface; it doesn't imitate paper.
The type carries personality on purpose, so the message leads and the styling stays quiet. Much of contemporary design reaches for theatrics — loud colour, heavy lines, thick type — but thick type doesn't make a point bold if the point is thin. This is built the way the practice works: systems thinking, structured and thoughtful, never theatrical — meant to be authentic in a field of portfolios that lean on the smokescreen of vibecoded coolness.
Colour — a warm-neutral base, one sage accent used only in text, and a pool of eighteen category hues at a single intensity.
Type — Barlow for all structure; Instrument Serif, italic and rationed, for emphasis; a fixed 9–54px scale.
Structure — an 8px unit, near-square 4px corners, flat surfaces, and three rule weights from one ink.
This reference is the single source of truth for the system, and a public record of a systematic way of building. Its seven sections move from the smallest pieces toward whole pages: Foundations holds the tokens; Components, the building blocks; Patterns and Pages compose them into sections and templates; CMS covers the tools that author the site, with room for more to come; Applied carries the system into new contexts; and CSS Library is the same system seen by source file.
For light surfaces — borders, dividers, subtle hovers, dark overlays. Reach for these instead of inventing fresh rgba alphas. Five steps cover every realistic use.
Used inside event headers, masterclass gradients, and experiment cards where text and detail sit on a near-black ground.
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.
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.
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.
Minimum 22px · Saturated colour only · Italic weight 400 only · Inline only via display:inline-block · Max 2 instances per page
Hero emphasis word · Section intro sentence · Pull quote in article · Journal entry title · About page statement · Logotype
Body copy · Navigation · Buttons · Labels · Metadata · Captions · Anything below 22px · Anything in muted color
var(--space-24) = 24px. Use only inside padding, margin, gap, and inset — keep border widths, blur radii, and font sizes on their own scales.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.
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.
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.
--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.
--neutral and are deliberately faint — the swatches below are at true scale, with an 8× crop so the actual pattern reads. Drawn live from the real CSS.currentColor, so it inherits the surrounding text colour — the journal glyphs take their category colour. There is no icon font; icons live inline in the markup.The functional glyph set for the CMS admin shell: one per sidebar destination, all drawn on a 14×14 grid at the same 1.2px hairline stroke. They render in currentColor, so they pick up the nav item's state colour (muted at rest, primary when active). The closing ✕ is the only action glyph — it backs the remove/close buttons.
A generated background for experiment cards: concentric rings and satellite dots, seeded per card from a hash of its id, so rotation and arrangement vary card to card. The forest ramp marks case studies; the purple ramp marks experiments.
Use for the single most important action on a section. One primary button per content zone maximum.
Supporting action alongside a primary. Use when two actions share equal or near-equal weight.
Low-emphasis links and nav. No box. The bold weight retains authority without the visual weight of a bordered button.
One primary · One secondary · One tertiary. The eye reads them in order. Never two primary buttons in the same zone.
Use one primary per content zone · Let the hierarchy guide reading order · Use underline link for low-stakes navigation · Arrow suffix (→) on forward navigation
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
Click to toggle. Hover any inactive pill to preview its category colour.
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
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
--primary with a white check — the same "selected = primary" language as the filter pills and active nav. Keyboard focus uses the DS denim ring.Click to toggle. Tab to a checkbox to see the focus ring.
.dash-card
.dash-card--callout
--c-current per card
baseextends .dash-card
Sits below the article title. Signals that the article is a foundational position or structured model — not a news piece or opinion.
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.
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.
var(--ink-72), content remains legible.
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.
The designers thriving right now changed how they think before they changed how they work.
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.
Design leadership is about building the conditions where stronger decisions get made — with or without you in them.
The symptoms are always visible — slow output, constant rework, misaligned stakeholders. The cause sits a layer below.
Most designers hit the wall when they've lost the thread connecting their work to something they actually care about.
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.
Every designer I know who stayed creatively alive for decades had something they made that no one was paying them for. The pattern repeats.
The designers getting the most out of AI articulate intent better — which was always the job.
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.
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.
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.
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.
On a series index, each card carries a faint Instrument Serif part-number behind its content (from _series_number). The card adds .card--has-series-number; the numeral sits at 12% of the category colour, pointer-events none, behind the content.
Second in the UX 2.0 series — the part number sits behind the card as a quiet index.
Upcoming: full colour, countdown pill in the header.
Past: keeps full colour (no desaturation). The diagonal hatch across the dark top, a clock, and “Past Event” signal it has happened.
Remote variant — ghost “Remote” wordmark in the dark top.
Masterclass variant — logistics list + dedicated CTA zone.
Feed it a product description — it hypothesizes the most likely UX debt before you open a single screen.
An interactive model that maps your current cognitive state to the AI interaction mode that matches — so you're directing it from intent.
Forces tradeoff conversations before the first sprint. Enter constraints — it outputs a range, a confidence level, and a warning.
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.
I keep returning to the idea that constraints reveal what creativity actually is.
The blank page is paralysis with a better story.
Seniority in design is being the person who changes what the room is trying to do.
The designers struggling most with AI were already struggling to articulate why their decisions mattered.
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.
UX 1.0 was a discipline built around scarcity. AI dissolved that scarcity entirely.
blocks.css.blocks.css (bleed images are stand-in gradients here).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).
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.
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.
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.
--c-current). Rendered live from the real blocks.css.--rule-30 bottom edge — boundary, not weight.UX 1.0 was built around scarcity. AI dissolved it.
A live conversation on leading teams through disruption.
The designers struggling most with AI were already struggling.
The tool surfaced a gap that was already there.
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.
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.
Unsure what you need? Most lasting conversations start there.
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.
data-category is the pill key. Rendered live from the real blocks.css; click the pills to filter the feed.UX 1.0 was built around scarcity. AI dissolved it.
When every tool claims to accelerate your work, you need a filter more than a workflow.
The designers struggling most with AI were already struggling.
The tool surfaced a gap that was already there.
A live conversation on leading teams through disruption.
Most designers hit the wall when they've lost the thread.
Feed it a description — it hypothesizes the UX debt.
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.
.fc-progress (momentum meter)..fc-stat-card + .fc-bar..fc-phone..fc-cadence / .fc-intention / .fc-ritual / .fc-meter..fc-paired / .fc-energy / .fc-project.