Noord brand guidelines

01Overview

Applied design lab

We build interfaces that drive visual model training at scale. People see things machines miss: a subtle difference, an unexpected pattern, a detail that changes the meaning of an image. We design ways to bring that judgment into the training process.

We focus on the work between an image and a better model: looking, comparing, correcting and deciding. Our tools make these actions useful to people and turn their judgment into clear examples for machines. Expert knowledge becomes a practical foundation for visual learning at scale.

The interface should give you room to look. A photograph needs enough detail to compare; a label needs to make sense without an explanation; a correction needs to be easy to make. The type, spacing, and controls serve those tasks.

02Strategy

Human judgment, made useful

Better visual learning depends on the quality of the examples and decisions behind it. Interface design shapes how people inspect an image, express uncertainty, compare alternatives and correct a result. That is the work of the lab.

Mission

Make expert knowledge a practical foundation for visual learning at scale.

Positioning

Noord is an applied design lab building interfaces for visual model training. We connect careful human observation with structured examples that machines can learn from, through tools, working systems and partner work.

Values

• Judgment. Design for what people can see and understand. Keep ambiguity visible instead of forcing a false answer.
• Craft. Precision in interaction and presentation helps people make better decisions. Aesthetic quality serves the work.
• Restraint. Keep interfaces lightweight. Remove friction and decoration that compete with the task.
• Candor. Distinguish demonstrated results from hypotheses and work in progress. Do not imply model improvements without evidence.

Who we work with

Teams building visual learning systems, and domain experts whose observations are essential to them. We work with partners who need better ways to inspect, compare, annotate and review visual material—not simply more labels.

03Voice & tone

How we sound

Say what the work does and why a choice matters. Write as you would explain it to a thoughtful partner: directly, with enough detail to follow the reasoning. Use an example when an adjective would leave the meaning open.

Principles

• Understated. State what's true and let it stand. No superlatives we can't back up.
• Plain. Short words, concrete nouns. If a simpler word exists, use it.
• Considered. Every line earns its place. Read it back and cut a third.
• Warm. Human and direct, never so relaxed that it reads careless.

What we say — and don't

Naming

Use Noord for the applied design lab and noord.dev for its website. Vlak is the open design system at vlak.dev. Polder is the open knowledge base at noord.dev/polder. Use sentence case and preserve these names. Legal entity names belong in contracts and other contexts where they are required, not in the public positioning.

04Logo

The mark

The mark is a geometric N built from facets — a northern peak, a compass point. It is drawn in a single ink weight and uses currentColor, so it inherits whatever text color surrounds it.

Mark

Noord

Horizontal lockup

Clear space & sizing

Keep clear space around the mark equal to the height of one facet. The mark stays legible down to 16px; below that, lean on the favicon (mark on an ink tile). Don't reproduce it smaller than 14px in print.

Misuse

• Don't recolor the mark outside the palette.
• Don't add effects: shadows, gradients, outlines.
• Don't rotate, stretch, or rebuild it.
• Don't place it on a busy image without a clear field.

The Noord mark was drawn by Li-Anne Dias.

05Color

Palette

Monochromatic on warm paper. Ink, beige, and one gray between them. Nothing else. There is no accent color: emphasis comes from weight, size, and spacing, never from hue. What little contrast exists carries all the meaning.

Accent use

There is no accent color. Links, active states, and emphasis are ink, set apart by weight, underline, or position, not by hue. If something needs to stand out, give it space or make it heavier. Never reach for color.

06Typography

Type

One typeface: Messina Sans, with the native system sans as fallback. It reads cleanly at every size and stays out of the way. We set it tight, with negative tracking on headings, and give it room. Hierarchy comes from size and weight.

Rules of thumb

• Headings: weight 600, tracking −0.02 to −0.03em, balanced wrapping.
• Body: weight 500, line-height 1.6, ~66 characters.
• Never all caps: labels and eyebrows are sentence case, set apart by size and weight.
• Numerals and code may use a monospace stack for tables.

Messina Sans is designed by Luzi Gantenbein and published by Luzi Type, Zürich. Licensed for Noord Ventures and Noord Studio.

07Layout & grid

The grid

A faint vertical grid (≈204px columns) runs behind every page, present but barely there, like ruling on good paper. Content sits in a single reading column of ~592px. A 184px gutter on the left holds navigation and labels. Containers quantize to whole modules so edges rest on grid lines at every width. Dividers are hairlines; corners are softly rounded (4–6px). Whitespace does the heavy lifting.

08Photography

The polder, plainly

Photography is documentary and unstaged: real people, real places, natural light. We treat images with a slight desaturation and a touch of contrast so they sit calmly next to the paper. Avoid stock clichés, glossy renders, and anything that feels performed.

• Desaturate slightly (≈0.85–0.9) for cohesion.
• Full-bleed within the column; softly rounded corners.
• People over product; place over abstraction.

09Environment

Out in the world

The system holds at every size and on every surface: the same mark, the same restraint, from a conference display to a chest print. Nothing is redesigned per context; only scale and material change.

Large screens

Slides and displays carry typography and the mark only, all left aligned. One line per slide; whitespace does the rest.

Small screens

The noord.dev homepage on the mobile grid: a single column, type stepped down, spacing held. The mark stays legible to 16px.

Outside

Signage is the mark and wordmark on an ink panel, or ink on paper. One material, one color, no effects; legible at distance.

Merch

Embroidered or printed in one color: ink on light gear, bone on dark. The mark sits small on the chest, never across the back.

Billboards

One line, the mark, and room to breathe: the slide layout at roadside scale. If it can't be read at 80 km/h, it says too much.

Subway ads

The portrait ad on a backlit panel: paper ground, one claim, the mark small. It competes by being the quietest thing on the platform.

Bus stop ads

The same portrait creative in the abri frame, unchanged behind wet glass. One system, every format.

Conference presence

A room for a conversation: one headline wall, warm oak, and a shared table to try the work. The same restraint, at human scale.

10Motion

Short and eased

Motion stays out of the way. Transitions are short (0.15–0.3s) and eased. Color and opacity change; layout rarely moves. Theme switches cross-fade. Nothing bounces, nothing announces itself.

11Components

The working parts

Use Vlak components consistently. Give actions clear labels, maintain keyboard access and support light and dark themes. Links use weight and a subtle color change on hover, without underlines. Reserve interaction for useful actions.

Buttons & links

Badges

Card

Form

Icons

Icons are 16px, single-weight 1.5px strokes in currentColor — drawn on the same grid, never filled unless the state is active.

12The lab and its systems

Noord, Vlak and Polder

We build the tools at Noord, use Vlak to give their interfaces a shared foundation, and publish the methods in Polder. They belong to the same practice. A decision made in a workshop should be able to travel into the product without losing its reason along the way.

13Do & don't

In short