reales-ci-system

name: reales-ci-system description: Reales GmbH Corporate Identity & Design System. Use this skill whenever creating documentation, correspondence, letters, branding materials, or any content that should follow Reales' visual identity. Triggers for doc generation, letter writing, Markdown documentation with brand styling, letterhead design, email templates, or any task mentioning Reales branding, CI standards, design guidelines, or professional documentation. The skill covers color palette (#3d4717 primary, #747d4b secondary), logo integration, typography, Markdown-to-HTML conversion with branding, LibreOffice letter templates, and HTML/CSS frameworks for documents.

Reales GmbH Corporate Identity & Design System

Dieses Skill unterstützt alle Aspekte der Corporate Identity und Dokumentation der Reales GmbH. Es bietet konsistente Richtlinien für professionelle Kommunikation, Dokumentationen und Korrespondenz.

Schnelleinstieg

1. Für Dokumentationen in Markdown

• Schreibe deine Dokumentation in Markdown
• Verwende die HTML/CSS-Vorlage aus templates/markdown/branded-doc.html
• Farben werden automatisch als CSS-Variablen injiziert

2. Für Briefe & Korrespondenz

• Nutze die LibreOffice-Vorlage: templates/letters/reales-letter-template.odt
• Alternativ: HTML-Brief-Template für direkten Druck
• Briefkopf mit Logo und Kontaktdaten ist vorgestaltet

3. Für allgemeine Dokumentationen

• Verwende die Word-kompatible .dotx-Vorlage als Basis
• Konvertiere zu Open Source Formaten (LibreOffice, Markdown + HTML)

Farb-Palette

Anwendungsregeln

• Primärfarbe für dominante Elemente und Headlines
• Sekundärfarbe für Akzente und Untergliederungen
• Kontrast-Verhältnis beachten (min. WCAG AA)
• Grauwerte für Bodytexte zur Lesbarkeit

Logo

Reales Logo: assets/Logo_Reales.png

Logo-Verwendung

• Mindestgröße: 100px Breite (für Bildschirm), 20mm (für Print)
• Schutzraum: Mindestens 10px um das Logo lassen
• Auf Primärfarbe: Verwende invertiertes Logo (falls vorhanden)
• Auf Sekundärfarbe: Original-Logo funktioniert gut
• Keine Farbveränderungen – nutze das Logo als gegeben

Dokumentationen (Markdown + HTML/CSS)

Workflow

1. Dokumentation in Markdown schreiben

   # Dokumenttitel
   
   ## Abschnitt
   Hier dein Inhalt mit *Markdown-Formatierung*.
   

2. HTML-Vorlage ausfüllen (templates/markdown/branded-doc.html)

   • Markdown als HTML konvertieren (zB mit Pandoc)
   • In die <main> Section einfügen
   • CSS-Variablen sind bereits gesetzt: --primary: #3d4717, --secondary: #747d4b

3. Drucken oder Digital teilen

   • PDF-Export aus Browser
   • Oder direkt als HTML zum Hosting

Markdown Konventionen für Reales

Headers

• # Titel → Primärfarbe, größer, seriös
• ## Abschnitt → Sekundärfarbe
• ### Unter-Abschnitt → Grau

Hervorhebung

• **Fett** → Für Konzepte, Definitionen
• *Kursiv* → Für Betonungen
• ~~Durchgestrichen~~ → Nur sparsam

Strukturen

• Nummerierte Listen für Prozesse
• Bullet-Points für Eigenschaften
• Blockquotes für Zitate/Hinweise

Code-Blöcke

```json
{ "key": "value" }

**Tabellen**
```markdown
| Header 1 | Header 2 |
|----------|----------|
| Zelle    | Zelle    |

HTML/CSS Branding Framework

Siehe templates/markdown/branded-doc.html für vollständiges Template.

CSS-Variablen (vordefiniert):

--primary: #3d4717;
--secondary: #747d4b;
--text: #555555;
--light-bg: #f5f5f5;
--white: #ffffff;

Beispiel: Styled Box

<div class="info-box">
  <strong>Hinweis:</strong> Text hier
</div>

CSS dafür:

.info-box {
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  background: var(--light-bg);
  margin: 16px 0;
}

Briefe & Korrespondenz

LibreOffice-Template

Datei: templates/letters/reales-letter-template.odt

Vorlage enthält:

• Logo oben links
• Adressblock rechts (anpassbar)
• Kontaktinfo in Fußzeile (Telefon, Email, Web)
• Brieftext-Bereich mit Absatz-Styles
• Unterschriftszeile

Verwendung:

1. Template in LibreOffice Writer öffnen
2. Empfänger-Adresse in der Kopfzeile aktualisieren
3. Betreff und Inhalt anpassen
4. Als ODF oder PDF exportieren

HTML Letter Template

Für schnelle HTML-Briefe: templates/letters/reales-letter.html

Features:

• Print-optimiert (CSS Media Queries)
• DIN A4 Seitengröße
• Responsive für Bildschirm

Beispiel:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="reales-letter.css">
</head>
<body>
  <div class="letter">
    <div class="letterhead">
      <!-- Logo und Adresse -->
    </div>
    <div class="content">
      <!-- Brief-Inhalt -->
    </div>
  </div>
</body>
</html>

Microsoft Word Vorlage (Legacy)

Die Datei 20210729_Standard_Serienbrief.dotx ist verfügbar, wird aber zugunsten von LibreOffice/HTML-Lösungen veraltet.

Empfehlung: Schrittweise zu LibreOffice migrieren für bessere Open Source Unterstützung.

Open Source Tools & Richtlinien

Empfohlene Tools

Konvertierungs-Befehle

Markdown zu HTML (mit Styling):

pandoc -f markdown -t html -c branded-doc.css input.md > output.html

Markdown zu PDF:

pandoc input.md -o output.pdf --css=branded-doc.css

DOCX zu Markdown (für Migration):

pandoc input.docx -f docx -t markdown -o output.md

LibreOffice ODT zu PDF:

libreoffice --headless --convert-to pdf input.odt

Email-Signatur

HTML Email Signature Template

<div style="font-family: Arial, sans-serif; font-size: 13px; color: #555555;">
  <p style="margin: 0; font-weight: bold; color: #3d4717;">
    Dein Name<br>
    <span style="font-weight: normal; font-size: 11px;">Deine Position</span>
  </p>
  <p style="margin: 8px 0 0 0; font-size: 11px; border-top: 2px solid #747d4b; padding-top: 8px;">
    Reales GmbH<br>
    Bachgässchen 6<br>
    CH-4125 Riehen<br>
    <br>
    T +41 61 641 90 90<br>
    F +41 61 641 90 91<br>
    <a href="mailto:welcome@reales.ch" style="color: #3d4717; text-decoration: none;">welcome@reales.ch</a><br>
    <a href="http://www.reales.ch" style="color: #3d4717; text-decoration: none;">www.reales.ch</a>
  </p>
</div>

Prozess: Neue Dokumentation erstellen

Schritt für Schritt

1. Inhalte in Markdown schreiben

   • Clean, strukturiert, focus auf Inhalt
   • Nutze Markdown-Konventionen aus diesem Skill

2. Wähle dein Ausgabe-Format:

   • Digital (Web/Email): HTML mit CSS Branding
   • Druck: PDF (via Pandoc oder Browser-Print)
   • Legacy Office: DOCX (falls nötig)

3. Styling anwenden

   • Nutze branded-doc.css mit Reales-Farben
   • Beachte Logo-Platzierung und Kontrast
   • Teste auf mehreren Screens/Druckern

4. QA & Export

   • Überprüfe Farben & Logo-Platzierung
   • Teste Links & Formatierung
   • Exportiere als PDF oder veröffentliche als HTML

Häufig gestellte Fragen

Kann ich andere Farben verwenden?

Nein, nur die definierten zwei Grün-Töne + Weiß/Grau. Konsistenz ist zentral.

Müssen Dokumente immer das Logo haben?

Nur bei external-facing Dokumenten (Briefe, Marketing, Reports). Intern optional.

Welches Format für Archivierung?

PDF für Langzeit-Archivierung. Markdown + HTML für versionierbare Dokumentationen.

Kann ich Microsoft Word verwenden?

Bedingt – die .dotx Vorlage ist verfügbar, aber LibreOffice wird empfohlen (Open Source, bessere Markdown-Integration).

Wie stelle ich Markdown-Dokumente online?

Generiere HTML mit Pandoc, hoste auf deiner Website, oder nutze ein Markdown-Hosting (zB GitHub Pages).

Asset-Verzeichnis

reales-ci-skill/
├── assets/
│   ├── Logo_Reales.png
│   └── logo-colors.json (Referenz)
├── templates/
│   ├── markdown/
│   │   ├── branded-doc.html
│   │   └── branded-doc.css
│   └── letters/
│       ├── reales-letter-template.odt
│       └── reales-letter.html
├── references/
│   ├── color-palette.md
│   └── open-source-tools.md
└── SKILL.md (diese Datei)

Kontakt & Support

Fragen zu CI/CD oder diesem Skill?

• Reales GmbH
• Bachgässchen 6, CH-4125 Riehen
• T +41 61 641 90 90
• welcome@reales.ch
• www.reales.ch

Version: 1.0
Zuletzt aktualisiert: 2026
Fokus: Open Source, Markdown-first, professionelles Branding