Hard constraints.
Raw silicon.
Real interfaces.

You don't need another generic UI kit. You need to understand OLED power draw, saccadic masking thresholds, and the mathematics of touch targets. This is a living document of display engineering.

System Baseline Metrics LIVE
Saccadic Masking Threshold ~20-200ms
OLED True Black Delta -63% Pwr
Minimum Touch Target (Thumb) 25mm / 48dp
Human Foveal Vision 1-2° Angle

Core Pattern Index

Categorized by physical interaction layer.

Layer 01 →

Touch Targets & Fitts

Mathematical minimums for human digits. Designing for thumb sweeps and index precision.
Layer 02 →

OLED True Dark

Moving past #111111 to #000000. Managing sub-pixel smearing at 0 nits background.
Layer 03 →

Saccadic Transitions

Timing layout shifts to match the human eye's natural blind spots during rapid movement.
Layer 04 →

Subpixel Typography

How RGB stripe vs Pentile displays alter font rendering, and CSS antialiasing trade-offs.
Layer 05 →

Haptic Chronology

Syncing visual state changes with linear resonant actuator (LRA) feedback latency.
Layer 06 →

WCAG 3.0 APCA

Moving beyond simplistic contrast ratios to perceptual luminance models.
MT = a + b * log2(2D/W) Start Pt. Target (W)
Theory in Practice

Stop Guessing at Touch Targets.

The industry default of arbitrarily sizing buttons to "look right" ignores fundamental biomechanics. Fitts's Law dictates that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.

When you shrink a primary CTA to 32px to fit a dense layout, you are mathematically increasing the cognitive load and error rate for the user. Apple dictates 44pt. Google dictates 48dp. The physical human thumb averages 25mm.

  • 1. Measure Distance (D) from standard resting grip.
  • 2. Calculate Width (W) for required Index of Difficulty (ID).
  • 3. Assert 48dp minimums for fatal actions.
Calculate Fitts' Index

Engineering Calculators

Zero-dependency, vanilla JS tools with mathematical fallback.

OLED Power Est.

Calculate milliwatt savings of true #000000 over #111111 gray.

Run Calculator →

Contrast APCA

Next-generation perceptual contrast analysis.

Run Calculator →

Saccadic Timer

Tune animation durations to hide within eye movements.

Run Calculator →

Subpixel Sim

Visualize font smoothing across RGB vs Pentile matrix.

Run Calculator →
Hardware Constraints

The Myth of the Infinite Canvas

Designers operate in a void of perfect vector math. Devices operate in a physical reality constrained by thermal envelopes, GPU bandwidth, and lithium-ion chemistry.

An interface that looks pristine in a design tool can decimate battery life if it forces an OLED panel to blast pure white at 1200 nits, or drops frame rates by overusing expensive CSS backdrop filters that bypass GPU acceleration.

  • Backdrop-filter blur costs ~4x more GPU cycles than a simple semi-transparent fill.
  • Pushing 120Hz on a 4K mobile display means calculating 8.3 million pixels every 8 milliseconds.
  • Peak HDR brightness degrades OLED organic compounds logarithmically over time (burn-in).
Vector Blur O(r²)
Box Shadow O(r)
Opacity O(1)

Render cost vs complexity

Chronology of Display Tech

How physical mediums shaped interface paradigms.

1970s

Cathode Ray Tubes (CRT) & Phosphor Decay

Phosphor burned into screens if static images remained too long, forcing the invention of the "Screen Saver". The green glow defined the aesthetic of early computing.

1990s

Twisted Nematic (TN) LCDs

Terrible viewing angles and slow pixel response times meant scrolling left visible ghosting. Interfaces favored static, paginated layouts over fluid scrolling.

2010s

IPS & Retina Densities

Pixels became so dense they were no longer visible to the naked eye. UI shifted from skeuomorphic pixel-perfect bitmaps to infinite vector minimalism.

2020s

LTPO OLED & Variable Refresh Rates

Displays that drop to 1Hz for static content and ramp to 120Hz for scrolling. True blacks save battery. "Dark Mode" becomes a hardware-level necessity.

Ag
x-height vs ascender ratio
Cap Height 700
X-Height 520
Descender -200
Typographic Scaling

Designing for Density, Not Billboards.

Modern UI patterns often rely on massive display type that works on Dribbble but fails in complex software. When building data-dense applications (dashboards, IDEs, financial tools), vertical rhythm and x-height are more critical than character.

A high x-height font (like Inter or Space Grotesk) remains legible at 11px. However, this same attribute makes it exhausting to read in long-form prose, where distinct ascenders and descenders help the eye track word shapes.

Read about Typography Rendering

Accessibility vs Real World Vision

Why pure mathematical contrast ratios fail.

The WCAG 2 Dark Mode Flaw

WCAG 2.1 contrast formulas were designed for black text on white backgrounds. When inverted for dark mode, the formula treats light colors symmetrically, leading to "accessible" buttons that are perceptually muddy, and "failing" buttons that are perfectly readable.

This is why APCA (WCAG 3.0) introduces Lightness Contrast (Lc), which models human perception based on text weight and spatial frequency.

→ Use the APCA Calculator
WCAG 2.1: 21.0:1 (Max)
Black on White is standard.
WCAG 2.1: 4.5:1 (Passes)
Dark grey on darker grey. Technically passes, practically illegible.
WCAG 2.1: 3.8:1 (Fails)
White on Blue. Fails mathematically, but easily readable by humans.
Kinematics

Spring Physics > Linear Easing

The human brain is highly attuned to physical motion. Objects in the real world do not move at a constant speed and then stop instantly (Linear easing).

They possess mass, accelerate via force, and decelerate via friction. Using spring physics (mass, stiffness, damping) instead of fixed-duration CSS cubic-bezier curves results in interfaces that feel organic and responsive to the velocity of the user's swipe.

Damped Harmonic Oscillator

Under-damped spring settling at target value (0).

Selected Essays

Opinions, historical context, and deep dives into the decisions that shaped modern screen interfaces.

Newsletter

The Raw Output

A monthly brief on display engineering. No fluff.

Essay — 03

The Psychology of Corner Radii

Sharp edges imply threat. We trace the neurological basis for the rounded-corner dominance in modern UI.