Design system SaaS
Sistem desain yang diekstrak dari website software dan SaaS: aplikasi produktivitas, alat manajemen proyek, CRM, dan produk lain yang dijual sebagai layanan. Sebagian besar memadukan palet yang kalem dan satu warna aksen dengan skala tipografi yang jelas, sehingga cocok sebagai titik awal untuk dashboard atau halaman pemasaran produk.
3 contoh DESIGN.md di kategori ini, dari Figma, Linear dan Notion. Diekstrak dari halaman publik setiap situs, bukan pedoman brand resmi. Baru mengenal format ini? Baca apa itu DESIGN.md.
Figma
Situs pemasaran Figma menggunakan sistem monokrom hitam-putih yang tegas, berpusat pada font variabel figmaSans miliknya sendiri. Desainnya didorong oleh tipografi: judul display besar berukuran 88px/56px dengan letter-spacing negatif yang rapat, kontras dengan teks isi berbobot ringan 330. CTA memakai bentuk pill penuh (border-radius: 9999px) dengan latar hitam solid dan teks putih. Tata letaknya berbasis grid dengan lebar konten maksimum 1440px, padding vertikal bagian yang lapang 80px, dan kanvas putih yang bersih. Kedalaman bayangannya minim, berupa lapisan bayangan halus berbasis oklch. Aksen lavender/ungu (#cb9fd2) muncul pada banner footer. Secara keseluruhan, estetikanya tegas, tipografinya canggih, dan sangat menonjolkan identitas merek.
Linear
Sistem desain Linear mengusung gaya dark-first dan berkepadatan tinggi, dibuat untuk tim engineering. Palet permukaannya berpusat pada hitam pekat (#08090a, #0f1011) dengan lapisan abu-abu gelap yang berbeda-beda untuk membedakan sidebar, kartu, dan panel. Tipografinya hanya menggunakan Inter Variable dengan letter-spacing negatif yang presisi pada ukuran display, dan Berkeley Mono untuk kode inline. Bahasa radius-nya sengaja dibuat kecil (dominan 2–6px), sedangkan bentuk pill hanya dipakai untuk badge dan chip status. Elevasi dibentuk lewat border inset 1px yang halus dan bayangan tipis beropasitas rendah, bukan lapisan yang dramatis. Warna CTA utama adalah indigo khas Linear (#5e6ad2), digunakan pada tombol Sign Up dan tautan-tautan penting.
Notion
Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.
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.