Usiamo Google Analytics per le statistiche sul traffico. I cookie analitici vengono impostati solo se accetti. Senza consenso, le statistiche sono stimate a partire da segnali che non usano cookie. Cookie Policy.
PDS · Design System
PDS è il linguaggio di design di Protocore, estratto dai prodotti che costruiamo e collaudato in produzione. Dark-first, basato su token e documentato end to end: gli stessi componenti che realizzano i nostri prodotti e le dashboard dei clienti, pronti perché un team li adotti in un pomeriggio.
Funzionalità
Dalle primitive alle composizioni di pagina complete: 101 componenti, ciascuno estratto da un prodotto che rilasciamo davvero, non progettato in isolamento. Se un componente è in PDS, ha già lavorato sul serio: questo sito, le demo dei prodotti e le dashboard dei nostri clienti sono tutti costruiti su di esso.
Colore, tipografia, spazio e movimento derivano da un unico livello di token. Cambi un token e ogni componente si adegua: nessun override per singolo componente, nessuna deriva tra i prodotti.
Un tema scuro e uno chiaro, cinque colori d'accento, tutto guidato dagli stessi token. Variare il brand significa cambiare i token, non fare un fork: ogni prodotto della famiglia è reso dallo stesso sistema.
Contrasto, elevazione e colore vengono definiti prima sul tema scuro; il tema chiaro deriva dagli stessi token. Il risultato è una dark mode che sembra nativa, non invertita.
Pulsanti, input, select, switch, slider e struttura dei campi, con etichette, suggerimenti ed errori inclusi. Gli stati sono già progettati: focus, disabilitato, non valido e caricamento si comportano allo stesso modo in ogni prodotto.
Stack, griglie, divisori e shell di pagina compongono le schermate senza CSS ad hoc. I componenti più grandi sono vere composizioni di pagina: pattern di hero, sezione e footer ripresi dalle pagine che rilasciamo.
Header, tab, breadcrumb e menu con comportamento responsive e da tastiera già integrato. La navigazione di questo sito è il componente, non un'imitazione.
Modali, sheet, drawer, popover e tooltip su un unico modello di stratificazione: focus trapping, chiusura e sovrapposizione gestiti una volta sola, in modo centralizzato. Nessun prodotto si porta dietro la sua aritmetica di z-index.
Tabelle, liste, stat tile, badge e timeline per prodotti che vivono di numeri. La densità delle console operative di tutta la famiglia nasce da questi componenti.
Toast, banner, stati vuoti, indicatori di avanzamento e skeleton: gli stati meno appariscenti, progettati fin dall'inizio. Un prodotto costruito su PDS ha una risposta ponderata per caricamento, vuoto ed errore.
Una scala tipografica editoriale con etichette mono per il registro tecnico: la voce che si riconosce in ogni superficie Protocore. La scala è fatta di token, quindi i prodotti la regolano senza uscire dal sistema.
Durate e curve di easing sono distribuite come token, con i componenti che le usano già. Le interfacce si muovono in modo coerente tra i prodotti perché nessuno ritocca a mano i tempi di un'animazione.
Contrasto, stati di focus e comportamento da tastiera sono integrati nei componenti, non lasciati come esercizio. Rilascia le impostazioni predefinite e l'accessibilità arriva con loro.
Gli stili sono CSS statico risolto in fase di build: nessun runtime CSS-in-JS, nulla calcolato nel browser. Il livello di stile non aggiunge JavaScript alla pagina.
Il sistema è disponibile anche come semplice pacchetto CSS: token e classi utility, senza bisogno di React. Pagine renderizzate lato server, email e stack non React attingono alla stessa fonte di verità.
I token vengono esportati per il web come variabili CSS, come preset Tailwind e in formati nativi per le piattaforme mobile. Un'unica definizione del brand, usata ovunque giri il prodotto.
Il livello React avvolge le app in un provider ed espone i token tramite hook: i componenti leggono il tema e l'accento attivi invece di avere valori fissi nel codice. Cambiare tema è questione di stato, non di rebuild.
Lo stesso meccanismo che dà a PDS cinque accenti dà a un prodotto whitelabel il suo brand: si cambiano i valori dei token e si tengono i componenti. Ogni app whitelabel della famiglia ne è la prova.
Una mappa leggibile dalle macchine dell'intero sistema — componenti, token, pattern — pubblicata come llms.txt. Punta un LLM su di essa e il codice generato usa componenti PDS reali invece di inventarne di plausibili.
Un server MCP espone il sistema direttamente agli agenti di coding: componenti, prop e token, interrogabili mentre l'agente costruisce. Il design system risponde alle domande invece di essere incollato nei prompt.
Ogni componente vive su pds.protocore.io con esempi live, prop e codice da copiare. La documentazione è costruita su PDS stesso: quello che leggi è quello che rilasci.
PDS viene distribuito in pacchetti versionati, con versioni semantiche e changelog. Gli aggiornamenti sono una scelta: un team passa quando decide lui, e il changelog dice esattamente cosa è cambiato.
I pacchetti si installano dal registry npm privato di Protocore con un token per team in .npmrc: il flusso npm standard, riservato ai team con licenza. Niente file zip copiati nel repo, niente installazioni a colpi di copia e incolla.
Una chiave di licenza firmata si verifica in locale: nessun phone-home, nessun controllo di rete nella tua build. I problemi di licenza emergono come avvisi in fase di sviluppo e non bloccano mai un'app in produzione.
PDS è proprietario e concesso in licenza per team. Richiedi l'accesso e ti configuriamo tutto — pacchetti, documentazione e sorgenti dei token — così un team può adottarlo in un pomeriggio.
FAQ
Per team, non per utente né per progetto. Una sola licenza copre tutti coloro che lavorano con PDS all'interno di un team: token, componenti e documentazione. Il costo dipende solo dal numero di team che lo adottano, e i prodotti whitelabel che realizziamo per te lo usano già.
Dal registry privato su npm.protocore.io. Le credenziali di accesso permettono alla tua build di scaricare i pacchetti @protocore; da lì token e componenti si installano come qualsiasi altra dipendenza.
I token sono generati per web, .NET e nativo, così un colore o un raggio significa la stessa cosa su ogni piattaforma che rilasci. I componenti sono disponibili per React, e un livello CSS indipendente dal framework offre gli stessi token e le stesse classi ai team che non usano React.
Dark-first e accessibile per impostazione predefinita: due temi, cinque accenti, tutto guidato dai token, con CSS a zero runtime perché lo stile non pesi al caricamento. Gli stessi componenti alimentano i nostri prodotti e le dashboard dei nostri clienti.
È pensato per questo: una mappa llms.txt e un server MCP permettono agli agenti di leggere il sistema e di costruire correttamente con esso, mentre pds.protocore.io offre esempi live, props e codice da copiare per ogni componente e token.
Prezzi
PDS è concesso in licenza per team, non per utente né per progetto: una sola licenza copre tutti coloro che ci lavorano all'interno del team — token, componenti e documentazione.
Parti da un team e estendi la licenza ad altri man mano che l'adozione cresce. Il costo dipende solo dal numero di team che sviluppano su PDS, nient'altro.
I prodotti whitelabel che realizziamo per te usano già PDS: la licenza standalone è pensata per i team che lo adottano sui propri prodotti.
La licenza segue i team, non il numero di persone né l'utilizzo. Richiedi l'accesso e la definiremo sui team che lo useranno.
Valuta
Esplora il sistema completo su pds.protocore.io: esempi live, props e codice da copiare per ogni componente e token.
I design token generati per web, .NET e nativo, così un colore o un raggio significa la stessa cosa su ogni piattaforma che rilasci.
PDS è concesso in licenza per team: una sola licenza copre tutti coloro che lo usano, token, componenti e documentazione compresi.
Credenziali per il registry privato su npm.protocore.io, per installare i pacchetti @protocore da cui dipende la tua build.
PDS è proprietario e con licenza per team. Richiedi l'accesso e lo configuriamo insieme.
Tutto ciò che vedi sopra gira in demo di produzione che possiamo mostrarti dal vivo: standalone, whitelabel o come un'unica piattaforma. Raccontaci cosa stai costruendo e ti mostreremo la via più breve per arrivarci.
