Components

The control, the name, a short law.

Actions

Button

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

Button group

Flush joined actions. One hairline between.

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.

Toggle group

One pressed at a time. Joined hairlines.

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.

Name

Label

12px, secondary ink, above the control.

Name

As it appears on the invoice.

Field

Label, control, hint or error. The stack every form is made of.

https://

Input group

Addon and field share one hairline.

Native select

The platform list. Raster chrome. No custom menu.

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.

Form

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

Navigation

Tabs

One line of type. Hairline on the active tab only.

Breadcrumbs

One ink trail. Ancestors stay ink; slashes at 40%; the current page is full 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.

Sidebar

One 204 module rail. Air under the last item before the foot rule.

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.

No projects yet

Start one. The grid is empty on purpose.

Empty

A vacant cell. Title, one sentence, optional action.

Spinner

Hairline ring. Stops 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.

Drawer

Native <dialog> from the bottom 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.

Alkmaar

The studio city.

Delft

The grid city.

Item

A flush row. Title occupies the cell; meta trails.

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.

SheetsProofssheets

Chart data
Label	Sheets	Proofs
Mon	12	4
Tue	18	6
Wed	15	5
Thu	26	9
Fri	24	7

Charts

A line on a 204 field. Hairline grid, ink marks. Series differ by texture: solid, dashed, gray, dotted. One optional Crouwel spot.

This issue

Chart data
Label	Value
Alkmaar	42
Delft	28
Haarlem	21
Utrecht	16

Bar chart

Vertical or horizontal. Thin ink bars, no radius. Stacked when the series share a field.

Sheetssheets

Chart data
Label	Sheets
Mon	8
Tue	14
Wed	12
Thu	22
Fri	18

Area chart

A filled field under the first series. Same law as the line: hairlines, texture, one optional spot.

Density

Module

Scatter data
Label	y
Alkmaar	18
Haarlem	16
Rotterdam	22
Groningen	26
Amsterdam	44

Scatter chart

Marks on a hairline grid. One ink, or one Crouwel spot on the field.

Donut or share

A ring against its whole, or a flush share strip. Hairline, no rounded fat stroke.

Count

Histogram
Label	count
0–1	4
1–2	11
2–3	18
3–4	9
4–5	3

Histogram

Adjacent bins, one hairline between. A density field, not a dashboard widget.

Alkmaar

Chart data
Label	Sheets
Mon	12
Wed	15
Fri	24

Delft

Chart data
Label	Sheets
Mon	8
Wed	9
Fri	14

Small multiples

The same axes, repeated. One 184 column per panel.

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.

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.