Vetrina dei componenti

Questo è il riferimento visivo completo per il design system fiskaly. Ogni token colore, stile tipografico e componente disponibile per gli autori di contenuto è documentato qui con esempi live.

---

Palette colori

Il sistema di colori fiskaly è basato su scale semantiche. Ogni colore qui sotto è disponibile come classe utility Tailwind (es. bg-brand-500, text-gray-900).

Marca (Teal / Turchese)

Il colore principale del brand, usato per CTA, link, stati attivi e il punto fiskaly.

50#f0fdfa

100#ccfbf1

200#b2f8ea

300#99f6e4

400#5eead4

500#2dd4bf

600#20c6b2

700#14b8a6

800#129c89

900#11806d

950#042f2e

Grigio (Neutro)

Usato per testo, bordi e sfondi. Calibrato per il contrasto WCAG AA.

50#fcfcfc

100#f6f6f7

200#eff1f3

300#d7dbe1

400#9ca3af

500#6b7280

600#545b6f

700#374151

800#232a30

900#0f181b

950#030712

Accento (Blu)

Colore informativo secondario, usato per avvisi informativi e highlight.

50#eff6ff

300#5caeed

500#1264a3

700#1d4ed8

900#053357

Colori semantici

Scorciatoie semantiche per interfacce basate sullo stato.

Successo#2dd4bf

Avvertimento#fddd00

Pericolo#ff5050

Informazione#1264a3

Primari con nome (Brandbook)

Questi colori con nome si mappano direttamente sui valori della scala sopra.

Turchese#2dd4bf (brand-500)

Bunker#0f181b (gray-900)

Athens Gray#eff1f3 (gray-200)

Comet#545b6f (gray-600)

---

Tipografia

Famiglia di caratteri: DM Sans (corpo e titoli), DM Mono (codice). I titoli usano peso semibold o bold con tracking stretto.

Gerarchia dei titoli

Titolo 1 — DM Sans Bold (2.25rem)

Titolo 2 — DM Sans Semibold (1.5rem)

Titolo 3 — DM Sans Semibold (1.25rem)

Titolo 4 — DM Sans Medium (1.125rem)

Titolo 5 — DM Sans Medium (1rem)

Testo del corpo

Il testo del corpo normale usa DM Sans a una dimensione di lettura confortevole. Il testo in grassetto e il testo in corsivo funzionano come previsto. Puoi combinare anche grassetto corsivo. Ecco il codice inline per i parametri API e testo barrato per elementi deprecati.

Blocco di codice

Esempio di risposta API

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

---

Schede

Il componente base Card supporta tre varianti visive e un flag opzionale hover per gli stati interattivi.

Default

Sfondo pulito, nessun bordo o ombra.

Con bordo

Bordo sottile per separazione visiva.

Elevata

Ombra per profondità e prominenza.

Con bordo + Hover

Passa il cursore su questa scheda per vedere l’ombra interattiva e la transizione del bordo con il colore del brand.

Schede con bagliore

Schede con un bordo sfumato animato al passaggio del cursore. Tre varianti di colore disponibili.

Bagliore brand

Bordo sfumato turchese al passaggio del cursore.

Bagliore accento

Bordo sfumato blu al passaggio del cursore.

Bagliore rame

Bordo sfumato caldo al passaggio del cursore.

---

Schede funzionalità e schede link

Schede funzionalità

Le schede funzionalità presentano le capacità con icona, titolo e descrizione. Usano GlowCard internamente per l’effetto hover premium.

🚀

Avvio rapido

Inizia a funzionare in pochi minuti con la nostra semplice guida di configurazione.

📘

Riferimento API

Documentazione completa dell'API con esempi per ogni endpoint.

🔒

Sicurezza

Sicurezza e conformità di livello enterprise in tutti i mercati.

Schede link

Schede di navigazione che puntano a un’altra pagina. La freccia si anima al passaggio del cursore.

Introduzione

Scopri la soluzione TSS cloud di fiskaly per la conformità fiscale.

Per iniziare

Guida passo passo per i nuovi clienti che effettuano la prima chiamata API.

---

Schede prodotto e schede paese

Schede prodotto

Mostra i prodotti fiskaly con icona, badge opzionale e CTA “Scopri di più”. Basate su GlowCard.

🖊️

Certificato

SIGN DE

Firma digitale per le normative fiscali tedesche. Certificato BSI.

Learn more

📊

DSFinV-K

Interfaccia fiscale digitale per le esportazioni dati dei registratori di cassa.

Learn more

Schede paese

Mostra la disponibilità sul mercato con bandiera, badge di stato (live | beta | coming-soon) e descrizione.

🇩🇪

Germania flagLive

Germania(DE)

Conforme KassenSichV

🇦🇹

Austria flagBeta

Austria(AT)

Conforme RKSV

🇫🇷

Francia flagSoon

Francia(FR)

Conforme NF525

---

Avvisi e callout

Componente Alert

Il componente base Alert con quattro varianti semantiche: info, success, warning, error.

Informazione

Questo è un avviso informativo con lo schema di colori blu accento.

Successo

Questo è un avviso di successo con lo schema di colori turchese del brand.

Avvertimento

Questo è un avviso di avvertimento con lo schema di colori giallo fiskaly.

Errore

Questo è un avviso di errore con lo schema di colori rosso fiskaly.

Callout di convenienza

Alias semantici che si mappano sulle varianti di Alert con icone predefinite: Note (info), Tip (success), Caution (warning), Danger (error).

📘Nota

Un callout nota per informazioni supplementari generali. Supporta markdown e codice inline.

💡Consiglio pro

Un callout suggerimento per le best practice e i consigli utili.

⚠️Attenzione

Un callout attenzione per cose a cui fare attenzione che potrebbero causare problemi minori.

🚨Pericolo

Un callout pericolo per avvisi critici — perdita di dati, rischi di sicurezza o modifiche incompatibili.

---

Badge

Etichette inline di piccole dimensioni per la categorizzazione e l’indicazione dello stato. Sei varianti disponibili.

DefaultBrandSuccessoAvvertimentoErroreContorno

---

Pulsanti

I pulsanti sono disponibili in quattro varianti (primary, secondary, ghost, danger) e tre dimensioni (sm, md, lg). Quando viene fornita href si renderizzano come tag di ancoraggio.

Varianti

PrimarioSecondarioGhostPericolo

Dimensioni

Piccolo

Medio

Grande

Come link

Link primario

Link secondario

---

Tab

Pannelli a schede interattivi per presentare viste alternative dei contenuti. Usa la prop items con i campi label e content.

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']

---

Passaggi

Passaggi numerati con una linea di collegamento sfumata per procedure sequenziali.

1. Crea la tua organizzazione

   Registrati su fiskaly HUB e crea la tua organizzazione. Per impostazione predefinita inizi nell’ambiente di test.

2. Genera le credenziali API

   Vai su Impostazioni > Chiavi API e genera il tuo primo set di credenziali. Archivia entrambi i valori in modo sicuro.

3. Inizializza il tuo TSS

   Crea un Sistema di Sicurezza Tecnica usando l’API. Questo provisiona la tua unità di firma cloud.

4. Inizia a firmare le transazioni

   Inizia a firmare le ricevute con il tuo TSS configurato. Ogni transazione restituisce una firma crittografica.

---

Schede statistiche

Contatori statistici animati con animazione di conteggio al scroll. Props: value (stringa), label e suffix opzionale.

99.9%

SLA di uptime

500M+

Transazioni

50K+

TSS attivi

3

Paesi

---

Intestazioni di sezione e decorativi

Intestazione di sezione

Intestazioni di sezione coerenti con pillola badge opzionale, subtitle e align (left o center).

NUOVO

Esempio di intestazione di sezione

Questo componente fornisce intestazioni di sezione coerenti con badge e sottotitoli opzionali.

LAYOUT

Intestazione di sezione centrata

La variante centrata funziona bene per le landing page e le sezioni splash.

Testo sfumato

Testo con un effetto di brillantezza sfumata animato usando i colori del brand fiskaly. Supporta la prop as: span, h1, h2, h3, p.

Effetto testo sfumato

Punto fiskaly

Il punto del brand animato con effetto ping. L’elemento caratteristico del logo fiskaly.

PiccoloMedioGrande

---

Elementi nativi di Starlight

Questi elementi markdown standard sono stilizzati dal CSS del tema fiskaly.

Tabella

Funzionalità	Stato	Versione
Firma transazioni	Disponibile	v2.0
Esportazione DSFinV-K	Disponibile	v1.5
Validazione ricevute	Beta	v2.1

Citazione

“fiskaly fornisce la soluzione TSS cloud più semplice per la conformità fiscale tedesca.”

— Team di ingegneria fiskaly

Elenco non ordinato

• Primo elemento con dettagli di supporto
• Secondo elemento che spiega un concetto
• Terzo elemento con un elenco annidato:
  • Elemento annidato A
  • Elemento annidato B

Elenco ordinato

1. Primo passaggio in un processo
2. Secondo passaggio che si basa sul primo
3. Terzo passaggio per completare il flusso

Regola orizzontale

Contenuto sopra la regola.

---

Contenuto sotto la regola.

Codice inline e link

Usa codice inline per i parametri API come api_key e access_token. I link funzionano come previsto: fiskaly HUB (esterno) e torna in cima (ancoraggio).