# Miragon Corporate Identity > Schneller automatisieren. Mit deinem Team. Die Corporate Identity von Miragon: wie Miragon aussieht und klingt, als Doku für Menschen und als Plugin für Claude. Für Agenten: Alle verbindlichen Regeln stehen gebündelt in llms-full.txt, die exakten Werte (Farben, Type-Scale, Abstände) in /brand/tokens.json. Miragon wird geduzt, kein Em-Dash als Verbinder, korrekte Umlaute, AI statt KI, Gendern mit Paarform. Ein Dark Mode in Apps und auf Webseiten kommt nur aus den Rollen --cd-ui-* in /brand/cd-tokens.generated.css. ## Marke im Kern - [Alle Regeln in einer Datei](https://corporate-identity.netlify.app/llms-full.txt): Warum/Wie/Was, Ton, Zielgruppen, Vokabular, Regelkatalog, Anti-Slop, visuelle Regeln, Dark Mode und Tokens - [Design-Tokens](https://corporate-identity.netlify.app/brand/tokens.json): Farben, Statusfarben, UI-Neutrale, dunkle Neutrale, Rollen für Hell und Dunkel, Verläufe, Type-Scale, Abstände, Radius, Schatten, Formate - [Kontraste](https://corporate-identity.netlify.app/brand/contrast.json): berechnete WCAG- und APCA-Kontraste der Farbpaare und Rollen, hell und dunkel ## Dark Mode für Apps und Webseiten - [Dark Mode](https://corporate-identity.netlify.app/corporate-design/dark-mode): Grundsätze, Rollen und Regeln für Apps und Webseiten - [Token-CSS](https://corporate-identity.netlify.app/brand/cd-tokens.generated.css): alle --cd-* Variablen und die Rollen --cd-ui-* für Hell und Dunkel. Unverändert übernehmen, einschalten mit data-cd-theme am (light, dark oder system) - [Rollen als JSON](https://corporate-identity.netlify.app/brand/cd-tokens.generated.json): die Rollen je Modus als Werte, für Renderer, Exporte und Hosts (Fensterhintergrund) - [Regeln in llms-full.txt](https://corporate-identity.netlify.app/llms-full.txt): Abschnitt „Dark Mode (Apps und Webseiten)" mit Rollen, Neutralen und Statustext ## Corporate Design - [Corporate Design](https://corporate-identity.netlify.app/corporate-design/): Das Corporate Design hält die Marke Miragon zusammen. Wer sich daran hält, ist schneller fertig und muss nicht jedes Mal neu entscheiden, ob etwas nach Miragon aussieht. - [Markenfundament](https://corporate-identity.netlify.app/corporate-design/marke): Bevor es um Pixel geht, geht es ums Warum. Diese Seite bündelt, wofür Miragon steht, welche Werte und welche Kultur dahinterstecken und woran sich jede Gestaltungsentscheidung messen lässt. - [Markenarchitektur](https://corporate-identity.netlify.app/corporate-design/markenarchitektur): Wie Miragon, Miragon AI und die Modeler zueinander stehen. Die Frage klingt nach Organigramm, hat aber direkte Folgen: für Namen neuer Werkzeuge, für Logos, für Domains und dafür, wie Kunden uns wiedererkennen. - [Logo](https://corporate-identity.netlify.app/corporate-design/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. - [Farben](https://corporate-identity.netlify.app/corporate-design/farben): Zwei Farben tragen die Marke: ein kräftiges Blau und ein leuchtendes Grün. Blau ist die Basis, Grün der Akzent. Der Rest sind Schwarz, Weiß und ein ruhiges Grau für Flächen. - [Dark Mode](https://corporate-identity.netlify.app/corporate-design/dark-mode): Miragon-Apps und Miragon-Webseiten haben einen Dark Mode aus derselben Quelle wie der helle Modus. Er tauscht nur die Rollen: Schwarz ist der Grund, darüber liegen neutrale Stufen, Text ist Weiß und Links sind Grün. - [Typografie](https://corporate-identity.netlify.app/corporate-design/typografie): Eine Schrift, klar eingesetzt. Miragon nutzt Geist. Über Größe und Gewicht entsteht die Hierarchie, nicht über einen Zoo aus Schriftarten. - [Icons](https://corporate-identity.netlify.app/corporate-design/icons): Miragon nutzt drei Arten von Zeichen: Lucide für alle Funktionsicons, die Modeler-Icons als Zeichen der einzelnen Modeler und den Komet als Zeichen der Marke. - [Modeler-Icons](https://corporate-identity.netlify.app/corporate-design/modeler-icons): Die Modeler-Icons sind die Werkzeugzeichen der Miragon Modeler: ein Icon je Modeler für App-Icon, Favicon und Datei-Icon, kein eigenes Logo, denn die Marke bleibt Miragon. - [Layout & Raster](https://corporate-identity.netlify.app/corporate-design/layout): „Viel Weißraum" ist das Prinzip der Marke. Hier wird es messbar, damit Ruhe reproduzierbar wird und nicht Gefühlssache bleibt. - [Barrierefreiheit](https://corporate-identity.netlify.app/corporate-design/barrierefreiheit): Barrierefrei heißt: mehr Menschen können mit, statt trotz unserer Gestaltung arbeiten. Das passt zur Marke, klar und für alle zugänglich statt exklusiv. - [Anti-Slop](https://corporate-identity.netlify.app/corporate-design/anti-slop): Miragon arbeitet mit AI, jeden Tag. Deshalb kennen wir auch die Spuren, die AI hinterlässt, wenn niemand hinschaut: Texte im immer gleichen Rhythmus, Oberflächen, die aussehen wie tausend andere. - [Grafiken & Bildstil](https://corporate-identity.netlify.app/corporate-design/grafiken-bildstil): Bilder bei Miragon zeigen echte Menschen und echte Arbeit, kombiniert mit den Markenelementen. Das Ziel: professionell, aber nahbar. Nicht die sterile Stockfoto-Welt, in der alle im weißen Büro grundlos lachen. - [AI-generierte Bilder](https://corporate-identity.netlify.app/corporate-design/ai-bilder): Miragon ist AI-native, also entstehen Visuals auch mit AI. Das ist erlaubt, aber nicht beliebig. Der Bildstil bleibt derselbe wie unter Grafiken & Bildstil, und die radikale Transparenz gilt auch für generierte Bilder. - [Social Media](https://corporate-identity.netlify.app/corporate-design/social-media): Miragon postet auf LinkedIn, andere Kanäle gibt es nicht. Feste Formate sparen Zeit und halten den Feed konsistent. Hier sind die Maße und die Bausteine, aus denen ein Post besteht. - [Vorlagen](https://corporate-identity.netlify.app/corporate-design/vorlagen): Fertige Startpunkte, die schon nach Miragon aussehen: Markenfarben, Geist und das Key Visual sind eingebaut. Aufmachen, Inhalt rein, fertig. ## Sprache und Tonalität - [Tonalität & Stimme](https://corporate-identity.netlify.app/sprache/): Wie Miragon klingt. Diese Anleitung gilt überall, wo Miragon spricht: Slide, Post, Mail, Angebot, Gespräch, Webseite. Sie steht für sich. - [Über Miragon](https://corporate-identity.netlify.app/sprache/ueber-miragon): Fertige Textbausteine für alle Stellen, an denen Miragon sich kurz vorstellt: Signaturen, Profile, Partnerseiten, Vortragsankündigungen, Presse und Ausschreibungen. - [AI-Transparenz](https://corporate-identity.netlify.app/sprache/ai-transparenz): Miragon steht für radikale Transparenz. Das gilt auch, wenn AI im Spiel ist. Wir verstecken nicht, dass etwas von einer Maschine kommt, und wir lassen eine AI nie so tun, als wäre sie ein Mensch. ## Skills für Claude - [Skills](https://corporate-identity.netlify.app/skills/): Skills sind kleine, fokussierte Wissenspakete für Claude. Eine Skill beschreibt, wann sie relevant ist und wie Claude in dieser Situation arbeiten soll. - [Skill: brand-tone](https://corporate-identity.netlify.app/skills/brand-tone): Die Markenstimme von Miragon als Skill. Sie sorgt dafür, dass jeder Miragon-Text nach uns klingt: du-Ansprache, Klartext, unerschrocken, aber wohlwollend. - [Skill: corporate-design](https://corporate-identity.netlify.app/skills/corporate-design): Das visuelle Corporate Design von Miragon als Skill. Sie sorgt dafür, dass alles Sichtbare stimmt: exakte Farben, richtiges Logo, passende Schrift und Formate. - [Skill: brand-review](https://corporate-identity.netlify.app/skills/brand-review): Der Marken-Check. Diese Skill prüft, statt zu erstellen: Sie nimmt einen Text, ein Visual, einen Post oder ein UI-Snippet und sagt regelweise, ob es nach Miragon aussieht und klingt, mit konkreten Fix-Vorschlägen. - [Skill: agent-voice](https://corporate-identity.netlify.app/skills/agent-voice): Die Markenstimme fürs Gespräch. Wenn ein Bot im Namen von Miragon spricht, etwa auf der Website, in Miragon AI oder als interner Assistent, ist sein Ton eine Markenoberfläche wie das Logo. - [Skill: modeler-tool-design](https://corporate-identity.netlify.app/skills/modeler-tool-design): Das verbindliche UI/UX-Design-System für Software, die Miragon selbst baut. - [Skill: icon-design](https://corporate-identity.netlify.app/skills/icon-design): Die Skill für Icons bei Miragon. Sie wählt die passende Zeichenart (Komet, Modeler-Icon oder Lucide), baut Modeler-Icons unverändert in die Modeler ein und führt durch den Entwurf eines neuen Modeler-Icons. - [Skill: social-post](https://corporate-identity.netlify.app/skills/social-post): Von der Idee zum LinkedIn-Post. Die Skill hält Content-Ideen als Aufgabe in Notion fest, schreibt den Post im Miragon-Ton und baut die Kachel aus den Canva-Markenvorlagen. Veröffentlichen bleibt Sache von Menschen. ## Installation - [Marketplace für Claude](https://corporate-identity.netlify.app/marketplace/): Dieses Repository ist nicht nur Dokumentation. Es ist gleichzeitig ein Claude-Code-Plugin-Marketplace. - [Installation & Nutzung](https://corporate-identity.netlify.app/marketplace/installation): Die vollständige Anleitung, um den Miragon-Marketplace in Claude einzubinden, das Plugin zu installieren und die Skills zu nutzen. Funktioniert interaktiv (in einer Claude-Session) und über die CLI. - [Pflege & Versionen](https://corporate-identity.netlify.app/marketplace/pflege): Die CI ändert sich regelmäßig. Hier steht, wie Änderungen hineinkommen, wie eine neue Version entsteht und wie du sie bekommst.