01Overview

Vlak, a Noord sub-brand

Vlak provides the shared components, tokens and patterns used to build interfaces across the Noord family.

Noord is the core brand. These guidelines inherit its monochrome palette, typography, grid, accessibility and voice principles. This document defines the sub-brand’s own role, mark and applications.

02Voice & tone

How Vlak sounds

Write precise component guidance. Explain what a component does, when to use it and how it behaves. Use short examples and explicit names.

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 Vlak as the product name. Use “Vlak by Noord” when the relationship needs to be explicit. Noord remains the core brand; do not combine the symbols into a new mark.

03Logo

The Vlak mark

The original Noord mark reflected vertically. Preserve the canvas and all original path proportions.

Clear space & sizing

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.

Part of the Noord brand system. Original Noord geometry by Li-Anne Dias.

04Color

Palette

Inherited from Noord. Use the shared paper, ink and grey palette; do not introduce a separate sub-brand colour.

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.

05Typography

Type

Inherit Noord’s brand typography and hierarchy. Product UI follows the Vlak implementation tokens. Keep the product name in sentence case.

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.

06Layout & grid

The grid

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.

07Components

Applications

Use the Vlak mark on documentation, component references and design-system assets. Product interfaces use Vlak components without replacing their own sub-brand identity with Vlak’s.

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.

08Do & don't

In short