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 initHead
<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.
From the page
to the agent
1917→Today
A selected history of how we arrange information and act through machines.
Modernist grid
Geometry gives information a structure
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 Haag1919Bauhaus
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 Institute1925Vienna 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 Museum1927Futura
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 Archive1928The 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.
MoMA1953Ulm 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 Ulm1956–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 collection1957Univers
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 Sciences1958Neue 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
Direct manipulation
Commands and visible objects share the screen
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 Museum1968NLS 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 International1971Unix 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 Labs1973Xerox 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 Museum1979VisiCalc
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 MuseumApr 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 Museum1981MS-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.
Microsoft1983Apple 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 Museum1984Macintosh / 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
Desktop tools
Personal software puts a studio on screen
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 Museum1985Windows 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.
Microsoft1987Adobe 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.
Adobe1987QuarkXPress
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.
Quark1987HyperCard
Bill Atkinson's HyperCard let people assemble cards, controls, scripts, and hypertext links into personal applications. Apple distributed it with Macintosh computers.
Computer History Museum1989CorelDRAW
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.
Corel1990Adobe 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.
Adobe1990WorldWideWeb
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.
CERN1993NCSA Mosaic
NCSA released Mosaic as a graphical browser for the growing web. Its approachable presentation helped linked documents reach beyond specialist computing environments.
NCSA
Personal systems
Desktop conventions settle and branch
1995Windows 95
Start, the taskbar, recycle bin, desktop shortcuts, long filenames, and plug-and-play hardware formed a widely used set of PC conventions.
Microsoft1995BeOS & 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 MuseumDec 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.
MozillaOct 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.
KDEDec 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.
W3C1997Mac 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 archiveMar 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 Foundation1999Adobe InDesign
Adobe introduced InDesign for professional page composition. Early releases brought advanced typography, transparency, and optical margin controls into a modern publishing application.
Adobe2001Mac 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
Touch & adaptation
Interfaces and their tools adapt to changing screens
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.
Apple2008Android
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.
GoogleJan 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.
AppleMay 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 ApartSep 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.
SketchNov 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.
Apple2014Material 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 DesignSep 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.
Figma2017Inter
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
Delegated work
People direct, connect, and supervise agents
Nov 2022ChatGPT
The research preview made follow-up questions, corrections, challenges, and refusals parts of an ongoing conversation with a language model.
OpenAIMar 2023Claude
Anthropic made Claude available through a chat interface and API. Conversation and text processing could be directed by task, tone, and behavior.
AnthropicSep 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 ResearchDec 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.
GoogleJun 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.
AnthropicNov 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.
AnthropicMar 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.
OpenAIApr 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 DevelopersFeb 2026Multi-agent workspaces
The Codex app placed parallel agent tasks, project threads, isolated worktrees, progress, diffs, and human review in one desktop interface.
OpenAI
Reference collection
Practical notes
How do I install Vlak?
How do I add a component?
How do I use Vlak with Next.js or Vercel?
Does Vlak use Radix or Tailwind?
What does the React package depend on?
Do I need React?
How do I switch to the dark scheme?
Why Inter?
What is the module?
What is the International Typographic Style here?
What is Noord?
What are the ten principles?
Where do I report a problem?
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
