A minimal design system for product exploration.

Vlak

What it is

Vlak is a minimal design system for product exploration. 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.

Grid system

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

Swiss International Typographic Style gives Vlak its grid, 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.

Design lineage54 milestones · 6 chapters

From the page
to the agent

1917→Today

A selected history of how we arrange information and act through machines.

  1. 011917–1958

    Modernist grid

    Geometry gives information a structure

    1. 1917De Stijl

      Theo van Doesburg founded De Stijl as both a magazine and a platform for geometric art. Its disciplined lines, planes, and primary forms gave artists and designers a shared visual method.

      Kunstmuseum Den Haag
    2. 1919Bauhaus

      The school joined fine art, craft, architecture, and design in one educational model. Workshops made applied practice part of a broader visual discipline.

      Getty Research Institute
    3. 1925Vienna Method / Isotype

      Otto Neurath's Social and Economic Museum used pictograms and repeated symbols to explain social data to a broad public. The Vienna Method later took the name Isotype and travelled as a visual language.

      Wien Museum
    4. 1927Futura

      Paul Renner built Futura from circles, squares, and triangles for a machine-age form of printing. Its early specimens showed geometric letterforms working in both display and text sizes.

      Letterform Archive
    5. 1928The New Typography

      Jan Tschichold codified modernist typography around asymmetry and deliberate arrangements of type and image. The book made wider Bauhaus and Soviet currents usable in everyday print work.

      MoMA
    6. 1953Ulm School of Design

      Inge Scholl, Otl Aicher, and Max Bill founded the school to connect modern design with a democratic society. Its curriculum combined practical design work with scientific and social study.

      HfG-Archiv Ulm
    7. 1956–57Helvetica

      Max Miedinger and Edouard Hoffmann developed Helvetica at the Haas Type Foundry. The surviving 36-point lead type records a modernist design as a repeatable physical system.

      MoMA collection
    8. 1957Univers

      Adrian Frutiger designed Univers as a coordinated family of widths and weights. A numerical classification made the family legible as a system rather than a loose list of styles.

      Potsdam University of Applied Sciences
    9. 1958Neue Grafik

      Josef Müller-Brockmann, Richard Paul Lohse, Hans Neuburg, and Carlo Vivarelli began a trilingual journal for graphic design. Its grid-led pages carried Swiss constructive practice into an international design discussion.

      Lars Müller Publishers
  2. 021963–1984

    Direct manipulation

    Commands and visible objects share the screen

    1. 1963Sketchpad

      Ivan Sutherland's Sketchpad let a person create and manipulate graphical figures with a light pen. Geometry became something to point at and change directly on screen.

      Computer History Museum
    2. 1968NLS demonstration

      Douglas Engelbart's team demonstrated a mouse, linked text, live editing, multiple windows, shared screens, and video collaboration as parts of one working system.

      SRI International
    3. 1971Unix shell

      The first edition Unix manual documented sh alongside a compact set of commands. The shell made a text interface programmable through command sequences and scripts.

      Nokia Bell Labs
    4. 1973Xerox PARC / Alto

      The Xerox PARC research system combined a page-oriented display, mouse, networking, windows, icons, and screen-to-print correspondence. It made documents and commands visible objects on screen.

      Computer History Museum
    5. 1979VisiCalc

      Dan Bricklin and Bob Frankston made spreadsheet values recalculate automatically on the Apple II. People could change assumptions and immediately see their effect on a working financial model.

      Computer History Museum
    6. Apr 1981Xerox 8010 Star

      Xerox announced an office system organized around documents, icons, generic commands, and a mouse. Consistent actions such as copy, move, and show properties reduced the number of commands people had to remember.

      Computer History Museum
    7. 1981MS-DOS & IBM PC

      IBM introduced the 5150 with Microsoft PC DOS 1.0. The underlying Microsoft work also became MS-DOS, which was licensed for the wider compatible-PC market.

      Microsoft
    8. 1983Apple Lisa

      Apple introduced Lisa with a graphical interface and mouse. Its high price limited sales, while its visible desktop and document model continued into later Apple systems.

      Computer History Museum
    9. 1984Macintosh / System 1

      The original Macintosh paired a mouse-driven desktop with System Software 1.0, part of the lineage later called classic Mac OS. Its lower price brought menus, windows, and direct manipulation to more users.

      Computer History Museum
  3. 031985–1993

    Desktop tools

    Personal software puts a studio on screen

    1. 1985PageMaker & PostScript

      PageMaker, Macintosh, LaserWriter, and PostScript aligned composition on screen with reproduction in print. The useful change came from this stack working together.

      Computer History Museum
    2. 1985Windows 1.0

      Microsoft shipped retail Windows as an operating environment extending MS-DOS. Command-based PC workflows gained a graphical layer within the same software family.

      Microsoft
    3. 1987Adobe Illustrator

      Adobe released Illustrator for Macintosh as a direct drawing tool for scalable vector artwork. Designers could shape precise paths that stayed crisp across output sizes.

      Adobe
    4. 1987QuarkXPress

      Quark released QuarkXPress for Macintosh with precise page-layout and color controls aimed at professional publishing. Desktop composition moved further into daily newsroom and production work.

      Quark
    5. 1987HyperCard

      Bill Atkinson's HyperCard let people assemble cards, controls, scripts, and hypertext links into personal applications. Apple distributed it with Macintosh computers.

      Computer History Museum
    6. 1989CorelDRAW

      CorelDRAW 1 brought full-color vector illustration and page layout to Windows PCs. A mouse-driven drawing environment expanded professional graphics beyond the Macintosh publishing stack.

      Corel
    7. 1990Adobe Photoshop

      Photoshop brought detailed tools for editing and enhancing scanned images to personal computers. Photographic material joined type and vector art in digital production workflows.

      Adobe
    8. 1990WorldWideWeb

      Tim Berners-Lee's WorldWideWeb application was both a browser and an editor, paired with a web server and website at CERN. Documents became linked and addressable across machines.

      CERN
    9. 1993NCSA Mosaic

      NCSA released Mosaic as a graphical browser for the growing web. Its approachable presentation helped linked documents reach beyond specialist computing environments.

      NCSA
  4. 041995–2001

    Personal systems

    Desktop conventions settle and branch

    1. 1995Windows 95

      Start, the taskbar, recycle bin, desktop shortcuts, long filenames, and plug-and-play hardware formed a widely used set of PC conventions.

      Microsoft
    2. 1995BeOS & BeBox

      Be paired its own operating system with the dual-processor BeBox. Its small but persistent following records an alternative personal-computing platform alongside larger desktop systems.

      Computer History Museum
    3. Dec 1995JavaScript

      Netscape developed JavaScript as a scripting language for web pages and shipped it in Navigator. Web documents could respond to people and run application logic inside the browser.

      Mozilla
    4. Oct 1996KDE

      Matthias Ettrich announced KDE as a consistent graphical desktop for free Unix systems. The project set out to join applications, a desktop, and shared interface conventions for everyday users.

      KDE
    5. Dec 1996CSS1

      The W3C published CSS1 so authors and readers could attach reusable presentation rules to structured web documents. Fonts, color, spacing, and margins became a separate, cascading layer.

      W3C
    6. 1997Mac OS 8

      Mac OS 8 shipped on Apple's new Power Macintosh line with a revised system experience and closer multimedia and internet integration. It remained part of the classic Macintosh system family.

      Apple archive
    7. Mar 1999GNOME 1.0

      GNOME 1.0 delivered an integrated graphical desktop for Linux and other Unix-like systems. Configurability, internationalization, drag and drop, and shared application services were part of the release.

      GNOME Foundation
    8. 1999Adobe InDesign

      Adobe introduced InDesign for professional page composition. Early releases brought advanced typography, transparency, and optical margin controls into a modern publishing application.

      Adobe
    9. 2001Mac OS X

      Mac OS X joined the Aqua interface and PDF-based Quartz graphics to a Darwin foundation. It replaced classic Mac OS with a new visual and technical system.

      Apple
  5. 052007–2017

    Touch & adaptation

    Interfaces and their tools adapt to changing screens

    1. 2007iPhone

      The iPhone brought a large multi-touch display, software keyboard, gestures, and rotation-aware layouts into one handheld interface. Fingers replaced the mouse for its main interactions.

      Apple
    2. 2008Android

      Android 1.0 launched on the T-Mobile G1 alongside Android Market. Pull-down notifications, cross-application sharing, and multitasking established a distinct touch system and application ecosystem.

      Google
    3. Jan 2010iPad

      Apple introduced iPad with a 9.7-inch multi-touch display and applications designed for both portrait and landscape. Touch interaction moved from a phone-sized surface into reading, media, and productivity work.

      Apple
    4. May 2010Responsive web design

      Ethan Marcotte described fluid grids, flexible images, and media queries as one practice. A single page could adapt its composition to different viewport conditions.

      A List Apart
    5. Sep 2010Sketch

      Sketch arrived as a Mac application centered on UI and UX work. Its vector canvas and focused toolset gave screen designers an alternative to general graphics software.

      Sketch
    6. Nov 2010iOS 4.2

      iOS 4.2 brought multitasking, folders, unified inboxes, and other iOS 4 features to iPad while updating iPhone and iPod touch. One interaction platform now covered several screen sizes.

      Apple
    7. 2014Material Design

      Google developed a shared language for desktop and mobile around surfaces, elevation, motion, iconography, and component rules. Physical paper studies helped the system define consistent digital behavior.

      Google Design
    8. Sep 2016Figma

      Figma's public release put a professional interface-design tool in the browser. Shared URLs and simultaneous editing made the design file a place for team collaboration.

      Figma
    9. 2017Inter

      Rasmus Andersson published Inter as an open-source typeface crafted for computer interfaces. Its tall x-height and screen-oriented details support dense text at small sizes.

      Rasmus Andersson
  6. 062022–2026

    Delegated work

    People direct, connect, and supervise agents

    1. Nov 2022ChatGPT

      The research preview made follow-up questions, corrections, challenges, and refusals parts of an ongoing conversation with a language model.

      OpenAI
    2. Mar 2023Claude

      Anthropic made Claude available through a chat interface and API. Conversation and text processing could be directed by task, tone, and behavior.

      Anthropic
    3. Sep 2023Microsoft AutoGen

      Microsoft Research released AutoGen for workflows built from conversations among multiple agents. Agents could combine models, tools, and human participation around a shared task.

      Microsoft Research
    4. Dec 2023Google Gemini

      Google introduced Gemini as a model designed to work across text, images, audio, video, and code. Assistant interaction expanded beyond a text-only exchange into mixed media.

      Google
    5. Jun 2024Claude Artifacts

      Artifacts placed generated documents, code, and interface designs in a dedicated window beside the conversation. The result became a visible work surface that people could inspect and revise.

      Anthropic
    6. Nov 2024Model Context Protocol

      Anthropic released the Model Context Protocol as an open client-server standard for connecting assistants to repositories, business tools, and development environments.

      Anthropic
    7. Mar 2025Agents SDK

      OpenAI paired built-in web, file, and computer tools with an Agents SDK for handoffs, guardrails, tracing, and single- or multi-agent orchestration.

      OpenAI
    8. Apr 2025Agent2Agent protocol

      Google introduced A2A as an open protocol for agents built with different frameworks or vendors. Agents gained a shared way to exchange information and coordinate actions.

      Google Developers
    9. Feb 2026Multi-agent workspaces

      The Codex app placed parallel agent tasks, project threads, isolated worktrees, progress, diffs, and human review in one desktop interface.

      OpenAI

Movements overlap. Inventions meet. New forms of interaction inherit old questions.

Open a milestone to read its context and source.

Reference collection

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 an applied design lab in Alkmaar, the Netherlands. Vlak was designed and built there.
What are the ten principles?
Platform first, one source of paint, accessible by default, paper and ink, a grid system, 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 Applied Design Lab · Alkmaar

Design and development: Renn.

Vlak logo designed by Li-Anne Dias.

Inter, SIL OFL 1.1 · Rasmus Andersson. Copyright 2016 The Inter Project Authors. rsms.me/inter/

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

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

MIT © Noord / Renato Valdés-Olmos, 2026.

npx @noorddev/vlak-cli init