Skip to content
MeridianMeridian Knowledge Base

Visual Language

The visual direction comes from the client’s existing property, meridian.viamo.no: dark navy primary with a restrained accent on a light neutral background, one calm sans-serif family, spacious-but-not-empty B2B density, soft radii and subtle borders — the register of a professional’s daily tool, not a bright consumer SaaS product.

This page is a pointer, not a copy — see docs/design/visual-language.md in the repo for:

  • What to take from viamo.no, and what to avoid (gradients, “magical” AI framing, illustrations, more than two shadow depths)
  • Reference notes from a live walkthrough of meridian.viamo.no — the structural patterns worth reusing (tabbed incident workspace, numbered sections, the dark “your perspective / next action” strip, status pills, a demo/session banner, a session-activity timeline)
  • The three purposeful micro-interactions: the AI “typing” effect, the law-citation panel slide-in, and the citation highlight
  • Voice and copy, including the epistemic-honesty rule borrowed from viamo.no: AI-generated content states what’s confirmed vs. still open and never reads as a finished verdict

Design tokens (colors, spacing, radii, font sizes) land in projects/ui/src/styles/_variables.scss once screens are built — not duplicated here either.