Χρησιμοποιούμε το Google Analytics για στατιστικά επισκεψιμότητας. Τα cookies analytics ορίζονται μόνο αν αποδεχτείτε. Χωρίς συγκατάθεση, τα στατιστικά εκτιμώνται από σήματα χωρίς cookies. Πολιτική Cookies.
PDS · Design System
Το PDS είναι η δική μας γλώσσα σχεδίασης, εξαγμένη από τα προϊόντα που χτίζουμε και δοκιμασμένη στην παραγωγή. Dark-first, βασισμένη σε tokens και τεκμηριωμένη από άκρη σε άκρη — τα ίδια components που αποδίδουν τα προϊόντα και τα dashboards των πελατών μας, έτοιμα ώστε μια ομάδα να τα υιοθετήσει σε ένα απόγευμα.
Λειτουργίες
Από primitives έως πλήρεις συνθέσεις σελίδων — 101 components, καθένα προερχόμενο από ένα προϊόν που ήδη διαθέτουμε, και όχι σχεδιασμένο εν κενώ. Αν ένα component υπάρχει στο PDS, έχει ήδη κάνει πραγματική δουλειά: αυτός ο ιστότοπος, τα demos των προϊόντων και τα dashboards των πελατών μας βασίζονται σε αυτό.
Χρώμα, τυπογραφία, χώρος και κίνηση προκύπτουν από ένα ενιαίο επίπεδο tokens. Αλλάζετε ένα token και όλα τα components ακολουθούν — χωρίς overrides ανά component, χωρίς απόκλιση ανάμεσα στα προϊόντα.
Ένα σκούρο και ένα ανοιχτό θέμα, πέντε χρώματα accent, όλα καθοδηγούμενα από τα ίδια tokens. Η παραλλαγή του brand είναι αλλαγή tokens, όχι fork — κάθε προϊόν της οικογένειας αποδίδεται από το ίδιο σύστημα.
Η αντίθεση, το elevation και το χρώμα επεξεργάζονται πρώτα στο σκούρο θέμα· το ανοιχτό θέμα προκύπτει από τα ίδια tokens. Το αποτέλεσμα είναι ένα dark mode που μοιάζει εγγενές, όχι αντεστραμμένο.
Κουμπιά, πεδία εισαγωγής, selects, switches, sliders και σκελετός πεδίων — με labels, υποδείξεις και σφάλματα. Οι καταστάσεις είναι ήδη σχεδιασμένες: focus, disabled, invalid και loading συμπεριφέρονται ίδια σε κάθε προϊόν.
Stacks, grids, διαχωριστικά και page shells συνθέτουν οθόνες χωρίς ad-hoc CSS. Τα μεγαλύτερα components είναι πλήρεις συνθέσεις σελίδας — μοτίβα hero, section και footer που προέρχονται από σελίδες που ήδη διαθέτουμε.
Headers, tabs, breadcrumbs και μενού με ενσωματωμένη responsive και πληκτρολογιακή συμπεριφορά. Η πλοήγηση σε αυτόν τον ιστότοπο είναι το ίδιο το component, όχι μίμησή του.
Modals, sheets, drawers, popovers και tooltips σε ένα ενιαίο μοντέλο στρωμάτωσης — το focus trapping, το κλείσιμο και η στοίβαξη αντιμετωπίζονται μία φορά, κεντρικά. Κανένα προϊόν δεν έχει δικό του z-index αριθμητικό παιχνίδι.
Πίνακες, λίστες, stat tiles, badges και timelines για προϊόντα που ζουν πάνω σε αριθμούς. Οι κονσόλες operators σε όλη την οικογένεια αντλούν την πυκνότητά τους από αυτά τα components.
Toasts, banners, κενές καταστάσεις, progress και skeletons — οι λιγότερο εντυπωσιακές καταστάσεις, σχεδιασμένες εξαρχής. Ένα προϊόν χτισμένο στο PDS έχει μελετημένη απάντηση για φόρτωση, κενό και αποτυχία.
Μια editorial κλίμακα τυπογραφίας με mono labels για το τεχνικό ύφος — η φωνή που βλέπετε σε κάθε επιφάνεια του Protocore. Η κλίμακα είναι tokens, οπότε τα προϊόντα τη ρυθμίζουν χωρίς να βγαίνουν από το σύστημα.
Οι διάρκειες και τα easings διατίθενται ως tokens, με τα components να τα χρησιμοποιούν ήδη. Τα interfaces κινούνται με συνέπεια σε όλα τα προϊόντα, επειδή κανείς δεν ξαναρυθμίζει χειροκίνητα ένα animation.
Η αντίθεση, οι καταστάσεις focus και η πληκτρολογιακή συμπεριφορά είναι ενσωματωμένες στα components, όχι αφημένες ως άσκηση. Κάντε ship τις προεπιλογές και η προσβασιμότητα έρχεται μαζί τους.
Το styling είναι στατικό CSS που επιλύεται στο build — χωρίς CSS-in-JS runtime, τίποτα δεν υπολογίζεται στον browser. Το επίπεδο styling προσθέτει μηδέν JavaScript στη σελίδα.
Το σύστημα διατίθεται και ως απλό πακέτο CSS — tokens και utility classes χωρίς να απαιτείται React. Σελίδες server-rendered, emails και stacks χωρίς React αντλούν από την ίδια πηγή αλήθειας.
Τα tokens εξάγονται για το web ως CSS variables, ως Tailwind preset και σε native formats για mobile πλατφόρμες. Ένας ορισμός του brand, που χρησιμοποιείται παντού όπου τρέχει το προϊόν.
Το επίπεδο React τυλίγει τις εφαρμογές σε έναν provider και εκθέτει τα tokens μέσω hooks — τα components διαβάζουν το ενεργό θέμα και accent αντί να έχουν τιμές hardcoded. Η αλλαγή θέματος είναι state, όχι rebuild.
Ο ίδιος μηχανισμός που δίνει στο PDS πέντε accents δίνει σε ένα whitelabel προϊόν το brand του: αλλάζετε τις τιμές των tokens, κρατάτε τα components. Κάθε whitelabel εφαρμογή της οικογένειας είναι απόδειξη ότι λειτουργεί.
Ένας machine-readable χάρτης ολόκληρου του συστήματος — components, tokens, patterns — δημοσιευμένος ως llms.txt. Δείξτε τον σε ένα LLM και ο κώδικας που παράγει χρησιμοποιεί πραγματικά components του PDS αντί να επινοεί πιθανοφανή.
Ένας MCP server εκθέτει το σύστημα απευθείας σε coding agents: components, props και tokens, με δυνατότητα ερωτημάτων την ώρα που ο agent χτίζει. Το design system απαντά σε ερωτήσεις αντί να επικολλάται σε prompts.
Κάθε component βρίσκεται στο pds.protocore.io με live παραδείγματα, props και κώδικα έτοιμο για αντιγραφή. Η τεκμηρίωση αποδίδεται στο ίδιο το PDS — ό,τι διαβάζετε είναι ό,τι κάνετε ship.
Το PDS διατίθεται ως πακέτα με semantic versions και changelogs. Οι αναβαθμίσεις γίνονται συνειδητά: μια ομάδα μετακινείται όποτε επιλέξει, και το changelog λέει ακριβώς τι άλλαξε.
Τα πακέτα εγκαθίστανται από το private npm registry της Protocore με token ανά ομάδα στο .npmrc — η τυπική ροή του npm, περιορισμένη σε ομάδες με άδεια. Χωρίς zip αρχεία, χωρίς εγκαταστάσεις με copy-paste.
Ένα υπογεγραμμένο license key επαληθεύεται τοπικά — χωρίς phone-home, χωρίς έλεγχο δικτύου στο build σας. Τα ζητήματα αδειοδότησης εμφανίζονται ως προειδοποιήσεις κατά την ανάπτυξη και δεν χαλούν ποτέ μια εφαρμογή παραγωγής.
Το PDS είναι ιδιόκτητο λογισμικό και αδειοδοτείται ανά ομάδα. Ζητήστε πρόσβαση και σας στήνουμε — πακέτα, τεκμηρίωση και πηγές tokens — ώστε μια ομάδα να το υιοθετήσει μέσα σε ένα απόγευμα.
FAQ
Ανά ομάδα — όχι ανά χρήστη ή ανά έργο. Μία άδεια καλύπτει όλους όσους χτίζουν με το PDS μέσα σε μια ομάδα: tokens, components και τεκμηρίωση. Το κόστος αυξάνεται μόνο με τον αριθμό των ομάδων που το υιοθετούν, ενώ τα whitelabel προϊόντα που χτίζουμε για εσάς τρέχουν ήδη πάνω του.
Από το ιδιωτικό registry στο npm.protocore.io. Τα διαπιστευτήρια πρόσβασης επιτρέπουν στο build σας να κατεβάζει τα πακέτα @protocore· από εκεί, τα tokens και τα components εγκαθίστανται όπως κάθε άλλο dependency.
Τα tokens παράγονται για web, .NET και native, ώστε ένα χρώμα ή μια καμπυλότητα να σημαίνει το ίδιο πράγμα σε κάθε πλατφόρμα που υποστηρίζετε. Τα components διατίθενται για React, ενώ ένα CSS layer ανεξάρτητο από framework παρέχει τα ίδια tokens και classes για ομάδες που δεν χρησιμοποιούν React.
Dark-first και προσβάσιμο από προεπιλογή — δύο θέματα, πέντε χρώματα έμφασης, όλα βασισμένα σε tokens, με zero-runtime CSS ώστε το styling να μην επιβαρύνει τη φόρτωση. Τα ίδια components τρέχουν στα προϊόντα μας και στα dashboards των πελατών μας.
Έχει σχεδιαστεί γι' αυτό: ένας χάρτης llms.txt και ένας MCP server επιτρέπουν στους agents να διαβάζουν το σύστημα και να χτίζουν σωστά με αυτό, ενώ το pds.protocore.io περιέχει ζωντανά παραδείγματα, props και κώδικα έτοιμο για αντιγραφή για κάθε component και token.
Τιμολόγηση
Το PDS αδειοδοτείται ανά ομάδα, όχι ανά χρήστη ή ανά έργο — μία άδεια καλύπτει όλους όσους χτίζουν με αυτό μέσα στην ομάδα: tokens, components και τεκμηρίωση.
Ξεκινήστε με μία ομάδα και επεκτείνετε σε περισσότερες όσο αυξάνεται η υιοθέτηση. Το κόστος καθορίζεται μόνο από τον αριθμό των ομάδων που χτίζουν με το PDS.
Τα whitelabel προϊόντα που χτίζουμε για εσάς τρέχουν ήδη πάνω στο PDS — η αυτόνομη άδεια απευθύνεται σε ομάδες που το υιοθετούν στα δικά τους προϊόντα.
Η αδειοδότηση ακολουθεί τις ομάδες, όχι το προσωπικό ή τη χρήση. Ζητήστε πρόσβαση και θα την οριοθετήσουμε στις ομάδες που θα χτίσουν με το PDS.
Αξιολόγηση
Εξερευνήστε ολόκληρο το σύστημα στο pds.protocore.io — ζωντανά παραδείγματα, props και κώδικας έτοιμος για αντιγραφή για κάθε component και token.
Τα design tokens παράγονται για web, .NET και native, ώστε ένα χρώμα ή μια καμπυλότητα να σημαίνει το ίδιο πράγμα σε κάθε πλατφόρμα που υποστηρίζετε.
Το PDS αδειοδοτείται ανά ομάδα — μία άδεια καλύπτει όλους όσους χτίζουν με αυτό, τόσο tokens και components όσο και τεκμηρίωση.
Διαπιστευτήρια για το ιδιωτικό registry στο npm.protocore.io, ώστε να εγκαθιστάτε τα πακέτα @protocore που χρειάζεται το build σας.
Το PDS είναι αποκλειστικό λογισμικό και αδειοδοτείται ανά ομάδα. Ζητήστε πρόσβαση και θα το στήσουμε για εσάς.
Όλα τα παραπάνω τρέχουν σε demos παραγωγής που μπορούμε να σας δείξουμε — αυτόνομα, whitelabel ή ως μία πλατφόρμα. Πείτε μας τι χτίζετε και θα σας δείξουμε τον συντομότερο δρόμο.
