Sistemul de design din spatele a tot ce livrăm.
PDS este propriul limbaj de design al Protocore, extras din produsele pe care le construim și călit în producție. Dark-first, bazat pe tokenuri și documentat cap-coadă — aceleași componente care randează acest site și dashboard-urile clienților noștri, împachetate astfel încât o echipă să le adopte într-o după-amiază.
101 componente de producție
De la primitive până la compoziții complete de pagină — 101 componente, fiecare extrasă dintr-un produs pe care îl livrăm, nu proiectată în izolare. Dacă o componentă e în PDS, a făcut deja muncă adevărată: acest site, demo-urile de produs și dashboard-urile clienților noștri se randează toate pe ea.
Tokenuri de design
Culoarea, tipografia, spațierea și mișcarea se rezolvă dintr-un singur strat de tokenuri. Schimbi un token și fiecare componentă îl urmează — fără suprascrieri per componentă, fără derivă între produse.
Două teme, cinci accente
O temă întunecată și una luminoasă, cinci culori de accent, toate conduse de aceleași tokenuri. Variația de brand e un schimb de tokenuri, nu un fork — fiecare produs din familie se randează din același sistem.
Dark-first
Contrastul, elevația și culoarea sunt lucrate întâi pe tema întunecată; tema luminoasă derivă din aceleași tokenuri. Rezultatul e un dark mode care se simte nativ, nu inversat.
Primitive de formular
Butoane, inputuri, selecturi, switch-uri, slidere și schelăria câmpurilor — etichete, indicii și erori incluse. Stările sunt deja proiectate: focus, dezactivat, invalid și în încărcare se comportă la fel în fiecare produs.
Layout și compoziție
Stive, grile, separatoare și schelete de pagină compun ecrane fără CSS ad-hoc. Cele mai mari componente sunt compoziții complete de pagină — tipare de hero, secțiune și footer ridicate din pagini pe care le livrăm.
Navigație
Headere, taburi, breadcrumb-uri și meniuri, cu comportamentul responsive și de tastatură construit înăuntru. Navigația de pe acest site este componenta, nu o imitație a ei.
Overlay-uri
Modale, sheet-uri, drawere, popovere și tooltip-uri pe un singur model de stratificare — captarea focusului, închiderea și stivuirea rezolvate o singură dată, central. Niciun produs nu-și livrează propria aritmetică de z-index.
Afișare de date
Tabele, liste, plăci de statistici, badge-uri și cronologii pentru produse care trăiesc din numere. Consolele de operare din familie își randează densitatea din aceste componente.
Feedback și status
Toast-uri, bannere, stări goale, progres și schelete — stările nespectaculoase, proiectate din start. Un produs construit pe PDS are un răspuns gândit pentru încărcare, gol și eșuat.
Tipografie
O scară tipografică editorială, cu etichete mono pentru registrul tehnic — vocea pe care o vezi pe fiecare suprafață Protocore. Scara e din tokenuri, așa că produsele o acordează fără să iasă din sistem.
Mișcare
Duratele și easing-urile se livrează ca tokenuri, cu componentele deja folosindu-le. Interfețele se mișcă la fel în toate produsele, pentru că nimeni nu re-cronometrează o animație de mână.
Accesibil implicit
Contrastul, stările de focus și comportamentul la tastatură sunt construite în componente, nu lăsate ca exercițiu. Livrezi setările implicite și accesibilitatea vine odată cu ele.
CSS fără runtime
Stilizarea e CSS static rezolvat la build — fără runtime de CSS-in-JS, nimic calculat în browser. Stratul de stilizare adaugă zero JavaScript paginii.
Strat CSS agnostic de framework
Sistemul se livrează și ca pachet CSS simplu — tokenuri și clase utilitare, fără React necesar. Paginile randate pe server, emailurile și stack-urile non-React trag din aceeași sursă de adevăr.
Exporturi de tokenuri per stack
Tokenurile se exportă pentru web ca variabile CSS, ca preset Tailwind și în formate native pentru platformele mobile. O singură definiție a brandului, consumată oriunde rulează produsul.
Theme provider și hook-uri
Stratul React înfășoară aplicațiile într-un provider și expune tokenurile prin hook-uri — componentele citesc tema și accentul active în loc să scrie valori în cod. Schimbarea temei e stare, nu un rebuild.
Theming whitelabel
Același mecanism care îi dă lui PDS cinci accente îi dă unui produs whitelabel brandul: schimbi valorile tokenurilor, păstrezi componentele. Fiecare aplicație whitelabel din familie e dovada că funcționează.
Harta llms.txt
O hartă a întregului sistem, lizibilă de mașini — componente, tokenuri, tipare — publicată ca llms.txt. Îndrepți un LLM către ea și codul generat folosește componente PDS reale în loc să inventeze unele plauzibile.
Server MCP
Un server MCP expune sistemul direct agenților de cod: componente, props și tokenuri, interogabile în timp ce agentul construiește. Sistemul de design răspunde la întrebări în loc să fie lipit în prompturi.
Documentat cap-coadă
Fiecare componentă trăiește la pds.protocore.io, cu exemple live, props și cod de copiat. Documentația se randează chiar pe PDS — ce citești e ce livrezi.
Lansări versionate
PDS se livrează ca pachete versionate, cu versiuni semantice și changelog-uri. Upgrade-urile sunt deliberate: o echipă se mută când alege ea, iar changelog-ul spune exact ce s-a mutat.
Registru privat
Pachetele se instalează din registrul npm privat al Protocore, cu un token per echipă în .npmrc — fluxul npm standard, restrâns la echipele licențiate. Fără arhive zip livrate manual, fără instalări prin copy-paste.
Chei de licență offline
O cheie de licență semnată se verifică local — fără phone-home, fără verificare de rețea în build-ul tău. Problemele de licențiere apar ca avertismente în timpul dezvoltării și nu strică niciodată o aplicație în producție.
Licențiat per echipă
PDS este proprietar și licențiat per echipă. Soliciți acces și te configurăm — pachete, documentație și surse de tokenuri — astfel încât o echipă să îl adopte într-o după-amiază.
Sistemul de design, pe scurt.
Per echipă — nu per scaun sau per proiect. O singură licență acoperă pe toți cei care construiesc cu PDS într-o echipă: token-uri, componente și documentația. Costul crește cu numărul de echipe care îl adoptă, nimic altceva, iar produsele whitelabel pe care le construim pentru tine rulează deja pe el.
Din registrul privat de la npm.protocore.io. Credențialele de acces lasă build-ul tău să tragă pachetele @protocore; de acolo, token-urile și componentele se instalează ca orice dependență.
Token-urile sunt emise pentru web, .NET și nativ, așa că o culoare sau un colț înseamnă același lucru pe fiecare platformă pe care livrezi. Componentele vin pentru React, iar un strat CSS agnostic de cadru poartă aceleași token-uri și clase pentru echipele care nu sunt pe React.
Întunecat-întâi și accesibil implicit — două teme, cinci accente, toate conduse de token-uri, cu CSS fără cost la runtime, așa că stilizarea nu costă nimic la încărcare. Aceleași componente redau acest site și panourile clienților noștri.
E construit pentru asta: o hartă llms.txt și un server MCP lasă agenții să citească sistemul și să construiască corect cu el, iar pds.protocore.io poartă exemple live, proprietăți și cod copy-paste pentru fiecare componentă și token.
Cum se licențiază PDS.
Licență per echipă
PDS se licențiază per echipă, nu per utilizator sau per proiect — o licență acoperă pe toți cei care construiesc cu el în acea echipă: tokenuri, componente și documentația.
Crește cu organizația ta
Pornești cu o echipă și extinzi pe măsură ce crește adopția. Ce mișcă costul e numărul de echipe care construiesc pe PDS, nimic altceva.
În interiorul unui build Protocore
Produsele whitelabel pe care le construim pentru tine se randează deja pe PDS — licența standalone e pentru echipele care îl adoptă pe propriile produse.
Licențierea urmează echipele, nu numărul de utilizatori sau consumul. Solicită acces și îl contractăm pentru echipele care vor construi cu el.
Construiește un ecran cu PDS.
Documentație live
Explorează întregul sistem la pds.protocore.io — exemple live, props și cod de copiat pentru fiecare componentă și token.
Pachete de tokenuri
Tokenurile de design emise pentru web, .NET și native, ca o culoare sau un radius să însemne același lucru pe fiecare platformă pe care o livrezi.
Licență per echipă
PDS e licențiat per echipă — o licență acoperă pe toți cei care construiesc cu el, tokenuri, componente și documentație deopotrivă.
Acces la registru
Credențiale pentru registrul privat de la npm.protocore.io ca să instalezi pachetele @protocore din care se alimentează build-ul tău.
PDS este proprietar și licențiat per echipă. Solicită acces și te configurăm.
Alege un produs. Sau ia nucleul.
Tot ce vezi mai sus rulează în demo-uri de producție prin care te putem plimba — standalone, whitelabel sau ca o singură platformă. Spune-ne ce construiești și îți arătăm cel mai scurt drum până acolo.
Contactează-ne