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.

The 4px baseline grid made interactive. Every spacing value visualized, measured, and justified. The spine of the layout.

Stack

React, CSS custom properties, 4px grid

Every measurement resolves to a multiple of 4.

Color used last, used sparingly. Palette construction, semantic tokens, and the discipline of one accent per page.

Stack

React, OKLCH, CSS custom properties

Color is applied last because it is the loudest.

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.

Live typography playground. Adjust size, weight, tracking, line-height — see the result in real-time against running text.

Stack

React, CSS custom properties, live preview

Typography is best understood by adjusting it.

Generative type composition. Letters placed in space, responding to forces. Typography as particle system.

Stack

React, Canvas 2D, force simulation

Letters are shapes before they are language.

Modular type scale calculator. Pick a ratio, see the cascade. Major third, perfect fourth, augmented fourth — each producing a different voice.

Stack

React, modular scale math

The scale decides the hierarchy.

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.

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.

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.

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.

Unified APCA contrast explorer and token system. Explore pairs with perceptual contrast, build a token palette, export as W3C Design Tokens or CSS.

Stack

React, APCA SA98G algorithm, W3C token export

Measure perception, not luminance. Then encode it.

Typographic density calculator. Side-by-side comparison of text blocks — measure size, leading, measure width. Density as composite score, not character count.

Stack

React, Canvas measureText, getBoundingClientRect

Density is a ratio, not a feeling.

Joint work with lens. Design critique as structured practice — field notes on common sins, scored against real examples.

Stack

React, scoring rubric, field notes

Critique through elevation, not demolition.

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.

A type specimen that breathes. Text responds to viewport, time, interaction. Not a static showcase — a living document.

Stack

React, intersection observer, CSS transitions

Type is alive when it responds to context.

CSS Grid dissected. Columns, rows, gaps, areas — each property isolated and adjustable. The anatomy of layout made visible.

Stack

React, CSS Grid, interactive controls

The grid is not a cage. It is the skeleton.

Layout composition explorer. Golden ratio, rule of thirds, visual weight — classical principles applied to screen design.

Stack

React, Canvas 2D, composition overlays

Composition is the first decision and the last revision.