DESIGN.md örnekleri
Herkese açık web sitelerinden çıkarılmış gerçek DESIGN.md dosyaları. Her biri bir sitenin renklerini, tipografisini, boşluklarını ve bileşenlerini AI kodlama ajanlarının okuduğu formatta toplar. Önizlemek ve repona kopyalamak için bir karta tıkla.
Her sitenin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Bu formatı ilk kez mi duyuyorsun? DESIGN.md'nin ne olduğunu oku.
Airbnb
Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.
Anthropic
Anthropic'in tasarım sistemi, iki özel yazı tipi etrafında kurulmuş, sade ve tipografiye dayalı bir kimliktir: Anthropic Serif ve Anthropic Sans. Bu yazı tipleri sıcak bir fildişi zemin (#faf9f5) üzerinde yer alır. Palet bilinçli olarak minimaldir: sıcak beyaza yakın zeminde neredeyse siyah (#141413) metin, ikincil metinler ve kenarlıklar için ise sönük taş tonları kullanılır. Büyük ölçekli serif başlıklar editoryal sesin temelini oluşturur; neredeyse siyah zemin ve fildişi metinden oluşan koyu panel bölümü ise dramatik bir kontrast yaratır. Genel estetik; bol boşluk, yüksek tipografik kontrast ve sıfır dekoratif süsleme aracılığıyla entelektüel ciddiyeti ve güvenlik odaklı misyonu yansıtır.
Apple
CSSOM frekans analizinden, LLM yorumu yapılmadan çıkarılmış tasarım token'ları.
Dribbble
Dribbble'ın tasarım sistemi, saf beyaza yakın bir yüzey üzerinde derin, neredeyse siyah bir lacivert (#0d0c22) ile kurulmuştur; editoryal vurgu ve etkileşimli öne çıkarmalar için ölçülü kullanılan imza niteliğindeki sıcak pembe (#ea4c89) vurgu rengiyle noktalanır. Tüm tipografik sistem, tüm ağırlıklarda yalnızca Mona Sans'a dayanır ve hiyerarşiyi yalnızca ağırlık ve boyutla kurar. Hap biçimindeki düğmeler (border-radius: 1e+07px) ve yuvarlatılmış kartlar (12px köşe yarıçapı) geometri dilini belirler. Yerleşim, 8px temel ızgarayla ferah bir düzendedir ve yükseklik, ağır katmanlar yerine ince gölgelerle ifade edilir.
Duolingo - The world’s most popular way to learn
CSSOM sıklık analizinden, LLM yorumu yapılmadan çıkarılmış tasarım token'ları.
Figma
Figma'nın pazarlama sitesi, tescilli figmaSans değişken yazı tipiyle desteklenen keskin siyah-beyaz tek renkli bir sistem kullanıyor. Tasarım tipografi ağırlıklı: 88px/56px boyutundaki büyük başlıklar sıkı harf aralığıyla (negatif letter-spacing) 330 ağırlığındaki hafif gövde metniyle tezat oluşturuyor. Eylem çağrısı düğmeleri (CTA), siyah zemin üzerine beyaz yazılı, tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px) öğeler. Yerleşim, 1440px maksimum içerik genişliğine ve bölümler arasında geniş 80px dikey boşluğa sahip, ızgara temelli bir yapıda; zemin ise temiz beyaz. Derinlik çok az kullanılıyor; gölgeler oklch tabanlı, yumuşak katmanlar. Alt bilgi (footer) afişinde lavanta/mor vurgu rengi (#cb9fd2) yer alıyor. Genel estetik kendinden emin, tipografik olarak incelikli ve markayı öne çıkaran bir karakter taşıyor.
Harvey
Harvey'nin tasarım sistemi, özel bir çift yazı tipi kimliği etrafında kurulmuş: editoryal otorite için HarveySerifFont, işlevsel netlik için HarveySansFont. Bu yazı tipleri, sıcak bir neredeyse siyah (#0f0e0d) gezinme çubuğu ve fildişi rengi bir açık zemin (#fafaf9) içerik yüzeyiyle birlikte kullanılıyor. Palet bilinçli olarak tek renkli tutulmuş; hiçbir vurgu tonu olmadan, sıcak gri tonlarının kademeli bir skalasıyla (gray-50'den gray-950'ye) çalışıyor. Bu yaklaşım, yüksek riskli hukuki işler için uygun olan güven ve ölçülülük hissini yansıtıyor. Yükseklik hissi gölgeler yerine yüzey kontrastıyla veriliyor. Ana başlık, 72px boyutunda büyük bir serif yazı tipiyle hazırlanarak anında tipografik bir ağırlık sağlıyor; gövde metni ve arayüz öğeleri ise özel sans yazı tipini kullanıyor. Boşluklar 8px temel ızgaraya dayanıyor ve xs, sm, md, xl, 2xl adlarıyla tanımlanmış ölçek token'larıyla düzenleniyor.
IKEA
IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.
Klarna
Klarna'nın tasarım sistemi, sofistike bir koyu lacivert ana renk (#0b051d) ile bu rengi tamamlayan parlak vurgu renklerini öne çıkarıyor; bunların arasında markanın imza rengi olan pembe (#ffa8cd) da yer alıyor. Sistem, özel Klarna yazı tiplerinin yanında sistem yazı tiplerini kullanıyor, yuvarlatılmış köşelere vurgu yapıyor (en yaygın değer 32px) ve erişilebilirlik için yüksek kontrastı koruyor. Cömert boşluklar ve net bir tipografi hiyerarşisi sayesinde tasarım, profesyonelliği samimiyetle dengeliyor.
Linear
Linear'ın tasarım sistemi, mühendislik ekipleri için tasarlanmış, öncelikle koyu tema kullanan ve yüksek yoğunluklu bir ürün arayüzüdür. Yüzey paleti, kenar çubuğu, kart ve panel ayrımı için katmanlı koyu griler içeren neredeyse siyah tonlara (#08090a, #0f1011) dayanır. Tipografide yalnızca Inter Variable kullanılır; büyük başlık boyutlarında hassas negatif harf aralığı uygulanır, satır içi kod için ise Berkeley Mono tercih edilir. Köşe yuvarlaklığı bilinçli olarak küçük tutulmuştur (ağırlıklı olarak 2–6px); hap şeklindeki hatlar yalnızca rozet ve durum çipleri için ayrılmıştır. Yükseklik hissi, dramatik katmanlamadan çok 1px iç kenarlıklar ve düşük opaklıklı gölgelerle sağlanır. Birincil CTA rengi, Linear'ın imza niteliğindeki indigo tonu (#5e6ad2) olup Kayıt Ol düğmesinde ve önemli bağlantılarda kullanılır.
Magentix Studio
Magentix Studio, editoryal ve sanat galerisi estetiğiyle bir yapay zekâ öncelikli ürün stüdyosunun görsel dilini şekillendiriyor.
Neon
Neon'un tasarım sistemi, koyu temayı öncelikleyen bir geliştirici markası olarak, neredeyse siyah bir zemin (#000000, #18191b) üzerine kuruludur. Ana vurgu rengi canlı neon yeşil (#00e599), destekleyici renk ise orta tonlu yeşildir (#34d59a). Tipografi sisteminde arayüz ve gövde metinleri için Inter, kod ve veri gösterimleri için GeistMono kullanılır; her ikisinde de harf aralığı sıkı tutulmuştur. Boşluklar 4 piksellik temel ızgaraya göre belirlenir. Köşe yuvarlaklığı her yerde minimum düzeyde, 4 pikseldir. Yükseklik hissi gölgelerle değil, kenarlık kontrastıyla yaratılır; tek bir ortam gölgesi ise seyrek kullanılır. Hero bölümünde, veritabanı ve altyapı odaklı marka kimliğini pekiştiren, tam genişlikte animasyonlu bir veri görselleştirme arka planı yer alır.
Notion
Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.
Paperclip
Paperclip, yapay zekâ ajanlarını yönetmek için geliştirilmiş bir platform ve tasarımı, neredeyse siyah (#0a0a0a) bir zemin ile beyaz (#ffffff) ön plan metni üzerine kurulu cesur bir karanlık tuval estetiğine dayanıyor. Hero bölümünü magenta, mor, turkuaz, turuncu ve sarı tonlarında üst üste dizilmiş hap ve kapsül biçimlerinden oluşan canlı, çok renkli bir gradyan illüstrasyonu belirliyor; bu da koyu zemine karşı renkli ve enerjik bir görsel kimlik yaratıyor. Tipografide, yoğun ve başlıklarda negatif harf aralığı kullanılan Inter Tight (dar, kalın başlıklar) ile gövde ve arayüz metinleri için Inter, kod ve durum bilgileri için ise JetBrains Mono bir arada kullanılıyor. Birincil çağrı butonu, koyu zemin üzerinde beyaz, hap şeklinde bir buton. Ürün arayüzü boyunca ajan ve görev durumlarını belirtmek için anlamsal bir yeşil (#22c55e) durum sistemi kullanılıyor. Gezinme düz ve sade; alt kenarında ince bir çizgi bulunuyor.
PayPal
PayPal'ın Hollandaca ana sayfası, canlı bir gök mavisi (#60cdff) kahraman bölümü ve PayPal Pro w900 yazı tipiyle kalın, siyah ve son derece ağır başlık tipografisine dayanan, tüketiciye dönük cesur bir tasarım kullanıyor. Gezinme çubuğu beyaz zemin üzerine siyah metinle hazırlanmış; iki ayrı çağrı düğmesi var: çerçeveli "Inloggen" ve dolgulu siyah "Rekening openen". Sayfanın en üstünde koyu lacivert bir duyuru şeridi yer alıyor. Genel dil yüksek kontrastlı, hap biçimli köşeleri bol ve marka yazı tipine dayalı; geniş bir tüketici finans kitlesine güven ve erişilebilirlik hissi veriyor.
Railway
Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.
Shopify
Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.
Snapchat
Snapchat'in web varlığı, ikonik #FFFC00 marka sarısıyla dengelenmiş yüksek kontrastlı bir açık tema kullanır; bunun yanında #121314 tonunda neredeyse siyah birincil yüzeyler ve temiz beyaz bir sayfa arka planı yer alır. Tasarım, dostça ama yapılandırılmış bir tipografik hiyerarşi için birincil olarak Avenir Next'i, ikincil olarak Graphik'i eşleştirir. Düğme, hap biçimli etiket ve etiketler gibi etkileşim öğeleri tamamen yuvarlak (100px) köşe yarıçapı kullanırken, giriş alanları 5px'lik ince bir yarıçapa sahiptir. Gezinme, yumuşak bir gölgeye sahip yüzen bir hap biçimindedir. İçerik, üzerine beyaz metin yerleştirilmiş büyük medya kartlarında sunulur; bu da sürükleyici, uygulama önizlemesini öne çıkaran bir yerleşim oluşturur. Genel yoğunluk orta düzeydedir; geniş boşluklar ve net bir görsel hiyerarşi, pazarlama ve ürün arayüzü geleneklerini birbirine bağlar.
Stripe
Stripe'ın pazarlama ana sayfası, "sohne-var" değişken yazı tipinin hafif ağırlıklarında (300–400) ve #533afd (Stripe Indigo) ile belirlenen, koyu lacivertten indigoya uzanan bir marka paleti üzerine kurulu, sıkı biçimde kontrol edilen bir tasarım sistemi (HDS — Stripe Design System) kullanıyor. Tam genişlikte, imza niteliğindeki spektral gradyan kahraman alanı öne çıkıyor. Bileşenler 4–6px köşe yarıçapına sahip, düz ya da minimal gölgeli ve 8px temel boşluk ızgarası etrafında düzenlenmiş. Genel ton, güven veren ama samimi: finansal altyapı, özgüvenli tipografi ve ölçülü renk kullanımıyla aktarılıyor.
Supabase
Supabase, koyu öncelikli bir tasarım sistemi kullanır; temel olarak neredeyse siyaha yakın derin bir arka plan (oklch ~0.19) ve canlı bir yeşil marka vurgusu (#3ecf8e / #3fcf8e) üzerine kuruludur. Düzen, duyarlı bir özellik kartı ızgarası etrafında yapılandırılmıştır; başlıklarda Manrope, gövde ve arayüz metinlerinde Inter kullanılır. Source Code Pro ise tüm sabit genişlikli yazı ve kod alanlarını karşılar. Renk sistemi, anlamsal adlandırılmış oklch özel özelliklerine dayanır. Kartlarda 12px köşe yuvarlaklığı ve ince kenarlık kullanılırken, düğmelerde 6–8px yuvarlaklık tercih edilir; genel yoğunluk orta düzeydedir ve 8px temel boşluk ızgarası esas alınır.
The Onion
The Onion'un tasarım sistemi, dijitalleştirilmiş bir satirik gazete gibi: siyah renkli, kalın ve dar gotik başlıklar; bölüm etiketleri, trend rozetleri ve CTA'lar için kullanılan ayırt edici orman yeşili marka vurgusu (#006b3a); tüm bunların sert beyaz/açık gri zemin üzerinde yer alması. Tipografi temel tasarım aracı: başlıklarda Adobe Fonts'tan dar ve yarı dar grotesk yazı tipleri (tablet-gothic, rocky-condensed) baskın, gövde metninde ise utopia-std-caption kullanılıyor. Yerleşim bilgi yoğunluğu yüksek; sıkı kart ızgaraları, makale ayırıcı olarak alt kenarlıklar ve yapısal öğelerde neredeyse sıfır köşe yuvarlaklığı var. Yükseklik efekti minimal: yalnızca katmanlı öğelerde birkaç ince gölge kullanılıyor.
Uber
Uber'in tasarım dili, sade minimalizmi canlı illüstrasyonlarla birleştirerek erişilebilir ama profesyonel bir ulaşım platformu yaratıyor. Keskin siyah-beyaz temel, netlik ve okunabilirlik sağlarken renkli kahraman illüstrasyonları sıcaklık ve insani bir bağ katıyor. Tipografi, marka tutarlılığı için özel UberMove ailesine dayanıyor; geniş boşluklar ise arayüz boyunca rahat bir nefes alanı yaratıyor.
WIRED
WIRED'ın tasarım sistemi, özel bir yazı tipi sistemi (Breve Text, WIRED Mono, WiredDisplay, Apercu) etrafında kurulmuş, yüksek kontrastlı ve editoryal odaklı bir tek renkli çerçevedir ve neredeyse hiç renk kullanmaz. Siyah (#000000), 2961 kullanımla baskındır; metinleri, kenarlıkları, ikonları ve etkileşimli durumları belirler. Birincil yüzey beyaz (#ffffff) tonundadır. Vurgu rengi çok seyrek kullanılır: abone ol çağrılarında marka mavisi olarak yalnızca #057dbc görülür. Yerleşim, sıkı 8px temel boşluklarla düzenlenmiş çok sütunlu bir haber ızgarasına dayanır; yüzeyler düzdür, gölge yoktur ve standart köşe yuvarlaklığı 4px'tir. Tipografi temel ayırt edici unsurdur: editoryal gövde metni 19px Breve Text ile, bölüm etiketleri büyük harfli ve harf aralığı açılmış WIRED Mono ile, büyük başlıklar ise WiredDisplay ile yazılır. Genel izlenim otoriter, bilgi yoğun ve önce okuma akışını gözeten bir estetiktir.
xAI
xAI'ın pazarlama sitesi, --color-ivory (#f9f8f6) ve --color-white (#ffffff) tokenlarıyla sabitlenmiş sıcak kırık beyaz yüzey paletini kullanır; baskın metin ve ön plan rengi ise #0a0a0a tonundaki neredeyse siyahtır. Tipografik sistem üç parçaya ayrılır: büyük başlıklar için universalSansDisplay (60–72px, sıkı negatif harf aralığıyla), gövde ve arayüz metinleri için universalSans, kod ve terminal bağlamları için ise GeistMono. Köşe yuvarlaklığı dilinde CTA'lar ve etiketler için 9999px hap biçimi hakimdir; kartlar için 12px, girdi alanları için 6px kullanılır. Yükseklik etkisi minimaldir: kartlar yumuşak çok katmanlı bir gölge taşırken yüzeylerin çoğu düzdür. Genel ton teknik-premium niteliktedir: ölçülü renk, geniş boşluklar ve güçlü bir monospace kod estetiği, geliştirici güvenilirliğini işaret eder.
İhtiyacın olan siteyi göremiyor musun?
Herhangi bir URL yapıştır, her web sitesinden DESIGN.md al. Renkler, tipografi, boşluklar ve token'lar, AI iş akışına hazır.