Adaptive MatrixOne design width per design file

A px cannot be converted until you know which design file it was drawn on. Give every design file its own canvas, and pages, mobile components and desktop components all scale correctly at the same time.

Get started

Configuration reference

GitHub

Multi-canvas by design

Pages, a mobile component library and a desktop component library come from three different design files. Each gets its own canvas, and every px is converted against the width of the canvas it belongs to — no choosing between a page that scales and components that do not.

How the numbers are derived

Bounded fluid output

The output is clamp(), not a bare vw. Layout keeps scaling between the two widths you name and stops at both ends, so a 4K monitor does not get a 90px body font and a 320px phone does not get a 9px one.

Every option

Text stays zoomable

Sizing text in vw alone breaks browser zoom, which is a WCAG 1.4.4 failure. A rem + vw hybrid keeps type fluid and keeps it responsive to the reader's own font size. Set fluidity to zero and it is plain rem.

Support and degradation

Component libraries already handled

The canvases for the component libraries a project actually uses are built in and matched by class-name prefix, custom-property prefix and file path. The default configuration is correct before you configure anything.

What is built in

Breakpoints get a canvas too

A rule inside a desktop media query is compiled against the desktop canvas, not the phone one. When a rule's live width range falls outside its canvas, the compiler says so instead of quietly emitting a constant.

Routing by breakpoint

Defined by data, not by prose

The behaviour is pinned by a language-agnostic conformance suite — pure JSON plus CSS fixtures, runnable as an acceptance suite by an implementation in any language. Pure TypeScript, one runtime dependency.

The conformance suite

Built for agents as well as people

Every page is fetchable as raw Markdown at its own URL plus .md, the whole set is indexed at llms.txt, and every option is published as a JSON Schema whose defaults are read out of the compiler itself.

Documentation for agents

Preview before you commit

The CLI compiles a stylesheet and prints the result, so a configuration change is something you read rather than something you deploy and hope about.

CLI preview

English · 简体中文