Tidak punya desainer? Pinjam design system yang sudah teruji untuk aplikasi Anda

Cara memilih situs referensi#

Situs yang Anda pinjam menentukan sebagian besar nuansa aplikasi Anda, jadi luangkan sepuluh menit di sini. Referensi yang baik punya ciri-ciri ini:

• Jenis produk yang sama. Dashboard cocok meminjam dari dashboard lain, bukan dari toko fashion.
• Kepadatan yang serupa. Jika aplikasi Anda berisi formulir dan tabel, pilih situs dengan formulir dan tabel, bukan satu hero besar.
• Satu warna aksi yang jelas. Jika satu warna menandai apa yang bisa diklik, rebranding cukup dengan mengganti satu keluarga warna itu.
• Tipografi yang mudah dibaca. Buka situsnya di ponsel dan baca satu paragraf. Jika nyaman, skala tipografinya layak diambil.
• Terang atau gelap, sesuai keinginan Anda. Mengubah sistem yang dirancang gelap menjadi terang adalah desain ulang, bukan penyesuaian kecil.
• Tampilan yang bukan brand itu sendiri. Jika Anda bisa mengenali situsnya hanya dari warnanya, Anda harus mengubah terlalu banyak bagiannya.

Galeri DESIGN.md bisa difilter berdasarkan kategori, sehingga Anda bisa cepat membandingkan beberapa kandidat.

Langkah-langkah#

1. 1

   Pilih dua atau tiga situs kandidat

   Gunakan ciri-ciri di atas. Screenshot layar yang Anda suka membantu Anda memutuskan nanti.

2. 2

   Dapatkan DESIGN.md dari favorit Anda

   Salin dari halaman galerinya, atau tempel URL-nya di beranda Design Extractor dan jalankan ekstraksi Pro. Pro mengambil sampel halaman-halaman utama situs dan mengembalikan satu file berisi warna, tipografi, spacing, radius, dan resep komponen. Baru mengenal format ini? Baca apa itu DESIGN.md.

3. 3

   Jadikan milik Anda

   Ubah keluarga warna brand, font jika komersial, nama, dan gaya bahasanya. Prompt di bawah melakukannya sekaligus.

4. 4

   Taruh di repo Anda dan arahkan agen ke file itu

   Simpan sebagai DESIGN.md di root repository. Panduan Claude Code dan Cursor berisi rujukan yang perlu ditambahkan.

5. 5

   Cek hasilnya

   Tempel file yang sudah diedit ke Validator DESIGN.md gratis. Validator mengecek struktur dan menandai warna teks dengan kontras yang terlalu rendah.

Contoh nyata: Notion#

Misalnya Anda menyukai nuansa Notion. Berikut sistem desainnya seperti yang dicatat DESIGN.md di galeri, beserta apa yang akan Anda pertahankan dan ubah.

Apa yang dipertahankan dan apa yang diubah

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Jadikan milik Anda dengan satu prompt#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Mengapa jangan meniru brand secara utuh#

File yang dipakai dalam panduan ini#

Titik awal yang bagus dari galeri. Setiap halaman berisi DESIGN.md lengkap, paletnya, dan contoh tipografinya.

• 
  Software & SaaS · Productivity & Notes

  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.

• 
  Perjalanan, Transportasi & Logistik

  Airbnb

  Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

• 
  Bisnis & Layanan Profesional

  Shopify

  Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Jelajahi semua contoh DESIGN.md