Komponenten-Showcase

Dies ist die vollständige visuelle Referenz für das fiskaly Design-System. Jedes Farbtoken, jeder typografische Stil und jede Komponente, die für Inhaltsautoren verfügbar ist, ist hier mit Live-Beispielen dokumentiert.

---

Farbpalette

Das fiskaly Farbsystem basiert auf semantischen Skalen. Jede unten aufgeführte Farbe ist als Tailwind-Hilfsklasse verfügbar (z. B. bg-brand-500, text-gray-900).

Marke (Teal / Türkis)

Die primäre Markenfarbe, verwendet für CTAs, Links, aktive Zustände und den fiskaly-Punkt.

50#f0fdfa

100#ccfbf1

200#b2f8ea

300#99f6e4

400#5eead4

500#2dd4bf

600#20c6b2

700#14b8a6

800#129c89

900#11806d

950#042f2e

Grau (Neutral)

Verwendet für Text, Ränder und Hintergründe. Abgestimmt für WCAG AA-Kontrast.

50#fcfcfc

100#f6f6f7

200#eff1f3

300#d7dbe1

400#9ca3af

500#6b7280

600#545b6f

700#374151

800#232a30

900#0f181b

950#030712

Akzent (Blau)

Sekundäre Informationsfarbe, verwendet für Info-Benachrichtigungen und Akzent-Hervorhebungen.

50#eff6ff

300#5caeed

500#1264a3

700#1d4ed8

900#053357

Semantische Farben

Semantische Abkürzungen für statusgesteuerte Benutzeroberflächen.

Erfolg#2dd4bf

Warnung#fddd00

Gefahr#ff5050

Info#1264a3

Benannte Primärfarben (Markenbuch)

Diese benannten Farben entsprechen direkt den Skalenwerten oben.

Türkis#2dd4bf (brand-500)

Bunker#0f181b (gray-900)

Athens Gray#eff1f3 (gray-200)

Comet#545b6f (gray-600)

---

Typografie

Schriftfamilie: DM Sans (Fließtext & Überschriften), DM Mono (Code). Überschriften verwenden halbfette bis fette Stärke mit engem Tracking.

Überschriftenhierarchie

Überschrift 1 — DM Sans Bold (2,25rem)

Überschrift 2 — DM Sans Semibold (1,5rem)

Überschrift 3 — DM Sans Semibold (1,25rem)

Überschrift 4 — DM Sans Medium (1,125rem)

Überschrift 5 — DM Sans Medium (1rem)

Fließtext

Regulärer Fließtext verwendet DM Sans in einer angenehmen Lesegröße. Fettdruck und Kursivschrift funktionieren wie erwartet. Sie können fett kursiv kombinieren. Hier ist Inline-Code für API-Parameter und Durchgestrichen für veraltete Elemente.

Code-Block

Beispiel API-Antwort

{
  "access_token": "eyJhbGciOiJSUzI1NiIs...",
  "token_type": "Bearer",
  "expires_in": 900
}

---

Karten

Die Basis-Card-Komponente unterstützt drei visuelle Varianten und ein optionales hover-Flag für interaktive Zustände.

Standard

Sauberer Hintergrund, kein Rahmen oder Schatten.

Umrahmt

Subtiler Rahmen für visuelle Trennung.

Erhöht

Schatten für Tiefe und Prominenz.

Umrahmt + Hover

Fahren Sie mit der Maus über diese Karte, um den interaktiven Schatten und den Übergang zum markenfarbenen Rahmen zu sehen.

Glow-Karten

Karten mit einem animierten Farbverlauf-Rahmenglühen beim Hover. Drei Farbvarianten verfügbar.

Marken-Glühen

Türkiser Farbverlaufsrahmen beim Hover.

Akzent-Glühen

Blauer Farbverlaufsrahmen beim Hover.

Kupfer-Glühen

Warmer Farbverlaufsrahmen beim Hover.

---

Feature-Karten & Link-Karten

Feature-Karten

Feature-Karten präsentieren Funktionen mit einem Symbol, einem Titel und einer Beschreibung. Sie verwenden intern GlowCard für den Premium-Hover-Effekt.

🚀

Quick Start

In wenigen Minuten einsatzbereit mit unserem einfachen Einrichtungsleitfaden.

📘

API-Referenz

Vollständige API-Dokumentation mit Beispielen für jeden Endpunkt.

🔒

Sicherheit

Enterprise-Sicherheit und Konformität auf allen Märkten.

Link-Karten

Navigationskarten, die auf eine andere Seite verweisen. Der Pfeil animiert beim Hover.

Einführung

Erfahren Sie mehr über fiskaly's cloudbasierte TSS-Lösung für die Fiskalisierung.

Erste Schritte

Schrittweise Anleitung für neue Kunden, um ihren ersten API-Aufruf durchzuführen.

---

Produkt-Karten & Länder-Karten

Produkt-Karten

Präsentieren fiskaly-Produkte mit einem Symbol, optionalem Badge und einem “Mehr erfahren”-CTA. Basiert auf GlowCard.

🖊️

Zertifiziert

SIGN DE

Digitale Signierung für deutsche Fiskalregulierungen. BSI-zertifiziert.

Learn more

📊

DSFinV-K

Digitale Fiskalschnittstelle für Kassensystem-Datenexporte.

Learn more

Länder-Karten

Zeigt Marktverfügbarkeit mit Flagge, Status-Badge (live | beta | coming-soon) und Beschreibung an.

🇩🇪

Deutschland flagLive

Deutschland(DE)

KassenSichV-konform

🇦🇹

Österreich flagBeta

Österreich(AT)

RKSV-konform

🇫🇷

Frankreich flagSoon

Frankreich(FR)

NF525-konform

---

Benachrichtigungen & Callouts

Alert-Komponente

Die Basis-Alert-Komponente mit vier semantischen Varianten: info, success, warning, error.

Information

Dies ist eine Info-Benachrichtigung mit dem Akzentblau-Farbschema.

Erfolg

Dies ist eine Erfolgs-Benachrichtigung mit dem Markentürkis-Farbschema.

Warnung

Dies ist eine Warn-Benachrichtigung mit dem fiskaly-Gelb-Farbschema.

Fehler

Dies ist eine Fehler-Benachrichtigung mit dem fiskaly-Rot-Farbschema.

Convenience-Callouts

Semantische Aliase, die Alert-Varianten mit Standard-Symbolen zugeordnet sind: Note (info), Tip (success), Caution (warning), Danger (error).

📘Hinweis

Ein Hinweis-Callout für allgemeine ergänzende Informationen. Unterstützt Markdown und Inline-Code.

💡Profi-Tipp

Ein Tipp-Callout für Best Practices und hilfreiche Vorschläge.

⚠️Vorsicht

Ein Vorsicht-Callout für Dinge, auf die geachtet werden sollte und die kleinere Probleme verursachen können.

🚨Gefahr

Ein Gefahr-Callout für kritische Warnungen — Datenverlust, Sicherheitsrisiken oder Breaking Changes.

---

Badges

Kleine Inline-Labels für Kategorisierung und Statusanzeige. Sechs Varianten verfügbar.

StandardMarkeErfolgWarnungFehlerOutline

---

Schaltflächen

Schaltflächen gibt es in vier Varianten (primary, secondary, ghost, danger) und drei Größen (sm, md, lg). Wenn href angegeben wird, werden sie als Anker-Tags gerendert.

Varianten

PrimärSekundärGhostGefahr

Größen

Klein

Mittel

Groß

Als Link

Primärer Link

Sekundärer Link

---

Tabs

Interaktive Tab-Panels zur Darstellung alternativer Inhaltsansichten. Verwendet die items-Prop mit label- und content-Feldern.

cURLJavaScriptPython

curl -X POST https://kassensichv-middleware.fiskaly.com/api/v2/auth \
  -H "Content-Type: application/json" \
  -d '{"api_key": "test_key", "api_secret": "test_secret"}'

const res = await fetch('https://kassensichv-middleware.fiskaly.com/api/v2/auth', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ api_key: 'test_key', api_secret: 'test_secret' })
});
const { access_token } = await res.json();

import requests

response = requests.post(
    'https://kassensichv-middleware.fiskaly.com/api/v2/auth',
    json={'api_key': 'test_key', 'api_secret': 'test_secret'}
)
access_token = response.json()['access_token']

---

Schritte

Nummerierte Schritte mit einer verbindenden Farbverlaufslinie für sequentielle Abläufe.

1. Ihre Organisation erstellen

   Registrieren Sie sich im fiskaly HUB und erstellen Sie Ihre Organisation. Sie starten standardmäßig in der Testumgebung.

2. API-Zugangsdaten generieren

   Navigieren Sie zu Einstellungen > API Keys und generieren Sie Ihr erstes Schlüsselpaar. Speichern Sie beide Werte sicher.

3. Ihr TSS initialisieren

   Erstellen Sie ein Technisches Sicherheitssystem über die API. Dies stellt Ihre cloudbasierte Signing-Einheit bereit.

4. Mit der Transaktionssignierung beginnen

   Beginnen Sie mit dem Signieren von Belegen mit Ihrem konfigurierten TSS. Jede Transaktion gibt eine kryptografische Signatur zurück.

---

Statistik-Karten

Animierte Statistikzähler mit Scroll-ausgelöster Hochzählanimation. Props: value (string), label und optionales suffix.

99.9%

Uptime SLA

500M+

Transaktionen

50K+

Aktive TSS

3

Länder

---

Abschnittsüberschriften & Dekoratives

Abschnittsüberschrift

Einheitliche Abschnittsheader mit optionalem badge-Pill, subtitle und align (left oder center).

NEU

Beispiel Abschnittsüberschrift

Diese Komponente bietet einheitliche Abschnittsheader mit optionalen Badges und Untertiteln.

LAYOUT

Zentrierte Abschnittsüberschrift

Die zentrierte Variante eignet sich gut für Landing Pages und Splash-Sections.

Verlaufstext

Text mit einem animierten Verlaufsschimmer in fiskaly-Markenfarben. Unterstützt as-Prop: span, h1, h2, h3, p.

Verlaufstext-Effekt

fiskaly-Punkt

Der animierte Markenpunkt mit Ping-Effekt. Das Signaturelement aus dem fiskaly-Logo.

KleinMittelGroß

---

Starlight-Native Elemente

Diese Standard-Markdown-Elemente werden durch das fiskaly-Theme-CSS gestylt.

Tabelle

Funktion	Status	Version
Transaktionssignierung	Verfügbar	v2.0
DSFinV-K-Export	Verfügbar	v1.5
Belegvalidierung	Beta	v2.1

Blockzitat

“fiskaly bietet die einfachste cloudbasierte TSS-Lösung für die deutsche Fiskalisierung.”

— fiskaly Engineering Team

Ungeordnete Liste

• Erstes Element mit unterstützenden Details
• Zweites Element, das ein Konzept erklärt
• Drittes Element mit einer verschachtelten Liste:
  • Verschachteltes Element A
  • Verschachteltes Element B

Geordnete Liste

1. Erster Schritt in einem Prozess
2. Zweiter Schritt aufbauend auf dem ersten
3. Dritter Schritt zum Abschluss des Ablaufs

Horizontale Linie

Inhalt über der Linie.

---

Inhalt unter der Linie.

Inline-Code & Links

Verwenden Sie Inline-Code für API-Parameter wie api_key und access_token. Links funktionieren wie erwartet: fiskaly HUB (extern) und zurück nach oben (Anker).