# Noord brand guidelines Logo, color, typography, grid and visual examples from Noord’s brand system. **TL;DR** Use the actual Noord type, colors, grid, and files below. Give the work room to breathe. The logo does not need to supervise every square inch. Status: Working reference ## Before you start For: Designers working with Noord Use when: You need to apply Noord’s identity, not invent a new one. Bring: The current approved identity and the medium you are designing for. Leave with: A deliverable that follows the lab’s identity. ## Worked example (fictional) A research report uses the same type hierarchy and neutral colors as its accompanying interface; status is communicated with labels, not color alone. ## Check the result Check the actual approved tokens and artwork before export. ## Limitations The visual examples illustrate the system; confirm font and asset licenses before reusing source files. The identity should help you recognize the work without getting in its way. At Noord, that means a clear page, careful type, and enough room to look at the image or decision in front of you. This is the system we use, with the actual colors, typography, photographs, and applications below. Use those details when making something for Noord. The explanations are here so you can understand the choices, not just copy the appearance. ## Method 1. Noord is an applied design lab building interfaces that bring human judgment into visual model training. 2. Use plain language, sentence case, clear hierarchy and a restrained palette. Interface structure should support the work rather than compete with it. 3. Preserve readable line lengths and accessible contrast in both themes. Reserve interaction for things people can act on. ## Handoff Record the input sources, decisions, assumptions, owner and acceptance checks. Have the responsible person approve the record before downstream automation. ## Tools, in order ### Before designing A versioned project folder Take the current Noord identity as the source. Select only the rules needed for this medium, including approved fonts and image rights. Carry forward: A short, source-linked identity brief. ### While making [Figma](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) · A coding workspace with approved file access · [Claude](https://claude.ai/), [ChatGPT](https://chatgpt.com/), or [Grok](https://grok.com/) Supply those rules with a real piece of content. Ask for an application of the identity, not a new identity. Inspect type, grid, tone, and imagery in the actual output. Carry forward: A versioned application with the source values intact. ### Before sharing [Browser and accessibility checks](https://www.w3.org/WAI/test-evaluate/preliminary/) · A versioned project folder Check both themes, real content lengths, and the exported files. Compare against the guideline rather than relying on the assistant's description. Carry forward: A checked preview and a short list of intentional exceptions. ### Review the work with partners We make and revise the work with Claude, ChatGPT, or Grok, then put selected versions on our Studio project pages for partners to review. Check the preview before sharing it. You can do the same with a private prototype or shared document; use a workspace that can access the files you need. Name the version, say what changed, and ask the question you need answered. Keep feedback with that version and discuss conflicting requests before making the next changes. Confirm approval separately, and keep confidential work in a restricted space. For this method: Where does this application depart from the approved identity, and is that exception justified? ### Delegate the routine work Check supplied values, find inconsistent names, or prepare a list of deviations from the reference. Keep with a person: Changing Noord's identity or approving an exception needs the identity owner. [Sequence prompts, then delegate](https://noord.dev/polder/delegating-with-prompts) [Choose a model for the design task](https://noord.dev/polder/choosing-design-models) Source: https://noord.dev/polder/noord-guidelines Public working material from Noord. Third-party code, fonts and assets retain their own licenses. Publication does not imply a license to redistribute third-party material. ## Complete source reference ```json { "slug": "noord", "brand": "Noord", "version": "v2.0", "year": "2026", "logoSrc": "/logo.svg", "footer": "Noord brand guidelines · 2026 · Polder public reference", "cover": { "label": "Noord brand guidelines · 2026", "title": "Noord", "subtitle": "An applied design lab in Alkmaar, the Netherlands. We build interfaces that drive visual model training at scale." }, "overview": { "heading": "Applied design lab", "paragraphs": [ "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." ] }, "strategy": { "heading": "Human judgment, made useful", "intro": "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": [ { "word": "Judgment", "def": "Design for what people can see and understand. Keep ambiguity visible instead of forcing a false answer." }, { "word": "Craft", "def": "Precision in interaction and presentation helps people make better decisions. Aesthetic quality serves the work." }, { "word": "Restraint", "def": "Keep interfaces lightweight. Remove friction and decoration that compete with the task." }, { "word": "Candor", "def": "Distinguish demonstrated results from hypotheses and work in progress. Do not imply model improvements without evidence." } ], "audience": "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." }, "voice": { "heading": "How we sound", "intro": "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": [ { "word": "Understated", "def": "State what's true and let it stand. No superlatives we can't back up." }, { "word": "Plain", "def": "Short words, concrete nouns. If a simpler word exists, use it." }, { "word": "Considered", "def": "Every line earns its place. Read it back and cut a third." }, { "word": "Warm", "def": "Human and direct, never so relaxed that it reads careless." } ], "say": [ "“We build interfaces that drive visual model training at scale.”", "“People see things machines miss.”", "“This is in development. Here is what we have tested.”" ], "avoid": [ "“Game-changing, revolutionary growth.”", "“Unlock 10x synergy at scale!”", "“World-class, best-in-breed solutions.”" ], "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." }, "logo": { "heading": "The mark", "intro": "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.", "clearspace": "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." ], "credit": "The Noord mark was drawn by Li-Anne Dias.", "creditUrl": "https://www.liannedias.com/", "creditName": "Li-Anne Dias" }, "color": { "heading": "Palette", "intro": "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.", "palettes": [ { "label": "Light", "swatches": [ { "name": "Paper", "hex": "#FAF8F2", "role": "Primary background. Warm beige.", "light": true }, { "name": "Ink", "hex": "#1A1A1A", "role": "Primary text, links, and solid fills." }, { "name": "Gray", "hex": "#6B6B6B", "role": "Secondary text, captions, meta.", "light": true } ] }, { "label": "Dark", "swatches": [ { "name": "Black", "hex": "#0E0C0A", "role": "Dark background. Warm near-black." }, { "name": "White", "hex": "#E8E8E8", "role": "Primary text on dark.", "light": true }, { "name": "Gray", "hex": "#949494", "role": "Secondary text on dark.", "light": true } ] } ], "ramps": [ { "label": "Neutral scale", "steps": [ { "hex": "#1A1A1A", "name": "Ink", "light": false }, { "hex": "#3D3D3D", "light": false }, { "hex": "#6B6B6B", "name": "Gray", "light": false }, { "hex": "#949494", "light": false }, { "hex": "#C4C2BD", "light": true }, { "hex": "#E8E8E8", "light": true }, { "hex": "#FAF8F2", "name": "Paper", "light": true } ] } ], "accentNote": "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." }, "typography": { "heading": "Type", "intro": "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.", "fontStack": "'Messina Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif", "foundry": "Messina Sans is designed by Luzi Gantenbein and published by Luzi Type, Zürich. Licensed for Noord Ventures and Noord Studio.", "foundryUrl": "https://www.luzi-type.ch", "foundryName": "Luzi Type, Zürich", "scale": [ { "label": "Display XL / 52", "spec": "52px · 600 · -0.035em", "sample": "The sea is above us, and still we sleep.", "px": 52, "weight": 600, "tracking": "-0.035em", "lineHeight": 1.05 }, { "label": "Display / 38", "spec": "38px · 600 · -0.03em", "sample": "Land we borrowed from the water.", "px": 38, "weight": 600, "tracking": "-0.03em", "lineHeight": 1.15 }, { "label": "Title / 22", "spec": "22px · 600 · -0.02em", "sample": "The pumps run all night so we don't have to pray.", "px": 22, "weight": 600, "tracking": "-0.02em", "lineHeight": 1.3 }, { "label": "Subhead / 17", "spec": "17px · 500 · -0.01em", "sample": "Fog takes the village; the church bell stays.", "px": 17, "weight": 500, "tracking": "-0.01em", "lineHeight": 1.5 }, { "label": "Body / 15", "spec": "15px · 500 · -0.01em", "sample": "We live below the waterline and speak softly about it, trusting the dyke the way our grandparents trusted God — daily, and without discussion.", "px": 15, "weight": 500, "tracking": "-0.01em", "lineHeight": 1.6 }, { "label": "Label / 13", "spec": "13px · 600 · -0.01em", "sample": "NAP −2.1 m · below the waterline", "px": 13, "weight": 600, "tracking": "-0.01em", "lineHeight": 1.3 } ], "rules": [ "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." ] }, "grid": { "heading": "The grid", "body": "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.", "columnLabel": "Reading column · ~592px" }, "imagery": { "heading": "The polder, plainly", "body": "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.", "photos": [ { "src": "/brand/v2/ed-02.jpg", "caption": "The 14:20 to Schagen." }, { "src": "/brand/v2/ed-03.jpg", "caption": "Under the dyke." }, { "src": "/brand/v2/ed-05.jpg", "caption": "Front row." }, { "src": "/brand/v2/ed-06.jpg", "caption": "Against the fence." }, { "src": "/brand/v2/ed-08.jpg", "caption": "Kunst, leven." }, { "src": "/brand/v2/ed-09.jpg", "caption": "Washing day." }, { "src": "/brand/v2/ed-10.jpg", "caption": "Groceries." }, { "src": "/brand/v2/ed-12.jpg", "caption": "Café De Polder." } ], "rules": [ "Desaturate slightly (≈0.85–0.9) for cohesion.", "Full-bleed within the column; softly rounded corners.", "People over product; place over abstraction." ] }, "environments": { "heading": "Out in the world", "intro": "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.", "items": [ { "kind": "large-screen", "src": "/brand/env-large4.jpg", "label": "Large screens", "desc": "Slides and displays carry typography and the mark only, all left aligned. One line per slide; whitespace does the rest." }, { "kind": "small-screen", "src": "/brand/env-small4.jpg", "label": "Small screens", "desc": "The noord.dev homepage on the mobile grid: a single column, type stepped down, spacing held. The mark stays legible to 16px." }, { "kind": "outdoor", "src": "/brand/env-outdoor4.jpg", "label": "Outside", "desc": "Signage is the mark and wordmark on an ink panel, or ink on paper. One material, one color, no effects; legible at distance." }, { "kind": "merch", "src": "/brand/env-merch3.jpg", "label": "Merch", "desc": "Embroidered or printed in one color: ink on light gear, bone on dark. The mark sits small on the chest, never across the back." }, { "kind": "billboard", "src": "/brand/env-billboard4.jpg", "label": "Billboards", "desc": "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." }, { "kind": "subway", "src": "/brand/env-subway4.jpg", "label": "Subway ads", "desc": "The portrait ad on a backlit panel: paper ground, one claim, the mark small. It competes by being the quietest thing on the platform." }, { "kind": "bus-stop", "src": "/brand/env-busstop4.jpg", "label": "Bus stop ads", "desc": "The same portrait creative in the abri frame, unchanged behind wet glass. One system, every format." }, { "kind": "conference", "src": "/brand/env-conference10.png", "label": "Conference presence", "desc": "A room for a conversation: one headline wall, warm oak, and a shared table to try the work. The same restraint, at human scale." } ] }, "motion": { "heading": "Short and eased", "body": "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.", "chips": [ "0.2s · ease", "opacity & color only", "no bounce" ] }, "components": { "heading": "The working parts", "body": "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.", "card": { "label": "Design system", "title": "Vlak", "body": "A minimal agentic design system. Reusable components and patterns for coherent interfaces." } }, "signatures": false, "expressions": { "heading": "Noord, Vlak and Polder", "intro": "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.", "items": [ { "name": "Noord", "url": "noord.dev", "line": "Applied design lab.", "list": [ "Builds interfaces for visual model training", "Works with domain experts and partners", "Based in Alkmaar, the Netherlands" ] }, { "name": "Vlak", "url": "vlak.dev", "line": "A minimal agentic design system.", "list": [ "Interface components and patterns", "A shared implementation foundation", "Open documentation" ] }, { "name": "Polder", "url": "noord.dev/polder", "line": "An open model for high-quality aesthetic output.", "list": [ "Methods for listening and making decisions explicit", "Working knowledge for tools, workflows and partner work", "Open templates, scripts and references" ] } ] }, "rules": { "do": [ "Let whitespace carry the page.", "Let weight and spacing carry emphasis.", "Write less, then cut more.", "Round corners subtly (4–6px); keep lines hairline.", "Show the work; skip the adjectives." ], "dont": [ "Introduce color; the system is monochrome.", "Set anything in all caps.", "Add shadows, gradients, or glow.", "Reach for hype or superlatives.", "Introduce a second typeface.", "Make motion the main event." ] } } ```