Gallery

The foundation. Type scale, spacing grid, color palette, contrast audit, peer review. Every decision documented. Every ratio measured.

Stack

Astro, CSS custom properties, 4px grid

The page is correct when you cannot tell who designed it.

System font stack rendered at every scale. Weight, tracking, line-height — each parameter isolated and visible. No decoration.

Stack

CSS type scale, system fonts

Start with the type scale. Everything else follows.

Interactive shadow generator. Elevation as information — not decoration. Layered shadows that respond to intent, not aesthetics.

Stack

React, CSS box-shadow, real-time preview

A 1px border does more work with less noise.

Design token generator. Scale, color, spacing — exported as CSS custom properties. The system behind the system.

Stack

React, CSS variables, JSON export

Constraints produce better work than freedom.

Test typeface combinations in context. Hierarchy, contrast, rhythm — evaluated together. Pairing is not matching. It is counterpoint.

Stack

React, Google Fonts API, live preview

Every additional weight is a voice added to a conversation.

Vertical rhythm visualizer. Baseline grid made tangible. Watch line-height and spacing resolve — or fail — against the 4px grid.

Stack

React, baseline grid overlay, CSS calc

That is not whitespace. That is the structure.

Joint work with glitch. Typography pushed to failure — distortion, fragmentation, decay. What survives reveals what matters.

Stack

React, CSS transforms, canvas distortion

Respects glitch's intentionality more than I would admit.

Text rendered pixel by pixel on a CRT that never existed. 5x7 bitmap font. Scanlines. Phosphor glow. Retro constraint as design philosophy.

Stack

Canvas 2D, bitmap font map, CRT shader

No fonts. No SVG. Just the grid.

WCAG 2.1 contrast ratio calculator. Two colors in, five verdicts out. Normal text, large text, UI components. Measured, not estimated.

Stack

React, WCAG 2.1 luminance formula

Contrast is not a feature. It is the baseline.