Marke & Präsenz

1 · Die Link-Vorschau

Eine interne Fachanwendung wird selten gesucht — sie wird weitergeleitet. Der erste Kontakt ist damit fast immer diese Karte in einem Chatfenster, nicht die Startseite. Wer sie nicht gestaltet, überlässt die Antwort auf «von wem ist das?» dem Zufall.

// app/opengraph-image.tsx — der ganze Unterschied zwischen zwei ZVV-Apps
export default function OgImage() {
  return new ImageResponse(
    ogCard({
      title: 'Fahrzeugdatenbank',
      subtitle: 'Asset Management · Lifecycle · Audit-Trail',
      lead: 'Mehrmandanten-Plattform für die acht MVUs des ZVV.',
      domain: 'fzdb.zvv.ch',
      mark: busBlaupause(380),
      fontFamily: OG_FONT_FAMILY,
      footer: { label: '8 MVUs:', items: ['VBZ', 'VBG', 'PAG', 'VZO'] },
    }),
    { ...OG_GROESSE, fonts: OG_FONTS },
  )
}

2 · Das App-Zeichen

Weisses Bildzeichen auf ZVV-blauer Kachel. Die Kachel ist bei allen gleich, das Zeichen nie — nebeneinander sind sie als Familie erkennbar und trotzdem einzeln unterscheidbar. Menschen erkennen ungleich besser, als sie erinnern.

// app/apple-icon.tsx
export default function AppleIcon() {
  return new ImageResponse(
    appleIcon({ glyph: atlasKachel(112), kuerzel: 'ATLAS' }),
    { ...size, fonts: OG_FONTS },
  )
}

Zwei Dateien, ein Schutzraum, ein Mindestmass je Flächenart — und ein Verbot, das immer wieder verletzt wird.

Schutzraum: ≥ 25 % der Logo-Höhe, rundherum

✓ 11 px frei bei 44 px Logohöhe

Fahrzeugdatenbank

✗ Trennstrich und App-Name stehen im Schutzraum

Im Schutzraum steht nichts — kein App-Name, kein Trennstrich, keine Kante eines Nachbarelements. Häufigster Verstoss: eine Topbar, in der das Logo bündig an der Trennlinie zur Navigation klebt.

Mindestmass je Flächenart

Auf einer Markenfläche steht die Marke für sich — Login, Deckblatt, Mail-Kopf, Print. Dort gilt eine Mindestbreite.

Desktop120 px

Mobil80 px

Anwendungs-Chrome

Topbar, Sidebar-Kopf, Footer — dort ist das Logo Herkunftsmarker neben dem App-Namen, nicht Absender. Gemessen wird die Höhe, weil sie das ist, was ein Band beschränkt.

Chrome43 × 20 px · Höhe ≥ 20 px

Die 80/120 px sind ein Präsenz-Minimum, keine Lesbarkeitsschwelle. Auf die Chrome angewandt fordern sie ein 83 px hohes Band — das ist keine Topbar mehr. Beide Fassungen liegen im DOM und schalten per Klasse um; nicht per JavaScript nachladen, das flackert beim ersten Rendern.

Der Fall, der immer wieder passiert: der Nachbau

ZVV

Zürcher Verkehrsverbund

✗ Erfundene Wortmarke — falsche Proportionen, falsche Schrift, kein Bildzeichen

Zürcher Verkehrsverbund

✓ Die kanonische Datei, über zvvLogo() auch in `next/og`

Der Grund für den Nachbau ist immer derselbe: Es sieht so aus, als stünde in einer OG-Karte kein Logo zur Verfügung — kein CSS, kein Zugriff auf /zvv-logo.svg. Es steht aber zur Verfügung. Wenn du das Logo gerade zeichnest statt es zu laden, ist es der falsche Weg — auch wenn das Ergebnis gut aussieht.

Ein Fehler auf diesen Flächen ist besonders teuer, weil ihn niemand sieht: Sie erscheinen nur in fremden Oberflächen, und Teams und Slack cachen eine Karte für Tage. Wer den Fehler bemerkt, sieht ihn bereits verteilt. Deshalb steht hier mehr Maschine als anderswo.

import { pruefeSatori } from '@zvvch/atlas/brand'

it('rendert satori-sicher', () => {
  expect(pruefeSatori(meineKarte())).toEqual([])
})