Ünlü tasarım sistemleri: hangisinden ne öğrenilir?

Kısaca

Ünlü bir tasarım sisteminden en çok token adlarını ve dokümantasyon düzenini öğrenirsiniz. Görünümünü kopyalamak size bu kararların gerekçesini vermez.

Beş sistemi de yalnızca kendi resmi sayfalarından okudum. Her birinde önce neyi iyi yaptığına, sonra lisansına bakıyorum. Tasarım sisteminin ne olduğunu ayrıca tasarım sistemi rehberinde anlattım.

Lisans bilgilerini resmi depolardan aldım. Bu bilgiler hukuki danışmanlık değildir. Bir kodu ürününüze almadan önce lisans metnini kendiniz okuyun.

Material Design 3 (Google)

Material Design 3, Google'ın tasarım sistemidir. Google'ın Android sayfasına göre "Material Design 3", "Material 3" ve "M3" aynı şeyi anlatır. M3 Expressive ise M3'ü genişleten yeni bir eklemedir.

Neyi iyi yapıyor

Tema konusunda öğretici. Bir M3 teması üç alt sistemden oluşur: renk şeması, tipografi ve şekil. Bu değerleri değiştirdiğinizde M3 bileşenleri değişikliği kendiliğinden alır.

Renk şemasının temeli beş ana renktir. Her biri 13 tonlu bir palete bağlanır. Material Theme Builder aracı marka renginizden bir şema üretir ve isterseniz Compose kodu olarak dışa aktarır.

Android 12 ve sonrasında dinamik renk de var. Algoritma kullanıcının duvar kâğıdından renk türetir ve açık ile koyu şemayı bundan kurar.

Yapı

Yazı ölçeği beş gruba ayrılır: display, headline, title, body ve label. Her grubun büyük, orta ve küçük boyu vardır, toplam 15 stil. Köşe yuvarlaklığı da extra small'dan extra large'a uzanan bir ölçekle tanımlanır.

Lisans ve dikkat

Material'ın web bileşenleri kütüphanesi Material Web, Apache-2.0 lisanslıdır. Depoya göre kütüphane, yeni bakımcılar bulunana kadar bakım modunda. Web projesinde Material'ı seçmeden önce bu notu hesaba katın.

Ne zaman örnek alınır: Android uygulaması tasarlıyorsanız. Bir de marka renginden açık ve koyu tema üretmeyi öğrenmek istiyorsanız. Platform farkları için iOS ve Android farkları rehberine bakabilirsiniz.

Carbon (IBM)

Carbon, IBM'in kendini kurumsal kullanıma hazır ve açık kaynak olarak tanımlayan tasarım sistemidir. IBM Design Language üzerine kuruludur.

Neyi iyi yapıyor

Tema ve token yapısı çok net. Carbon'da dört tema var: varsayılan White, ayrıca Gray 10, Gray 90 ve Gray 100. Token'ı şöyle tanımlıyor: bir temaya değer atayan, rol tabanlı bir ad. Örnek olarak $layer-01'i veriyor.

Token'lar dört kategoriye ayrılır: renk, boşluk, tipografi ve genel. Tema değiştirmek için bileşenlere dokunmazsınız, ortak değişkenleri değiştirirsiniz. Design token mantığını öğrenmek için iyi bir örnek.

Yapı

Site temeller, bileşenler, kalıplar ve veri görselleştirme diye bölünmüş. Geliştiriciler için React ve Web Components eğitimleri var. Carbon MCP adlı bir araç da yapay zekâ uygulamalarına bileşen, token, ikon, rehber ve koda erişim veriyor.

Erişilebilirlik sayfasına göre Carbon bileşenleri IBM Accessibility Checklist'i izler. Bu liste WCAG AA, Section 508 ve Avrupa standartlarına dayanır.

Lisans

Kod deposu Apache 2.0 lisanslıdır.

Ne zaman örnek alınır: Veri ve form ağırlıklı kurumsal web uygulamalarında. Bir dashboard kuruyorsanız veri görselleştirme bölümü işinize yarar.

Primer (GitHub)

Primer kendini kısaca "GitHub'ın tasarım sistemi" diye tanıtıyor. Ana sayfası sistemi parçalara ayırıyor ve bu ayrımın kendisi öğretici.

Neyi iyi yapıyor

Ürün arayüzü ile pazarlama tarafı ayrı. Primer Product UI GitHub'ın ürün arayüzleri için, Primer Brand UI pazarlama deneyimleri için. Octicons adlı SVG ikon seti ve GitHub için içerik üretmeye yönelik bir Brand toolkit da var.

Token'lar Primitives adlı ayrı bir pakette: @primer/primitives. Renk, boşluk ve tipografi token'larını CSS değişkeni olarak verir. Renk token'ları tema başına ayrı dosyalara bölünmüştür.

Erişilebilirlik

Primer'ın erişilebilirlik bölümü pratik. Tasarımcı, geliştirici ve mobil için ayrı kontrol listeleri var. Ayrıca bileşenler için tasarım ve geliştirme rehberi içeren bir Annotation Toolkit sunuyor.

Lisans

Primer'ın React kütüphanesi Primer React, MIT lisanslıdır.

Ne zaman örnek alınır: Yoğun bir ürün arayüzü kuruyorsanız. Ürün ve pazarlama bileşenlerini ayırmak istiyorsanız da yapısına bakın.

Polaris (Shopify)

Polaris, Shopify'ın arayüz çerçevesidir. Shopify'ın geliştirici sayfası onu web bileşenleri üzerine kurulu, birleşik bir çerçeve olarak tanımlıyor.

Neyi iyi yapıyor

Her yüzeyin kendi bileşen ve API seti var. Sayfada App Home, Admin, Checkout, Customer accounts ve POS yüzeyleri ayrı ayrı listeleniyor. Bir uygulamanın hangi ekranda çalıştığına göre kural koymanın iyi bir örneği.

Değişen şey

Polaris'in React kütüphanesi kullanımdan kaldırıldı ve deposu 11 Eylül 2026'da arşivlendi. Depo, yeni geliştirmeler için Polaris Web Components'ı öneriyor. Shopify bu bileşenleri 1 Ekim 2025'te yayımladı.

Arşivlenen depoda token'lar ve ikonlar ayrı paketlerdeydi. Kendi sisteminizde de token paketini bileşenlerden ayırmak için iyi bir model.

Lisans

Polaris'in lisansı MIT tabanlı ama özeldir. Kullanımı Shopify yazılımı ya da hizmetleriyle çalışan uygulamalarla sınırlar. İkon ve görseller ayrı bir lisansa tabidir.

Ne zaman örnek alınır: Shopify için uygulama yazıyorsanız doğrudan kullanılır. Kendi e-ticaret yönetim panelinizde ise yalnızca yapısından fikir alın. Mağaza tarafı için e-ticaret UX rehberine bakabilirsiniz.

GOV.UK Design System

GOV.UK Design System, Birleşik Krallık devlet servislerini GOV.UK ile tutarlı yapmak için kuruldu. Government Digital Service'teki ekip geliştiriyor. Site, devlet servisleri üzerinde çalışan herkes için olduğunu söylüyor.

Neyi iyi yapıyor

Kalıplar bölümü en güçlü yanı. Ad ve adres girmek, form doldurmak ya da hesap açmak gibi sık görevler için hazır çözümler var. Topluluk bölümü, devletin farklı birimlerinden araştırma, tasarım ve geliştirme emeğini bir araya getiriyor.

GOV.UK Frontend deposuna göre paket, bir servisin WCAG 2.2 AA düzeyine ulaşmasına yardımcı olmalı. Yine de ekiplerden servislerini kendilerinin kontrol etmesini istiyor. Bileşenleri genişlettiyseniz ya da değiştirdiyseniz bu kontrol daha da önemli.

Yapı

Site stiller, bileşenler ve kalıplar diye bölünür. Stiller düzen, tipografi, renk ve görsel kullanımını anlatır. Kod ayrı bir pakette, GOV.UK Frontend'de durur.

Lisans

GOV.UK Frontend deposuna göre kod, aksi belirtilmedikçe MIT lisanslıdır. Sitedeki içerik, aksi belirtilmedikçe Open Government Licence v3.0 altındadır.

Ne zaman örnek alınır: Belediye ya da kamu kurumu için form ağırlıklı bir hizmet yapıyorsanız. Görünümü değil, kalıpları örnek alın. Avrupa'daki yükümlülükler için Avrupa Erişilebilirlik Yasası rehberine bakın.

Karşılaştırma: ihtiyacınıza göre hangisi

Aşağıdaki tablo beş sistemi yan yana koyuyor. İhtiyacınızı seçin, uygun satırlar vurgulanır ve gerekçesi görünür. Gerekçelere yalnızca resmi sayfalarda okuduğum özellikleri yazdım.

Tasarım sistemi karşılaştırması

Sistem	Token ve yapı	Kod lisansı	Ne zaman örnek alınır
Material Design 3Google	Tema üç alt sistemden oluşur: renk şeması, tipografi ve şekil. Beş ana renkten her biri 13 tonlu bir palete bağlanır.	Material Web: Apache-2.0. Kütüphane bakım modunda.	Android uygulaması tasarlıyorsanız ve marka renginden tam bir tema üretmek istiyorsanız.
CarbonIBM	Dört tema var: White, Gray 10, Gray 90, Gray 100. Token, temaya değer atayan rol tabanlı bir addır, örneğin $layer-01.	Apache 2.0	Veri ve form ağırlıklı kurumsal web uygulamaları için.
PrimerGitHub	Primer Primitives renk, boşluk ve tipografi token'larını CSS değişkeni olarak verir. Renkler tema dosyalarına ayrılır.	Primer React: MIT	Yoğun ürün arayüzü ve erişilebilirlik kontrol listeleri için.
PolarisShopify	Web bileşenleri üzerine kurulu. Arşivlenen React deposunda token ve ikon paketleri ayrıydı.	MIT tabanlı özel lisans, Shopify ile çalışan yazılımla sınırlı.	Shopify için uygulama yazıyorsanız.
GOV.UK Design SystemGovernment Digital Service	Stiller, bileşenler ve kalıplar diye üç bölüme ayrılır. Kod, GOV.UK Frontend paketindedir.	GOV.UK Frontend: MIT. İçerik: Open Government Licence v3.0.	Form ağırlıklı kamu hizmetleri için.

JavaScript kapalı. Tablo genel karşılaştırmayı gösteriyor, ihtiyaç filtresi çalışmıyor.

Lisans satırları resmi depolardan okunmuştur ve hukuki danışmanlık değildir.

Bir ihtiyaç seçin, aynı düğmeye yeniden basınca seçim kalkar. Uygun ya da uygun değil kararı benim yorumum. Gerekçelerde yalnızca resmi sayfalarda okuduğum özellikler var.

Tablo bir başlangıç noktası. Bir sistemi doğrudan kullanacaksanız teknoloji yığınınıza ve lisansa birlikte bakın.

Bir tasarım sistemini nasıl örnek alırsınız

Önce token adlandırmasına bakın. Carbon'un $layer-01 gibi rol tabanlı adları, renk adı yerine görev adı kullanmanın iyi bir örneği. Kendi token'larınızı adlandırırken bu mantığı alın, değerleri değil.

Sonra dokümantasyonun bölümlerine bakın. Carbon ve GOV.UK temelleri ya da stilleri bileşenlerden ayırıyor, kalıplara da ayrı bir bölüm veriyor. Kendi bileşen kütüphanenizi kurarken bu ayrımla başlayın.

Lisansa kodu almadan önce bakın, sonra değil. Polaris örneğinde gördüğünüz gibi açık kaynak görünen bir kod, kullanımı sınırlayan özel bir lisans taşıyabilir.

Son olarak bakım durumunu kontrol edin. Material Web bakım modunda, Polaris React arşivlendi. Hazır bir kütüphaneyi bugün seçmek, yarın göç etmek anlamına gelebilir. Böyle bir göçü ertelemek tasarım borcuna dönüşür.

Kendi sisteminiz için okuma sırası

Beş sistemi baştan sona okumak haftalar sürer. Ben ekiplere hedefe göre kısa bir okuma sırası öneririm.

1. Renk ve tema. Material'ın renk şeması bölümünü okuyun. Beş ana rengin tonlara nasıl açıldığını görünce, kendi paletinizde kaç değere ihtiyaç olduğu netleşir.

2. Token adları. Carbon'un tema sayfasına geçin. Bir rengin adı "mavi" değil, "birinci katman" gibi bir görev olduğunda tema değiştirmek kolaylaşır.

3. Paket ayrımı. Primer'ın Primitives paketine bakın. Token'ları bileşenlerden ayrı yayımlarsanız aynı değerleri başka projelerde de kullanabilirsiniz.

4. Kalıplar. GOV.UK Design System'in kalıplar bölümünü okuyun. Bileşen tek bir parçayı anlatır, kalıp ise bir görevin baştan sona nasıl çözüleceğini anlatır.

Bu dört adımın sonunda elinizde renk rolleri ve birkaç kalıptan oluşan bir taslak olur. Kendi ürününüzün en sık kullanılan ekranından başlayın. Form tasarımı çoğu üründe iyi bir ilk adaydır.

Erişilebilirlik kontrolünü de en baştan ekleyin. Primer'ın kontrol listeleri ve WCAG rehberi bunun için yeterli bir başlangıçtır. Sonradan eklenen erişilebilirlik, her bileşene ayrı ayrı dokunmanızı gerektirir.

Benim notum

Ekiplerin sık yaptığı bir hata, büyük bir sistemi olduğu gibi indirip ürüne giydirmektir. Ürün birkaç hafta sonra o şirketin ürünü gibi görünür, ama o şirketin kullanıcısı için kurulmuş kurallarla çalışır.

Ben ünlü sistemleri bir okuma listesi gibi kullanırım. Token adları için Carbon'a, form kalıpları için GOV.UK Design System'e bakarım. Sonra küçük bir sistemle başlarım ve yalnızca ürünün gerçekten kullandığı parçaları eklerim.

Küçük başlayan bir sistem, büyük bir sistemin kopyasından daha kolay büyür. Her parçanın neden orada olduğunu bilirsiniz.