MD Umbau
This commit is contained in:
Sven Steinert
886
styleguide/index.html
Normal file
886
styleguide/index.html
Normal file
@@ -0,0 +1,886 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Styleguide für die Marke o-byte.com mit Regeln für Logo, Farben, Typografie, Tonalität, Bildsprache und UI-Komponenten."
|
||||
/>
|
||||
<title>o-byte.com - Styleguide</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#content">Zum Inhalt springen</a>
|
||||
<div class="app">
|
||||
<aside class="sidenav" aria-label="Navigation">
|
||||
<div class="sidenav__top">
|
||||
<a class="brand" href="#intro" aria-label="o-byte.com Styleguide">
|
||||
<img class="brand__logo" src="./assets/img/o-byte_Logo_2024_White.svg" alt="o-byte.com" />
|
||||
</a>
|
||||
<div class="sidenav__controls">
|
||||
<button
|
||||
class="btn btn--ghost btn--tiny"
|
||||
id="themeToggle"
|
||||
type="button"
|
||||
aria-pressed="false"
|
||||
aria-label="Farbmodus umschalten"
|
||||
>
|
||||
Dunkel
|
||||
</button>
|
||||
<button
|
||||
class="btn btn--ghost btn--tiny sidenav__toggle"
|
||||
id="navToggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="navLinks"
|
||||
>
|
||||
Menü
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidenav__nav" id="navLinks">
|
||||
<a class="navlink" href="#intro">Intro</a>
|
||||
<a class="navlink" href="#foundation">Marke</a>
|
||||
<a class="navlink" href="#tone">Tonalität</a>
|
||||
<a class="navlink" href="#logo">Logo</a>
|
||||
<a class="navlink" href="#colors">Farben</a>
|
||||
<a class="navlink" href="#typography">Typografie</a>
|
||||
<a class="navlink" href="#imagery">Bildsprache</a>
|
||||
<a class="navlink" href="#components">Komponenten</a>
|
||||
<a class="navlink" href="#accessibility">Accessibility</a>
|
||||
<a class="navlink" href="#tokens">Tokens</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="main" id="content">
|
||||
<header class="hero section" id="intro">
|
||||
<div class="hero__card">
|
||||
<div class="hero__grid">
|
||||
<div class="hero__main">
|
||||
<p class="kicker">o-byte.com Brand Guide 2026</p>
|
||||
<h1>Kommunikation, die im Alltag spürbar entlastet.</h1>
|
||||
<p class="lead">
|
||||
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.
|
||||
</p>
|
||||
<div class="cluster">
|
||||
<span class="pill pill--brand">ITK-Systemhaus</span>
|
||||
<span class="pill">B2B</span>
|
||||
<span class="pill">Telefonie & Integration</span>
|
||||
<span class="pill">Gemeinsam erfolgreich</span>
|
||||
</div>
|
||||
<div class="row row--wrap hero__actions">
|
||||
<a class="btn btn--primary" href="#colors">Farbsystem</a>
|
||||
<a class="btn btn--light" href="#tokens">Tokens kopieren</a>
|
||||
<a class="btn btn--light" href="./assets/img/o-byte_Logo_2024_Light.svg" download>Logo SVG</a>
|
||||
<a class="btn btn--light" href="./assets/img/o-Byte%20Favicon_Light.svg" download>Favicon SVG</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero__signal" aria-label="Brand Snapshot">
|
||||
<div class="hero__logo-stage">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Dark.svg" alt="o-byte.com Logo Dark" />
|
||||
</div>
|
||||
<div class="hero__metrics">
|
||||
<div class="hero__metric">
|
||||
<span class="hero__metric-chip" style="background:#00A7E6"></span>
|
||||
<span class="hero__metric-label">Primary</span>
|
||||
<strong>#00A7E6</strong>
|
||||
</div>
|
||||
<div class="hero__metric">
|
||||
<span class="hero__metric-chip" style="background:#F59C00"></span>
|
||||
<span class="hero__metric-label">Akzent</span>
|
||||
<strong>#F59C00</strong>
|
||||
</div>
|
||||
<div class="hero__metric">
|
||||
<span class="hero__metric-chip" style="background:#F5FBFE"></span>
|
||||
<span class="hero__metric-label">Background</span>
|
||||
<strong>#F5FBFE</strong>
|
||||
</div>
|
||||
<div class="hero__metric">
|
||||
<span class="hero__metric-chip" style="background:#343537"></span>
|
||||
<span class="hero__metric-label">Slate</span>
|
||||
<strong>#343537</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hero__tagline">
|
||||
Leitmotiv: <strong>Gemeinsam erfolgreich</strong>.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section" id="foundation">
|
||||
<div class="section__head">
|
||||
<h2>Markenfundament</h2>
|
||||
<p class="muted">
|
||||
Positionierung und Kernbotschaft als inhaltlicher Rahmen für Website, Vertrieb,
|
||||
Support und Produktkommunikation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Positionierung</h3>
|
||||
<p>
|
||||
o-byte.com ist ein spezialisiertes ITK-Systemhaus für moderne Business-
|
||||
Kommunikation mit Fokus auf IP-basierte Telefonie, STARFACE und
|
||||
integrationsgetriebene Erweiterungen.
|
||||
</p>
|
||||
<ul class="bullets">
|
||||
<li>Von Planung und Umsetzung bis Support aus einer Hand.</li>
|
||||
<li>Partnerorientiert mit konkretem Kundennutzen statt Buzzwords.</li>
|
||||
<li>Technisch tief, in der Kommunikation trotzdem verständlich.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Markenversprechen</h3>
|
||||
<p>
|
||||
Wir liefern lösungsorientierte Telekommunikation, die im Tagesgeschäft messbar
|
||||
entlastet: bessere Erreichbarkeit, weniger Reibung, klare Prozesse.
|
||||
</p>
|
||||
<div class="quote">
|
||||
<p class="quote__text">"Gemeinsam erfolgreich" ist Leitmotiv, nicht Claim-Dekoration.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="grid grid--3">
|
||||
<article class="card metric">
|
||||
<h3>Werte</h3>
|
||||
<p>Verlässlichkeit, Erreichbarkeit, Pragmatismus und Qualität.</p>
|
||||
</article>
|
||||
<article class="card metric">
|
||||
<h3>Zielgruppen</h3>
|
||||
<p>KMU, Kanzleien, Praxen, Industrie und Partner mit Integrationsbedarf.</p>
|
||||
</article>
|
||||
<article class="card metric">
|
||||
<h3>Markenton</h3>
|
||||
<p>Sachlich positiv, kompetent, auf Augenhöhe.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="tone">
|
||||
<div class="section__head">
|
||||
<h2>Tonalität</h2>
|
||||
<p class="muted">Wie o-byte.com spricht: serviceorientiert, klar und lösungsfokussiert.</p>
|
||||
</div>
|
||||
<div class="grid grid--2 voice-grid">
|
||||
<article class="card">
|
||||
<h3>Do</h3>
|
||||
<ul class="bullets">
|
||||
<li>Konkrete Ergebnisse und Nutzen zuerst benennen.</li>
|
||||
<li>Aktive Sprache und direkte Handlungsangebote verwenden.</li>
|
||||
<li>Technik erklären, ohne Überheblichkeit oder Jargon-Last.</li>
|
||||
<li>Partnerschaftlich formulieren: gemeinsam, wir, zusammen.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Don't</h3>
|
||||
<ul class="bullets">
|
||||
<li>Leere Marketingphrasen ohne Substanz oder Beispiel.</li>
|
||||
<li>Unnötig komplizierte Fachterminologie in Standardtexten.</li>
|
||||
<li>Reißerische Versprechen ohne realistische Einordnung.</li>
|
||||
<li>Kühle Distanzsprache ohne Servicebezug.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Textbausteine (Beispiele)</h3>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kontext</th>
|
||||
<th>Empfohlen</th>
|
||||
<th>Vermeiden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CTA</td>
|
||||
<td>"IT-Systemhaus anfragen"</td>
|
||||
<td>"Jetzt revolutionieren"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Support</td>
|
||||
<td>"Wir kümmern uns direkt um Ihr Anliegen."</td>
|
||||
<td>"Bitte Ticket abwarten."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Produkt</td>
|
||||
<td>"Integration in DATEV und bestehende Prozesse."</td>
|
||||
<td>"Disruptive End-to-End-Synergien."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="logo">
|
||||
<div class="section__head">
|
||||
<h2>Logo und Favicon</h2>
|
||||
<p class="muted">Verbindliche Varianten für helle und dunkle Hintergründe.</p>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Logo-Varianten</h3>
|
||||
<div class="logo-grid">
|
||||
<div class="logo-stage logo-stage--light">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Light.svg" alt="o-byte.com Logo light" />
|
||||
</div>
|
||||
<p class="muted small">Auf hellen Flächen: Light-Variante.</p>
|
||||
<div class="logo-stage logo-stage--dark">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Dark.svg" alt="o-byte.com Logo dark" />
|
||||
</div>
|
||||
<div class="logo-stage logo-stage--dark">
|
||||
<img src="./assets/img/o-byte_Logo_2024_White.svg" alt="o-byte.com Logo white" />
|
||||
</div>
|
||||
<p class="muted small">Auf dunklen Flächen: Dark oder White je nach Kontrast.</p>
|
||||
</div>
|
||||
<div class="row row--wrap asset-actions">
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_Light.svg" download>Logo Light</a>
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_Dark.svg" download>Logo Dark</a>
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_White.svg" download>Logo White</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Favicon-Varianten</h3>
|
||||
<div class="logo-grid">
|
||||
<div class="logo-stage logo-stage--light logo-stage--icon">
|
||||
<img src="./assets/img/o-Byte%20Favicon_Light.svg" alt="o-byte.com Favicon light" />
|
||||
</div>
|
||||
<p class="muted small">Auf hellen Flächen: Light-Favicon.</p>
|
||||
<div class="logo-stage logo-stage--dark logo-stage--icon">
|
||||
<img src="./assets/img/o-Byte%20Favicon_Dark.svg" alt="o-byte.com Favicon dark" />
|
||||
</div>
|
||||
<p class="muted small">Auf dunklen Flächen: Dark-Favicon.</p>
|
||||
</div>
|
||||
<div class="row row--wrap asset-actions">
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-Byte%20Favicon_Light.svg" download>Favicon Light</a>
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-Byte%20Favicon_Dark.svg" download>Favicon Dark</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Sondervariante: Clean</h3>
|
||||
<div class="logo-grid">
|
||||
<div class="logo-stage logo-stage--light">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Light_clean.svg" alt="o-byte.com Logo light clean" />
|
||||
</div>
|
||||
<div class="logo-stage logo-stage--dark">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Dark_clean.svg" alt="o-byte.com Logo dark clean" />
|
||||
</div>
|
||||
<div class="logo-stage logo-stage--dark">
|
||||
<img src="./assets/img/o-byte_Logo_2024_White_clean.svg" alt="o-byte.com Logo white clean" />
|
||||
</div>
|
||||
<p class="muted small">
|
||||
<strong>Clean:</strong> 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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row row--wrap asset-actions">
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_Light_clean.svg" download>Logo Clean Light</a>
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_Dark_clean.svg" download>Logo Clean Dark</a>
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_White_clean.svg" download>Logo Clean White</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Sondervariante: Web-App</h3>
|
||||
<div class="logo-grid">
|
||||
<div class="logo-stage logo-stage--light">
|
||||
<img src="./assets/img/o-byte_Logo_2024_Light_web_app.svg" alt="o-byte.com Logo light web app" />
|
||||
</div>
|
||||
<p class="muted small">
|
||||
<strong>Web-App:</strong> Kennzeichnung der Plattform innerhalb von Webanwendungen
|
||||
(z. B. Portal, OLM, Dashboard), um den aktuellen Produktkontext sichtbar zu machen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row row--wrap asset-actions">
|
||||
<a class="btn btn--light btn--sm" href="./assets/img/o-byte_Logo_2024_Light_web_app.svg" download>Logo Web-App</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<div class="grid grid--2 logo-rules">
|
||||
<article class="card">
|
||||
<h3>Schutzzone und Mindestgröße</h3>
|
||||
<ul class="bullets">
|
||||
<li>Schutzzone: mindestens 0.5x der Signethöhe rund um das Zeichen.</li>
|
||||
<li>Mindestbreite Logo digital: 140 px.</li>
|
||||
<li>Mindestgröße Favicon digital: 24 x 24 px, empfohlen ab 32 px.</li>
|
||||
<li>Nie auf unruhigen Hintergründen ohne Kontrastfläche platzieren.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Unzulässige Nutzung</h3>
|
||||
<ul class="bullets">
|
||||
<li>Kein Verzerren, Kippen oder Rotieren.</li>
|
||||
<li>Keine freien Umfärbungen außer den definierten Varianten.</li>
|
||||
<li>Keine Schatten-, Glow- oder 3D-Effekte.</li>
|
||||
<li>Keine Transparenzreduktion, die die Lesbarkeit mindert.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section__head">
|
||||
<h2>Farbsystem</h2>
|
||||
<p class="muted">
|
||||
o-byte Blue basiert auf festen Shades und Tints. Hauptfarbe, Hilfsfarbe und
|
||||
Hintergrund sind auf die definierte Blau-Skala abgestimmt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid--3">
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#00A7E6"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>Hauptfarbe: o-byte Blue</strong>
|
||||
<span>#00A7E6</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#00A7E6">HEX kopieren</button>
|
||||
</article>
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#33B9EB"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>Hilfsfarbe: Blue Tint 1</strong>
|
||||
<span>#33B9EB</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#33B9EB">HEX kopieren</button>
|
||||
</article>
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#F5FBFE"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>Hintergrund</strong>
|
||||
<span>#F5FBFE</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#F5FBFE">HEX kopieren</button>
|
||||
</article>
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#F59C00"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>Akzentfarbe</strong>
|
||||
<span>#F59C00</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#F59C00">HEX kopieren</button>
|
||||
</article>
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#343537"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>Slate</strong>
|
||||
<span>#343537</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#343537">HEX kopieren</button>
|
||||
</article>
|
||||
<article class="card swatch">
|
||||
<div class="swatch__chip" style="background:#FFFFFF"></div>
|
||||
<div class="swatch__meta">
|
||||
<strong>White</strong>
|
||||
<span>#FFFFFF</span>
|
||||
</div>
|
||||
<button class="btn btn--light btn--sm" data-copy-value="#FFFFFF">HEX kopieren</button>
|
||||
</article>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>20% Shades von #00A7E6</h3>
|
||||
<div class="tone-swatches">
|
||||
<button class="tone-swatch" type="button" data-copy-value="#0086B8" aria-label="HEX kopieren #0086B8">
|
||||
<span class="tone-swatch__chip" style="background:#0086B8"></span>
|
||||
<span class="tone-swatch__value">#0086B8</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#00648A" aria-label="HEX kopieren #00648A">
|
||||
<span class="tone-swatch__chip" style="background:#00648A"></span>
|
||||
<span class="tone-swatch__value">#00648A</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#00435C" aria-label="HEX kopieren #00435C">
|
||||
<span class="tone-swatch__chip" style="background:#00435C"></span>
|
||||
<span class="tone-swatch__value">#00435C</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#00212E" aria-label="HEX kopieren #00212E">
|
||||
<span class="tone-swatch__chip" style="background:#00212E"></span>
|
||||
<span class="tone-swatch__value">#00212E</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>20% Tints von #00A7E6</h3>
|
||||
<div class="tone-swatches">
|
||||
<button class="tone-swatch" type="button" data-copy-value="#33B9EB" aria-label="HEX kopieren #33B9EB">
|
||||
<span class="tone-swatch__chip" style="background:#33B9EB"></span>
|
||||
<span class="tone-swatch__value">#33B9EB</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#66CAF0" aria-label="HEX kopieren #66CAF0">
|
||||
<span class="tone-swatch__chip" style="background:#66CAF0"></span>
|
||||
<span class="tone-swatch__value">#66CAF0</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#99DCF5" aria-label="HEX kopieren #99DCF5">
|
||||
<span class="tone-swatch__chip" style="background:#99DCF5"></span>
|
||||
<span class="tone-swatch__value">#99DCF5</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#CCEDFA" aria-label="HEX kopieren #CCEDFA">
|
||||
<span class="tone-swatch__chip" style="background:#CCEDFA"></span>
|
||||
<span class="tone-swatch__value">#CCEDFA</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card color-usage">
|
||||
<h3>Einsatzlogik</h3>
|
||||
<div class="tone-swatches" aria-label="Einsatzlogik Farbswatches">
|
||||
<button class="tone-swatch" type="button" data-copy-value="#00A7E6" aria-label="HEX kopieren #00A7E6">
|
||||
<span class="tone-swatch__chip" style="background:#00A7E6"></span>
|
||||
<span class="tone-swatch__value">#00A7E6</span>
|
||||
<span>Hauptfarbe: aktive Buttons, Links und Markenflächen</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#33B9EB" aria-label="HEX kopieren #33B9EB">
|
||||
<span class="tone-swatch__chip" style="background:#33B9EB"></span>
|
||||
<span class="tone-swatch__value">#33B9EB</span>
|
||||
<span>Hilfsfarbe: sekundäre Highlights und unterstützende Flächen</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#F5FBFE" aria-label="HEX kopieren #F5FBFE">
|
||||
<span class="tone-swatch__chip" style="background:#F5FBFE"></span>
|
||||
<span class="tone-swatch__value">#F5FBFE</span>
|
||||
<span>Hintergrund: ruhige, lesbare Content-Bereiche</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#F59C00" aria-label="HEX kopieren #F59C00">
|
||||
<span class="tone-swatch__chip" style="background:#F59C00"></span>
|
||||
<span class="tone-swatch__value">#F59C00</span>
|
||||
<span>Akzent: gezielte visuelle Priorisierung</span>
|
||||
</button>
|
||||
<button class="tone-swatch" type="button" data-copy-value="#343537" aria-label="HEX kopieren #343537">
|
||||
<span class="tone-swatch__chip" style="background:#343537"></span>
|
||||
<span class="tone-swatch__value">#343537</span>
|
||||
<span>Slate: Headlines, Navigation und starke Kontraste</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="muted small">Shades nur für mehr Tiefe und Kontrast, Tints nur für leichte Flächen nutzen.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section__head">
|
||||
<h2>Typografie</h2>
|
||||
<p class="muted">Fließ- und Sekundärüberschriften in Nunito, Primär-Akzente weiterhin in URW Gothic L Demi.</p>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Nunito live in der Anwendung</h3>
|
||||
<div class="type-sample">
|
||||
<p class="type-kicker">Einsatzbereich: H2-H4 + Fließtext</p>
|
||||
<p class="type-h2-demo">Stabiler Betrieb im Tagesgeschäft</p>
|
||||
<p class="type-body-demo">
|
||||
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.
|
||||
</p>
|
||||
<p class="type-meta">Empfohlen: 17 px / 1.58 Zeilenhöhe / linksbündig</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>URW Demi live in der Anwendung</h3>
|
||||
<div class="type-sample">
|
||||
<p class="type-kicker">Einsatzbereich: H1 + CTA + Primärakzent</p>
|
||||
<p class="type-h1-demo">Kommunikation, die entlastet.</p>
|
||||
<div class="row row--wrap">
|
||||
<button class="btn btn--primary" type="button">Beratung anfragen</button>
|
||||
<button class="btn btn--light" type="button">Mehr erfahren</button>
|
||||
</div>
|
||||
<p class="type-meta">URW Demi bewusst punktuell nutzen, nicht für lange Lesetexte.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Direkter Schriftvergleich</h3>
|
||||
<div class="grid grid--2 type-compare">
|
||||
<div class="type-sample">
|
||||
<p class="type-kicker">Nunito (Body/H2-H4)</p>
|
||||
<p class="type-compare-line type-compare-line--body">Kommunikation auf Augenhöhe. Klar, direkt, verlässlich.</p>
|
||||
<p class="type-glyph-line type-glyph-line--body">Aa Bb Cc Dd Ee Ff Gg ÄÖÜ äöü ß 0123456789</p>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<p class="type-kicker">URW Gothic L Demi (H1/CTA)</p>
|
||||
<p class="type-compare-line type-compare-line--strong">Kommunikation auf Augenhöhe. Klar, direkt, verlässlich.</p>
|
||||
<p class="type-glyph-line type-glyph-line--strong">Aa Bb Cc Dd Ee Ff Gg ÄÖÜ äöü ß 0123456789</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Typografische Skala</h3>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Größe</th>
|
||||
<th>Gewicht</th>
|
||||
<th>Zeilenhöhe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>H1</td>
|
||||
<td>40-60 px (responsive)</td>
|
||||
<td>600 (URW Gothic L Demi)</td>
|
||||
<td>1.03</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H2</td>
|
||||
<td>30 px</td>
|
||||
<td>700 (Nunito)</td>
|
||||
<td>1.15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H3</td>
|
||||
<td>21 px</td>
|
||||
<td>700 (Nunito)</td>
|
||||
<td>1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Body</td>
|
||||
<td>17 px</td>
|
||||
<td>400-700 (Nunito)</td>
|
||||
<td>1.58</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Verbindliche Satzregeln</h3>
|
||||
<ul class="bullets">
|
||||
<li>Fließtext standardmäßig 17 px in Nunito, niemals kleiner als 16 px.</li>
|
||||
<li>Lesetexte mit Zeilenhöhe 1.5 bis 1.65 setzen; Headlines enger führen (1.03 bis 1.2).</li>
|
||||
<li>Zeilenlänge für längere Texte zwischen 45 und 75 Zeichen halten.</li>
|
||||
<li>Text linksbündig, kein Blocksatz in Fließtexten.</li>
|
||||
<li>Versalien nur für kurze Labels/Kicker einsetzen, nicht für ganze Absätze.</li>
|
||||
<li>Fettungen sparsam nutzen: maximal ein Fokuspunkt pro Satz oder UI-Element.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Hierarchie-Definition</h3>
|
||||
<ul class="bullets">
|
||||
<li>H1 ist der einzige visuelle Primäranker einer Seite und bleibt in URW Gothic L Demi.</li>
|
||||
<li>H2 strukturiert Hauptabschnitte in Nunito 700 und muss inhaltlich scanbar formuliert sein.</li>
|
||||
<li>H3 benennt konkrete Teilthemen, Komponenten oder Arbeitsschritte.</li>
|
||||
<li>Body trägt die Information: neutral, klar, ohne dekorative Effekte.</li>
|
||||
<li>Buttons und CTAs bleiben in URW Gothic L Demi, damit Handlungsaufforderungen sofort auffallen.</li>
|
||||
<li>In einer Card nie mehr als drei Hierarchieebenen kombinieren (z. B. H3, Body, Label).</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Do / Don't Beispiele</h3>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kontext</th>
|
||||
<th>Do</th>
|
||||
<th>Don't</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Absatz</td>
|
||||
<td>Kurze, klare Sätze mit 1-2 Kernaussagen pro Absatz.</td>
|
||||
<td>Verschachtelte Satzkonstruktionen mit vielen Nebensätzen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Headline</td>
|
||||
<td>Nutzenorientiert und konkret, z. B. "Support in unter 2 Stunden".</td>
|
||||
<td>Abstrakt oder werblich, z. B. "Kommunikation neu gedacht".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CTA</td>
|
||||
<td>Verb + Ergebnis, z. B. "Angebot anfordern".</td>
|
||||
<td>Unklare Labels wie "Mehr" oder "Weiter".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hervorhebung</td>
|
||||
<td>Wichtige Begriffe punktuell fett markieren.</td>
|
||||
<td>Ganze Absätze dauerhaft fett setzen.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Implementierungsbeispiele</h3>
|
||||
<p class="muted small">Beispiel für saubere Text-Hierarchie mit den festgelegten Schriftrollen.</p>
|
||||
<pre class="code"><code><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></code></pre>
|
||||
<p class="muted small">Passende Token-Zuordnung in CSS.</p>
|
||||
<pre class="code"><code>: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); }</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="imagery">
|
||||
<div class="section__head">
|
||||
<h2>Bildsprache</h2>
|
||||
<p class="muted">Abgeleitet aus dem Auftritt: Menschen, Teams, echte Situationen, klare Kontraste.</p>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Bildprinzipien</h3>
|
||||
<ul class="bullets">
|
||||
<li>Authentische Team- und Kundenszenen statt generischer Stock-Inszenierung.</li>
|
||||
<li>Fokus auf Beratung, Zusammenarbeit, Support und konkrete Arbeitssituationen.</li>
|
||||
<li>Helle, aufgeräumte Motive mit natürlicher Farbtemperatur.</li>
|
||||
<li>Personen klar erkennbar, freundliche aber professionelle Haltung.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Nicht verwenden</h3>
|
||||
<ul class="bullets">
|
||||
<li>Überinszenierte Futuristik (neon, holografische Fake-Interfaces).</li>
|
||||
<li>Stark entsättigte oder dramatisch dunkle Bildlooks ohne Markenbezug.</li>
|
||||
<li>Beliebige Handschlag-Stockfotos ohne realen Kontext.</li>
|
||||
<li>Unruhige Hintergründe, die Textlesbarkeit reduzieren.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Bildbearbeitung und Overlay</h3>
|
||||
<p class="muted">
|
||||
Nur dezente Korrekturen: Kontrast +5 bis +10, Sättigung maximal +6, kein harter
|
||||
Farbstich. Text auf Bildern immer mit Kontrastfläche (hell/dunkel) absichern.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="components">
|
||||
<div class="section__head">
|
||||
<h2>UI-Komponenten</h2>
|
||||
<p class="muted">Robuste Standardbausteine für Website, Landingpages und Kundenportal.</p>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Hero</h3>
|
||||
<div class="component-hero">
|
||||
<p class="component-hero__kicker">Einstiegskomponente</p>
|
||||
<p class="component-hero__title">Kommunikation, die im Alltag spürbar entlastet.</p>
|
||||
<p class="component-hero__text">
|
||||
Der Hero transportiert Nutzen, Positionierung und klare Handlungsoptionen innerhalb
|
||||
der ersten Bildschirmansicht.
|
||||
</p>
|
||||
<div class="row row--wrap">
|
||||
<button class="btn btn--primary" type="button">IT-Systemhaus anfragen</button>
|
||||
<button class="btn btn--light" type="button">Mehr erfahren</button>
|
||||
</div>
|
||||
<div class="cluster">
|
||||
<span class="pill">ITK-Systemhaus</span>
|
||||
<span class="pill">B2B</span>
|
||||
<span class="pill">Telefonie & Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted small">
|
||||
Einsatz: immer als erste inhaltliche Komponente einer Seite, mit 1 Primär-CTA und
|
||||
maximal 1-2 Sekundäraktionen.
|
||||
</p>
|
||||
</article>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Buttons</h3>
|
||||
<div class="row row--wrap">
|
||||
<button class="btn btn--primary" type="button">IT-Systemhaus anfragen</button>
|
||||
<button class="btn btn--light" type="button">Mehr erfahren</button>
|
||||
<button class="btn btn--light btn--sm" type="button">Sekundär</button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Status</h3>
|
||||
<div class="row row--wrap">
|
||||
<span class="pill">Standard</span>
|
||||
<span class="pill pill--brand">Aktiv</span>
|
||||
<span class="pill pill--accent">Priorität</span>
|
||||
<span class="pill pill--success">Verfügbar</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="grid grid--2 component-stack">
|
||||
<article class="card">
|
||||
<h3>Kontaktformular</h3>
|
||||
<form class="demo-form" action="#" method="post" onsubmit="return false">
|
||||
<label class="field">
|
||||
<span>Firma</span>
|
||||
<input class="input" type="text" placeholder="Beispiel GmbH" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>E-Mail</span>
|
||||
<input class="input" type="email" placeholder="kontakt@firma.de" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Nachricht</span>
|
||||
<textarea class="input" rows="4" placeholder="Wie können wir unterstützen?"></textarea>
|
||||
</label>
|
||||
<button class="btn btn--primary btn--sm" type="submit">Absenden</button>
|
||||
</form>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Hinweis-Box</h3>
|
||||
<div class="alert">
|
||||
<strong>Service-Hinweis:</strong>
|
||||
<span>Support-Anfragen immer mit Erreichbarkeit und kurzer Problembeschreibung einreichen.</span>
|
||||
</div>
|
||||
<p class="muted small">Alerts werden sachlich formuliert, ohne Alarmismus.</p>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>Card-Prinzip</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="accessibility">
|
||||
<div class="section__head">
|
||||
<h2>Accessibility und UX-Regeln</h2>
|
||||
<p class="muted">Verbindliche Mindeststandards für digitale Touchpoints.</p>
|
||||
</div>
|
||||
<div class="grid grid--2">
|
||||
<article class="card">
|
||||
<h3>Kontrast und Lesbarkeit</h3>
|
||||
<ul class="bullets">
|
||||
<li>Textkontrast mindestens WCAG AA (4.5:1 bei normalem Text).</li>
|
||||
<li>Keine hellblauen Fließtexte auf weißem Hintergrund.</li>
|
||||
<li>Interaktive Elemente mit klarer Fokusmarkierung versehen.</li>
|
||||
<li>Alternativtexte für Grafiken und Bilder bereitstellen.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Interaktion</h3>
|
||||
<ul class="bullets">
|
||||
<li>Klickflächen mindestens 40 x 40 px.</li>
|
||||
<li>Buttons eindeutig benennen (Verb + Nutzen).</li>
|
||||
<li>Navigation logisch und auf mobilen Geräten ohne Brüche.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<article class="card">
|
||||
<h3>MUSS-Checkliste (Release-Gate)</h3>
|
||||
<ul class="bullets">
|
||||
<li>Jede Seite MUSS genau eine <code>h1</code>, eine sinnvolle Überschriften-Hierarchie und semantische Landmarks (<code>header</code>, <code>nav</code>, <code>main</code>, <code>footer</code>) haben.</li>
|
||||
<li>Jede Seite MUSS ein korrektes <code>lang</code>-Attribut und einen eindeutigen, aussagekräftigen <code>title</code> haben.</li>
|
||||
<li>Alle Funktionen MÜSSEN vollständig per Tastatur bedienbar sein (Tab, Shift+Tab, Enter, Space, Escape) und dürfen keine Keyboard-Falle erzeugen.</li>
|
||||
<li>Der Fokus MUSS immer sichtbar sein, logisch durch die Seite laufen und darf nie per CSS entfernt werden.</li>
|
||||
<li>Textkontrast MUSS mindestens 4.5:1 betragen; Kontrast von UI-Komponenten/Fokusindikatoren MUSS mindestens 3:1 betragen.</li>
|
||||
<li>Information darf NIE nur über Farbe vermittelt werden; es MUSS immer ein zweiter Hinweis vorhanden sein (Text, Icon, Muster oder Statuslabel).</li>
|
||||
<li>Interaktive Elemente MÜSSEN einen eindeutigen Accessible Name haben (keine Buttons/Links nur mit "Hier" oder nur Icon ohne Label).</li>
|
||||
<li>Klick- und Touch-Ziele MÜSSEN mindestens 44 x 44 px gross sein oder gleichwertig grossen Abstand besitzen.</li>
|
||||
<li>Formulare MÜSSEN programmatisch verknüpfte Labels besitzen; Pflichtfelder, Fehler und Hilfetexte MÜSSEN für Screenreader auslesbar sein.</li>
|
||||
<li>Fehlermeldungen MÜSSEN konkret sagen, was falsch ist und wie es zu korrigieren ist; der Fokus MUSS nach Submit zur Fehlerzusammenfassung springen.</li>
|
||||
<li>Statusänderungen (z. B. "gespeichert", "geladen", "Fehler") MÜSSEN per <code>aria-live</code> oder gleichwertig angekündigt werden.</li>
|
||||
<li>Bilder mit Informationswert MÜSSEN sinnvolle Alt-Texte haben; rein dekorative Bilder MÜSSEN als dekorativ markiert sein.</li>
|
||||
<li>Video mit Sprache MUSS Untertitel haben; reine Audioinhalte MÜSSEN ein Transkript haben; Autoplay mit Ton ist nicht zulässig.</li>
|
||||
<li>Inhalte MÜSSEN bei 200 % Zoom und bei 320 CSS-Pixel Breite ohne horizontalen Pflicht-Scroll funktionieren (ausser technisch notwendige Ausnahmen wie Datentabellen).</li>
|
||||
<li>Animationen/Bewegungen MÜSSEN reduzierbar sein (<code>prefers-reduced-motion</code>); Inhalte dürfen nicht mehr als 3-mal pro Sekunde blinken.</li>
|
||||
<li>Authentifizierung darf keine unzumutbare kognitive Hürde erzeugen; es MUSS eine barrierefreie Alternative zu rein visuellen Aufgaben geben.</li>
|
||||
<li>Release-Freigabe nur, wenn Kernpfade bestanden sind: Navigation, Suche, Login, Formulare, Checkout, Zahlung und Fehlerszenarien.</li>
|
||||
</ul>
|
||||
<p class="muted small">Definition of Done: Kein Release ohne bestandenen Keyboard-Test, Screenreader-Schnelltest und dokumentierte Behebung aller kritischen A11y-Defekte.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section" id="tokens">
|
||||
<div class="section__head">
|
||||
<h2>Design Tokens</h2>
|
||||
<p class="muted">Copy-ready Basis für Webprojekte und UI-Implementierung.</p>
|
||||
</div>
|
||||
<article class="card">
|
||||
<div class="row row--space row--wrap">
|
||||
<h3>CSS Tokens</h3>
|
||||
<button class="btn btn--light btn--sm" data-copy-block="#tokenCss">Block kopieren</button>
|
||||
</div>
|
||||
<pre class="code" id="tokenCss"><code>: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;
|
||||
}</code></pre>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="row row--space row--wrap">
|
||||
<h3>JSON Tokens</h3>
|
||||
<button class="btn btn--light btn--sm" data-copy-block="#tokenJson">Block kopieren</button>
|
||||
</div>
|
||||
<pre class="code" id="tokenJson"><code>{
|
||||
"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"
|
||||
}
|
||||
}</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="muted small">o-byte.com - Styleguide - Stand: Februar 2026</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||||
<script src="./assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user