# 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": "v3.0", "year": "2026", "logoSrc": "/logo.svg", "footer": "Noord brand guidelines · 2026 · Polder public reference", "cover": { "label": "Noord brand guidelines · 2026", "title": "Noord core brand guidelines", "subtitle": "Noord, Vlak, Polder, Bureau and Studio. Noord is the core brand. Vlak, Polder, Bureau and Studio are sub-brands with individual guidelines and a shared foundation. Applied design lab. Alkmaar, the Netherlands." }, "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": "Noord is the applied design lab. Vlak is the minimalist agentic design system. Polder provides open models for ai-native design process. Bureau brings humans and agents into one place. Studio is the fifth family identity; its product descriptor is still to be defined. Preserve the names and use sentence case. Use Noord.dev as the email sender name." }, "logo": { "heading": "Five marks, one family", "intro": "Use the selected family in this order: Noord, Vlak, Polder, Bureau and Studio. The marks share 45° diagonals, solid fills and sharp ends. Preserve each orientation and use the supplied assets. Polder uses P1; Bureau retains its approved quarter-turn; Studio uses the final shallow-indent S.", "clearspace": "Recommended family clear space: at least one quarter of the mark width on every side. Start at 24px for standalone use. Review smaller sizes on the actual background. Keep the five marks on equal display canvases.", "misuse": [ "Do not stretch, round, outline or add new cuts to the symbols.", "Do not use earlier explorations as alternate brand assets.", "Keep the family monochrome; do not assign a colour to each identity." ], "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": "Use Vlak’s 204px module: a 184px column with a 20px gutter. Align titles, text and specimens to shared column edges. Use 1px dividers and generous spacing. Keep the family comparison in one row; allow horizontal scrolling on narrow screens.", "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": "One core brand, four sub-brands", "intro": "Noord is the core brand. Vlak, Polder, Bureau and Studio are sub-brands, each with individual guidelines for its role, mark, voice and applications. They inherit Noord’s colour, typography, grid and behaviour. Use the sub-brand name in product contexts and “by Noord” when the relationship needs to be explicit.", "items": [ { "name": "Noord", "url": "noord.dev", "line": "Applied design lab", "list": [ "Interfaces for visual model training", "Expert judgment translated into working systems" ] }, { "name": "Vlak", "url": "vlak.dev", "line": "Minimalist agentic design system", "list": [ "Shared components, tokens and patterns", "A common interface foundation" ] }, { "name": "Polder", "url": "noord.dev/polder", "line": "Open models for ai-native design process", "list": [ "Open methods, templates and working references", "Selected P1 identity with a full-height central spine" ] }, { "name": "Bureau", "url": "noord.dev/bureau", "line": "Humans and agents in one place", "list": [ "Shared agents in dedicated channels", "User-selected models with universal instructions and memory", "Keep the existing approved Bureau mark" ] }, { "name": "Studio", "line": "Studio", "list": [ "The fifth identity in the Noord family", "Selected S mark with balanced diagonal strokes and shallow indents", "Product descriptor to be defined" ] } ] }, "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.", "Use the selected five marks in consistent order, scale and orientation.", "Use the lab signature: Applied design lab / Alkmaar, the Netherlands.", "Use actual product views and work in application examples." ], "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.", "Do not substitute archived logo explorations for the selected family.", "Do not change the logo orientation during motion or use one mark in place of another." ] } } ```