Reference · Working reference · Noord
Vlak
The open design system: interface components, patterns and implementation guidance.
Download this method as MarkdownTL;DR
Start with Vlak’s components and patterns, then spend your attention on the work the interface needs to support. The button is already a button. We can move on to the interesting problem.
What it is for
Vlak gives us a shared starting point for an interface. The buttons, fields, and type already belong together, which leaves more attention for what the page needs to do.
Use the component documentation for the current APIs, installation, and licenses. If you knew the project as Raster, this is its new name. Polder covers the work around it: deciding what to build, explaining the choices, and checking the result.
- For
- Designers and engineers building interfaces
- Use when
- You need a shared component foundation rather than bespoke controls for every screen.
- Bring
- A target interface, technical constraints and the official Vlak documentation.
- Leave with
- A chosen set of components tested against a real task.
A worked example
Fictional example
For a fictional review queue, start with selection, status and a detail panel. Test long labels and keyboard navigation before expanding the component set.
Check the result
Check the current API, supported framework and license on vlak.dev.
What this leaves open
Polder explains the surrounding method. Vlak’s installation and API documentation remain authoritative.
Tools, in order
Here is where each tool helps. Use an equivalent you already work with if it fits the task and your project’s access requirements.
Before building
During implementation
Before review
Browser and accessibility checksPlaywright
Test keyboard use, focus, errors, long labels, and mobile behavior. Share a working preview, not only a screenshot.
Carry forward A tested preview with known limitations.
Review the work with partners
We make and revise the work with Claude, ChatGPT, or Grok, then put selected versions on our Studio project pages for partners to review. Check the preview before sharing it. You can do the same with a private prototype or shared document; use a workspace that can access the files you need.
Name the version, say what changed, and ask the question you need answered. Keep feedback with that version and discuss conflicting requests before making the next changes. Confirm approval separately, and keep confidential work in a restricted space.
A question for this review
Can you finish the task without explanation, and where does the interface interrupt you?
Delegate the routine work
Repeat a verified component pattern or write bounded tests for known acceptance criteria.
Interaction choices, accessibility decisions, and changes to the shared system need design and engineering review.
How to use it
Leave the next person enough to work with
Write down what was decided and why, with links to the notes or examples behind it. Keep the open questions alongside the decisions. Someone joining the project should be able to tell which is which without asking you.
Project: [name] Input sources: [references and permission] Approved decisions: [choice, rationale, owner] Assumptions: [what remains untested] Open questions: [question, owner, due date] Acceptance checks: [observable pass/fail criteria] Next step: [person or workflow] Approval: [name, date, version]
Before you move on
- Can someone who was not in the room understand the result?
- Are claims supported by evidence, with uncertainty labeled?
- Has the responsible person approved the decisions—not just received the document?
- Have you removed private information and checked rights to any assets?
If the summary says something was agreed and you cannot find that agreement in the notes, ask the person who decides before carrying it into the next task.