Components

74 components, each with a live preview, install path, props, keyboard behavior, and accessibility notes.

Actions

Button

Triggers an action. Solid primary or 1px ghost; 40px tall, 36px small.

Button group

Keeps related actions together as joined ghost buttons with 1px dividers.

A text linkAn in-copy link

Text link

Navigates to a page or resource. Hairline underline; in-copy variant is inset 1px.

Dropdown menu

Presents a compact list of actions. Menu roles and arrow-key navigation are built in.

Toggle

Turns one persistent option on or off. Pressed fills with ink and exposes aria-pressed.

Toggle group

Selects one option from joined toggles. The active option fills with ink.

Right-click me

Context menu

Opens actions at the pointer or with Shift+F10. Escape and outside click close the menu.

Menubar

Groups application menus in one row of dropdowns with a 1px frame.

Command

Finds and runs commands in a native dialog. Filter by typing; navigate with arrows and Enter.

Theme toggle

Switches between light and dark schemes. The icon changes and the choice persists locally.

Forms

Input

Collects one line of text. 1px border, 2px focus ring, 12px label above.

Label

Names a form control. 12px secondary text, set above the control.

As it appears on the invoice.

Field

Groups a label, control, and hint or error in one vertical field.

https://

Input group

Joins a text field with a prefix or suffix inside one 1px border.

Native select

Presents browser-native options inside a 1px control border.

Radio

Selects one option from a group. The selected dot fills with ink.

Checkbox

Selects any number of options. 16px box, 3px radius, ink fill when checked.

Switch

Turns one setting on or off. 32×18px; on fills with ink, off uses a 1px track.

Slider

Selects one value from a range. 2px track, 14px thumb, 24px hit area.

Select

Selects one option from an overlay. The closed trigger carries a chevron.

Textarea

Collects multiple lines of text. Resizes vertically only.

One-time code

Collects a one-time code in one cell per character. Supports auto-advance, backspace, and paste.

Combobox

Filters and selects an option from a listbox through one text field.

July 2026
MoTuWeThFrSaSu

Calendar

Selects a date from a month grid. Selected day fills with ink; today has a 1px outline.

Date picker

Selects a date from a calendar overlay opened by a 1px trigger.

Form

Collects related inputs as stacked fields with one primary action at the end.

Feedback

Uploading40%

Progress

Shows completion for a known process. 4px bar; the label carries the percentage.

RecommendedDeliveredIn progress

Badge

Labels status or category. 11px text with outline, solid, and muted variants.

Heads up

Your workspace syncs every hour.

Alert

Calls attention to contextual information. 1px frame and icon; critical variant fills with ink.

Skeleton

Reserves space while content loads. Divider-tone pulse that respects reduced motion.

No projects yet

Start one. The grid is empty on purpose.

Empty

Explains an empty state with a title, one sentence, and an optional action.

Spinner

Signals indeterminate progress. 16px ring with a 1px stroke; respects reduced motion.

Copy to clipboard

Tooltip

Explains a control on hover or keyboard focus. A real element describes its trigger.

Toast

Reports a brief status in the bottom-right corner. Polite live region; pauses on hover and closes on demand.

Fixed fee. The number on the cover is the number on the invoice.

Callout

Adds a contextual note to running copy. 1px frame, square corners, no accent bar.

Surfaces

Remove this item?

This can’t be undone.

Dialog

Focuses attention on a modal task. Title, body, and two equal actions.

Case study

A quieter interface

Emphasis from weight and spacing, never from a hue.

Card

Groups related content as a label, title, and body. No outline.

Delete this workspace?

All projects go with it. This needs an answer.

Alert dialog

Requires a decision before work continues. Native dialog with Escape and light dismiss disabled.

Module grid

204px modules: a 184px column and a 20px gutter.

Popover

Places non-modal content above the page with the native Popover API and light dismiss.

Filters

Everything narrows from here. Press Escape to close.

Sheet

Opens a focused task from a screen edge. Native dialog with platform focus handling and backdrop.

Notes

A bottom panel. Escape closes it.

Drawer

Opens a focused task from the bottom edge. Native dialog with platform focus handling and backdrop.

@noordNoord, a venture studio in Alkmaar. Ten portfolio companies, one design system.

Hover card

Previews linked context on hover or keyboard focus.

Left pane
Right pane

Resizable

Resizes two adjacent panes with a draggable 1px handle. Arrow keys adjust the split.

Content

/noord-brand0.3.0

Mono chip

Marks a short technical identifier. Monospace text with a 1px mixed border.

PhaseWeeks
Strategy2
Identity4

Table

Presents structured values in rows and columns. 1px row rules; total rows use 2px rules.

What is Vlak?
A minimal design system on a 204px module.
Does it require Radix?
No. Native elements provide the behavior.

Accordion

Reveals related sections on demand. Native details rows with 1px rules.

RVNO+3

Avatar

Identifies a person or group. 32px image or initials; broken images fall back automatically.

Alkmaar

The studio city.

NL

Delft

The grid city.

NL

Item

Presents one list entry. Title and description sit left; metadata sits right.

Above the line.

Below it.

Separator

Separates related regions with a 1px horizontal or vertical rule.

Alkmaar

Amsterdam

Delft

Eindhoven

Groningen

Haarlem

Rotterdam

Utrecht

Scroll area

Contains overflow without visible scrollbars. 20px edge feathers signal more content.

Show the details
Quiet, on the grid.

Collapsible

Shows or hides one section with a native details disclosure.

⌘K

Kbd

Labels a keyboard key. Monospace cap with a 1px frame and heavier bottom edge.

One
Two
Three
Four

Carousel

Browses a sequence on a scroll-snap track. Buttons move one slide; the ends feather.

Strategy2
Identity4
Digital6

Data table

Sorts and presents structured records. Column headers expose aria-sort.

16 : 9

Aspect ratio

Keeps media at a defined aspect ratio while it fills the available box.

Set in a single ink.1

  1. Müller-Brockmann, J. Grid systems in graphic design.

References

Connects inline citations to a numbered source list and cite box. Numerals hang in the gutter.

Icons

Navigation

20 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Actions

22 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Editing

8 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Communication

6 marks on a 16px viewBox, drawn with 1px currentColor strokes.

People

5 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Files

10 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Media

14 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Status

8 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Time

4 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Settings

8 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Commerce

9 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Layout

12 marks on a 16px viewBox, drawn with 1px currentColor strokes.

System

31 marks on a 16px viewBox, drawn with 1px currentColor strokes.

Charts

SheetsProofssheets
Chart data of Sheets and Proofs, in sheets
LabelSheetsProofs
Mon124
Tue186
Wed155
Thu269
Fri247

Charts

Plots one or more lines on a 204px field. 1px grid, textured series, and one optional spot color.

This issue

This issue
LabelValue
Alkmaar42
Delft28
Haarlem21
Utrecht16

Bar chart

Compares values with vertical or horizontal bars. Thin ink marks, square ends, optional stacks.

Sheetssheets
Chart data of Sheets, in sheets
LabelSheets
Mon8
Tue14
Wed12
Thu22
Fri18

Area chart

Shows change and magnitude with a filled first series. 1px grid and one optional spot color.

Density

Module

Density
LabelModuleDensity
Alkmaar1218
Haarlem2816
Rotterdam4822
Groningen6826
Amsterdam8044

Scatter chart

Shows the relationship between two measures. Marks sit on a 1px grid in ink or one spot color.

72%printed
printed
LabelValueOfShare
printed7210072%
Share
LabelValueShare
Sheet7272%
Proof1818%
Waste1010%

Donut or share

Shows one part of a whole as a ring or flush share strip. 1px stroke.

Count

Count
LabelCount
0–14
1–211
2–318
3–49
4–53

Histogram

Shows a distribution in adjacent bins with 1px gaps.

Alkmaar
Chart data of Sheets
LabelSheets
Mon12
Wed15
Fri24
Delft
Chart data of Sheets
LabelSheets
Mon8
Wed9
Fri14

Small multiples

Compares repeated charts on shared axes. Each panel occupies one 184px column.

Patterns

Inline form

Pairs one field with an embedded submit action. The button appears after validation.

1

Proposal

Scope, timeline, and fee on one page.

BriefFee+

Workflow card

Builds an ordered pipeline from draggable steps. 1px dashed frame, chips, and ghost add action.

Make the intro tighter.

Done. Two sentences, same claim.

Assistant panel

Frames an assistant exchange with a user message, reply, suggestion, and input row.