Contoh DESIGN.md
File DESIGN.md asli yang diekstrak dari website publik. Setiap file menangkap warna, tipografi, spacing, dan komponen sebuah situs dalam format yang dibaca agen coding AI. Buka sebuah kartu untuk melihat pratinjaunya, lalu salin ke repo Anda.
Diekstrak dari halaman publik setiap situs, bukan pedoman brand resmi. Baru mengenal format ini? Baca apa itu DESIGN.md.
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.
Anthropic
Sistem desain Anthropic adalah identitas yang sederhana dan berpusat pada tipografi, dibangun di atas dua tipografi kustom, Anthropic Serif dan Anthropic Sans, dengan latar krem hangat (#faf9f5). Palet warnanya sangat minimalis: hitam pekat (#141413) di atas putih gading hangat, dengan nuansa batu yang redup untuk teks sekunder dan garis tepi. Tipografi display serif berukuran besar menjadi jangkar suara editorialnya, sementara panel gelap (latar hitam pekat dengan teks gading) menghadirkan kontras yang dramatis. Secara keseluruhan, estetikanya menyampaikan keseriusan intelektual dan misi yang mengutamakan keselamatan, melalui ruang kosong yang lapang, kontras tipografi yang tinggi, dan tanpa ornamen dekoratif sama sekali.
Apple
Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.
Dribbble
Sistem desain Dribbble dibangun di atas navy hampir hitam yang dalam (#0d0c22) yang dipadukan dengan permukaan putih yang bersih, diselingi aksen pink-panas khas (#ea4c89) yang digunakan secukupnya untuk penekanan editorial dan sorotan interaktif. Seluruh sistem tipografinya hanya mengandalkan Mona Sans di semua ketebalan, sehingga hierarki dibentuk melalui ketebalan dan ukuran saja. Tombol berbentuk pil (border-radius: 1e+07px) dan kartu dengan sudut membulat (radius 12px) menjadi bahasa geometri utamanya. Tata letaknya lapang dengan grid dasar 8px, dan elevasi dihadirkan melalui drop shadow yang halus, bukan tumpukan lapisan yang berat.
Duolingo - The world’s most popular way to learn
Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.
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.
Harvey
Sistem desain Harvey dibangun di sekitar identitas dua tipografi khusus: HarveySerifFont untuk kesan editorial yang berwibawa dan HarveySansFont untuk kejelasan fungsional. Keduanya ditempatkan pada bilah navigasi hitam hangat yang nyaris pekat (#0f0e0d) dan permukaan konten putih gading (#fafaf9). Palet warnanya sengaja monokromatik, menggunakan skala abu-abu hangat bertingkat (gray-50 hingga gray-950) tanpa warna aksen, untuk menyampaikan kepercayaan dan kesederhanaan yang sesuai dengan pekerjaan hukum berisiko tinggi. Elevasi dibentuk melalui kontras permukaan, bukan bayangan. Judul utama di halaman depan memakai serif besar berukuran 72px, sehingga langsung menghadirkan kewibawaan tipografis, sementara isi teks dan elemen UI memakai sans kustom. Spasi mengikuti grid dasar 8px dengan token skala bernama (xs, sm, md, xl, 2xl).
IKEA
IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.
Klarna
Sistem desain Klarna menampilkan warna primer biru navy gelap yang canggih (#0b051d) dengan warna aksen cerah, termasuk warna pink khasnya (#ffa8cd). Sistem ini menggunakan font kustom Klarna berdampingan dengan font sistem, menonjolkan sudut membulat (32px paling umum), dan mempertahankan kontras tinggi demi aksesibilitas. Desainnya menyeimbangkan kesan profesional dengan keramahan melalui spasi yang lega dan hierarki tipografi yang jelas.
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.
Magentix Studio
Magentix Studio membalut sebuah studio produk berbasis AI dengan nuansa editorial, seperti pakaian galeri seni.
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.
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.
Paperclip
Paperclip är en plattform för hantering av AI-agenter med en djärv design på mörk bakgrund, förankrad i en nästan svart bakgrund (#0a0a0a) och vit förgrundstext (#ffffff). Hjältesektionen definieras av en livfull flerfärgad gradientillustration av staplade pill- och kapselformer i magenta, violett, turkos, orange och gul, vilket skapar en kromatisk, energisk visuell identitet mot den mörka ytan. Typografin kombinerar Inter Tight (kondenserade, tunga rubriker med negativ bokstavsavstånd), Inter (brödtext och gränssnitt) och JetBrains Mono (kod och statusvisning). Den primära knappen är en vit pillerformad knapp på mörk bakgrund. Ett semantiskt grönt statussystem (#22c55e) signalerar agenters och uppgiftens tillstånd genom hela produktgränssnittet. Navigeringen är minimalistisk och platt, med en subtil nedre kantlinje.
PayPal
PayPal menggunakan desain yang tegas dan ditujukan untuk konsumen di halaman beranda Belanda mereka, dengan bagian hero berwarna biru langit cerah (#60cdff) yang dipadukan dengan tipografi tampilan hitam sangat tebal (PayPal Pro w900). Navigasi berwarna putih dengan teks hitam dan dua tombol CTA yang berbeda: "Inloggen" dengan garis tepi, serta "Rekening openen" berwarna hitam penuh. Sebuah banner pengumuman berwarna biru navy gelap berada di bagian atas. Secara keseluruhan, bahasa visualnya bertumpu pada kontras tinggi, sudut membulat penuh bergaya pill, dan tipografi merek, yang memancarkan kepercayaan serta kemudahan akses bagi audiens layanan keuangan konsumen yang luas.
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.
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.
Snapchat
Situs web Snapchat menggunakan tema terang berkontras tinggi yang berpusat pada warna kuning merek ikoniknya #FFFC00, permukaan utama hampir hitam (#121314), dan latar halaman putih yang bersih. Desainnya memadukan Avenir Next (utama) dengan Graphik (sekunder) untuk hierarki tipografi yang ramah namun tetap tertata. Elemen interaksi seperti tombol, pill, dan tag menggunakan radius penuh (100px), sedangkan input memakai radius 5px yang halus. Navigasi berupa pill mengambang dengan bayangan lembut. Konten ditampilkan dalam kartu media besar dengan teks putih di atasnya, menciptakan tata letak yang imersif dan menonjolkan pratinjau aplikasi. Kepadatan keseluruhannya sedang, dengan spasi yang lapang dan hierarki visual yang jelas, menjembatani konvensi UI pemasaran dan UI produk.
Stripe
Homepage marketing Stripe menggunakan sistem desain yang sangat terkontrol (HDS — Stripe Design System) yang dibangun di sekitar font variabel "sohne-var" pada bobot ringan (300–400), palet merek dari navy tua hingga indigo yang berpusat pada #533afd (Stripe Indigo), dan hero dengan gradien spektral tepi-ke-tepi yang menjadi ciri khasnya. Komponennya memiliki radius sudut rendah (4–6px), bayangan datar hingga minimal, serta tersusun di atas grid spasi dasar 8px. Nuansa keseluruhannya berwibawa namun tetap ramah, menyampaikan infrastruktur keuangan lewat tipografi yang percaya diri dan penggunaan warna yang terukur.
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.
The Onion
The Onion adalah sistem desain sebuah koran satire digital: judul bergaya gothic sempit yang tebal dalam warna hitam, aksen hijau hutan yang khas (#006b3a) untuk label bagian, lencana tren, dan CTA, semuanya diletakkan di atas kanvas putih/abu-abu terang yang tegas. Tipografi menjadi alat desain utama. Huruf grotesk sempit dan semi-sempit dari Adobe Fonts (tablet-gothic, rocky-condensed) mendominasi judul, sementara utopia-std-caption menangani teks isi. Tata letaknya padat informasi, dengan grid kartu yang rapat, pemisah artikel berupa garis batas bawah, dan sudut yang nyaris tidak membulat pada elemen struktural. Elevasinya minimal, hanya beberapa bayangan halus pada lapisan overlay.
Uber
Bahasa desain Uber memadukan minimalisme yang bersih dengan ilustrasi yang cerah untuk menciptakan platform transportasi yang ramah namun tetap profesional. Fondasi hitam-putih yang tegas memberikan kejelasan dan keterbacaan, sementara ilustrasi hero yang berwarna-warni menghadirkan kehangatan dan kedekatan dengan manusia. Tipografi mengandalkan keluarga font kustom UberMove demi konsistensi merek, dengan spasi yang lapang sehingga antarmuka terasa lega di setiap bagiannya.
WIRED
WIRED-nin sistem desainnya adalah kerangka monokrom berkontras tinggi yang digerakkan oleh editorial dan dibangun di atas sistem tipografi milik sendiri (Breve Text, WIRED Mono, WiredDisplay, Apercu) dengan palet kromatik yang hampir nol. Hitam (#000000) mendominasi dengan 2961 kemunculan, menjadi penopang teks, garis tepi, ikon, dan status interaktif. Putih (#ffffff) menjadi permukaan utama. Warna aksen dipakai sangat hemat, hanya #057dbc sebagai biru merek untuk CTA berlangganan. Tata letaknya menggunakan grid cerita multi-kolom yang tertata, dengan spasi dasar 8px yang rapat, permukaan datar tanpa box shadow, dan radius sudut minimal (4px sebagai standar). Tipografi adalah pembeda utama: badan editorial memakai Breve Text 19px, label bagian memakai WIRED Mono dalam huruf kapital dengan letter-spacing yang dilebarkan, dan judul display memakai WiredDisplay. Keseluruhan estetikanya berwibawa, padat informasi, dan mengutamakan alur membaca.
xAI
xAI menggunakan palet permukaan off-white yang hangat, dengan --color-ivory (#f9f8f6) dan --color-white (#ffffff) sebagai dasar, serta #0a0a0a yang hampir hitam sebagai warna teks dan latar depan yang dominan. Sistem tipografinya terbagi tiga: universalSansDisplay untuk judul display berukuran besar (60–72px) dengan letter-spacing negatif yang rapat, universalSans untuk teks isi dan UI, dan GeistMono untuk kode serta konteks terminal. Bahasa radius didominasi bentuk pill 9999px pada CTA dan tag, sementara kartu dan input memakai 12px dan 6px. Elevasinya minim: kartu memakai bayangan jatuh berlapis yang lembut, sedangkan sebagian besar permukaan dibiarkan datar. Secara keseluruhan nuansanya teknis dan premium: warna yang terkendali, ruang kosong yang lapang, dan estetika monospace kode yang kuat untuk menegaskan kredibilitas bagi pengembang.
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.