Design system / 2026

The system behind the feeling.

A small set of decisions turns strategy into a world people can recognise. Type, space, colour, and behaviour give different kinds of work a shared rhythm.

A working principle

“Design is one.”

Massimo Vignelli, The Vignelli Canon.

Identity, interface, image, and space may look different. The discipline behind them should still feel related.

Make coherence repeatable.

Standardize the invariants, not the story.

The work moves between identity systems, digital experiences, and generative fields. The constants are clarity, proportion, and restraint, with enough structure for the idea to travel without losing its character.

01 / Voice

Type sets the register.

Newsreader carries the editorial voice. Manrope carries operational clarity. The hierarchy is felt before it is named.

A specimen in context

Identity is an experience.

The strongest brands are made through clear decisions, repeated with care, until people know how to feel about them.

RoleBrand design / Creative directionSystemNewsreader / Manrope

Standard heroArt-directed heroEditorial statementSection headingLong-form displayCase-study subheadReserved display thesis

02 / Space

Rhythm is a form of hierarchy.

Space distinguishes a thought from its supporting material. It is not empty room; it is editorial punctuation.

A measured composition

More room above a new idea.

Intervals are selected from the shared scale, then judged against the type and content.

--space-3

--space-4

--space-5

--space-7

--space-10

The structure underneath

Seven columns for the idea. Five for the evidence. The grid gives the page a rhythm without dictating the story.

03 / Material

Colour stays quiet.

The portfolio shell stays controlled so the work can carry the visual colour story. One action accent is enough.

A quiet interface

Colour supports the decision.

Paper holds the page. Ink carries the idea. The accent asks for action.

Paper--color-paper

Surface--color-surface

Surface raised--color-surface-raised

Ink--color-ink

Ink muted--color-ink-muted

Ink subtle--color-ink-subtle

Line--color-line

Accent--color-accent

Light and dark mode are not alternate art directions. They are two expressions of the same hierarchy.

04 / Motion

Motion gives the system a pulse.

Motion is used for orientation, reveal, and feedback. It never asks to be admired on its own.

Try the rhythm

Each gesture uses one of the timings already present in the portfolio.

Feedback180ms / standard

--duration-fast · --ease-standard

Reveal520ms / out

--duration-reveal · --ease-out

Field800ms / study

--duration-study · --ease-study

Time is context

--duration-fast180msImmediate feedback

--duration-press160msPress feedback

--duration-study-menu180msSmall menu transitions

--duration-image220msImage response

--duration-medium320msInterface transitions

--duration-reveal520msEditorial reveals

--duration-study800msField material

--entrance-offsetvar(--space-3)Section arrival offset

--entrance-blur0.5remMedia entrance blur

--entrance-stagger50msList entrance step

--entrance-chapter-step70msPaired chapter step

--entrance-chapter-cap210msPaired chapter maximum delay

--motion-press-scale0.97Subtle press compression

--motion-hover-media-scale1.018Fine-pointer media response

--motion-menu-offset-0.35remSmall menu arrival offset

--motion-spring-duration0.5sSelective bespoke spring duration

--motion-spring-bounce0.2Selective bespoke spring bounce

Viewport entrances

One shared grammar for editorial arrival: text stays crisp, media carries the material shift, and lists settle in a short sequence.

IntroOpacity settle--duration-medium

SectionOpacity + 12px arrival--duration-medium

MediaOpacity + scale + blur--duration-reveal

ListCapped 50ms collection stagger--entrance-stagger

Reduced motion Content is exposed immediately; blur and movement are removed.Settled Each owner reaches `data-motion-state="settled"` once and keeps its final state.Slow media Layout space is reserved; media never blocks reading or interaction.Hover / focus Fine-pointer crop response and keyboard-safe focus stay within the same ownership contract.Talos `data-motion-recipe="talos"` shares the trigger while retaining geometry and mark choreography.Light Study `data-motion-recipe="light-study"` shares lifecycle events while its field and canvas stay bespoke.

05 / Infrastructure

The machinery should disappear.

The site is built with Astro: static by default, selective by necessity, and fast enough for the idea to arrive before the implementation does.

Astro

The quiet stack

Astro renders the editorial routes at build time and leaves server handling to the routes that need it. MDX keeps case studies structured, local fonts and media stay inside the production package, and one shared motion director coordinates viewport entry, sequencing, focus safety, and reduced-motion behavior. It currently pilots vanilla Motion's `inView` primitive for detection while CSS owns the visual treatment. Talos and Light Study share the same lifecycle through bespoke recipes. The only Three.js surface is Light Study, which keeps a CSS fallback when motion or capability is unavailable.

Build-time editorial routesMDX case studiesLocal fonts and mediaOne shared motion directorCSS-owned visual motionThree.js only in Light Study

06 / Practice

Rules become valuable in use.

A rule earns its place when it helps someone understand, trust, or move through the work.

Applied system / One composition

Where the decisions meet.

Type, space, and behaviour turn an idea into something people can recognise, understand, and move through.

Resting

Clear hierarchy. Quiet action.

Engaged

Visible agency. No decoration.

Supporting

Supporting information recedes.

Under pressure

Premium means usable.

Focus remains visible, and touch and keyboard never depend on hover. Pointer feedback adds a little life without carrying meaning. Motion is purposeful, and the hierarchy survives themes, narrow screens, reduced motion, and missing WebGL. Care is what makes the system dependable.

Product premise → design direction → tokens → components → content → review.The system is maintained through decisions, not abstraction for its own sake.