Na štatistiky návštevnosti používame Google Analytics. Analytické cookies nastavíme, iba ak ich prijmete. Bez súhlasu sa štatistiky odhadujú z signálov bez cookies. Zásady používania cookies.
PDS · Design System
PDS je vlastný dizajnový jazyk Protocore, vyňatý z produktov, ktoré staviame, a overený v produkcii. Dark-first, riadený tokenmi a zdokumentovaný od začiatku do konca — tie isté komponenty, ktoré vykresľujú naše produkty aj klientske dashboardy, zabalené tak, aby ich tím nasadil za popoludnie.
Funkcie
Od primitív až po kompozície celých stránok — 101 komponentov, každý vyňatý z produktu, ktorý nasadzujeme, nie navrhnutý v izolácii. Ak je komponent v PDS, už odviedol skutočnú prácu: vykresľuje sa na ňom tento web, produktové ukážky aj naše klientske dashboardy.
Farba, typografia, rozostupy a pohyb vychádzajú z jednej vrstvy tokenov. Zmeňte token a všetky komponenty ho nasledujú — žiadne prepisovanie po komponentoch, žiadny drift medzi produktmi.
Tmavá a svetlá téma, päť akcentových farieb, všetko riadené tými istými tokenmi. Variácia značky je výmena tokenov, nie fork — každý produkt rodiny sa vykresľuje z rovnakého systému.
Kontrast, elevácia a farby sa najprv ladia na tmavej téme; svetlá téma sa odvodzuje z rovnakých tokenov. Výsledkom je tmavý režim, ktorý pôsobí prirodzene, nie ako invertovaný.
Tlačidlá, vstupy, selecty, prepínače, posuvníky a kostra polí — vrátane popisiek, nápovedí a chýb. Stavy sú už navrhnuté: focus, disabled, invalid aj loading sa správajú rovnako v každom produkte.
Stacky, mriežky, oddeľovače a kostry stránok skladajú obrazovky bez ad-hoc CSS. Najväčšie komponenty sú kompozície celých stránok — vzory hero, sekcií a pätičky prevzaté zo stránok, ktoré nasadzujeme.
Hlavičky, záložky, omrvinkové navigácie a menu s vstavaným responzívnym správaním aj ovládaním klávesnicou. Navigácia na tomto webe je ten komponent, nie jeho imitácia.
Modály, sheety, drawery, popovery a tooltipy na jednom modeli vrstvenia — zachytenie focusu, zatváranie a skladanie vrstiev vyriešené raz, centrálne. Žiadny produkt nemá vlastnú aritmetiku z-indexov.
Tabuľky, zoznamy, štatistické dlaždice, odznaky a časové osi pre produkty, ktoré žijú z čísel. Operátorské konzoly v celej rodine čerpajú svoju hustotu z týchto komponentov.
Toasty, bannery, prázdne stavy, progres a skeletony — nenápadné stavy navrhnuté vopred. Produkt postavený na PDS má premyslenú odpoveď pre načítanie, prázdny aj chybový stav.
Editoriálna typografická škála s mono popiskami pre technický register — hlas, ktorý vidíte na každom povrchu Protocore. Škála tvoria tokeny, takže ju produkty ladia bez opustenia systému.
Trvania a easingy sa dodávajú ako tokeny a komponenty ich už používajú. Rozhrania sa v produktoch hýbu konzistentne, pretože nikto nenastavuje časovanie animácií ručne.
Kontrast, stavy focusu a ovládanie klávesnicou sú súčasťou komponentov, nie cvičenie navyše. Nasaďte predvolené nastavenia a prístupnosť dostanete s nimi.
Štýlovanie je statické CSS vyhodnotené pri builde — žiadny CSS-in-JS runtime, nič sa nepočíta v prehliadači. Vrstva štýlov nepridáva na stránku žiadny JavaScript.
Systém sa dodáva aj ako čistý CSS balík — tokeny a utility triedy bez potreby Reactu. Stránky renderované na serveri, e-maily aj stacky bez Reactu čerpajú z rovnakého zdroja pravdy.
Tokeny sa exportujú pre web ako CSS premenné, ako preset pre Tailwind a v natívnych formátoch pre mobilné platformy. Jedna definícia značky, použitá všade, kde produkt beží.
Vrstva pre React obalí aplikácie providerom a sprístupní tokeny cez hooky — komponenty čítajú aktívnu tému a akcent namiesto pevne zadaných hodnôt. Prepnutie témy je stav, nie rebuild.
Ten istý mechanizmus, ktorý dáva PDS päť akcentov, dáva whitelabel produktu jeho značku: vymeníte hodnoty tokenov, komponenty zostanú. Každá whitelabel aplikácia v rodine je dôkazom, že to funguje.
Strojovo čitateľná mapa celého systému — komponentov, tokenov, vzorov — publikovaná ako llms.txt. Nasmerujte na ňu LLM a vygenerovaný kód použije skutočné komponenty PDS namiesto vymyslených, len vierohodne znejúcich.
MCP server sprístupňuje systém priamo kódovacím agentom: komponenty, props a tokeny, na ktoré sa dá pýtať počas práce agenta. Design systém odpovedá na otázky, namiesto aby sa vkladal do promptov.
Každý komponent nájdete na pds.protocore.io so živými ukážkami, props a kódom na skopírovanie. Dokumentácia sa vykresľuje na samotnom PDS — čo čítate, to nasadzujete.
PDS sa dodáva ako verzované balíky so sémantickými verziami a changelogmi. Upgrady sú vedomé: tím prechádza, keď sám chce, a changelog presne uvádza, čo sa zmenilo.
Balíky sa inštalujú z privátneho npm registry Protocore s tokenom pre každý tím v .npmrc — štandardný npm workflow, obmedzený na tímy s licenciou. Žiadne vendorované zip súbory, žiadne inštalácie kopírovaním.
Podpísaný licenčný kľúč sa overuje lokálne — bez phone-home, bez sieťovej kontroly vo vašom builde. Problémy s licenciou sa zobrazia ako upozornenia počas vývoja a produkčnú aplikáciu nikdy nezlomia.
PDS je proprietárny a licencuje sa na tím. Požiadajte o prístup a všetko vám nastavíme — balíky, dokumentáciu aj zdroje tokenov — aby ho tím mohol zaviesť za jedno popoludnie.
FAQ
Na tím — nie na používateľa ani na projekt. Jedna licencia pokrýva všetkých, ktorí s PDS v tíme pracujú: tokeny, komponenty aj dokumentáciu. Cena rastie iba s počtom tímov, ktoré ho nasadia, a whitelabel produkty, ktoré pre vás vyvíjame, na ňom už bežia.
Z privátneho registra na npm.protocore.io. Prístupové údaje umožnia vášmu buildu stiahnuť balíky @protocore; tokeny a komponenty sa potom inštalujú ako každá iná závislosť.
Tokeny sú pripravené pre web, .NET a natívne platformy, takže jedna farba či polomer znamenajú to isté na každej platforme. Komponenty sú pre React a CSS vrstva nezávislá od frameworku nesie rovnaké tokeny a triedy pre tímy mimo Reactu.
Dark-first a prístupný od základu — dve témy, päť akcentov, všetko riadené tokenmi, s CSS bez runtime, takže štýlovanie nič nestojí pri načítaní. Tie isté komponenty vykresľujú naše produkty aj klientske dashboardy.
Je na to stavaný: mapa llms.txt a MCP server umožňujú agentom systém prečítať a správne s ním stavať, a pds.protocore.io ponúka živé ukážky, props a kód na skopírovanie ku každému komponentu a tokenu.
Cenník
PDS sa licencuje na tím, nie na používateľa ani na projekt — jedna licencia pokrýva všetkých, ktorí s ním v danom tíme pracujú: tokeny, komponenty aj dokumentáciu.
Začnite s jedným tímom a rozširujte ďalej, ako porastie adopcia. O cene rozhoduje iba počet tímov, ktoré na PDS stavajú.
Whitelabel produkty, ktoré pre vás vyvíjame, už bežia na PDS — samostatná licencia je pre tímy, ktoré ho nasadzujú vo vlastných produktoch.
Licencia sa riadi tímami, nie počtom ľudí ani používaním. Požiadajte o prístup a dohodneme rozsah podľa tímov, ktoré s ním budú pracovať.
Posúďte
Prezrite si celý systém na pds.protocore.io — živé ukážky, props a kód na skopírovanie ku každému komponentu a tokenu.
Dizajnové tokeny pre web, .NET a natívne platformy, aby jedna farba či polomer znamenali to isté na každej platforme, ktorú vydávate.
PDS sa licencuje na tím — jedna licencia pokrýva všetkých, ktorí s ním pracujú, tokeny, komponenty aj dokumentáciu.
Prístupové údaje do privátneho registra na npm.protocore.io, z ktorého váš build inštaluje balíky @protocore.
PDS je proprietárny a licencuje sa podľa tímu. Požiadajte o prístup a všetko vám nastavíme.
Všetko vyššie beží v produkčných demách, cez ktoré vás radi prevedieme — samostatne, whitelabel alebo ako jedna platforma. Povedzte nám, čo staviate, a ukážeme vám najkratšiu cestu.
