A minimal design system for product interfaces.

Vlak

What it is

Vlak is a minimal design system for product interfaces. Its name is Dutch for plane or surface: the field where type, controls, and content take shape.

It is built for the dense, ordinary work of software: forms, tables, settings, navigation, and states. A 204px module sets the structure. Inter carries the hierarchy. Hairlines make relationships visible without turning every element into a box.

Usage

Choose how much of the system you want to own. Import precompiled React components, vendor the StyleX source with the CLI, or use vlak.css and stable rs-* classes in plain HTML.

Terminal

npx @noorddev/vlak-cli init

Head

<link rel="stylesheet" href="styles/vlak.css" />

Body

<button class="rs-btn-primary">Save</button>

index.html is a working specimen of the system: type, the 204px grid, controls, and the ten principles.

The CLI writes styles/vlak.css, Inter, and vlak.json into your project. It works offline and makes no runtime request.

For the dark scheme, set data-theme="dark" on the root element.

Open source

Vlak is MIT-licensed. Use it, modify it, and ship it in commercial or personal work.

Inter is SIL OFL 1.1, designed by Rasmus Andersson. rsms.me/inter/

The system

Vlak treats an interface as a field, not a stack of cards. A 204px module gives pages a repeatable measure: one cell for a control, two for a form, several for a working surface. Content stays flush to the gridline.

Body text is 15px at weight 500. Headings and labels are 600. Small text keeps Inter’s tall x-height; display sizes tighten their tracking. Sentence case and a short type scale keep the hierarchy explicit.

Paper, ink, and the grays between them carry the palette. Hairlines separate related regions. Concentric radii align nested controls. Motion lasts 0.12 to 0.18 seconds and answers an action; color and opacity change before layout does. Controls are 40px tall on desktop and 44px on a phone.

204

18420

184px content + 20px gutter. One repeatable field.

Hairlines

A 1px rule marks a relationship. It does not turn every region into a card.

Flush

Content edges meet the gridline. Alignment carries the composition.

Grotesque

One face. Size, weight, measure, and space establish hierarchy.

Design lineage

Vlak takes a method from modernism, not a period look. From Swiss International Typographic Style: the grid as an ordering system, sans serif type, asymmetric composition, and hierarchy built from scale, weight, and space.

From Dutch modernism: a more elastic field, type used as structure, direct construction, and tension between strict systems and lively composition. The result is neither a poster theme nor a historical reproduction.

Vlak translates those principles into product constraints: tokens, native elements, stable classes, visible focus, predictable spacing, and components that can be inspected as data.

1914–1996 · Zurich

Josef Müller-Brockmann

Grid Systems in Graphic Design. Neue Grafik, 1958.

1928–2019 · Amsterdam

Wim Crouwel

Stedelijk posters. New Alphabet, 1967. Total Design, 1963.

100 Jahre Eisenbeton, Kunstgewerbemuseum Zürich, 1950

1902–1988 · Zurich

Richard Paul Lohse

100 Jahre Eisenbeton. Kunstgewerbemuseum Zürich, 1950.

Konstruktive Grafik, Kunstgewerbemuseum Zürich, 1958

1904–1983 · Zurich

Hans Neuburg

Konstruktive Grafik. Kunstgewerbemuseum Zürich, 1958.

1919–1986 · Zurich

Carlo Vivarelli

Für das Alter. Per la vecchiaia, 1949.

1908–1994 · Zurich · Ulm

Max Bill

HfG Ulm. Concrete art.

1930–2017 · Basel

Karl Gerstner

Designing Programmes, 1964.

1934–1961 · Basel · Cambridge

Thérèse Moll

Micorène, c. 1958. Gerstner atelier. Modular type at MIT.

1914–1970 · Basel

Emil Ruder

Typographie.

Form Farbe poster, Gewerbemuseum Winterthur, 1951

1920–2020 · Basel

Armin Hofmann

Graphic Design Manual.

1928–2013 · Basel · Zurich

Nelly Rudin

Saffa 1958 Zürich, 1958. Geigy. Müller-Brockmann studio.

Münzkabinett Berlin. GERTRUD KURZ, 1890/1972.

1937 · Zurich

Rosmarie Tissi

20 CHF Gertrud Kurz, 1992. Odermatt & Tissi.

1934–2019 · Ulm · Zurich

Shizuko Yoshikawa

Japanische Plakate heute, 1978. Müller-Brockmann studio.

1885–1977 · Rotterdam

Piet Zwart

Bruynzeel kitchen, 1938. Typotekt.

1897–1973 · Rotterdam

Paul Schuitema

Chair no. 35, 1934. Photomontage. Constructivism.

1903–1943 · Amsterdam

Fré Cohen

SDAP. Stadsdrukkerij Amsterdam.

1919–2001 · Amsterdam

Otto Treumann

Memorial plaque, Station Vught, 1984.

1897–1984 · Amsterdam

Willem Sandberg

Stedelijk Museum enamel sign. Torn paper, 1954.

1926–1990 · The Hague

Jurriaan Schrofer

De letter op straat. Meijer, 1956.

1971 · Amsterdam

Total Design

Stedelijk, co westerik, 24 sep–7 nov 1971.

1923–2008 · Rotterdam · Amsterdam

Benno Wissing

Schiphol signage. Total Design, 1967.

1950s · Switzerland

International Typographic Style

International Typographic Style. Objective. Modular.

Practical notes

How do I install Vlak?

npm install @noorddev/vlak-react, then import @noorddev/vlak-react/css once and the components where you use them. For CSS only, install @noorddev/vlak and link vlak.css. For vendored source, npx @noorddev/vlak-cli add <name>, or npx shadcn add vlak.dev/r/<name>.json.

How do I add a component?

Import it from @noorddev/vlak-react, or copy its StyleX source into components/vlak/ with npx @noorddev/vlak-cli add <name>. The classes are already in vlak.css, so CSS-only pages need no file. The registry is at vlak.dev/r/<name>.json.

How do I use Vlak with Next.js or Vercel?

Import @noorddev/vlak-react/css in the root layout and use the components; stateful ones already carry "use client". Static export works; this site is one. Set data-theme="dark" on the html element for the dark scheme.

Does Vlak use Radix or Tailwind?

No. Components are StyleX leaves on native elements. No Radix, no Tailwind. Every component also carries stable rs- classes.

What does the React package depend on?

React and @stylexjs/stylex. Behaviour otherwise comes from platform features including details, dialog, the Popover API, scroll snap, and native inputs.

Do I need React?

No. vlak.css is generated from the same StyleX leaves and paints every component through rs- classes on plain markup. React is one of three ways in.

How do I switch to the dark scheme?

Set data-theme="dark" on the root element. Tokens flip paper and ink. The module grid stays.

Why Inter?

Inter keeps interface text legible at small sizes and provides the weights Vlak needs in one variable face. Latin and latin-ext files ship beside the CSS; system sans is the fallback.

What is the module?

204 pixels: 184 column + 20 gutter. Content boxes span whole modules. On a phone the field is one column; at 481 it pairs; at 816 it is four; at 1224 it is six.

What is the International Typographic Style here?

A method for ordering information: modular grids, sans serif type, asymmetric composition, and hierarchy made with scale, weight, and space. Vlak combines it with the more elastic fields and direct construction found in Dutch modernism.

What is Noord?

Noord is a frontier design lab in Alkmaar. Vlak was designed and built there.

What are the ten principles?

Platform first, one source of paint, accessible by default, paper and ink, 204px module, native elements, React or CSS, stable classes, agent-readable, MIT licensed.

Where do I report a problem?

github.com/Noord-Ventures/vlak. Issues and pull requests. The packages are @noorddev/vlak, @noorddev/vlak-react, and @noorddev/vlak-cli.

Colophon

Noord Frontier Design Lab · Alkmaar

Vlak was designed and built at Noord Frontier Design Lab in Alkmaar.

Design and development: Renato Valdés Olmos.

@noorddev/vlak · @noorddev/vlak-react · @noorddev/vlak-cli

vlak.dev · vlak.dev · github.com/Noord-Ventures/vlak

npx @noorddev/vlak-cli init