Marke 2Rap

Das Zeichen 2R, die Farben, die Schrift – und was man damit nicht tun darf

Diese Seite zeigt die Markendateien so, wie sie wirklich sind: Sie lädt die Dateien aus /icons/ und stellt sie dar – sie enthält keine Kopien davon. Was hier steht, stimmt also auch dann noch, wenn jemand eine Datei ändert. Die Regeln dazu stehen in MARKE.md im Projektstamm.

Der Name

Das Produkt heisst 2Rap, das Zeichen ist 2R. Verbindlich ist genau eine Schreibweise: Ziffer 2, grosses R, kleines ap. Nicht 2RAP – das liest sich als Abkürzung, bei der jeder Buchstabe für ein Wort steht. Nicht 2rap – dann verschwindet das R aus dem Wort und das Zeichen hat im Namen keine Entsprechung mehr.

Davon zu unterscheiden: der Firmenname einer Installation. Was ein Betrieb im Adminbereich unter Marke einträgt, gehört ihm und wird nicht angefasst. 2Rap ist der Name des Produkts, nicht der Name des Kunden.

Die Zeichen

Jedes Zeichen in 16, 24, 32, 48, 96 und 160 Pixeln – auf hellem Grund, auf dunklem Grund und in reinem Schwarz für den Druck. Die entscheidende Grösse ist 16: dort landet das Favicon.

Schild

2r-schild.svg

Favicon und Browsertab, Kopfzeile der App, überall wo das Zeichen klein neben Text steht.

Bei 16 Pixeln liest man das 2R nicht – man sieht ein Schild und sieht, dass darin etwas steht. Genau das soll ein Favicon: Wiedererkennung über die Silhouette. Ab 24 Pixeln wird der Inhalt erkennbar, ab 32 lesbar.

Heller Grund, Akzent #6d28d9

16
24
32
48
96
160

Dunkler Grund, Akzent als Tinte #c4b5fd

16
24
32
48
96
160

Reines Schwarz auf Weiss, wie im Druck

16
24
32
48
96
160

Pur

2r-pur.svg

Briefkopf, Fusszeile, Drucksachen, laufender Text – überall ab etwa 24 Pixeln.

Kein Umriss, keine Silhouette: In der Tableiste steht das Zeichen als dünner Kritzel und verschwindet neben jedem Symbol mit Fläche. Auf Papier ist es dafür das beste der drei, weil positive Striche im Laserdruck halten.

Heller Grund, Akzent #6d28d9

16
24
32
48
96
160

Dunkler Grund, Akzent als Tinte #c4b5fd

16
24
32
48
96
160

Reines Schwarz auf Weiss, wie im Druck

16
24
32
48
96
160

Quadrat

2r-quadrat.svg

App-Symbol: Startbildschirm, Kachel, Taskleiste, Manifest.

Bei 16 Pixeln laufen die Aussparungen zu und übrig bleibt ein einfarbiges Quadrat – als Favicon wertlos. Als Kachel richtig: auf fremdem Startbildschirm zählt Deckung mehr als Feinzeichnung.

Heller Grund, Akzent #6d28d9

16
24
32
48
96
160

Dunkler Grund, Akzent als Fläche #7c3aed

16
24
32
48
96
160

Reines Schwarz auf Weiss, wie im Druck

16
24
32
48
96
160

Kurz: welche Datei wofür

Das Vorschaubild

og.svg, 1200 mal 630. Erscheint, wenn jemand einen Link auf die Seite in einen Chat oder ein Netzwerk stellt. Die Farben stehen hier fest verdrahtet und nicht als currentColor: Ein Vorschaubild hat keine Umgebung, von der es eine Farbe erben könnte.

og.svg

Vorschaubild: das Zeichen 2R neben dem Namen 2Rap und dem Satz Rapporte für den Sicherheitsdienst, mit Prüfkette und eigenem Server.

Die Farben

Alle Werte stammen aus public/styles.css; dort ist die Quelle. Wer eine Farbe ändern will, ändert sie dort und nicht hier.

Heller Grund

Akzent --accent #6d28d9
Akzent, blasser Grund --accent-soft #f2ecff
Schrift auf Akzent --accent-ink #ffffff
Grundfläche --surface-0 #f4f3f0
Karte --surface-2 #ffffff
Linie --border #dedcd6
Text --text-primary #0b0b0b
Text, zweite Stufe --text-secondary #52514e
Text, leise --text-muted #6d6b65

Dunkler Grund

Akzent als Fläche --accent #7c3aed
Akzent als Tinte --accent-fg #c4b5fd
Akzent, blasser Grund --accent-soft #241a3d
Grundfläche --surface-0 #100e16
Karte --surface-2 #221e2e
Linie --border #322c42
Text --text-primary #f4f2fb
Text, zweite Stufe --text-secondary #c2bdd2

Welches Violett wo – und warum das nicht Geschmack ist

Nachgerechnet nach WCAG als Kontrastverhältnis:

Oben ist das nebeneinander zu sehen: Schild und Pur stehen auf dunklem Grund in der Tinte, das gefüllte Quadrat im satten Ton. Wer das vertauscht, baut ein Zeichen, das im Dunkelmodus verschwindet.

Für den Druck ist kein verbindlicher CMYK-Wert festgelegt. Bis dahin gilt dort einfarbig Schwarz, und zwar 2r-pur.svg. Ein aus RGB geschätztes Violett fällt je nach Druckerei anders aus und ergibt zwei Marken statt einer.

Die Schrift

Es gibt keine Hausschrift. Verwendet wird die Systemschrift – dieser Satz steht in ihr:

ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Das ist eine Entscheidung und keine Lücke. Eine geladene Schrift kostet beim ersten Aufruf Zeit, fehlt offline, solange sie nicht im Zwischenspeicher liegt – und offline ist genau der Fall, für den diese App gebaut ist –, und beim Drucken aus dem Browser ist sie häufig gar nicht dabei.

Was man nicht tun darf

Die Adresse

zwarap.ch bleibt für immer erreichbar. Auf gedruckten QR-Codes stehen Adressen unter diesem Namen, und gedrucktes Papier lässt sich nicht nachführen. 2rap.ch ist gekauft, aber noch nicht umgestellt – sie kommt dazu, sie ersetzt nicht. Im Quelltext wird darum nur der Name geändert und nicht die Adresse.

In Fliesstext wird die Adresse klein geschrieben, also 2rap.ch und nicht 2Rap.ch: Ein Grossbuchstabe in einer Adresse sieht nach Tippfehler aus und wird beim Abtippen zur Fehlerquelle. Der Produktname bleibt davon unberührt und heisst weiterhin 2Rap.

Noch nicht umgestellt

Ehrlich aufgeschrieben, damit es niemand für erledigt hält. Diese Dateien tragen weiterhin das alte Z:

Warum überhaupt Skript

Die Zeichendateien färben sich über currentColor. In einem <img> gibt es keine Umgebung, von der eine Farbe geerbt werden könnte – dort werden sie schwarz. Damit diese Seite die Zeichen in der Markenfarbe zeigen kann, ohne die Zeichnungen in den Quelltext zu kopieren (eine Kopie liefe irgendwann von der Datei weg und die Seite zeigte etwas anderes als das, was ausgeliefert wird), lädt /marke.js die Dateien nach und bettet sie ein. Dabei macht es zugleich die Kennungen jeder Kopie eindeutig: 2r-quadrat.svg enthält eine Maske mit fester Kennung, und achtzehnmal dieselbe Kennung auf einer Seite ist ungültig. Ein Skript im Dokument selbst ist wegen der Sicherheitsrichtlinie ausgeschlossen, darum eine eigene Datei.