Components

The kit, live. Each page has markup, React usage, and the install command.

Actions

Button

Solid ink primary and hairline ghost. One primary per view. 40px tall; 36px small variant.

A text link An in-copy link

Text link

Underlined by its hairline; never colored. The gradient variant inset by one pixel for running copy.

Dropdown menu

Action menu with menu semantics and keyboard navigation.

Toggle

Press switch and group. Pressed is ink; state lives in aria-pressed.

Right-click me

Context menu

Right-click menu at the pointer. Escape and outside clicks close it.

Menubar

Dropdown menus in a hairline strip.

Command

Command palette in a native <dialog>. Filter, arrows, enter.

Theme toggle

Fixed top right. Sun and moon slide on a track; the choice persists in localStorage.

Forms

E-mail

Input

Quiet field: hairline border, ink focus, label above at 12px.

MonthlyYearly

Radio

One choice; the dot is ink.

BrandProduct

Checkbox

Many choices; 16px boxes, 3px radius, ink when checked.

Switch

32×18 pill; on is ink, off is hairline. State moves, layout doesn't.

Slider

Thin track with ink fill and 14px thumb.

Select

Closed trigger with chevron; the open menu overlays instead of pushing layout.

Notes

Textarea

The quiet field, taller. Vertical resize only.

One-time code

One cell per character. Auto-advance, backspace, paste.

Combobox

Filtered listbox on the quiet field. Combobox semantics.

July 2026

MoTuWeThFrSaSu

Calendar

Month grid. Selected is ink; today is a hairline. Weeks start on Monday.

Date picker

Hairline trigger with a calendar overlay.

Navigation

Tabs

Active tab is ink with a 1.5px underline.

Breadcrumbs

Slashes at 40% opacity; the current page is ink.

Crumb bar

Fixed top bar. Transparent at rest; on scroll it gains the paper background and a bottom hairline, and the breadcrumbs fade in.

Pagination

Squares, not pills; the current page is solid ink.

1Brief

2Design

3Build

Stepper

Numbered dots joined by hairlines. Done is ink; active is outlined.

Feedback

Uploading40%

Progress

4px bar. The percentage lives in the label, not the bar.

RecommendedDeliveredIn progress

Badge

Outline for recommendations, solid for done, muted for pending.

Heads up

Your workspace syncs every hour.

Alert

Hairline frame with an ink icon. Solid ink variant for critical.

Skeleton

Pulse on the divider tone. Still under prefers-reduced-motion.

Tooltip

CSS only. Shows on hover and keyboard focus.

Toast

Bottom right, aria-live polite, dismissed after four seconds.

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

Callout

A tinted note in running copy. Hairline frame, 3px ink left edge.

Surfaces

Dialog

One question, two equal-sized actions, no third option.

Case study

A quieter interface

Emphasis from weight and spacing, never from a hue.

Card

Hairline frame; label, title, body.

Alert dialog

Native <dialog> that requires an explicit answer. Escape and light dismiss are disabled.

Popover

Native Popover API: top layer, light dismiss.

Sheet

Native <dialog> at the screen edge. Platform focus trap and backdrop.

Hover card

Preview panel on hover or keyboard focus. CSS only.

Left pane

Right pane

Resizable

Two panes on a draggable hairline. Arrow keys work; state lives in ARIA.

Content

/noord-brand

Mono chip

Technical identifiers set in the mono stack with a mixed hairline.

Phase	Weeks
Strategy	2
Identity	4

Table

Hairline rows on the open grid; no cell borders, last column right-aligned. Total rows carry 2px rules.

Icons

16/20/24/32px, single-weight 1.5px strokes in currentColor, non-scaling.

What is Raster?

A monochrome, CSS-first design system.

Is it dependency-free?

Yes. Native elements do the work.

Accordion

Native <details> rows on hairlines. The name attribute keeps one item open at a time; no JavaScript.

RVNO+3

Avatar

Initials in a circle. Images cover; broken images fall back to initials. Rows overlap.

Above the line.

Below it.

Separator

A hairline, horizontal or vertical.

Alkmaar

Amsterdam

Delft

Eindhoven

Groningen

Haarlem

Rotterdam

Utrecht

Scroll area

Hidden scrollbar; feathered top and bottom edges.

RevenueCosts

Chart data
Label	Revenue	Costs
Jan	12	8
Feb	18	9
Mar	15	11
Apr	26	12
May	24	14
Jun	34	15

Charts

SVG line, bar, sparkline, donut. Hairline grid, ink marks. Series differ by texture: solid, dashed, gray, dotted.

Show the details

Quiet, on the grid.

Collapsible

A bare native <details>.

⌘K

Kbd

Keys in the mono stack with a pressed bottom edge.

One

Two

Three

Four

Carousel

Native scroll snap. Buttons nudge; edges feather.


Strategy	2
Identity	4
Digital	6

Data table

Sortable rows over the plain table. aria-sort on headers.

16 : 9

Aspect ratio

A box that keeps its proportions. Media covers.

Set in a single ink.¹

Müller-Brockmann, J. Grid systems in graphic design. niggli.ch/grid

References

Inline citations, a numbered hairline list, and a cite box. Numerals hang in the gutter.

Patterns

Inline form

One field, one action. The action sits inside the field and appears once input validates.

Form

Fields stacked on the grid; one primary action at the end.

Proposal

Scope, timeline, and fee on one page.

Workflow card

Editable pipeline card: dashed frame, drag handle, dashed chips, ghost add-step card.

Make the intro tighter.

Done. Two sentences, same claim.

Assistant panel

Chat surface: user block, replies, suggestion card with applied state, quiet input row.