Design Engineering
Where design judgment meets engineering rigor. Typography, color science, performance, accessibility, and the craft of building interfaces that respect their users.
20 articles
Featured Guides
The Shader Gallery That Lied: Debugging 216 WebGL Presets
A user said the shader playground looked broken. Pixel-readback testing found 30 dead presets, 11 that never compiled, and the fallback that hid it all.
Why Safari 27 Ships 525 Fixes: Notes From the WebKit Lab
The WWDC 2026 Safari lab on how WebKit decides what to build: 525 fixes, a module-loader rewrite for top-level await, :has(), appearance: base, and more.
Customizable Select: Style the Real <select> at Last
Safari 27 and Chrome 135 let you style the real select element: appearance: base-select, ::picker(select), rich HTML in options, and a swappable button.
CSS Grid Lanes: Native Masonry in Safari
CSS Grid Lanes brings native masonry layout to Safari 26.4 in three lines of CSS, with a flow-tolerance dial that fixes masonry's old tab-order problem.
Accessibility in iOS 27: Reading Apps & Custom Controls
iOS 27 accessibility for reading apps and custom controls: text navigation linking, causesPageTurn, UITextInput, the adjustable trait, and direct touch.
Engineering Philosophy: Raj Reddy, Technology for the Bottom Billion
Raj Reddy pioneered machines you can talk to -- speech recognition, the blackboard model -- then aimed the most advanced AI at the world's...
HTML Is the Format AI Agents Want
Thariq Shihipar's HTML examples show why agent output format matters: spatial structure, interaction, and visual evidence beat flattened Markdown.
tvOS Focus Engine: SwiftUI Patterns for the Siri Remote
Apple TV navigates by focus, not touch. SwiftUI's .focusable, @FocusState, focusSection, and prefersDefaultFocus are the vocabulary. The patterns...
SF Pro: Variable Axes, Optical Sizing, And The Dynamic Type Contract
Apple's system font ships with three variable axes and continuous optical sizing. The vocabulary that makes typography work across the Apple platforms.
Accessibility As Platform: Personal Voice, Live Speech, Eye Tracking, Music Haptics
Personal Voice, Live Speech, Eye Tracking, Music Haptics, Vocal Shortcuts: accessibility as platform features, not app responsibilities.
Apple's New Speech Framework: SpeechAnalyzer vs SFSpeechRecognizer
iOS 26 introduces SpeechAnalyzer with SpeechTranscriber + SpeechDetector modules, an on-device replacement for SFSpeechRecognizer. When to migrate.
The Design Engineer's Agent Stack
Design engineers need agent infrastructure that enforces visual consistency, typography discipline, color compliance, and taste. Here are the six...
GLSL for Builders: A Shader Lab You Can Actually Use
A practical GLSL playground with live controls for learning shader intuition fast. Presets, uniform manipulation, and zero-framework WebGL in the browser.
The No-Build Manifesto: Shipping Without a Bundler
FastAPI + HTMX + plain CSS with zero build tools and perfect Lighthouse scores. Real production numbers, honest tradeoffs, and a clear decision framework.
Brutalist Web Design Meets Beauty: My Site's Approach
I built my site at the intersection of beauty and brutalism: structural honesty, precise typography, and four opacity tiers on absolute black. No...
Design Careers That Survive AI: Judgment Over Tools
After 12 years as VP of Product Design, I watched three paradigm shifts. The skills that survived every one are the same skills AI can't replace.
Color Science for Interfaces: Building a Zero-Color Site
I built a site with no colors — just white on absolute black with four opacity layers. Here's the color science that made the decision work.
Type Scales: How I Chose 13 Steps and Why the Ratio Matters
My site uses a 13-step type scale from 12px to 80px. How I chose the ratio, why system fonts outperform custom fonts, and what the squint test reveals.
Design Systems for Startups: How I Built Mine Backwards
I built my design system backwards: tokens first, components never. A CLS bug taught me the cost of skipping tokens. I stopped debating when to invest.
From 76 to 100: Achieving a Perfect Lighthouse Score
A FastAPI site went from Lighthouse 76 with 0.493 CLS to perfect 100/100/100/100. The fix: critical CSS extraction, a CSS variable bug, and async loading.
