Vitrine des composants
Voici la référence visuelle complète du design system fiskaly. Chaque token de couleur, style typographique et composant disponible pour les auteurs de contenu est documenté ici avec des exemples live.
Palette de couleurs
Section intitulée « Palette de couleurs »Le système de couleurs fiskaly est construit sur des échelles sémantiques. Chaque couleur ci-dessous est disponible en tant que classe utilitaire Tailwind (p. ex. bg-brand-500, text-gray-900).
Marque (Teal / Turquoise)
Section intitulée « Marque (Teal / Turquoise) »La couleur principale de la marque, utilisée pour les CTA, les liens, les états actifs et le point fiskaly.
Gris (Neutre)
Section intitulée « Gris (Neutre) »Utilisé pour le texte, les bordures et les arrière-plans. Calibré pour le contraste WCAG AA.
Accent (Bleu)
Section intitulée « Accent (Bleu) »Couleur informative secondaire, utilisée pour les alertes d’information et les mises en évidence.
Couleurs sémantiques
Section intitulée « Couleurs sémantiques »Raccourcis sémantiques pour les interfaces pilotées par l’état.
Primaires nommées (Brandbook)
Section intitulée « Primaires nommées (Brandbook) »Ces couleurs nommées correspondent directement aux valeurs d’échelle ci-dessus.
Typographie
Section intitulée « Typographie »Famille de polices : DM Sans (corps et titres), DM Mono (code). Les titres utilisent un poids semibold à bold avec un tracking serré.
Hiérarchie des titres
Section intitulée « Hiérarchie des titres »Titre 1 — DM Sans Bold (2.25rem)
Section intitulée « Titre 1 — DM Sans Bold (2.25rem) »Titre 2 — DM Sans Semibold (1.5rem)
Section intitulée « Titre 2 — DM Sans Semibold (1.5rem) »Titre 3 — DM Sans Semibold (1.25rem)
Section intitulée « Titre 3 — DM Sans Semibold (1.25rem) »Titre 4 — DM Sans Medium (1.125rem)
Section intitulée « Titre 4 — DM Sans Medium (1.125rem) »Titre 5 — DM Sans Medium (1rem)
Section intitulée « Titre 5 — DM Sans Medium (1rem) »Texte du corps
Section intitulée « Texte du corps »Le texte du corps normal utilise DM Sans à une taille de lecture confortable. Le texte en gras et le texte en italique fonctionnent comme prévu. Vous pouvez également combiner gras italique. Voici le code en ligne pour les paramètres API et le texte barré pour les éléments dépréciés.
Bloc de code
Section intitulée « Bloc de code »{ "access_token": "eyJhbGciOiJSUzI1NiIs...", "token_type": "Bearer", "expires_in": 900}Le composant de base Card prend en charge trois variantes visuelles et un indicateur optionnel hover pour les états interactifs.
Par défaut
Fond propre, sans bordure ni ombre.
Avec bordure
Bordure subtile pour la séparation visuelle.
Élevée
Ombre pour la profondeur et la proéminence.
Avec bordure + Hover
Survolez cette carte pour voir l’ombre interactive et la transition de bordure avec la couleur de la marque.
Cartes luminescentes
Section intitulée « Cartes luminescentes »Cartes avec un bord dégradé animé au survol. Trois variantes de couleur disponibles.
Lueur marque
Bord dégradé turquoise au survol.
Lueur accent
Bord dégradé bleu au survol.
Lueur cuivre
Bord dégradé chaud au survol.
Cartes de fonctionnalités et cartes de liens
Section intitulée « Cartes de fonctionnalités et cartes de liens »Cartes de fonctionnalités
Section intitulée « Cartes de fonctionnalités »Les cartes de fonctionnalités présentent les capacités avec une icône, un titre et une description. Elles utilisent GlowCard en interne pour l’effet hover premium.
Démarrage rapide
Opérationnel en quelques minutes grâce à notre guide de configuration simple.
Référence API
Documentation complète de l'API avec des exemples pour chaque endpoint.
Sécurité
Sécurité et conformité de niveau entreprise sur tous les marchés.
Cartes de liens
Section intitulée « Cartes de liens »Cartes de navigation pointant vers une autre page. La flèche s’anime au survol.
Introduction
Découvrez la solution TSS cloud de fiskaly pour la conformité fiscale.
Premiers pas
Guide étape par étape pour les nouveaux clients effectuant leur premier appel API.
Cartes de produits et cartes de pays
Section intitulée « Cartes de produits et cartes de pays »Cartes de produits
Section intitulée « Cartes de produits »Présentez les produits fiskaly avec une icône, un badge optionnel et un CTA “En savoir plus”. Basées sur GlowCard.
SIGN DE
Signature numérique pour les réglementations fiscales allemandes. Certifié BSI.
DSFinV-K
Interface fiscale numérique pour les exports de données des caisses enregistreuses.
Cartes de pays
Section intitulée « Cartes de pays »Affiche la disponibilité sur le marché avec drapeau, badge de statut (live | beta | coming-soon) et description.
Allemagne(DE)
Conforme KassenSichV
Autriche(AT)
Conforme RKSV
France(FR)
Conforme NF525
Alertes et callouts
Section intitulée « Alertes et callouts »Composant Alert
Section intitulée « Composant Alert »Le composant de base Alert avec quatre variantes sémantiques : info, success, warning, error.
Ceci est une alerte d’information utilisant le schéma de couleurs bleu accent.
Ceci est une alerte de succès utilisant le schéma de couleurs turquoise de la marque.
Ceci est une alerte d’avertissement utilisant le schéma de couleurs jaune fiskaly.
Ceci est une alerte d’erreur utilisant le schéma de couleurs rouge fiskaly.
Callouts de commodité
Section intitulée « Callouts de commodité »Alias sémantiques qui correspondent aux variantes Alert avec des icônes par défaut : Note (info), Tip (success), Caution (warning), Danger (error).
Un callout note pour des informations complémentaires générales. Supporte le markdown
et le code en ligne.
Un callout conseil pour les meilleures pratiques et les suggestions utiles.
Un callout attention pour les choses à surveiller qui pourraient causer des problèmes mineurs.
Un callout danger pour les avertissements critiques — perte de données, risques de sécurité ou modifications incompatibles.
Petites étiquettes en ligne pour la catégorisation et l’indication d’état. Six variantes disponibles.
Les boutons sont disponibles en quatre variantes (primary, secondary, ghost, danger) et trois tailles (sm, md, lg). Lorsque href est fourni, ils se rendent comme des balises d’ancrage.
Variantes
Section intitulée « Variantes »En tant que lien
Section intitulée « En tant que lien »Panneaux à onglets interactifs pour présenter des vues de contenu alternatives. Utilise la prop items avec les champs label et content.
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']Étapes numérotées avec une ligne de connexion dégradée pour les procédures séquentielles.
Créez votre organisation
Inscrivez-vous sur fiskaly HUB et créez votre organisation. Vous démarrez dans l’environnement de test par défaut.
Générez des identifiants API
Accédez à Paramètres > Clés API et générez votre première paire de clés. Stockez les deux valeurs en toute sécurité.
Initialisez votre TSS
Créez un Système de Sécurité Technique via l’API. Cela provisionne votre unité de signature cloud.
Commencez à signer des transactions
Commencez à signer des reçus avec votre TSS configuré. Chaque transaction renvoie une signature cryptographique.
Cartes de statistiques
Section intitulée « Cartes de statistiques »Compteurs de statistiques animés avec une animation de comptage déclenchée au défilement. Props : value (chaîne), label et suffix optionnel.
En-têtes de section et éléments décoratifs
Section intitulée « En-têtes de section et éléments décoratifs »En-tête de section
Section intitulée « En-tête de section »En-têtes de section cohérents avec pilule badge optionnelle, subtitle et align (left ou center).
Exemple d'en-tête de section
Ce composant fournit des en-têtes de section cohérents avec des badges et des sous-titres optionnels.
En-tête de section centré
La variante centrée fonctionne bien pour les pages d'atterrissage et les sections splash.
Texte dégradé
Section intitulée « Texte dégradé »Texte avec un effet de reflet dégradé animé utilisant les couleurs de la marque fiskaly. Supporte la prop as : span, h1, h2, h3, p.
Effet de texte dégradé
Point fiskaly
Section intitulée « Point fiskaly »Le point de marque animé avec effet ping. L’élément caractéristique du logo fiskaly.
Éléments natifs Starlight
Section intitulée « Éléments natifs Starlight »Ces éléments markdown standard sont stylisés par le CSS du thème fiskaly.
| Fonctionnalité | Statut | Version |
|---|---|---|
| Signature de transactions | Disponible | v2.0 |
| Export DSFinV-K | Disponible | v1.5 |
| Validation de reçus | Bêta | v2.1 |
Citation
Section intitulée « Citation »« fiskaly fournit la solution TSS cloud la plus simple pour la conformité fiscale allemande. »
— Équipe d’ingénierie fiskaly
Liste non ordonnée
Section intitulée « Liste non ordonnée »- Premier élément avec des détails de support
- Deuxième élément expliquant un concept
- Troisième élément avec une liste imbriquée :
- Élément imbriqué A
- Élément imbriqué B
Liste ordonnée
Section intitulée « Liste ordonnée »- Première étape d’un processus
- Deuxième étape s’appuyant sur la première
- Troisième étape pour compléter le flux
Règle horizontale
Section intitulée « Règle horizontale »Contenu au-dessus de la règle.
Contenu en dessous de la règle.
Code en ligne et liens
Section intitulée « Code en ligne et liens »Utilisez le code en ligne pour les paramètres API comme api_key et access_token. Les liens fonctionnent comme prévu : fiskaly HUB (externe) et retour en haut (ancre).
Was this page helpful?