Pro statistiku návštěvnosti používáme Google Analytics. Analytické cookies se nastaví, jen pokud je přijmete. Bez souhlasu se statistiky odhadují z signálů bez cookies. Zásady používání cookies.
PDS · Design System
PDS je vlastní designový jazyk Protocore, vytažený z produktů, které stavíme, a prověřený v produkci. Dark-first, řízený tokeny a zdokumentovaný od začátku do konce — stejné komponenty, které vykreslují naše produkty i klientské dashboardy, zabalené tak, aby je tým zavedl za odpoledne.
Funkce
Od primitiv po kompozice celých stránek — 101 komponent, z nichž každá vznikla extrakcí z produktu, který dodáváme, ne návrhem v izolaci. Pokud je komponenta v PDS, už odvedla skutečnou práci: běží na ní tento web, produktová dema i naše klientské dashboardy.
Barva, typografie, prostor i pohyb vycházejí z jedné vrstvy tokenů. Změníte token a všechny komponenty ho následují — žádné přepisy po komponentách, žádný drift mezi produkty.
Tmavé a světlé téma, pět akcentních barev, vše řízené stejnými tokeny. Varianta značky je výměna tokenů, ne fork — každý produkt rodiny se vykresluje ze stejného systému.
Kontrast, elevace i barvy se nejdřív dotahují na tmavém tématu; světlé z týchž tokenů vychází. Výsledkem je tmavý režim, který působí přirozeně, ne jako invertovaný.
Tlačítka, vstupy, selecty, přepínače, posuvníky i základ polí — včetně popisků, nápověd a chyb. Stavy jsou už navržené: focus, disabled, invalid i loading se chovají v každém produktu stejně.
Stacky, mřížky, oddělovače a obálky stránek skládají obrazovky bez ad hoc CSS. Největší komponenty jsou kompozice celých stránek — vzory hero, sekcí a patičky převzaté ze stránek, které dodáváme.
Hlavičky, záložky, drobečková navigace a menu s responzivním chováním i ovládáním z klávesnice už v sobě. Navigace na tomto webu je ta komponenta, ne její napodobenina.
Modály, sheety, drawery, popovery a tooltipy na jednom modelu vrstvení — zachycení fokusu, zavírání i skládání řeší centrálně a jednou provždy. Žádný produkt nemá vlastní aritmetiku z-indexů.
Tabulky, seznamy, statistické dlaždice, odznaky a časové osy pro produkty, které žijí z čísel. Hustotu operátorských konzolí napříč rodinou zajišťují právě tyto komponenty.
Toasty, bannery, prázdné stavy, ukazatele průběhu a skeletony — nevděčné stavy, které jsou navržené předem. Produkt postavený na PDS má promyšlenou odpověď pro načítání, prázdný obsah i selhání.
Editorská typografická škála s monospace popisky pro technický rejstřík — hlas, který znáte z každého povrchu Protocore. Škála jsou tokeny, takže ji produkty ladí, aniž by opustily systém.
Délky animací a easingy se dodávají jako tokeny s komponentami, které je už používají. Rozhraní se napříč produkty hýbou konzistentně, protože nikdo nenačasovává animace ručně.
Kontrast, stavy fokusu i ovládání z klávesnice jsou součástí komponent, ne domácí úkol. Nasaďte výchozí nastavení a přístupnost dostanete s ním.
Styly jsou statické CSS vyřešené při buildu — žádný runtime CSS-in-JS, nic se nepočítá v prohlížeči. Stylovací vrstva nepřidává na stránku žádný JavaScript.
Systém se dodává i jako čistý CSS balíček — tokeny a utility třídy bez nutnosti Reactu. Stránky renderované na serveru, e-maily i stacky bez Reactu čerpají ze stejného zdroje pravdy.
Tokeny se pro web exportují jako CSS proměnné, jako preset pro Tailwind a v nativních formátech pro mobilní platformy. Jedna definice značky, použitá všude, kde produkt běží.
Vrstva pro React obalí aplikaci providerem a zpřístupní tokeny přes hooky — komponenty čtou aktivní téma a akcent místo natvrdo zapsaných hodnot. Přepnutí tématu je změna stavu, ne nový build.
Stejný mechanismus, který dává PDS pět akcentů, dává whitelabel produktu jeho značku: vyměníte hodnoty tokenů, komponenty zůstanou. Každá whitelabel aplikace v rodině je důkazem, že to funguje.
Strojově čitelná mapa celého systému — komponent, tokenů i vzorů — publikovaná jako llms.txt. Nasměrujte na ni LLM a vygenerovaný kód použije skutečné komponenty PDS, místo aby vymýšlel jen věrohodně vypadající.
Server MCP zpřístupňuje systém přímo kódovacím agentům: komponenty, props i tokeny, na které se lze dotazovat, zatímco agent staví. Design systém odpovídá na otázky, místo aby se vkládal do promptů.
Každá komponenta má na pds.protocore.io živé ukázky, props i kód ke zkopírování. Dokumentace běží na samotném PDS — co čtete, to nasazujete.
PDS se dodává jako verzované balíčky se sémantickým verzováním a changelogy. Upgrady jsou promyšlené: tým přechází, kdy se rozhodne, a changelog říká přesně, co se změnilo.
Balíčky se instalují z privátního npm registru Protocore pomocí tokenu pro každý tým v .npmrc — standardní workflow npm omezené na licencované týmy. Žádné zipy v repozitáři, žádné instalace kopírováním.
Podepsaný licenční klíč se ověřuje lokálně — žádné phone-home, žádná síťová kontrola ve vašem buildu. Problémy s licencí se projeví jako varování při vývoji a produkční aplikaci nikdy nerozbijí.
PDS je proprietární a licencuje se po týmech. Požádejte o přístup a my vás zprovozníme — balíčky, dokumentace i zdroje tokenů — takže ho tým zvládne zavést za odpoledne.
FAQ
Na tým — ne na uživatele ani na projekt. Jedna licence pokrývá všechny, kdo s PDS v rámci týmu pracují: tokeny, komponenty i dokumentaci. Cena roste jen s počtem týmů, které ho nasadí, a whitelabel produkty, které pro vás vyvíjíme, na něm už běží.
Z privátního registru na npm.protocore.io. Přístupové údaje umožní vašemu buildu stahovat balíčky @protocore a tokeny i komponenty se pak instalují jako každá jiná závislost.
Tokeny jsou připravené pro web, .NET i nativní platformy, takže jedna barva nebo zaoblení znamenají totéž na každé platformě, kterou vydáváte. Komponenty jsou pro React a týmům mimo React slouží CSS vrstva nezávislá na frameworku, která nese stejné tokeny a třídy.
Dark-first a ve výchozím stavu přístupný — dvě témata, pět akcentů, vše řízené tokeny, s CSS bez runtime, takže stylování nestojí při načtení nic. Stejné komponenty vykreslují naše produkty i klientské dashboardy.
Je na to stavěný: mapa llms.txt a MCP server umožní agentům systém přečíst a správně s ním pracovat a pds.protocore.io nabízí živé ukázky, props a kód ke zkopírování pro každou komponentu i token.
Ceník
PDS se licencuje na tým, ne na uživatele ani na projekt — jedna licence pokrývá všechny, kdo s ním v daném týmu pracují: tokeny, komponenty i dokumentaci.
Začněte s jedním týmem a rozšiřujte na další, jak poroste adopce. Náklady určuje jen počet týmů, které na PDS stavějí, nic jiného.
Whitelabel produkty, které pro vás vyvíjíme, už na PDS běží — samostatná licence je určená týmům, které ho nasazují na vlastních produktech.
Licence se řídí počtem týmů, ne počtem lidí ani objemem využití. Požádejte o přístup a nacením ji podle týmů, které s ním budou pracovat.
Vyhodnoťte
Celý systém najdete na pds.protocore.io — živé ukázky, props a kód ke zkopírování pro každou komponentu i token.
Design tokeny pro web, .NET i nativní platformy, aby jedna barva nebo zaoblení znamenaly totéž na každé platformě, kterou vydáváte.
PDS se licencuje na tým — jedna licence pokrývá všechny, kdo s ním pracují: tokeny, komponenty i dokumentaci.
Přístupové údaje do privátního registru na npm.protocore.io, odkud váš build stahuje balíčky @protocore.
PDS je proprietární a licencuje se na tým. Požádejte o přístup a vše vám nastavíme.
Vše výše běží v produkčních demech, kterými vás rádi provedeme — samostatně, jako whitelabel, nebo jako jedna platforma. Řekněte nám, co stavíte, a ukážeme vám nejkratší cestu.
