June Okafor
Believes a type scale is a moral position. Runs the Thursday critique with an iron rule: be specific or be quiet.
- Role
- Design Director
- Based
- Sydney
- In the journal
- 50 articles · 6 case studies
Copperplate: a design system people actually read
How we rebuilt a dev-tooling company's design system docs around live tokens, do/don't blocks and honest guidance — and doubled adoption in a quarter.
Ledgerline: an accounting firm with opinions, finally visible
A sharp accounting practice had a beige website. We rebuilt the identity and turned forty accountants into a publishing engine with forty-minute weeks.
A brand system that grows itself
How Brassfern rebuilt Hearthbrew Coffee's identity around a generative botanical system — and handed the internal team a tool instead of a PDF.
Tallow & Co.: a 1987 butcher becomes a modern providore
A heritage Adelaide butcher went online without losing the counter-chat. How we built pre-order flows, seasonal boxes and a brand refresh the regulars didn't notice.
Wattle & Daub: a dining room website that fills tables
How we rebuilt a Surry Hills restaurant's website around reservations that actually convert — cutting no-shows 38% and doubling midweek covers.
Kite & Anchor: insurance onboarding people actually finish
A boutique insurtech's quote flow was losing four in five visitors. Progressive disclosure, honest defaults and plain-English policy summaries fixed the finish line.
Continue on your phone: handoff UX that doesn't lose people
Session and device handoff done properly: continue-on-another-device flows, magic links vs QR codes, delayed-resume UX and the honest security boundaries.
LLMs in the design process: acceleration with a seatbelt
How we use LLMs in the studio: synthetic drafts, copy pressure-testing, edge-case generation — and the verification rules that keep AI-assisted design honest.
Will your logo survive your product?
Identity work gets judged at 16 pixels. Favicons, avatar crops, dark surfaces, motion restraint, and the logo-usage contract that keeps engineers on side.
Design the footer like someone reads it — because someone does
Beyond the sitemap taxonomy: the footer design review as its own ritual — contact confidence, newsletter fields, legal rows and the details that signal craft.
Focus states are a design system feature, not a browser default
Stop inheriting the browser's focus ring. Design it: tokens, 3:1 contrast on every surface, dark-theme variants, and the overrides that silently break keyboards.
Seasonal theming without pretending it's a rebrand
How to theme a site for a season or campaign with token overrides, not panic: scoped palettes, motion swaps, expiries, and where festive becomes confusing.
Icon systems: SVG discipline for the web
Most icon sets decay into a junk drawer of mismatched SVGs. Grid rules, stroke discipline, sprite strategy and the build-time pruning that keeps an icon system honest.
Light, dark, light: section banding as rhythm
How to use alternating light and dark sections as editorial rhythm: surface budgets, seam design, spacing across bands, and fitting a night section into a paper site.
Feature discovery: design for the day after launch
Shipping a feature is half the job. Announcement surfaces that respect focus, contextual education, suppression discipline, targeting and how to measure discovery lift.
Progressive disclosure for genuinely complex tools
Hiding complexity without hiding power: sensible defaults as strategy, advanced modes, command palettes as the pro lane, and how to measure if disclosure works.
Aligning stakeholders without design by committee
How to keep design decisions fast with many stakeholders: decision mapping, demo-based alignment, the input-vs-decision distinction, and rescuing stalled review loops.
OG images: the growth surface hiding in your metadata
Your pages are shared thousands of times, and most preview cards are a cropped hero or nothing. A system for OG images that earn the click — and how to measure it.
Whitespace is a tool, not a leftover
Whitespace is the layout's punctuation: optical spacing, density budgets per audience, emptiness as hierarchy, and how to defend it in stakeholder reviews.
Design system buy-in: the internal sales playbook
Design systems don't fail at build; they fail at buy-in. The cost-of-inconsistency maths, the pilot-component strategy, and the executive story that lands.
Editorial grids on the web: rhythm, breakout, and restraint
The sequel to our editorial grid philosophy: the CSS mechanics of full-bleed breakouts, captions and pull quotes as real components, and a governance model for restraint.
How to give design feedback that speeds the work up
A client's guide to design feedback: reaction versus direction, the 'what problem does this solve' script, and comments that speed the work up.
Dark mode is a second design system
Treating dark mode as a CSS inversion is how you ship a grey smear. Design dark themes as a second, deliberate system — tokens, elevation, contrast, CI tests.
Data visualisation on marketing pages, honestly
Charts on marketing pages answer to different rules than dashboards. Honest axes, motion in service of comprehension, and the table that saves your accessibility audit.
Invite flows: the social onboarding of team products
The invite flow is where one user bets their reputation on your product. Role choice at invite time, shareable links vs email, and viral-loop honesty.
Co-branding without the mush
Partnership branding without the logo soup: hierarchy rules, lockup maths, shared-palette strategy, and the pre-nup questions that prevent ugly co-brands.
Illustration systems that don't go stale
One-off illustration ages like milk. Here's how we build illustration languages as systems: primitives, composition rules, generators and maintenance models that survive.
Bundles and kits: designing the build-your-own moment
The bundle builder as interface design: shelf metaphors, fill visuals, flat pricing, coupled inventory — and when a kit makes the product disappear.
Hero sections beyond the gradient blob
A field guide to memorable homepage heroes: typographic statements, generative canvases, product-in-context and editorial openers — with the performance cost of each.
Keyboard shortcuts nobody finds
Most shipped shortcuts are discovered by accident or never. Legends, cheat sheets, teaching in context, remapping, and designing for the power user you'll have.
Brand governance without the brand police
Governance fails when it's enforcement. How to build decision rights, self-serve assets and exception handling that make the right thing the easy thing.
An illustration system is rules, not a folder of PNGs
Illustration that stays consistent after the artist leaves: principles with forbiddens, per-artist commissioning briefs, rarity budgets, and storage that survives churn.
Dates and times: pickers, zones and the lies of relative time
Calendar grids vs typing, timezone display rules for teams, relative timestamps that decay to absolute, and the DST edge cases that bite months later.
The logo is dead; long live the identity system
The standalone logo died when surfaces multiplied and motion became default. What replaced it isn't a smaller logo — it's an idea designed to survive every context.
Colour systems that survive dark mode and rebrands
Literal palettes break the moment a brand shifts or dark mode ships. Here's the semantic colour architecture that has survived both — twice — on real client work.
Pull quotes and margin notes: editorial devices for the web
Pull quotes, asides and margin notes give long reads their rhythm. The semantic markup, the responsive survival tactics, and the restraint that keeps them editorial.
Brand colour beyond default blue
How to choose brand colour with intent: category colour maps, distinctiveness vs convention, accessibility as a brief, and testing colour in the wild.
Naming across borders: the checks that save you later
A name that sings in Sydney can stink in Singapore. Linguistic screens, trademark classes, domain realities and the false friends that kill product names.
Running a design critique people actually want to attend
Our Thursday critique format, a decade in the tuning: framed questions, a silent read, kind-specific-necessary filters, and stopping senior voices anchoring.
Editorial grids on the web: rhythm without rigidity
Bringing print's editorial rhythm to responsive layouts: columns that collapse gracefully, spacing that survives the box model, breaking the grid on purpose.
Type as brand: when the typeface is the logo
Retail fonts, custom type, and the maths in between. How we decide when letterforms should carry a brand — and how to make typography do a logo's job.
Font loading: recipes from the network tab
Webfonts are where performance budgets go to die quietly. Subsetting in CI, unicode-range slicing, per-role font-display policies, and the CLS nobody plans for.
Notifications designed like you're not the main character
Notification systems people don't mute: severity ladders, digest economics, channel choice and the anti-patterns that train users to ignore everything you send.
Settings: the screen your product is judged on at month three
Nobody evaluates settings during the trial; by month three they're how users judge you. Defaults as decisions, dangerous-action design, searchable settings.
The 90-minute brand audit: our scoring sheet, free to steal
A structured 90-minute brand audit any team can run this afternoon — consistency sweep, voice sampling, asset inventory — with our actual scoring sheet.
Template galleries: the shortcut to the aha moment
Starter templates are onboarding's best shortcut — if they're categorised by job not industry, previewed live, pruned ruthlessly and measured to activation, not clicks.
Running design critiques that sharpen instead of flatten
Our studio's critique framework: roles, timing, the 'specific or silent' rule, and critiquing outcomes instead of taste. Includes a one-page checklist.
Icon systems: the quietest, hardest-working brand asset
Icons do more daily brand work than your logo. How to design an icon system: grids, metaphor consistency, custom vs library, motion rules, and style guides that survive.
Motion that earns its keep (and the 160ms rule)
Our motion philosophy: the 160ms rule, an easing vocabulary of three curves, choreography limits, and prefers-reduced-motion as a design input, not a checkbox.
Settings screens grow up: running the product surface nobody loves
Settings rot quietly — accreted toggles, orphaned features, dangerous defaults. A rubric for what earns a setting, and the quarterly audit that keeps it honest.
Testimonials beyond the card carousel
Testimonials don't need a grey card carousel. How to present client quotes as editorial evidence — typography, attribution, deep links, and honest context.
Brand architecture decisions: house, endorsed, or let go
Branded house, endorsed brands or house of brands — how to choose, what migration costs, the sub-brand rules that prevent chaos, and how acquisitions change the answer.
Type systems for marketing sites that still load fast
How to build a marketing-site type system that carries the brand without blowing the performance budget — variable fonts, subsetting and metric-matched fallbacks.
Dashboard design: answer first, chart second
Most dashboards are chart galleries that answer nothing. The question-first method: decision inventories, alert thresholds, and the five-element view that wins.
Your changelog is a marketing channel
Release notes that sell: segmented announcements, the in-product/email/SEO triple-duty, mining changelogs for case-study fodder, and cadence that signals momentum.
Type pairing for brand systems: two voices, one argument
How we pair display and text faces in identity work: contrast logic, superfamilies vs strangers, the third-face rule, and testing in the ugliest context first.