Design system
Catalogo consultabile dei token e dei componenti di presentazione riutilizzabili del portfolio.
I controlli mostrati sono dimostrazioni isolate: non inviano dati e non eseguono operazioni amministrative.
Token colore
Stack tipografici
Stack realmente usati dal sito e dai documenti generati. I font di PDF ed email non vengono caricati come font web.
Sans-serif di sistema
Testo principale dell’interfaccia, senza download obbligatori.
Aa — Portfolio accessibile 0123456789
Monospace di sistema
Codice, comandi e valori tecnici.
Aa — Portfolio accessibile 0123456789
Font Awesome
Font dedicato esclusivamente ai pittogrammi dell’interfaccia.
Aa — Portfolio accessibile 0123456789
Fallback compatibile con i client di posta.
Aa — Portfolio accessibile 0123456789
Font incorporabile usato da Dompdf per il curriculum.
Aa — Portfolio accessibile 0123456789
Tipografia
Heading 1
Heading 2
Heading 3
Il testo principale mantiene una gerarchia leggibile sulle superfici scure.
Il testo secondario riduce l’enfasi senza compromettere il contrasto.
Azioni e stati
Solo testo
Testo e icona
Solo icona
Contratti di rendering
Link di navigazione
<x-molecules.method-action method="DELETE" ...>
Azione HTTP con CSRF
Varianti in stato hover
Stati del controllo
Percorso da tastiera
I pulsanti mostrano già l’aspetto del focus da tastiera; usa Tab e Shift+Tab per provarne anche il percorso reale.
Campi del form
Passa il mouse o usa Tab per confrontare gli stati senza variazioni di layout.
Controlla il valore inserito.
Stati della selezione
Invalid e disabled hanno precedenza su hover e focus.
Controlla il valore inserito.
Card e badge
Card standard
Contenuto informativo statico, senza destinazione o azione associata.
- Card standard
- Non è focusabile, non cambia al passaggio del mouse e non promette un’azione.
- Card interattiva
- Espone semantica di link, indicatore direzionale, hover, focus visibile e feedback sonoro.
Stati della checkbox
Hover e focus rinforzano il controllo senza nascondere selezione, errore o stato disabilitato.
Pillole e controlli compatti
composer test
Link contatto del footer: prova hover e focus da tastiera
Navigazione
Tab entra nel gruppo; Freccia sinistra/destra, Home ed End spostano il focus; Invio o Spazio attivano.
Le tab condividono selezione, focus visibile e feedback sonoro.
Le tab condividono selezione, focus visibile e feedback sonoro.
Le tab condividono selezione, focus visibile e feedback sonoro.
Breadcrumb
Gerarchia compatta con collegamenti interattivi e pagina corrente non attivabile.
Paginazione
Paginator condiviso realmente utilizzato negli elenchi: mostra conteggio, pagina corrente e controlli precedente e successivo.
Usa Tab per raggiungere i collegamenti; lo stato corrente e i controlli non disponibili non entrano nel percorso.
Tabelle responsive
Le liste diventano card etichettate; le matrici conservano righe e colonne dentro una regione di scorrimento locale.
Lista a card
Sotto 768 px ogni valore mantiene la propria etichetta e i contenuti lunghi vanno a capo.
| Elemento | Stato | Valore |
|---|---|---|
| Elemento dimostrativo con nome lungo | Attivo | 24,50 € |
Matrice scorrevole
Scorri orizzontalmente per consultare tutte le colonne.
La regione è nominata, raggiungibile da tastiera e trattiene lo scorrimento orizzontale.
| Metrica | Attuale | Precedente | Limite |
|---|---|---|---|
| Bundle CSS | 84 KB | 88 KB | 100 KB |
Show page condivise
Varianti reali del template usato da progetti, hobby e competenze.
Variante con immagine
Variante con icona e livello
Competenza
Competenza dimostrativa
80%La variante senza immagine usa un segno grafico mantenendo lo stesso template.
Relazioni
Progetto associato
Percorso cronologico
Caso d’uso documentato
Apri Percorso
Anatomia, stati responsivi e vincoli prestazionali della timeline che collega Project e Skill in ordine cronologico.
Anatomia Atomic Design
Stati e adattamento
- Desktop: serpentina adattiva da due a quattro Project per riga con svolte continue e rami sopra o sotto il tronco.
- Mobile e contenuti densi: asse verticale unico, frutti a destra e nessun overflow orizzontale; uno switch opzionale apre la serpentina ruotata di 90 gradi con un Project per riga.
- Senza JavaScript o con movimento, trasparenza o colori ridotti, l’intero contenuto resta leggibile e navigabile.
Contratto prestazionale
- Sass e JavaScript sono entrypoint della sola pagina Percorso e non appesantiscono il bundle globale.
- Le misure SVG vengono riusate fra livelli equivalenti e ricalcolate soltanto quando cambia il layout.
- Un solo clock gestisce reveal e impulsi; sui dispositivi piccoli o touch usa impulsi ogni due secondi e pittura a circa 30 fps, sospendendosi fuori viewport.
Feedback
Operazione completata
Lo stato positivo è visibile anche senza audio.
Informazione
Un dettaglio utile che non interrompe il flusso.
Attenzione
L’azione richiede una verifica prima di continuare.
Errore
Il problema è descritto con testo e colore.
Feedback compatto
Riduce la densità visiva senza nascondere informazioni.
- Primo dettaglio contestuale.
- Secondo dettaglio contestuale.
Feedback chiudibile
Lo spazio di chiusura compare solo insieme al relativo controllo.
Priorità e annunci accessibili
- Contenuto statico
- Nessuna live region: il lettore di schermo lo incontra nel normale ordine della pagina.
- Aggiornamento non urgente
- announce usa status e aria-live polite per comunicare un cambiamento senza interrompere.
- Errore urgente
- La variante danger annunciata usa alert e aria-live assertive. Gli errori dei campi restano associati al relativo controllo.
Inventario icone
178 coppie famiglia–icona rilevate staticamente nelle sorgenti.
Apri la galleria delle icone
Nessuna icona corrisponde al filtro.
58 riferimenti dinamici da verificare
Inventario componenti
29 componenti Blade registrati. Le demo sopra mostrano i primitivi visuali; l’inventario include anche composizioni contestuali e template.
Atomi
14-
<x-atoms.brand-logo>1 -
<x-atoms.button>143 -
<x-atoms.copy-button>3 -
<x-atoms.icon-text>2 -
<x-atoms.inputs.checkbox-input>4 -
<x-atoms.inputs.email-input>1 -
<x-atoms.inputs.file-input>3 -
<x-atoms.inputs.number-input>1 -
<x-atoms.inputs.select>4 -
<x-atoms.inputs.text-input>4 -
<x-atoms.inputs.textarea>3 -
<x-atoms.password-visibility-toggle>10 -
<x-atoms.pill>3 -
<x-atoms.responsive-image>3
Molecole
10-
<x-molecules.audio-controls>2 -
<x-molecules.breadcrumb>3 -
<x-molecules.dropdown>2 -
<x-molecules.feedback-alert>18 -
<x-molecules.footer-socials>1 -
<x-molecules.inputs.password-control>2 -
<x-molecules.pill-item>1 -
<x-molecules.relation-badge>5 -
<x-molecules.tab-item>1 -
<x-molecules.tabs-navigation>3
Organismi
4-
<x-organisms.content-card>3 -
<x-organisms.hero-character>3 -
<x-organisms.pill-list>3 -
<x-organisms.skill-credential-card>2
Template
1-
<x-templates.show-page>5