Every component in manifest order, with each state it can be in. Copy markup from components/<name>/<name>.html. This page uses nothing but the system's files.
Accent preset
Buttons
components/buttons/Square buttons with mono caps labels: solid accent primary, ink outline secondary, ghost, danger, sizes, icon-only, loading, the action group and the segmented control.
components/announcement-bar/Inverted one-line bar above the nav for a publication or notice, with a link and a dismiss button.
Breadcrumbs
components/breadcrumbs/Mono caps trail with slash separators and the current page in ink.
Sidebar nav
components/sidebar-nav/Grouped vertical navigation with section numbers, counts and an accent bar on the current item.
Footer
components/footer/Grid-aligned footer: about, three link columns, a wordmark that runs edge to edge and a mono base line.
Grid overlay
components/grid-overlay/The visible 12-column grid: faint hairlines on each column start, optional column numbers, drawn in on load, and a toggle that lays the grid over the whole page.
The numbered grid behind a hero block (resize the window: 12, 8 and 4 columns)
010203040506070809101112
Text lands on the lines.
Columns 9 to 12 hold the metadata.
The toggle, off and on
Section index
components/section-index/Numbered section header row on a 1px rule: the number in mono, the title, and an aside in the metadata columns.
components/hero/Type-only page opener on the visible grid: a giant title, a lede in columns 1 to 6, spec rows in 9 to 12, and one action pair.
010203040506070809101112
Design and engineering for systems people rely on.
We plan, design and build wayfinding, data tools and reports for transit operators, hospitals, utilities and foundations. Twenty-three people, two studios, one method.
Our year in figures, with every source listed at the back.
Bento
components/bento/A ruled 12-column table of cells with 1px hairlines between them, for figures, spec rows and small charts.
Delivery
11wk
Median engagement length across 14 projects in 2025/26.Source: Halden project ledger, FY 2025/26
Hand-over
What every client receives
Files
Source, tokens, PDFs
Docs
Rationale, 30 to 60 pp
Training
Two half-days
Stats
components/stats/A row of sourced figures between column rules. Smaller than big-figure, and every number has a source.
Median engagement length
11wk
Project ledger, FY 2025/26
Revenue from returning clients
71%
Audited accounts, FY 2025/26
People in two studios
23
Payroll, 30 Sep 2026
Interfaces shipped without an accessibility audit
0
Audit log, 2019 to 2026
Logo row
components/logo-row/Invented geometric monogram marks with names in a ruled row, for partners and collaborators.
Northline
Okra Health
Tidal Grid
Salt & Seed
Ferro
Bryn Libraries
Testimonial
components/testimonial/A large quote with a hanging accent quotation mark and a mono attribution from the studio itself.
We don't hand over a design and leave. We hand over a system that a team of four can keep running for ten years, and we write down why each part is the way it is.
IHIngrid HaldenFounder, design direction
Pricing
components/pricing/Engagement columns between rules: name, price, duration rows, what is included and one action, with a currency switch.
Fixed fees, VAT excluded
Audit
E.01
$18,000Fixed, 3 weeks
We review one system (a signage family, a dashboard, a report template) and tell you what to fix first.
components/case-study-header/Case study opener on the visible grid: breadcrumb, giant title, lede, client, year, scope and team as spec rows, and a coded plate.
010203040506070809101112
One map for 212 stops
Four operators, four maps and three languages became one network that a visitor can read in ten seconds.
Client
Northline Transit Authority
Year
2025
Scope
Map, signage, typeface
Team
6 people, 2 studios
Duration
38 weeks
Plate 1. The network diagram, lines simplified to 45 and 90 degreesP-034
Project index
components/project-index/The table of projects: number, project, client, discipline and year, with discipline filters and a live count.
components/process/Numbered phases with durations and a week scale that shows when each phase runs.
01
Survey
We walk the site or the product with the people who run it, and count what actually happens.
Weeks 1 to 22 wk
02
Design
Three directions in week three, one by week five, and the full system after that.
Weeks 3 to 75 wk
03
Build and test
Prototypes go in front of real users from week six; the build follows what the tests say.
Weeks 6 to 127 wk
Credits
components/credits/People and roles as ruled rows, role in the label columns and names in the content columns.
Design direction
Ingrid Halden
Wayfinding
Maren OkaforPieter VosLea Sandvik
Client team
Arne DahlYusra Benali
Prose
components/prose/Long-form typography: numbered headings, lists with square bullets, quotes, figures, tables, inline code and footnote marks.
A visible grid is a promise to the reader: everything on this page lines up with something else, on purpose.
1Why the lines stay on
We leave the column lines visible in every hero because they settle arguments. When a caption sits one column too far in, everyone can see it, so nobody has to defend a feeling.1
Twelve columns from 960px, eight from 640px, four on phones.
Content in columns 1 to 7, metadata in 9 to 12.
If two things almost line up, they look like a mistake.
The rule we break least
Measure the column, not the screen.
Set the type, then the box.
Inline --sp-gap is the gutter between columns.
Callout
components/callout/An aside on a colored top rule with a mono label column: note, method, caveat, ok and danger.
TOC
components/toc/Numbered contents list that marks the section in view with the accent bar.
Byline
components/byline/Author mark, name and role, with date and reading time as inline spec rows.
PVPieter VosPartner, Rotterdam
Published
Read
12 min
Notes
4 sources
Footnotes
components/footnotes/Numbered note marks in the text and the sources list they point to, with links back.
1Halden studio review notes, 41 projects, 2019 to 2026. Back
2Halden project ledger, FY 2025/26, 14 closed engagements. Back
Timeline
components/timeline/Dated rows for changelogs and roadmaps, with shipped, new and planned states.
Annual report published
Our year in figures, with 14 numbered sources and the raw tables as CSV.
New
Rotterdam studio moves to Katendrecht
Room for eleven people and a test wall for full-size signs.
Studio
Open-source wayfinding toolkit
The sign-schedule generator we use on every project, released under MIT.
Planned
Forms
components/forms/Mono caps labels, square inputs, selects, textareas, checkboxes and radios with hint, error, valid, disabled and read-only states.
Switch
components/switch/A square toggle on a real checkbox with role="switch", inline or as a settings row.
Choice cards
components/choice-cards/Ruled radio options with a title, a sentence and spec rows; the chosen one gets the accent bar.
Search field
components/search-field/Search input with icon, clear button, slash shortcut and a keyboard-navigable suggestion list.
File drop
components/file-drop/Drop zone on a real file input, plus file rows with progress, done and error states.
station-plans-level-2.pdf4.2 MB
brief-northline-2027.docx62%
site-walk-video.movToo largeFiles must be 25 MB or smaller. Send a link instead.
Newsletter
components/newsletter/Joined email field and button with hint, success and error states.
Tables
components/tables/Ruled data tables with a caption, mono numerals, status cells, group and total rows, a comparison variant and a labelled stack under 640px.
Hours by discipline, FY 2025/26Source: Halden time ledger, 31,840 hours logged
Discipline
Projects
Hours
Share
Design
Wayfinding
5
9,870
31%
Reports
3
4,140
13%
Engineering
Data products
4
11,460
36%
Interfaces
2
6,370
20%
Total
14
31,840
100%
What each engagement includes
Included
Audit
Project
Retainer
Field tests with users
Not included
Included
Included
Source files
Not included
Included
Included
Length
3 weeks
10 to 14 weeks
6 months or more
Description list
components/description-list/Term and value pairs in the sans face, in rows or two columns, for settings and plain metadata.
Billing contact
Yusra Benali, Northline finance
Invoices
Monthly, net 30, in NOK or EUR
Project folder
Shared with 6 people at Northline
Next review
Thursday 12 November, 10:00 CET
Pagination
components/pagination/Previous and next in mono caps around square page numbers, with the current page in ink.
Chart
components/chart/Inline SVG bar, line and donut charts that read only viz tokens, with a shape-coded legend and the data as a table.
Projects started per year2021 to 2026
Show the data
Year
Projects
2021
7
2022
9
2023
10
2024
12
2025
13
2026
14
Revenue by sectorFY 2025/26
Public transport38%
Health26%
Energy22%
Foundations14%
Hours per week, two studiosWeeks 1 to 8, Q3 2026
Oslo440 h
Rotterdam346 h
Report chart
components/report-chart/Report-style charts: one highlighted series against gray, direct labels instead of legends, a figure number and a source line.
Fig. 1Public transport is now our largest sector
Public transport38%
Health26%
Energy22%
Foundations14%
Share of revenue, FY 2025/26. Source: audited accounts.
Fig. 2Engineering took over half of all hours
Engineering56%
Wayfinding31%
Reports13%
31,840 hours. Source: Halden time ledger, FY 2025/26.
Alert
components/alert/Page-level message on a colored top rule: info, ok, warn and danger, with actions and dismiss.
Booking from February 2027New projects start after 1 February. Audits can start sooner.
Brief receivedPieter will reply by Tuesday 10 November.
Files over 25 MB won't uploadSend large plans as a link in the brief.
Your brief wasn't sentThe connection dropped. Your text is still here.
Toast
components/toast/Inverted ink notices in a polite live region with an undo action; window.spToast() and data-sp-toast.
Link to P-034 copied.
Brief moved to drafts.
Dialog
components/dialog/Native
Tooltip
components/tooltip/Short ink label on hover and focus, dismissed with Escape, never holding essential content.
PDF, 2.4 MB, 64 pagesThree weeks, two people, a ranked fix list.
Empty state
components/empty-state/A giant outlined zero, a title, a line of help and one action.
00
No projects match "hardware"
We haven't shipped a hardware project yet. Clear the filter to see all 34.