<!-- Generated by ExtractVibe — https://extractvibe.com/brand/vanmoer.com -->
<!-- Extracted: 2026-08-28T13:37:29.667Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Home | Van Moer Logistics"
description: "Van Moer Logistics projects a professional, reliable, and grounded corporate identity that balances technical precision with approachable service. The design aesthetic is clean and modern, utilizing a restrained color palette and structured typography to convey trust and efficiency in global logistics."
colors:
  primary: "#ffffff"
  tertiary: "#007aff"
  neutral: "#192857"
  surface: "#ebebeb"
  on-surface: "#212529"
  on-surface-secondary: "#192857"
  link: "#192857"
  surface-dark: "#192857"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "64px"
    fontWeight: "600"
    lineHeight: "76.8px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "57.6px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "56px"
    fontWeight: "600"
    lineHeight: "67.2px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "300"
    lineHeight: "24px"
rounded:
  md: "3.75px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#0097da"
    rounded: "0px"
    padding: "15px"
    fontSize: "15px"
    fontWeight: "600"
    borderWidth: "0px 0px 3px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#192857"
    rounded: "3.75px"
    padding: "15px"
    fontSize: "15px"
    fontWeight: "600"
    borderColor: "#192857"
    borderWidth: "2px"
---

# Home | Van Moer Logistics — Design System

## Overview

The visual identity of Van Moer Logistics is engineered to project unwavering reliability and professional precision. Drawing from the archetypes of The Ruler and The Caregiver, the interface balances authoritative structure with approachable service, ensuring users feel both guided and secure. This aesthetic mirrors the clean, efficient environments of industry leaders like Maersk and Flexport, where clarity of information is paramount. The design avoids clutter, decorative excess, or playful experimentation. Instead, it adheres to a strict grid system and restrained palette, reinforcing the brand’s core promise of trust and operational efficiency in global logistics. Every element serves a functional purpose, eliminating ambiguity and reducing cognitive load for the user. The atmosphere is calm, controlled, and deeply corporate, yet accessible enough to foster confidence in complex supply chain processes. This is not a creative playground; it is a tool for serious business. The design IS NOT whimsical, chaotic, or overly minimalist to the point of coldness. It maintains warmth through generous whitespace and clear typography, ensuring the human element of service remains visible beneath the technical precision. The goal is to create a digital environment that feels as robust and dependable as the logistics network it represents, providing a seamless, trustworthy experience for enterprise clients and partners alike.

**Key characteristics:**

- Vibe — reliable, professional, clean, structured, corporate, trustworthy
- Archetypes — The Ruler, The Caregiver
- Comparable to — Maersk, DHL, Flexport, Stripe
- Design era — contemporary-minimal
- Emotional tone — trustworthy-efficient
- Target audience — B2B logistics partners and enterprise clients seeking reliable, transparent, and professional supply chain solutions.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is intentionally restrained, leveraging white as the primary surface to maximize clarity and reduce visual noise. This extensive use of negative space signals transparency and order, critical traits for a logistics provider handling complex data. The absence of vibrant accent colors prevents distraction, focusing attention entirely on content and navigation. This monochromatic foundation conveys stability and professionalism, aligning with the serious nature of global trade. The simplicity ensures the interface remains legible and accessible across all devices, reinforcing the brand’s commitment to efficiency and reliability without relying on decorative color theory.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffffff` | White |
| accent / tertiary | `#007aff` | Dodger Blue |
| surface | `#ebebeb` | Lavender |
| background | `#ffffff` | White |
| text | `#212529` | Near-Black |
| secondary text | `#192857` | Midnight Blue |
| link | `#192857` | Midnight Blue |
| muted | `#192857` | Midnight Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#192857` | Midnight Blue |

## Typography

Typography relies exclusively on Inter, a variable sans-serif font chosen for its exceptional readability and neutral, modern character. The type system establishes a clear, logical hierarchy through weight and size, guiding users through complex information structures with ease. Inter’s geometric precision mirrors the technical accuracy of Van Moer’s services, while its humanist undertones provide an approachable, trustworthy feel. The consistent use of this single font family ensures visual cohesion and reduces cognitive friction. Headings command attention with bold weights, while body text remains light and legible, creating a structured rhythm that reinforces the brand’s organized and professional identity.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 300 |
| Inter | heading | google-fonts | 600, 700 |
| sans-serif | body | system | 300, 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 64px | 600 | 76.8px | — |
| Heading 2 | Inter | 48px | 600 | 57.6px | — |
| Heading 3 | Inter | 56px | 600 | 67.2px | — |
| Body | Inter | 16px | 300 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.176) 0px 16px 48px 0px` |
| modal | `rgba(0, 0, 0, 0.3) 0px 32px 68px 0px` |

### Gradients

- `linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0.75) 75%, rgba(0, 212, 255, 0))`

## Shapes

Border-radius scale:

- `md` — 3.75px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#0097da`
- Radius — `0px`
- Padding — `15px`
- Font size — `15px`
- Font weight — `600`
- Sample copy — "Consent"

**Secondary**

- Background — `#ffffff`
- Text — `#192857`
- Radius — `3.75px`
- Padding — `15px`
- Font size — `15px`
- Font weight — `600`
- Border — `2px solid #192857`
- Sample copy — "Deny"

## Do's and Don'ts

### Do

- Use Inter font family for all text; apply weight 700 or 600 for headings and 300 or 400 for body text.
- Format all headings in sentence-case (e.g., 'Creating value through partnership') and maintain body line-height at 24px.
- Use primary accent color #007aff for interactive elements and key highlights against a #ffffff background.
- Style primary action buttons as outlines with #0097da text, 15px padding, and 0px border-radius (sharp corners).
- Style secondary buttons with #ffffff background, #192857 text, #192857 border, 3.75px border-radius, and 15px padding.
- Apply subtle depth using layered shadows: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px for dropdowns and rgba(0, 0, 0, 0.3) 0px 32px 68px 0px for modals.
- Maintain a clean, flat design base with minimal gradients (only subtle white-to-white fades if used for texture).
- Use a strict 2px base spacing unit for consistent layout rhythm and alignment.

### Don't

- Do not use emoji in any marketing copy or UI elements; the brand is strictly text-based.
- Do not use title case for headings; always use sentence-case to maintain a professional, understated tone.
- Do not use exclamations in copy; keep the voice matter-of-fact and serious (Playful/Serious score 4/10).
- Do not use serif fonts; the brand relies exclusively on Inter and system sans-serif fonts.
- Do not use pill-shaped buttons (large border-radius); primary buttons must have 0px radius, secondary only 3.75px.
- Do not use vibrant or saturated background colors; stick to #ffffff background with #212529 text.
- Do not use heavy or noisy shadows; keep shadows subtle and directional to maintain a clean aesthetic.
- Do not use mixed casing or inconsistent font weights; adhere strictly to Inter 300/400/600/700 hierarchy.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — moderate
- Jargon — some
- CTA style — mixed action-oriented and invitation-based phrases
- Rhetorical devices — juxtaposition, repetition

### Sample copy

> Around the world, down to earth.

> We believe that our customers should always be able to count on a tip-top service.

> Creating value through our partnership in logistics

> Tailor-made logistics services

> Want to join the family?

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/vanmoer.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/vanmoer.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/vanmoer.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/vanmoer.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/vanmoer.com/logo-4.png) | 95% |
| primary | — | svg | [link](brands/vanmoer.com/logo-5.svg) | 85% |
| secondary | — | svg | [link](brands/vanmoer.com/logo-6.svg) | 85% |

## Sources

- Official brand guidelines — https://www.canva.com/docs/media-kits/
- Live brand page — https://extractvibe.com/brand/vanmoer.com
- Raw JSON — https://extractvibe.com/api/brand/vanmoer.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/vanmoer.com/design.md
- Extracted — 2026-08-28T13:37:29.667Z
- Generator — ExtractVibe vv1
- Quality score — 100/100