CSS · Layout

Content that sizes itself

Let an input grow with its text, then let columns find another row when they overflow.

Journal

CSS · Components

Querying a component state

Use a custom property as component data, then style descendants with a container style query.

Journal

CSS · Navigation

Navigation that follows the scroll

Keep a section link current as its target moves through a scroll container.

Journal

CSS · Positioning

Anchored content that knows when to hide

Move a tooltip’s anchor, let placement adapt, and hide it when the anchor leaves view.

Journal

CSS · Values

Branching and progress in CSS

Choose a state and move a value through a range with CSS-native expressions.

Journal

CSS · Patterns

Counting siblings in CSS

Use sibling position and count to space a repeated pattern.

Journal

CSS · Patterns

Randomness in CSS

Give repeated marks a little variation with a random angle.

Journal

CSS · Scrolling

A stateful scroll surface

Let a snapped carousel card recognise and style its active state.

Journal

CSS · HTML

Typed HTML attributes in CSS

Read a numeric HTML attribute as a CSS length, with an explicit fallback for invalid input.

Journal

CSS · Layout

Layout primitives in CSS

Decorated gaps and reading order. Let layout describe how a composition should be read.

Journal

CSS · Colour

Colour relationships in CSS

Build related surfaces and readable text from one base colour.

Journal

CSS · Controls

Styling a native select

Give a native picker a designed surface while keeping its keyboard behaviour.

Journal

CSS · Components

Shapes and CSS functions

Give a repeated calculation a name, then let borders follow a path.

Journal

CSS · Interaction

Placement and scoped transitions

Let fallback placement reshape its detail and keep repeated transition names local.

Journal

CSS · Colour

A colour axis with contrast

Change one base colour while surfaces, text and an accent follow different rules.

Journal

CSS · Geometry

Geometry with CSS

Directions, orbits and pointing lines. Three ways to describe position using CSS functions.

Journal

CSS · Shape

Shaping corners with superellipses

The same radius, a different character. Explore the curve between a bevel and a squircle.

Journal

Interactive 3D archive

36 Days of Type

Type a letter or number to explore an archive of rendered characters, then arrange them into a visual sentence.

Work

Living reference

Design System

Explore the foundations, controls and theme relationships behind this site.

Work

Image workflow

Image Suite

A compact node canvas for connecting references, prompts and image operations.

Work

Information architecture

Sitemap

Shape a site’s structure, plan its content and compare the proposed pages with the original.

Work

3D WorkWork

Ceramic vaseImage Suite

Studio studyImage Suite