Design system alat developer
Sistem desain yang diekstrak dari website alat developer dan infrastruktur: hosting, database, API, IDE, dan produk DevOps. Banyak yang mengandalkan permukaan gelap, aksen monospace, dan blok kode yang diperlakukan sebagai komponen utama, dengan tipografi yang rapat dan teknis.
3 contoh DESIGN.md di kategori ini, dari Neon, Railway dan Supabase. Diekstrak dari halaman publik setiap situs, bukan pedoman brand resmi. Baru mengenal format ini? Baca apa itu DESIGN.md.
Neon
Sistem desain Neon adalah brand developer yang mengutamakan mode gelap, dibangun di atas kanvas hampir hitam (#000000, #18191b) dengan warna primer hijau neon yang mencolok (#00e599) dan hijau tengah sebagai pendukung (#34d59a). Sistem tipografinya memadukan Inter untuk UI dan body teks dengan GeistMono untuk kode dan data, keduanya menggunakan letter-spacing negatif yang rapat. Spasi mengikuti grid dasar 4px. Border radius dibuat seragam dan minimal, yaitu 4px. Elevasi dibentuk melalui kontras border, bukan bayangan, dengan satu drop-shadow ambient yang digunakan secukupnya. Bagian hero menampilkan latar visualisasi data animasi yang memenuhi lebar layar, yang memperkuat identitas brand Neon sebagai produk database dan infrastruktur.
Railway
Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.
Supabase
Supabase menggunakan sistem desain yang mengutamakan tema gelap, bertumpu pada latar belakang hampir hitam pekat (oklch ~0.19) dengan aksen hijau cerah sebagai warna merek (#3ecf8e / #3fcf8e). Tata letaknya tersusun dalam grid kartu fitur yang responsif, dengan Manrope untuk judul display dan Inter untuk teks badan serta elemen antarmuka. Source Code Pro digunakan untuk semua konteks monospace dan kode. Sistem warnanya dibangun di atas custom property oklch dengan penamaan semantik. Kartu memakai radius 12px dengan perlakuan border yang halus, tombol memakai radius 6–8px, dan kepadatan keseluruhannya sedang dengan grid spasi dasar 8px.
Situs yang Anda cari tidak ada?
Tempel URL apa pun untuk mendapatkan DESIGN.md dari website apa pun. Warna, tipografi, spacing, dan token, siap untuk workflow AI Anda.