SaaS tasarım sistemleri
Yazılım ve SaaS web sitelerinden çıkarılmış tasarım sistemleri: verimlilik uygulamaları, proje araçları, CRM'ler ve hizmet olarak satılan diğer ürünler. Çoğu, ölçülü bir paleti ve tek bir vurgu rengini net bir yazı ölçeğiyle birleştirir; bu da onları bir dashboard ya da ürün tanıtım sayfası için iyi bir başlangıç noktası yapar.
Bu kategoride 3 DESIGN.md örneği var. Kaynaklar: Figma, Linear ve Notion. 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.
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.
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.
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.
İ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.