Zum Inhalt springen

o-byte.com Brand Guide 2026

# Kommunikation, die im Alltag spürbar entlastet.

Dieser Styleguide übersetzt den Markenauftritt von o-byte.com in klare Regeln für Design, Sprache und Anwendung. Technisch stark, visuell fokussiert und konsequent serviceorientiert.

ITK-Systemhaus B2B Telefonie & Integration Gemeinsam erfolgreich
Farbsystem Tokens kopieren Logo SVG Favicon SVG
Primary #00A7E6
Akzent #F59C00
Background #F5FBFE
Slate #343537

Leitmotiv: Gemeinsam erfolgreich.

## Markenfundament

Positionierung und Kernbotschaft als inhaltlicher Rahmen für Website, Vertrieb, Support und Produktkommunikation.

### Positionierung

o-byte.com ist ein spezialisiertes ITK-Systemhaus für moderne Business- Kommunikation mit Fokus auf IP-basierte Telefonie, STARFACE und integrationsgetriebene Erweiterungen.

- Von Planung und Umsetzung bis Support aus einer Hand.
- Partnerorientiert mit konkretem Kundennutzen statt Buzzwords.
- Technisch tief, in der Kommunikation trotzdem verständlich.

### Markenversprechen

Wir liefern lösungsorientierte Telekommunikation, die im Tagesgeschäft messbar entlastet: bessere Erreichbarkeit, weniger Reibung, klare Prozesse.

"Gemeinsam erfolgreich" ist Leitmotiv, nicht Claim-Dekoration.

### Werte

Verlässlichkeit, Erreichbarkeit, Pragmatismus und Qualität.

### Zielgruppen

KMU, Kanzleien, Praxen, Industrie und Partner mit Integrationsbedarf.

### Markenton

Sachlich positiv, kompetent, auf Augenhöhe.

## Tonalität

Wie o-byte.com spricht: serviceorientiert, klar und lösungsfokussiert.

### Do

- Konkrete Ergebnisse und Nutzen zuerst benennen.
- Aktive Sprache und direkte Handlungsangebote verwenden.
- Technik erklären, ohne Überheblichkeit oder Jargon-Last.
- Partnerschaftlich formulieren: gemeinsam, wir, zusammen.

### Don't

- Leere Marketingphrasen ohne Substanz oder Beispiel.
- Unnötig komplizierte Fachterminologie in Standardtexten.
- Reißerische Versprechen ohne realistische Einordnung.
- Kühle Distanzsprache ohne Servicebezug.

### Textbausteine (Beispiele)

Kontext | Empfohlen | Vermeiden
--- | --- | ---
CTA | "IT-Systemhaus anfragen" | "Jetzt revolutionieren"
Support | "Wir kümmern uns direkt um Ihr Anliegen." | "Bitte Ticket abwarten."
Produkt | "Integration in DATEV und bestehende Prozesse." | "Disruptive End-to-End-Synergien."

## Logo und Favicon

Verbindliche Varianten für helle und dunkle Hintergründe.

### Logo-Varianten

Auf hellen Flächen: Light-Variante.

Auf dunklen Flächen: Dark oder White je nach Kontrast.

Logo Light Logo Dark Logo White

### Favicon-Varianten

Auf hellen Flächen: Light-Favicon.

Auf dunklen Flächen: Dark-Favicon.

Favicon Light Favicon Dark

### Sondervariante: Clean

Clean: ohne Kennzeichnung der registrierten Marke und ohne "Telekommunikation". Nur für technische Sonderfälle, wenn das reguläre Logo prozessbedingt nicht nutzbar ist, und ausschließlich nach Rücksprache mit der Marketingabteilung von o-byte.com.

Logo Clean Light Logo Clean Dark Logo Clean White

### Sondervariante: Web-App

Web-App: Kennzeichnung der Plattform innerhalb von Webanwendungen (z. B. Portal, OLM, Dashboard), um den aktuellen Produktkontext sichtbar zu machen.

Logo Web-App

### Schutzzone und Mindestgröße

- Schutzzone: mindestens 0.5x der Signethöhe rund um das Zeichen.
- Mindestbreite Logo digital: 140 px.
- Mindestgröße Favicon digital: 24 x 24 px, empfohlen ab 32 px.
- Nie auf unruhigen Hintergründen ohne Kontrastfläche platzieren.

### Unzulässige Nutzung

- Kein Verzerren, Kippen oder Rotieren.
- Keine freien Umfärbungen außer den definierten Varianten.
- Keine Schatten-, Glow- oder 3D-Effekte.
- Keine Transparenzreduktion, die die Lesbarkeit mindert.

## Farbsystem

o-byte Blue basiert auf festen Shades und Tints. Hauptfarbe, Hilfsfarbe und Hintergrund sind auf die definierte Blau-Skala abgestimmt.

Hauptfarbe: o-byte Blue #00A7E6
Hilfsfarbe: Blue Tint 1 #33B9EB
Hintergrund #F5FBFE
Akzentfarbe #F59C00
Slate #343537
White #FFFFFF

### 20% Shades von #00A7E6

### 20% Tints von #00A7E6

### Einsatzlogik

Shades nur für mehr Tiefe und Kontrast, Tints nur für leichte Flächen nutzen.

## Typografie

Fließ- und Sekundärüberschriften in Nunito, Primär-Akzente weiterhin in URW Gothic L Demi.

### Nunito live in der Anwendung

Einsatzbereich: H2-H4 + Fließtext

Stabiler Betrieb im Tagesgeschäft

Nunito ist die Standardschrift für längere Inhalte. Sie bleibt bei normaler Lesedistanz ruhig, gut scanbar und belastet die Augen auch in längeren Texten nicht.

Empfohlen: 17 px / 1.58 Zeilenhöhe / linksbündig

### URW Demi live in der Anwendung

Einsatzbereich: H1 + CTA + Primärakzent

Kommunikation, die entlastet.

URW Demi bewusst punktuell nutzen, nicht für lange Lesetexte.

### Direkter Schriftvergleich

Nunito (Body/H2-H4)

Kommunikation auf Augenhöhe. Klar, direkt, verlässlich.

Aa Bb Cc Dd Ee Ff Gg ÄÖÜ äöü ß 0123456789

URW Gothic L Demi (H1/CTA)

Kommunikation auf Augenhöhe. Klar, direkt, verlässlich.

Aa Bb Cc Dd Ee Ff Gg ÄÖÜ äöü ß 0123456789

### Typografische Skala

Element | Größe | Gewicht | Zeilenhöhe
--- | --- | --- | ---
H1 | 40-60 px (responsive) | 600 (URW Gothic L Demi) | 1.03
H2 | 30 px | 700 (Nunito) | 1.15
H3 | 21 px | 700 (Nunito) | 1.2
Body | 17 px | 400-700 (Nunito) | 1.58

### Verbindliche Satzregeln

- Fließtext standardmäßig 17 px in Nunito, niemals kleiner als 16 px.
- Lesetexte mit Zeilenhöhe 1.5 bis 1.65 setzen; Headlines enger führen (1.03 bis 1.2).
- Zeilenlänge für längere Texte zwischen 45 und 75 Zeichen halten.
- Text linksbündig, kein Blocksatz in Fließtexten.
- Versalien nur für kurze Labels/Kicker einsetzen, nicht für ganze Absätze.
- Fettungen sparsam nutzen: maximal ein Fokuspunkt pro Satz oder UI-Element.

### Hierarchie-Definition

- H1 ist der einzige visuelle Primäranker einer Seite und bleibt in URW Gothic L Demi.
- H2 strukturiert Hauptabschnitte in Nunito 700 und muss inhaltlich scanbar formuliert sein.
- H3 benennt konkrete Teilthemen, Komponenten oder Arbeitsschritte.
- Body trägt die Information: neutral, klar, ohne dekorative Effekte.
- Buttons und CTAs bleiben in URW Gothic L Demi, damit Handlungsaufforderungen sofort auffallen.
- In einer Card nie mehr als drei Hierarchieebenen kombinieren (z. B. H3, Body, Label).

### Do / Don't Beispiele

Kontext | Do | Don't
--- | --- | ---
Absatz | Kurze, klare Sätze mit 1-2 Kernaussagen pro Absatz. | Verschachtelte Satzkonstruktionen mit vielen Nebensätzen.
Headline | Nutzenorientiert und konkret, z. B. "Support in unter 2 Stunden". | Abstrakt oder werblich, z. B. "Kommunikation neu gedacht".
CTA | Verb + Ergebnis, z. B. "Angebot anfordern". | Unklare Labels wie "Mehr" oder "Weiter".
Hervorhebung | Wichtige Begriffe punktuell fett markieren. | Ganze Absätze dauerhaft fett setzen.

### Implementierungsbeispiele

Beispiel für saubere Text-Hierarchie mit den festgelegten Schriftrollen.

    <section>
      <h2>Service-Level und Erreichbarkeit</h2>
      <p>Unser Support reagiert werktags innerhalb von zwei Stunden.</p>
      <button class="btn btn--primary">Anfrage senden</button>
    </section>

Passende Token-Zuordnung in CSS.

    :root {
      --ob-font-body: "Nunito", "Segoe UI", Arial, sans-serif;
      --ob-font-heading: "Nunito", "Segoe UI", Arial, sans-serif;
      --ob-font-strong: "URW Gothic L Demi", "Nunito", "Segoe UI", Arial, sans-serif;
    }

    h1 { font-family: var(--ob-font-strong); }
    h2, h3, h4 { font-family: var(--ob-font-heading); }
    body { font-family: var(--ob-font-body); }

## Bildsprache

Abgeleitet aus dem Auftritt: Menschen, Teams, echte Situationen, klare Kontraste.

### Bildprinzipien

- Authentische Team- und Kundenszenen statt generischer Stock-Inszenierung.
- Fokus auf Beratung, Zusammenarbeit, Support und konkrete Arbeitssituationen.
- Helle, aufgeräumte Motive mit natürlicher Farbtemperatur.
- Personen klar erkennbar, freundliche aber professionelle Haltung.

### Nicht verwenden

- Überinszenierte Futuristik (neon, holografische Fake-Interfaces).
- Stark entsättigte oder dramatisch dunkle Bildlooks ohne Markenbezug.
- Beliebige Handschlag-Stockfotos ohne realen Kontext.
- Unruhige Hintergründe, die Textlesbarkeit reduzieren.

### Bildbearbeitung und Overlay

Nur dezente Korrekturen: Kontrast +5 bis +10, Sättigung maximal +6, kein harter Farbstich. Text auf Bildern immer mit Kontrastfläche (hell/dunkel) absichern.

## UI-Komponenten

Robuste Standardbausteine für Website, Landingpages und Kundenportal.

### Hero

Einstiegskomponente

Kommunikation, die im Alltag spürbar entlastet.

Der Hero transportiert Nutzen, Positionierung und klare Handlungsoptionen innerhalb der ersten Bildschirmansicht.

ITK-Systemhaus B2B Telefonie & Integration

Einsatz: immer als erste inhaltliche Komponente einer Seite, mit 1 Primär-CTA und maximal 1-2 Sekundäraktionen.

### Buttons

### Status

Standard Aktiv Priorität Verfügbar

### Kontaktformular

Firma E-Mail Nachricht

### Hinweis-Box

Service-Hinweis: Support-Anfragen immer mit Erreichbarkeit und kurzer Problembeschreibung einreichen.

Alerts werden sachlich formuliert, ohne Alarmismus.

### Card-Prinzip

Cards nutzen weiße Flächen, feine Linien und moderate Tiefe. Inhalte bleiben strukturiert, ohne visuelle Überladung. Keine dekorativen Verläufe in Content-Flächen.

## Accessibility und UX-Regeln

Verbindliche Mindeststandards für digitale Touchpoints.

### Kontrast und Lesbarkeit

- Textkontrast mindestens WCAG AA (4.5:1 bei normalem Text).
- Keine hellblauen Fließtexte auf weißem Hintergrund.
- Interaktive Elemente mit klarer Fokusmarkierung versehen.
- Alternativtexte für Grafiken und Bilder bereitstellen.

### Interaktion

- Klickflächen mindestens 40 x 40 px.
- Buttons eindeutig benennen (Verb + Nutzen).
- Navigation logisch und auf mobilen Geräten ohne Brüche.

### MUSS-Checkliste (Release-Gate)

- Jede Seite MUSS genau eine `h1`, eine sinnvolle Überschriften-Hierarchie und semantische Landmarks (`header`, `nav`, `main`, `footer`) haben.
- Jede Seite MUSS ein korrektes `lang`-Attribut und einen eindeutigen, aussagekräftigen `title` haben.
- Alle Funktionen MÜSSEN vollständig per Tastatur bedienbar sein (Tab, Shift+Tab, Enter, Space, Escape) und dürfen keine Keyboard-Falle erzeugen.
- Der Fokus MUSS immer sichtbar sein, logisch durch die Seite laufen und darf nie per CSS entfernt werden.
- Textkontrast MUSS mindestens 4.5:1 betragen; Kontrast von UI-Komponenten/Fokusindikatoren MUSS mindestens 3:1 betragen.
- Information darf NIE nur über Farbe vermittelt werden; es MUSS immer ein zweiter Hinweis vorhanden sein (Text, Icon, Muster oder Statuslabel).
- Interaktive Elemente MÜSSEN einen eindeutigen Accessible Name haben (keine Buttons/Links nur mit "Hier" oder nur Icon ohne Label).
- Klick- und Touch-Ziele MÜSSEN mindestens 44 x 44 px gross sein oder gleichwertig grossen Abstand besitzen.
- Formulare MÜSSEN programmatisch verknüpfte Labels besitzen; Pflichtfelder, Fehler und Hilfetexte MÜSSEN für Screenreader auslesbar sein.
- Fehlermeldungen MÜSSEN konkret sagen, was falsch ist und wie es zu korrigieren ist; der Fokus MUSS nach Submit zur Fehlerzusammenfassung springen.
- Statusänderungen (z. B. "gespeichert", "geladen", "Fehler") MÜSSEN per `aria-live` oder gleichwertig angekündigt werden.
- Bilder mit Informationswert MÜSSEN sinnvolle Alt-Texte haben; rein dekorative Bilder MÜSSEN als dekorativ markiert sein.
- Video mit Sprache MUSS Untertitel haben; reine Audioinhalte MÜSSEN ein Transkript haben; Autoplay mit Ton ist nicht zulässig.
- Inhalte MÜSSEN bei 200 % Zoom und bei 320 CSS-Pixel Breite ohne horizontalen Pflicht-Scroll funktionieren (ausser technisch notwendige Ausnahmen wie Datentabellen).
- Animationen/Bewegungen MÜSSEN reduzierbar sein (`prefers-reduced-motion`); Inhalte dürfen nicht mehr als 3-mal pro Sekunde blinken.
- Authentifizierung darf keine unzumutbare kognitive Hürde erzeugen; es MUSS eine barrierefreie Alternative zu rein visuellen Aufgaben geben.
- Release-Freigabe nur, wenn Kernpfade bestanden sind: Navigation, Suche, Login, Formulare, Checkout, Zahlung und Fehlerszenarien.

Definition of Done: Kein Release ohne bestandenen Keyboard-Test, Screenreader-Schnelltest und dokumentierte Behebung aller kritischen A11y-Defekte.

## Design Tokens

Copy-ready Basis für Webprojekte und UI-Implementierung.

### CSS Tokens

    :root {
      --ob-color-primary: #00A7E6;
      --ob-color-primary-soft: #33B9EB;
      --ob-color-primary-shade-1: #0086B8;
      --ob-color-primary-shade-2: #00648A;
      --ob-color-primary-shade-3: #00435C;
      --ob-color-primary-shade-4: #00212E;
      --ob-color-primary-tint-1: #33B9EB;
      --ob-color-primary-tint-2: #66CAF0;
      --ob-color-primary-tint-3: #99DCF5;
      --ob-color-primary-tint-4: #CCEDFA;
      --ob-color-accent: #F59C00;
      --ob-color-dark: #343537;
      --ob-color-slate: #343537;
      --ob-color-bg: #F5FBFE;
      --ob-color-surface: #FFFFFF;

      --ob-font-body: "Nunito", "Segoe UI", Arial, sans-serif;
      --ob-font-heading: "Nunito", "Segoe UI", Arial, sans-serif;
      --ob-font-strong: "URW Gothic L Demi", "Nunito", "Segoe UI", Arial, sans-serif;

      --ob-radius-sm: 10px;
      --ob-radius-md: 14px;
      --ob-radius-lg: 20px;

      --ob-space-2: 8px;
      --ob-space-3: 12px;
      --ob-space-4: 16px;
      --ob-space-6: 24px;
      --ob-space-8: 32px;
    }

### JSON Tokens

    {
      "color": {
        "primary": "#00A7E6",
        "primarySoft": "#33B9EB",
        "primaryShades": ["#0086B8", "#00648A", "#00435C", "#00212E"],
        "primaryTints": ["#33B9EB", "#66CAF0", "#99DCF5", "#CCEDFA"],
        "accent": "#F59C00",
        "dark": "#343537",
        "slate": "#343537",
        "background": "#F5FBFE",
        "surface": "#FFFFFF"
      },
      "font": {
        "body": "Nunito",
        "heading": "Nunito",
        "strong": "URW Gothic L Demi"
      },
      "radius": {
        "sm": "10px",
        "md": "14px",
        "lg": "20px"
      }
    }