Logo
Das Logo ist das Gesicht der Marke. Behandle es entsprechend: richtige Variante, genug Platz, klarer Kontrast. Wenn du unsicher bist, nimm die grüne Wortmarke. Das ist der Standard.
Alle Logos sind echte Vektoren (SVG): beliebig skalierbar, immer scharf, klein in der Dateigröße.
Wortmarke
Die Wortmarke „MIRAGON" ist dynamisch nach vorn geneigt. Die Standard-Variante ist grün, einfach grün auf dem Untergrund. Sie funktioniert auf hellem Grund genauso wie auf Markenflächen, zum Beispiel oben links in der Navigation. Blau oder Schwarz sind die Alternative, etwa für monochrome oder Schwarz-Weiß-Fälle. Auf Foto und dunklem Grund nimmst du die weiße Wortmarke.
Key Visual
Der grüne Komet ist das wiedererkennbare Markenzeichen. Er steht für Akzente, Flächen, Hintergründe und Übergänge.
App-Icon
Als App-Icon steht der Komet auf einer blauen Kachel mit großem Radius (512 × 512, Radius 112). Er ist das App-Icon der Plattform und jeder Miragon-Software, die kein Modeler ist. Auch diese Doku trägt ihn als Favicon. Nimm die Datei unverändert, die Kachel gehört zum Zeichen.
Die Miragon Modeler tragen auf derselben Kachel ihr Modeler-Icon, auch als Favicon und Datei-Icon. Ein Modeler-Icon ist ein Werkzeugzeichen und kein Logo: Es macht den Modeler erkennbar, die Marke bleibt Miragon. Im Empty State der Modeler steht der Komet.
Welche Variante wann
| Hintergrund | Logo-Variante |
|---|---|
| Hell / weiß / grau | Grün (Standard), alternativ Blau |
| Dunkel / Markenfarbe / Foto | Weiß, alternativ Grün |
| Dark Mode einer App oder Webseite | Weiß, alternativ Grün |
| Monochrom / SW-Druck | Schwarz |
| Akzent / Flächen | Komet (Key Visual) |
| App-Icon, Favicon | Komet auf Blau, bei den Modelern ihr Modeler-Icon |
Im Dark Mode
In Apps und auf Webseiten folgt die Wortmarke dem Modus: hell Grün, im Dark Mode Weiß. Grün bleibt dunkel erlaubt (10,1:1 auf Schwarz). Am einfachsten ist ein Inline-SVG mit fill: var(--cd-ui-wortmarke), dann wechselt die Farbe ohne zweite Datei.
- Als Datei mit Umschalter zwei Bilder: die grüne Wortmarke mit der Klasse
cd-nur-hell, die weiße mitcd-nur-dunkel. Folgt die Seite nur dem System, reicht<picture>. - Über Blau, Verlauf und Mesh und im schwarzen Footer steht die Wortmarke fest in Weiß, in beiden Modi gleich.
- Komet, App-Icon und Favicon bleiben unverändert. Die blaue Kachel trägt in hellen und dunklen Browser-Tabs, sie bekommt keinen Rand und keinen Glow.
Schutzraum und Größe
Das Logo braucht Luft. Halte rundum mindestens die Höhe des „M" frei, also etwa eine Wortmarkenhöhe. Nichts ragt in diese Zone: kein Text, keine Kante, kein zweites Logo.
Die gestrichelte Linie ist der Mindest-Schutzraum, kein sichtbares Element.
Damit „MIRAGON" lesbar bleibt, gilt eine Mindestgröße:
| Element | Web (min.) | Druck (min.) |
|---|---|---|
| Wortmarke | 96 px breit | 20 mm breit |
| Komet (Key Visual) | 24 px | 8 mm |
Werte sind ein Vorschlag
Schutzraum und Mindestgrößen sind ein sinnvoller Startpunkt. Legt das Marketing andere Maße fest, ziehen wir sie hier und im Design-Manual nach.
Regeln
Gut
- Genug Schutzraum lassen, das Logo atmen lassen.
- Mindestgröße so wählen, dass „MIRAGON" klar lesbar bleibt.
- Auf Fotos in Weiß und nur über ruhigen oder abgedunkelten Bereichen.
- Nur die definierten Farbvarianten verwenden.
Nicht
- Verzerren, stauchen, drehen.
- Schlagschatten, Outline oder Glow hinzufügen.
- In nicht definierten Farben einfärben.
- Auf unruhigen Hintergrund ohne Kontrast setzen.
Richtig und falsch
Die Regeln als Bild, nicht nur als Liste. So erkennst du den Fehler, statt ihn dir vorstellen zu müssen.
Dateien
Die SVGs hier sind die offiziellen Vektor-Originale von Miragon. Für die meisten Einsätze (Web, Druck, Präsentation) reichen sie direkt. Für Werkzeuge ohne SVG gibt es jede Variante als PNG, 2000 px breit mit transparentem Hintergrund. Alle Logos zusammen mit Farben, Schrift und Textbausteinen stecken im Brand-Kit. Brauchst du EPS oder andere Formate, frag im ask-marketing-Channel.