Downloads
QuaSi Typography Guide
Vollständige Übersicht aller Typografie-Elemente für die QuaSi-Website
Farbpalette - QuaSi Color Scheme
Primärfarben
Grasgrün (Logo): #58C472
Tiefes Grün: #1B5E20
Grau-Blau: #37474F
Akzentfarben
Orange: #FF9800
Hellgrün (Schritte): #64DD17
Q-Logo Grün: #51b618
Text & Hintergrund
Überschriften: #1C1C1C
Fließtext: #333333
Hintergrund: #F9F9F9
Weiß: #FFFFFF
Typografie-Hierarchie
Hauptüberschrift (H1) - Segoe UI
<h1>Hauptüberschrift (H1) - Segoe UI</h1>
Unterüberschrift (H2) - Segoe UI
<h2>Unterüberschrift (H2) - Segoe UI</h2>
Abschnittsüberschrift (H3) - Segoe UI
<h3>Abschnittsüberschrift (H3) - Segoe UI</h3>
Kleinere Überschrift (H4) - Segoe UI
<h4>Kleinere Überschrift (H4) - Segoe UI</h4>
Überschrift H5 - Segoe UI
<h5>Überschrift H5 - Segoe UI</h5>
Überschrift H6 - Segoe UI
<h6>Überschrift H6 - Segoe UI</h6>
Fließtext-Variationen
Standard Fließtext: Dies ist ein normaler Absatz mit Standardformatierung. Der Text verwendet die Segoe UI Schriftart und die Boss-zugelassene Textfarbe #333333. Dies ist die Standardschrift für alle Inhalte auf der QuaSi-Website.
<p>Standard Fließtext</p>
Lead Text: Dies ist ein Lead-Text, der wichtige Einleitungen oder Zusammenfassungen hervorhebt. Er ist größer als normaler Fließtext und zieht die Aufmerksamkeit auf sich.
<p class="uk-text-lead">Lead Text</p>
Kleiner Text: Dies ist kleinerer Text für Zusatzinformationen, Fußnoten oder weniger wichtige Details.
<p class="uk-text-small">Kleiner Text</p>
Großer Text: Dies ist größerer Text für besondere Hervorhebungen.
<p class="uk-text-large">Großer Text</p>
Schrift-Variationen
Fett (Bold): Wichtige Informationen werden fett dargestellt um sie hervorzuheben.
<strong>fett dargestellt</strong>
Kursiv (Italic): Kursiver Text wird für Betonungen oder Zitate verwendet.
<em>Kursiver Text</em> oder <p class="body-italic">
Fett & Kursiv: Besonders wichtige Hervorhebungen verwenden fett und kursiv gleichzeitig.
<p class="bold-italic">Fett und kursiv</p>
Button-Stile
<button class="uk-button uk-button-primary">
<button class="uk-button uk-button-secondary">
<button class="uk-button uk-button-default">
Link-Stile
Standard Link - Verwendet die Boss-Primärfarbe #008e48
<a href="#">Standard Link</a>
Hover Link - Wechselt zu Orange (#FF9800) beim Hovern
Hover-Effekt: color: var(--color-accent)
Reset Link - Sieht aus wie normaler Text
<a class="uk-link-reset">
Listen
Ungeordnete Liste
- Qualitätssicherung für Röntgeneinrichtungen
- Software-Tools und Downloads
- Umfangreiche Dokumentation
- FAQ und Hilfsmaterialien
<ul><li>Listenpunkt</li></ul>
Geordnete Liste
- Software herunterladen
- Installation durchführen
- Konfiguration anpassen
- Qualitätsprüfung starten
<ol><li>Schritt 1</li></ol>
UIkit Nav-Liste
<ul class="uk-nav uk-nav-default">
Zitate und Hervorhebungen
"QuaSi stellt sicher, dass Röntgeneinrichtungen den höchsten Qualitätsstandards entsprechen und optimale Bildqualität bei minimaler Strahlenbelastung liefern."
<blockquote class="uk-blockquote">
Tabellen
| Funktion | Beschreibung | Version |
|---|---|---|
| Bildqualitätsprüfung | Automatische Analyse der Röntgenbilder | 2.1 |
| Dosismessung | Überwachung der Strahlenbelastung | 2.0 |
| Berichtsgenerierung | Erstellung detaillierter Prüfberichte | 2.1 |
<table class="uk-table uk-table-divider uk-table-striped">
Nachrichten und Warnungen
Logo und Marken-Typografie
QuaSi Logo-Text (Hell)
QuaSi
<h1 class="quasi-logo"><span class="quasi-logo">Q</span>uaSi</h1>
QuaSi Logo-Text (Dunkel)
QuaSi
<h1 class="quasi-logo-dark"><span class="quasi-logo">Q</span>uaSi</h1>
Logo auf dunklem Header-Hintergrund
Qualitätssicherung mit QuaSi
Dies entspricht der Header-Darstellung auf der Website
Spezielle QuaSi-Komponenten
Benachrichtigungsleiste
<div class="notification-bar">Wichtiger Hinweis</div>
Erfolgs-Benachrichtigung
<div class="success-bar">Erfolgsmeldung</div>
Status-Karte
Gerätestatus
Alle Röntgengeräte sind kalibriert und einsatzbereit.
✓ Bereit für Qualitätsprüfung<div class="status-card">Status-Informationen</div>
Fortschritts-Schritte
1
Software installieren
QuaSi herunterladen und auf dem System installieren
QuaSi herunterladen und auf dem System installieren
2
Konfiguration (Abgeschlossen)
Geräte-Parameter eingeben und kalibrieren
Geräte-Parameter eingeben und kalibrieren
<div class="progress-step"> und <div class="progress-step completed">
Erweiterte Accordion-Elemente
Schritt 1: Software-Installation
Laden Sie die aktuelle Version der QuaSi-Software von der offiziellen Download-Seite herunter und führen Sie die Installation auf Ihrem System durch.
- Systemanforderungen prüfen
- Installationsdatei herunterladen
- Administrator-Rechte verwenden
Schritt 2: Geräte-Konfiguration
Konfigurieren Sie Ihre Röntgengeräte für die optimale Qualitätssicherung.
<div class="process-accordion" uk-accordion>
Icons (Font Awesome)
QuaSi-relevante Icons
fa-x-ray
fa-shield-alt
fa-cog
fa-download
fa-file-pdf
fa-question-circle
Status-Icons
fa-check-circle
fa-exclamation-triangle
fa-times-circle
fa-info-circle
Code und technischer Text
Verwenden Sie quasi.exe zum Starten der Anwendung.
// Beispiel-Konfiguration
{
"version": "2.1",
"mode": "quality_check",
"settings": {
"auto_report": true,
"dose_monitoring": true
}
}<code>inline code</code> und <pre><code>block code</code></pre>
Responsive Typografie
Große Überschrift (Desktop)
Angepasste Überschrift (Mobile)
Dieser Text wird nur auf größeren Bildschirmen angezeigt und ist größer formatiert.
Auf mobilen Geräten wird dieser kleinere Text angezeigt.
uk-visible@s (ab Small-Breakpoint sichtbar)
uk-hidden@s (ab Small-Breakpoint versteckt)
uk-hidden@s (ab Small-Breakpoint versteckt)