Kami menggunakan Google Analytics untuk statistik lalu lintas. Cookie analitik hanya dipasang jika Anda menerimanya. Tanpa persetujuan, statistik diperkirakan dari sinyal tanpa cookie. Kebijakan Cookie.
PDS · Design System
PDS adalah bahasa desain milik Protocore, diekstrak dari produk yang kami bangun dan diperkuat di produksi. Dark-first, berbasis token, dan terdokumentasi menyeluruh — komponen yang sama yang merender produk dan dasbor klien kami, dikemas agar tim bisa mengadopsinya dalam satu sore.
Fitur
Dari primitif hingga komposisi halaman penuh — 101 komponen, masing-masing diekstrak dari produk yang kami rilis, bukan dirancang secara terpisah. Jika sebuah komponen ada di PDS, ia sudah terbukti bekerja: situs ini, demo produk, dan dasbor klien kami semuanya dirender dengannya.
Warna, tipografi, spasi, dan gerak berasal dari satu lapisan token. Ubah satu token dan semua komponen mengikuti — tanpa override per komponen, tanpa perbedaan antarproduk.
Satu tema gelap dan satu tema terang, lima warna aksen, semuanya digerakkan oleh token yang sama. Variasi merek cukup dengan menukar token, bukan fork — setiap produk dalam keluarga dirender dari sistem yang sama.
Kontras, elevasi, dan warna dirancang lebih dulu pada tema gelap; tema terang diturunkan dari token yang sama. Hasilnya mode gelap yang terasa native, bukan sekadar hasil pembalikan warna.
Tombol, input, select, switch, slider, dan kerangka field — termasuk label, petunjuk, dan pesan galat. Semua state sudah dirancang: focus, disabled, invalid, dan loading berperilaku sama di setiap produk.
Stack, grid, pemisah, dan shell halaman menyusun layar tanpa CSS ad-hoc. Komponen terbesar adalah komposisi halaman penuh — pola hero, section, dan footer yang diangkat dari halaman yang kami rilis.
Header, tab, breadcrumb, dan menu dengan perilaku responsif dan keyboard bawaan. Navigasi di situs ini adalah komponennya sendiri, bukan tiruannya.
Modal, sheet, drawer, popover, dan tooltip dalam satu model layering — focus trapping, penutupan, dan penumpukan ditangani sekali, secara terpusat. Tidak ada produk yang perlu menghitung z-index sendiri.
Tabel, daftar, stat tile, badge, dan timeline untuk produk yang hidup dari angka. Kepadatan konsol operator di seluruh keluarga produk dirender dari komponen-komponen ini.
Toast, banner, empty state, progress, dan skeleton — state yang kurang glamor, dirancang sejak awal. Produk yang dibangun di atas PDS punya jawaban yang matang untuk loading, kosong, dan gagal.
Skala tipografi editorial dengan label mono untuk register teknis — suara yang Anda lihat di setiap permukaan Protocore. Skalanya berupa token, sehingga produk bisa menyetelnya tanpa keluar dari sistem.
Durasi dan easing dikirim sebagai token bersama komponen yang sudah memakainya. Antarmuka bergerak konsisten di semua produk karena tak ada yang mengatur ulang timing animasi secara manual.
Kontras, focus state, dan perilaku keyboard sudah terintegrasi di dalam komponen, bukan dibiarkan sebagai pekerjaan rumah. Pakai default-nya dan aksesibilitas ikut serta.
Styling berupa CSS statis yang diselesaikan saat build — tanpa runtime CSS-in-JS, tanpa komputasi di browser. Lapisan styling tidak menambahkan JavaScript sama sekali ke halaman.
Sistem ini juga tersedia sebagai paket CSS biasa — token dan utility class tanpa perlu React. Halaman server-rendered, email, dan stack non-React mengambil dari satu sumber kebenaran yang sama.
Token diekspor untuk web sebagai variabel CSS, sebagai preset Tailwind, dan dalam format native untuk platform mobile. Satu definisi merek, dipakai di mana pun produk berjalan.
Lapisan React membungkus aplikasi dalam sebuah provider dan membuka token lewat hooks — komponen membaca tema dan aksen yang aktif alih-alih menanamkan nilai secara hardcode. Berganti tema cukup lewat state, tanpa rebuild.
Mekanisme yang sama yang memberi PDS lima aksen juga memberi produk whitelabel merek miliknya: ganti nilai token, pertahankan komponen. Setiap aplikasi whitelabel dalam keluarga ini membuktikan bahwa cara ini berhasil.
Peta sistem yang dapat dibaca mesin — komponen, token, pola — dipublikasikan sebagai llms.txt. Arahkan LLM ke sana dan kode yang dihasilkan memakai komponen PDS yang nyata, bukan karangan yang tampak meyakinkan.
Server MCP membuka sistem ini langsung ke coding agent: komponen, props, dan token, bisa dikueri saat agent membangun. Design system menjawab pertanyaan, bukan ditempelkan ke dalam prompt.
Setiap komponen ada di pds.protocore.io lengkap dengan contoh langsung, props, dan kode siap salin. Dokumentasinya dirender di PDS sendiri — yang Anda baca adalah yang Anda rilis.
PDS dirilis sebagai paket berversi dengan semantic versioning dan changelog. Upgrade dilakukan secara sengaja: tim berpindah saat memilih, dan changelog menjelaskan persis apa yang berubah.
Paket diinstal dari registry npm privat Protocore dengan token per tim di .npmrc — alur kerja npm standar, dibatasi untuk tim berlisensi. Tanpa berkas zip vendored, tanpa instalasi salin-tempel.
Kunci lisensi bertanda tangan diverifikasi secara lokal — tanpa phone-home, tanpa pemeriksaan jaringan di build Anda. Masalah lisensi muncul sebagai peringatan saat pengembangan dan tidak pernah merusak aplikasi produksi.
PDS bersifat proprietary dan dilisensikan per tim. Ajukan akses dan kami siapkan semuanya — paket, dokumentasi, dan sumber token — sehingga tim bisa mengadopsinya dalam satu sore.
FAQ
Per tim — bukan per pengguna atau per proyek. Satu lisensi mencakup semua orang yang membangun dengan PDS di dalam satu tim: token, komponen, dan dokumentasi. Biaya hanya bertambah sesuai jumlah tim yang mengadopsinya, tidak ada yang lain, dan produk whitelabel yang kami bangun untuk Anda sudah menggunakannya.
Dari registry privat di npm.protocore.io. Kredensial akses memungkinkan build Anda mengambil paket @protocore; setelah itu token dan komponen diinstal seperti dependensi biasa.
Token dirilis untuk web, .NET, dan native, sehingga satu warna atau radius bermakna sama di setiap platform yang Anda rilis. Komponen tersedia untuk React, dan lapisan CSS yang tidak terikat framework membawa token dan class yang sama bagi tim yang tidak memakai React.
Dark-first dan aksesibel secara bawaan — dua tema, lima aksen, semuanya digerakkan oleh token, dengan CSS zero-runtime sehingga styling tidak membebani waktu muat. Komponen yang sama menampilkan produk kami dan dasbor klien kami.
Memang dirancang untuk itu: peta llms.txt dan server MCP memungkinkan agen membaca sistem ini dan membangun dengannya secara benar, dan pds.protocore.io menyediakan contoh langsung, props, dan kode siap salin untuk setiap komponen dan token.
Harga
PDS dilisensikan per tim, bukan per pengguna atau per proyek — satu lisensi mencakup semua orang yang membangun dengannya di dalam tim tersebut: token, komponen, dan dokumentasi.
Mulai dari satu tim, lalu perluas ke tim lain seiring adopsi bertambah. Biaya hanya ditentukan oleh jumlah tim yang membangun di atas PDS, tidak ada yang lain.
Produk whitelabel yang kami bangun untuk Anda sudah menggunakan PDS — lisensi mandiri ditujukan bagi tim yang mengadopsinya untuk produk mereka sendiri.
Lisensi mengikuti jumlah tim, bukan jumlah karyawan atau pemakaian. Ajukan akses, dan kami akan menyesuaikannya dengan tim yang akan membangun dengannya.
Evaluasi
Jelajahi seluruh sistem di pds.protocore.io — contoh langsung, props, dan kode siap salin untuk setiap komponen dan token.
Design token yang dirilis untuk web, .NET, dan native, sehingga satu warna atau radius bermakna sama di setiap platform yang Anda rilis.
PDS dilisensikan per tim — satu lisensi mencakup semua orang yang membangun dengannya, baik token, komponen, maupun dokumentasi.
Kredensial untuk registry privat di npm.protocore.io guna menginstal paket @protocore yang dibutuhkan build Anda.
PDS bersifat proprietari dan dilisensikan per tim. Ajukan akses, kami yang menyiapkannya.
Semua yang di atas berjalan dalam demo production yang bisa kami tunjukkan langsung — mandiri, whitelabel, atau sebagai satu platform. Ceritakan apa yang sedang Anda bangun, dan kami tunjukkan jalur tercepatnya.
