Vlak

A minimal design system for product exploration.

Launch brief
Example conversation
You
What should we focus on first?
Assistant
Start with the review flow. Give each decision an owner, a next step, and a supporting source.

Enter to send. Shift+Enter for a new line.

Recorded replies, no model connected.
Read launch briefComplete

Input

launch-brief.md

Output

Scope, owners, and sources reviewed in this recorded example.

Add this draft to the notes?

Try an approval. This changes only the local demo; no file is saved.

Awaiting your decision

Component documentation (2)
  1. Chat

    Conversation history and a composer that stays in reach.

  2. Confirmation

    Ask for approval before an application-owned action.

AI components

Conversations, tools and rich responses.

npm install @noorddev/vlak-react

Getting startedMITWhen to use Vlak

Platform first

One source of paint

Accessible by default

Paper and ink

Grid system

Native elements

React or CSS

Stable classes

Agent-readable

MIT licensed

A 204px field for type, controls, and content. Drawn from Dutch and Swiss modernism.

The kit

Accordion

What is Vlak?
A minimal, CSS-first design system.
Does it require Radix?
No. Native elements provide the behavior.

Calendar

July 2026
MoTuWeThFrSaSu

Field

As it appears on the invoice.

Stepper

1Brief
2Design

Button

Toggle group

Tabs

OverviewActivitySettings

Card

Case study

A quieter interface

Emphasis from weight and spacing, never from a hue.

Slider

Pagination

12

Switch

Badge

RecommendedDeliveredIn progress

Browse 219 more components