Claymorphism
Kil ya da hamurdan yapılmış gibi şişkin, yumuşak 3B şekiller; iç ve dış yumuşak gölgeler, pastel renkler, çok yuvarlak köşeler.
Nerede işe yararEğlenceli uygulamalar, eğitim ve çocuk ürünleri, ikon ve illüstrasyonlarUI/UX: stiller ve araçlar
Rehber 01 · 13 bölüm · 17 araç
UI/UX: stiller ve araçlar
Claude’a arayüz yaptırırken stilin İngilizce adını prompt’a yazmak yeterli, örneğin “Bento Grid düzeninde, Glassmorphism kartlarla bir özellik sayfası”.
İşe yarayan tasarım skill’leri: Impeccable, Taste Skill, UI/UX Pro Max.
Arayüzün her sayfada aynı kalması için projeye bir DESIGN.md koy: renkleri, yazı tiplerini ve boşlukları tanımlar, ajan arayüzü buna göre üretir; hazır örnekler awesome-design-md reposunda.
Stiller
Bölüm başlığı “Stiller”Cybercore
Erken internet ve dijital dünya estetiği: ikili kod, piksel grafikler, eski işletim sistemi pencereleri, parlak mavi ve yeşil.
Nerede işe yararTeknoloji meraklısı kitle, etkinlik ve kampanya sayfalarıNeo-Brutalism
Kalın siyah kenarlıklar, bulanıklığı olmayan sert gölgeler, doygun düz renkler, bilerek “ham” bırakılmış görünüm.
Nerede işe yararStartup ve ürün tanıtımı, genç kitleye hitap eden markalarScrapbook
Karalama defteri kolajı: yırtık kâğıt, bant, çıkartma, el yazısı, polaroid fotoğraflar.
Nerede işe yararKişisel blog, portfolyo, etkinlik, hobi markalarıSurrealism
Rüya gibi, mantık dışı kompozisyonlar; beklenmedik nesne birleşimleri, gerçeküstü 3B sahneler.
Nerede işe yararSanat projeleri, kampanya ve açılış (hero) görselleri, marka hikâyesiY2K Aesthetic
2000’lerin başı: krom ve metalik yüzeyler, holografik gradyanlar, kabarcık yazılar, parlak pembe ve mavi.
Nerede işe yararModa, müzik, genç kitlePixel Art
Piksel piksel çizilmiş düşük çözünürlüklü grafikler, bitmap fontlar, retro oyun hissi.
Nerede işe yararOyunlar, nostaljik markalar, eğlenceli küçük etkileşimlerSynthwave
80’ler retro-fütürizmi: neon pembe, mor ve turkuaz, gün batımı, ızgara zemin, krom yazılar.
Nerede işe yararMüzik, oyun, etkinlik sayfalarıGlassmorphism
Buzlu cam paneller: yarı saydam yüzey, arkasını bulanıklaştırma, ince açık kenarlık, renkli arka plan. Metnin okunabilirliğine dikkat.
Nerede işe yararDashboard kartları, modal ve açılır pencereler, iOS/macOS benzeri arayüzlerNeumorphism
Arka planla aynı renkte, açık ve koyu iki gölgeyle kabartılmış ya da gömülmüş öğeler. Kontrast düşük olduğu için erişilebilirlik zayıf.
Nerede işe yararKontrol panelleri, akıllı ev ve müzik çalar arayüzleri; küçük alanlardaBento Grid
Farklı boyutlarda, yuvarlak köşeli kutulardan oluşan ızgara; Apple’ın tanıtım sayfalarındaki gibi.
Nerede işe yararÖzellik tanıtımı, dashboard, portfolyoEditorial Design
Dergi ve gazete düzeni: güçlü başlık hiyerarşisi, çok sütun, büyük görseller, bol beyaz alan.
Nerede işe yararBlog, haber ve içerik siteleri, vaka çalışmalarıSwiss Design
Katı ızgara, sans-serif fontlar (Helvetica tarzı), asimetrik ama düzenli yerleşim, az renk, net hiyerarşi.
Nerede işe yararKurumsal siteler, ajanslar, bilgi yoğun sayfalarMinimalism
Az öğe, bol boşluk, sınırlı renk paleti; sadece gerekeni gösterir.
Nerede işe yararSaaS ve ürün sayfaları, portfolyo; çoğu proje için güvenli varsayılanMaximalism
Bilinçli fazlalık: yoğun renk, desen ve katman, karışık fontlar, cesur kompozisyon.
Nerede işe yararModa, sanat, yaratıcı ajanslar, dikkat çekmesi gereken kampanyalarLuxury Typography
İnce serif fontlar, geniş harf aralığı, büyük başlıklar, siyah-beyaz-altın, bol boşluk.
Nerede işe yararLüks ürün, otel, parfüm, mücevher, emlakConceptual Sketch
Elle çizilmiş eskiz görünümü: kalem çizgileri, taslak ikonlar, kâğıt dokusu.
Nerede işe yararFikir ve süreç anlatımı, eğitim içerikleri, taslak hissi verilmek istenen sayfalarEthereal
Rüya gibi hafif ve havadar: soluk pastel tonlar, yumuşak ışık ve gradyanlar, bulanıklık.
Nerede işe yararSağlık ve wellness, güzellik, meditasyonBohemian
Doğal ve el yapımı hissi: toprak tonları, organik dokular, bitki ve desen motifleri, el yazısı fontlar.
Nerede işe yararEl yapımı ürünler, kafe, yoga, seyahatVictorian
- yüzyıl süslemesi: süslü serif fontlar, çerçeveler, gravür illüstrasyonlar, bordo, koyu yeşil ve altın.
Cyberpunk
Distopik gelecek: koyu zemin, neon sarı, camgöbeği ve pembe, glitch efektleri, HUD tarzı arayüz çizgileri.
Nerede işe yararOyun, teknoloji ürünleri, etkinlikWabi-Sabi
Japon “kusurun güzelliği” estetiği: doğal malzeme dokuları, asimetri, sade toprak renkleri, sakinlik.
Nerede işe yararSeramik ve el işi, mimari, çay ve kahve markalarıAI görünümü
Bölüm başlığı “AI görünümü”Arayüzü “AI yapmış” gösteren işaretler; bu videodan alındı. Hiçbiri tek başına yanlış değil; sorun hepsinin düşünülmeden, varsayılan olarak gelmesi. Bir öğeyi bilerek seçtiysen kalabilir; seçmediysen kaldır ya da bu ürüne özgü bir kararla değiştir. Ajanın bu kalıplara düşmemesi için Impeccable skill’i de işe yarar.
Mor-mavi gradyan
Arka planda mordan maviye geçiş, büyük başlık yazısında renk geçişi.
YerineMarkanın tek ana rengi ve düz zemin; vurguyu renk geçişiyle değil boyut ve kalınlıkla ver.Başlıkta emoji ve rozet
Başlıkların önünde emoji, büyük başlığın üstünde “Yeni” ya da “AI destekli” rozeti.
YerineEmojiyi kaldır; rozeti sadece gerçekten duyurulacak yeni bir şey varsa koy.Hazır yazı tipi eşleşmeleri
Her yerde Inter; ya da Space Grotesk ile Instrument Serif, vurgu kelimelerde eğik serif.
YerineMarkaya uyan bir başlık ve bir gövde yazı tipi seç, vurguyu sayfa boyunca aynı yolla yap.Kalıp kartlar
Sol kenarı renkli kartlar, cam görünümlü (glassmorphism) kartlar, yan yana üç ikonlu kutu.
YerineKart sayısını azalt; içeriğe göre farklı boyutlarda bloklar ya da kartsız, tipografiyle ayrılan bölümler kullan.Dokunulmamış bileşenler
shadcn/ui bileşenleri hiç değiştirilmeden, her öğenin yanında bir Lucide ikonu.
YerineBileşenlere markanın köşe, boşluk ve renk değerlerini ver; ikonu sadece anlam kattığı yerde kullan.Varsayılan hareketler
Kaydırınca her bölümün soluklaşarak belirmesi, imleci izleyen ışık, üzerine gelince soluklaşan düğmeler.
YerineHareketi geri bildirim için ve amaçlı kullan (Hareket türleri); her bölüme aynı girişi verme.Düşük kontrast ve dağınık boşluk
Koyu temada gri üstüne gri yazı, bölümler arasında birbirini tutmayan boşluklar, gren dokusu.
YerineYazı kontrastını 4,5:1’in üstünde tut; 4 ya da 8’in katlarıyla bir boşluk ölçeği kullan.Kalıp metin
Her cümlede uzun tire, “güçlendir”, “sorunsuz”, “yeni nesil” gibi bir şey söylemeyen kelimeler.
YerineÜrünün ne yaptığını somut söyle; uzun tireyi virgül ya da noktayla değiştir.Tasarım prompt’ları
Bölüm başlığı “Tasarım prompt’ları”Var olan bir arayüzü toparlamak için altı prompt; ilk dördü bu gönderiden, son ikisi bu gönderiden Türkçeye uyarlandı. Yapay zekâya bir şey ekletmek yerine neyin çıkarılacağını sor; her prompt’tan sonra sayfayı yeniden açıp bak.
Hiyerarşiyi düzelt
Bu sayfada yazı boyutlarını, boşlukları, ölçeği, hizalamayı ve ana düğmenin (CTA) ne kadar öne çıktığını denetle. Hiyerarşiyi, kullanıcı önce neye bakacağını bilecek şekilde yeniden kur; değişiklikleri önce listele.
Ne zamanÖnemli şeyler önemli görünmüyor, göz sayfada nereye bakacağını bilmiyor.AI görünümünü kaldır
Bu arayüzdeki hazır gradyanları, gereğinden fazla kartı, hap biçimli rozetleri ve tahmin edilebilir düzenleri bul. Bunları kaldırıp bu ürüne özgü, tutarlı bir görsel sistem kur; önce neyi neden değiştireceğini göster.
Ne zamanSayfa başka yüzlerce AI yapımı siteye benziyor.İlk 5 saniyeyi düzelt
Sayfanın kaydırmadan görünen üst kısmında ürünün ne olduğunu, kimin için olduğunu, neden önemli olduğunu ve sonra ne yapılacağını açıkça anlat. Süslemeyi bunlardan sonraya bırak; 5 saniyede okunup anlaşılıyor mu diye kontrol et.
Ne zamanZiyaretçi ilk bakışta ürünün ne yaptığını anlamıyor.Tasarımcı gözüyle geçir
Çalışan siteyi aç ve en çok etki eden 10 tasarım sorununu bul, önem sırasıyla listele. Onayımla düzelt, siteyi yeniden açıp tekrar incele; yeni bir şey ekleme, neyin çıkarılacağını öner.
Ne zamanSayfa bitti gibi ama bir şeyler eksik ya da fazla duruyor.Önce tasarım sistemini kur
Yazı tiplerini, boşluk ölçeğini, renkleri ve temel bileşenleri (düğme, kart, girdi, menü) önce tek yerde tanımla. Sonra sayfadaki her bölümü sadece bunlarla yeniden kur; tanımın dışında kalan her stili listele ve onayımla tanıma bağla.
Ne zamanHer bölüm başka bir siteden alınmış gibi duruyor; düğmeler, kartlar ve boşluklar bölümden bölüme değişiyor.Her ekran boyutunda dene
Siteyi 390, 768, 1024 ve 1440 piksel genişlikte aç ve her birinde ekran görüntüsü al. Taşan, üst üste binen, okunmayan ya da dokunması zor öğeleri ekran boyutuyla birlikte listele, onayımla düzelt ve yeniden kontrol et.
Ne zamanSadece masaüstünde baktın; telefonda ve tablette nasıl göründüğünü bilmiyorsun.UX yasaları
Bölüm başlığı “UX yasaları”İnsanların arayüzü nasıl algıladığını ve kullandığını anlatan altı yasa; ilk beşi bu gönderiden, Jakob yasası bu videodan alındı, ayrıntıları Laws of UX sitesinde. Yasalar katı kural değil, tasarım kararını gerekçelendirmenin yolu; kararı yine gerçek kullanıcıyla test ederek ver.
Zirve-son kuralı
İnsanlar bir deneyimi ortalamasıyla değil, en yoğun anı ve sonuyla hatırlar.
Arayüzde nasıl uygulanırAkışın en önemli anına küçük bir sevinç koy, sonunu (ödeme, kayıt, iş bitti ekranı) özenle bitir; bekleme ve hata anlarını yumuşat.ÖrnekYemek siparişinde teslim süresini hemen göstermek, kalori uygulamasının gün sonu özeti.Miller yasası
Kısa süreli bellek aynı anda sınırlı sayıda öğe tutar; Miller 7±2 dedi, sonraki araştırmalar 4 civarı diyor.
Arayüzde nasıl uygulanırBilgiyi gruplara böl: uzun formu adımlara, uzun sayıyı parçalara, menüyü bölümlere ayır. “Menüde en fazla 7 öğe” katı bir kural değil, gruplamanın gerekçesi.ÖrnekKart numarasını dörtlü gruplarla göstermek, kategorileri satır başına birkaç öğeyle sınırlamak.Hick yasası
Seçenek sayısı arttıkça karar vermek uzar.
Arayüzde nasıl uygulanırAna işlemi öne çıkar, nadir seçenekleri “Daha fazla” altına al, karmaşık seçimi adımlara böl, uygun varsayılanı önceden seç.ÖrnekAz sekmeli alt menü, ödeme ekranında tek ana düğme.Fitts yasası
Bir hedefe ulaşma süresi hedefin uzaklığına ve büyüklüğüne bağlıdır; büyük ve yakın hedefe daha hızlı dokunulur.
Arayüzde nasıl uygulanırAna düğmeyi büyük yap ve başparmağın kolay ulaştığı yere koy; dokunma alanı iOS’ta en az 44×44 pt, Android’de 48×48 dp olsun, silme gibi yıkıcı işlemi ana işlemin hemen yanına koyma.ÖrnekMobilde sağ altta duran “Yaz” düğmesi.Benzerlik yasası
Rengi, şekli ya da biçimi benzeyen öğeler aynı gruptan sanılır.
Arayüzde nasıl uygulanırAynı işi yapan öğelere aynı görünümü ver (bütün ana düğmeler tek renk), farklı işi yapanları ayırt edilir yap (bağlantı düğmeye benzemesin).ÖrnekSatın alma düğmelerinin her ekranda aynı renkte olması.Jakob yasası
Kullanıcılar zamanlarının çoğunu başka site ve uygulamalarda geçirir, seninkinin de alıştıkları gibi çalışmasını bekler (Jakob Nielsen).
Arayüzde nasıl uygulanırBilinen kalıbı koru: logo sol üstte ana sayfaya götürsün, arama büyüteçle, sepet ve profil sağ üstte dursun; mobilde geri hareketini, kaydırmayı ve sistem kontrollerini değiştirme. Yeniliği alışılmış kalıbın üstüne kur, yerine değil.ÖrnekiOS’ta listenin sonunda esneyip geri gelen kaydırma, sola kaydırınca silinen satır.Kütüphaneler
Bölüm başlığı “Kütüphaneler”Projeye kurulan ya da kodu projeye kopyalanan bileşen, animasyon, grafik, harita ve ses kütüphaneleri; türlerine göre sıralı. React dışı bir projede (Vue, Angular, Blazor, mobil) bileşen kütüphaneleri doğrudan kurulamaz ama örnek alınabilir. Beğendiğin bileşenin kodunu Claude’a verip “bunu kendi altyapıma çevir” demek yeterli. Liquid Glass, DialKit, Libraries.dev ve UI SFX bu gönderiden alındı; bilgiler 29.09.2026’da sitelerinden doğrulandı. Cult UI, Watermelon UI ve Motion Primitives bu gönderiden, Canvas UI ve Spline bu gönderiden alındı; bilgiler 06.10.2026’da sitelerinden doğrulandı. Componentry, Space UI ve Arc bu gönderiden alındı; bilgiler 09.10.2026’da sitelerinden doğrulandı. Cuelume ve SSGOI bu gönderiden alındı; bilgiler 05.11.2026’da repolarından doğrulandı. Aynı gönderideki Theme Toggles lisanssız olduğu, Blendy Aralık 2024’ten beri güncellenmediği için eklenmedi. canvas-confetti (kaynak video) ve Thinking Orbs (kaynak video) kartlarındaki örnek, kütüphanenin etkisini kendi kısa kodumuzla gösterir; projede kütüphanenin kendisini kur, kullanımı örnek kodunun başında yazar.
Kodu doğrudan projeye kopyalanan, erişilebilir bileşenler; CLI ile eklenir. 21st.dev ve Aceternity bileşenleri de shadcn CLI ile eklenir.
AltyapıReact + Tailwind (Next.js, Vite, Remix, Astro, TanStack, Laravel)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÜcretsiz, MIT12.000’den fazla React ve Tailwind bileşeni, şablon ve shadcn teması; canlı önizlemeli. Bileşen shadcn CLI ile tek komutla projeye kopyalanır, kod senin olur.
AltyapıReact + Tailwind, shadcn kurulu proje (Next.js ya da Vite)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretGezinmek ücretsiz, günde 2 kopyalama; sınırsız kopyalama ve 21st AI ücretliReact, Tailwind ve Motion ile yapılmış 200’den fazla animasyonlu bileşen, blok ve şablon. Kopyala-yapıştır ya da shadcn ile eklenir.
AltyapıReact + Tailwind + Motion (Next.js ya da Vite)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilir. Animasyonlar Motion kütüphanesine bağlı olduğu için çevirmek daha çok emek isterÜcretBileşenlerin bir kısmı ücretsiz, hazır blok ve şablonlar ücretli (All-Access Pass)Landing page ve tanıtım sayfaları için animasyonlu, kopyala-yapıştır bileşenler; kurulumu shadcn/ui ile aynı.
AltyapıReact + Tailwind + MotionBaşka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÜcretsiz, MITMetin animasyonu, arka plan ve mikro etkileşim için 200’den fazla bileşen; her biri JS/TS ve düz CSS ya da Tailwind hâliyle gelir.
AltyapıReact (CSS ya da Tailwind)Başka altyapıdaVue ve Svelte için resmi portları ayrı sitelerdeÜcretÜcretsiz; MIT + Commons Clause: sitende ticari kullanım serbest, bileşenleri satmak ya da yeniden dağıtmak yasakTailwind’e eklenti olarak kurulur, btn, card gibi hazır CSS sınıflarıyla kullanılır.
AI arayüzleri için yedi React kütüphanesi: Border beam, Thinking orbs, Bot avatars, Gooey, Voice, Metal, Image. Her sayfada kodlama ajanına yapıştırılacak hazır prompt var; Thinking Orbs da artık burada.
AltyapıReact 18+ (npm)Başka altyapıdaDoğrudan kurulmaz; kopyalanan prompt ajana kendi altyapında yaptırılırÜcretKütüphaneler ücretsiz (MIT); Studio ile özelleştirme ve Pro hazır ayarlar aylık 9 $ ya da ömür boyu 149 $Apple’ın Liquid Glass görünümü: arkadaki canlı sayfayı gerçekten kırarak (refraction) buzlu cam, renk ve kenar parlaması verir; bağımlılığı yok.
AltyapıReact 18+ (npm install @samasante/liquid-glass)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilir. Sayfayı bükme sadece Chrome ve Edge’de, Safari ve Firefox’ta buzlu cam kalırÜcretÜcretsiz, MITshadcn/ui’ı genişleten 150’den fazla animasyonlu bileşen; AI arayüzleri için bileşenler de var. npx shadcn@latest add @cult-ui/<bileşen> ile eklenir.
600’den fazla bileşen, animasyon, blok, dashboard ve şablon; shadcn CLI ile registry adresinden eklenir, barındırılan MCP sunucusu da var.
AltyapıReact 19 + Tailwind 4 + MotionBaşka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÜcretsiz, MIT; proje yeniMotion ile yapılmış animasyonlu bileşen kiti: metin efektleri, geçişler, kaydırmaya bağlı ve sürüklenen öğeler. npx motion-primitives@latest add <bileşen> ya da shadcn CLI ile eklenir.
Liquid glass carousel, görsel dalgalanma (ripple), parçacıklı yazı, kaydırmaya bağlı sahneler, 3B kart yığınları ve WebGL sıvı efekti gibi 50’yi aşkın animasyonlu bileşen. npx shadcn@latest add @componentry/<bileşen> ile eklenir; shadcn MCP ile AI editöründen de kurulur.
Hareket ve dokunsal his ağırlıklı bileşenler: liquid switch, morphing kontroller, gooey efektler, yükleyiciler ve shader arka planları; Base UI üstüne kurulu. shadcn CLI ile eklenir, MCP ve ajan skill’leri de var.
AltyapıReact 19 + Tailwind 4 + Base UI + MotionBaşka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÇekirdek ücretsiz, MIT; Pro yıllık 99 $ ya da ömür boyu 129 $; proje yeniSakin, fiziksel hareketli bileşenler ve hazır bloklar: tarih seçici, silmeyi onaylama, skeleton, grafikler; giriş formu, dashboard ve fiyat karşılaştırma blokları. Ortak renk, yazı ve hareket token’larına dayanır, her animasyonun hareketi azaltılmış hâli var. shadcn CLI ile ya da dosyalar elle kopyalanarak eklenir, MCP desteği var.
AltyapıReact 19 + Motion, CSS modules (Tailwind şart değil; Next.js ya da Vite)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÇekirdek (108 bileşen, 22 blok) ücretsiz, MIT; Pro yıllık 129 $ ya da ömür boyu 199 $Framer Motion’ın yeni adı: yaylı animasyonlar, sayfa düzeni geçişleri, kaydırmaya bağlı efektler, sürükleme. Aceternity ve Magic UI bileşenleri bunu kullanır.
AltyapıReact, düz JavaScript, VueBaşka altyapıdaWeb dışında kullanılmazÜcretÇekirdek ücretsiz, MIT; Motion+ ücretliBağımlılıksız animasyon kütüphanesi; ScrollTrigger, SplitText, MorphSVG gibi eklentiler dahil, React için useGSAP.
After Effects’te yapılıp JSON’a aktarılan animasyonları web’de oynatır.
AltyapıHer web projesi (düz JS, npm ya da CDN)Başka altyapıdaMobil için Lottie’nin iOS ve Android kütüphaneleri ayrıÜcretÜcretsiz, MIT; animasyonu üretmek için After Effects gerekir, bir yıldan uzun süredir güncellenmiyorYay fiziğiyle çalışan 153 arayüz animasyonu: buton, slider, sürükleme, form, yükleniyor, liste, modal. Sertlik ve sönümü ayarlayıp CSS, React ya da hazır AI prompt’u olarak kopyalarsın.
AltyapıHer web projesi (düz CSS); React bileşeni olarak da alınırBaşka altyapıdaCSS hâli her web altyapısında çalışır; mobil gibi web dışı ortamlar için hazır AI prompt’u kullanılırÜcretÜcretsiz, açık kaynakSadece CSS ile yapılmış 99 hover efektli buton; JavaScript ya da bağımlılık yok, kopyala-yapıştır.
AltyapıHer web projesi: düz HTML, React, Vue, Angular, Blazor, PHPBaşka altyapıdaWeb dışında (mobil) sadece örnek alınırÜcretÜcretsiz, MIT lisansıTek fonksiyonla konfeti patlatan küçük kütüphane: parça sayısı, açı, renk ve şekil ayarlanır, canvas ile çizer; hareketi azalt tercihine uyması için disableForReducedMotion: true verilir (varsayılan kapalı). Ödeme ya da görev tamamlanınca ödül hissi vermek için.
AI ve ajan arayüzleri için noktalı “düşünen küre” animasyonları: çalışıyor, arıyor, çözüyor, dinliyor, bağlanıyor gibi dokuz durum, sohbet için 64 ve satır içi 20 piksellik iki boyut. Sayfanın açık ya da koyu temasına kendiliğinden uyar; düz 2D canvas ile çizer (WebGL yok), ekrandan çıkınca durur, hareketi azalt tercihinde sabit kare gösterir.
AltyapıReact (npm install thinking-orbs)Başka altyapıdaDoğrudan kurulmaz; örnek alınıp çevrilirÜcretÜcretsiz, MITCanlı HTML’in üstüne WebGL ya da WebGPU efektleri koyan 35 bileşen: sıvı, cam, ateş, glitch. React Bits’in yazarından; npx shadcn@latest add @canvas-ui/<bileşen> ile eklenir.
Mobil web uygulamasında, PWA’da ve WebView’da sayfalar arası geçişi yerel uygulama gibi yapar (içeri girme, kayma, büyüme); mevcut router’a dokunmaz, Safari dahil bütün tarayıcılarda çalışır, yay fiziği Web Animations API karelerine önceden hesaplanır.
AltyapıReact ve Next.js, Svelte ve SvelteKit, Vue ve Nuxt, Solid, Angular, Qwik (npm install @ssgoi/react gibi)Başka altyapıdaKurulumu ajana https://ssgoi.dev/llms.txt adresini vererek ya da Claude Code ve Codex eklentisiyle yaptırabilirsinÜcretÜcretsiz, MITBileşen tabanlı grafik kütüphanesi; eksen, tooltip, çizgi gibi parçalar ayrı bileşen olarak birleştirilir, SVG ile çizer.
AltyapıReactBaşka altyapıdaDoğrudan kurulmaz; örnek alınırÜcretÜcretsiz, MITGrafik ve dashboard için 35’ten fazla kopyala-yapıştır bileşen; grafikleri Recharts ile çizer.
AltyapıReact + Tailwind + RadixBaşka altyapıdaDoğrudan kurulmaz; örnek alınırÜcretÜcretsiz, Apache-2.0; Tremor Vercel’e katıldı, kodu Nisan 2025’ten beri güncellenmiyorHazır harita bileşenleri: işaretçi, popup, rota, zoom ve pusula; shadcn/ui ile aynı yapıda.
AltyapıReact + Tailwind, MapLibre GLBaşka altyapıdaDoğrudan kurulmaz; örnek alınırÜcretÜcretsiz, MIT; varsayılan CARTO haritalarının ticari kullanımı lisans ister, OpenStreetMap gibi başka sağlayıcıya geçilebilirTık, başarı, hata, bildirim gibi durumlar için 936 hazır ses ve 12 kB’lık bir kütüphane: ui.play('success') diye çağırırsın, 12 ses kişiliği arasında geçersin. Ses, görünen geri bildirimin yerine geçmemeli.
npm install uisfx, bağımlılıksız)Başka altyapıdaReact Native, Swift, Kotlin, Unity ve Godot için hazır MP3 ve Ogg dosyalarıÜcretÜcretsiz; kod MIT, sesler CC0Arayüzün her işi için bir ses: dokunma, yazma, seçme, açma, kapama, sayfa geçişi, başarı, uyarı, hata gibi 14 ses. Ses dosyası yok, tarayıcıda Web Audio ile anında üretilir; düğmeye data-cuelume-tap gibi bir öznitelik eklenir ya da koddan play("success") diye çağrılır.
npm install cuelume, sadece ES modülü, bağımlılıksız)Başka altyapıdaSadece web; sesler dosya olarak gelmezÜcretÜcretsiz, MITÇalışan arayüzün yanında açılan panelde kaydırıcı, renk seçici, yay (spring) ve easing ayarlarıyla değerleri canlı değiştirirsin; boşluğu, hızı ve rengi hissederek ince ayarlamak için. Panel üretimde varsayılan olarak gizli.
AltyapıReact, Solid, Svelte, Vue ve düz JavaScript (npm install dialkit)Başka altyapıdaWeb dışında kullanılmazÜcretÜcretsiz, MITSiteler
Bölüm başlığı “Siteler”Tarayıcıda kullanılan tasarım araçları: tasarım ve prototip, 3B, AI ile arayüz üretme, hazır arayüz prompt’ları, ikon ve yazı tipi; türlerine göre sıralı. Typeface, Screenshot to Code ve VibeUI bu gönderiden alındı; bilgiler 29.09.2026’da sitelerinden doğrulandı, Figma’nın ücretsiz sınırları 05.10.2026’da alındı.
Web ve mobil ekranları tasarlayıp tıklanabilir prototip yapar, ekip aynı dosyada çalışır; ücretli planlardaki Dev Mode ölçüleri ve kod parçalarını verir. Figma MCP ile tasarım Claude’a okutulup koda çevrilir (AI geliştirme akışı).
AltyapıHer proje: web, iOS ve Android ekranlarıBaşka altyapıdaTasarım altyapıdan bağımsız; koda elle ya da Figma MCP ile aktarılırÜcretStarter ücretsiz: kişisel taslaklar sınırsız, 3 ortak tasarım dosyası, günde 150 (ayda en çok 500) AI kredisi, 30 günlük sürüm geçmişi; Dev Mode ve ortak kütüphane yok. Professional Full koltuk ayda 16 $Tarayıcıda 3B sahne ve etkileşimli nesne tasarlayıp siteye gömersin; fare ve kaydırmaya tepki veren sahneler kurulur.
AltyapıHer web projesi: gömme kodu ya da React bileşeniBaşka altyapıdaWeb dışı ortamda sahneyi görsel ya da video olarak dışa aktarırsınÜcretÜcretsiz planda web dışa aktarımında filigran var, AI kredisi ve kod indirme yok; Hobby ayda 12 $’dan (yıllık), kod dışa aktarma sadece en üst plandaGoogle’ın aracı: metinden, eskizden ya da ekran görüntüsünden web ve mobil arayüz tasarlar, HTML/CSS koduna çevirir; Figma’ya, AI Studio’ya ya da Antigravity’ye aktarır.
AltyapıHer proje: çıktı HTML/CSSBaşka altyapıdaKodu Claude’a kendi altyapına çevirttirirsinÜcretFiyat belirtilmemiş, kotalı; Google Labs deneyi, 18+Ekran görüntüsünü, tasarım taslağını ya da ekran kaydını çalışan koda çevirir. Açık kaynak sürümü (abi/screenshot-to-code) kendi API anahtarınla bilgisayarında çalışır.
AltyapıÇıktı HTML ve Tailwind, HTML ve CSS, React, Vue, BootstrapBaşka altyapıdaKodu Claude’a kendi altyapına çevirttirirsinÜcretİlk üretim ücretsiz, sonra aylık 15 $ (100 kredi); açık kaynak sürümü ücretsiz ama OpenAI, Anthropic ya da Gemini anahtarı ister15 kategoride 286’dan fazla arayüz prompt’u ve Tailwind kodu: giriş formu, dashboard, yorumlar vb. Prompt’u AI aracına yapıştırıp bileşeni ürettirirsin.
AltyapıTailwind kullanan her proje (HTML, React, Vue, Svelte)Başka altyapıdaTailwind yoksa prompt’a kendi altyapını yazarsın (“Bootstrap ile”, “düz CSS ile”)ÜcretÜcretsizClaude, Lovable, Bolt, Cursor gibi AI site yapıcılar için hazır prompt’lar; landing page, portfolyo ve 3B siteler.
AltyapıAltyapıdan bağımsız; çıkan kod kullandığın AI aracına bağlıBaşka altyapıdaPrompt’a altyapıyı eklemen yeterli (“Vue 3 ile”, “düz HTML ile”)ÜcretBir kısmı ücretsiz, sınırsız erişim ücretli15 kategoride 92 arayüz düzeni prompt’u (giriş, kayıt, panel, fiyatlandırma…); ekran görüntüsünü verdiğin tasarımın stiline uydurarak yaptırır, herhangi bir AI aracına yapıştırılır.
AltyapıAltyapıdan bağımsızBaşka altyapıdaPrompt’a altyapını yazman yeterliÜcretÜcretsiz, üyelik yok; “Generate in GlowUp” düğmesi ücretli GlowUp UI’a yönlendirirTabler, Lucide, Phosphor, Iconoir ve Heroicons ikonlarından uygulama ikonu tasarlayıp SVG ya da PNG olarak indirirsin.
AltyapıHer proje: SVG ve PNG web, mobil ve masaüstünde kullanılır (uygulama ikonu, favicon)Başka altyapıdaFark yokÜcretSitede belirtilmemişÜzerine geldiğin metnin yazı tipini, dökümhanesini ve Google Fonts’tan mı, Adobe Fonts’tan mı geldiğini gösterir; boyut, satır ve harf aralığıyla geçici olarak oynatır. Beğendiğin sitenin yazı tipini bulmak için.
AltyapıChrome eklentisiBaşka altyapıdaKod değil; tarayıcıda kullanılırÜcretÜcretsiz; veri toplamadığını söylüyorİlham siteleri
Bölüm başlığı “İlham siteleri”Tasarıma başlarken ve takıldığında bakılan siteler; bu gönderiden, hareket için bu gönderiden, Mobbin, Curated ve Dark Design bu gönderiden, Minimal Gallery bu gönderiden, A1 Gallery, Unsection, Navbar Gallery, Footer Design ve 404s bu gönderiden alındı. Beğendiğin örneği kaydet ve neden beğendiğini not al; düzeni değil fikri al. Hareket (animasyon) sitelerinde örnekler durağan görsel değil çalışan hâliyle görünür; hissi not al, kendi versiyonunu yap.
Her gün güncellenen seçilmiş tasarım örnekleri: web sayfaları, marka, ürün ekranları, tipografi, hareket (motion), 3B. Eski adı Godly; godly.website adresi buraya yönlenir.
ÜcretÜcretsizSadece SaaS siteleri; sayfa türüne (landing, fiyatlandırma, ürün, hakkında…), bölüme ve kullanılan altyapıya (Webflow, Next.js, Framer…) göre süzülür, OG görselleri de var.
ÜcretÜcretsiz, haftalık bültenGerçek uygulama ve sitelerden 600 binden fazla ekran, kullanıcı akışı ve arayüz kalıbı; uygulamanın onboarding’i, ödeme ekranı ya da ayarları nasıl kurduğunu görürsün.
ÜcretÜcretsiz planda kayıt gerekir, sınırlı uygulama görünür, akış ve arama yok; Pro ayda 10 $’dan (yıllık)Sektöre ve stile göre süzülen seçilmiş siteler; temiz landing page’ler ve startup siteleri.
ÜcretGezinmek ücretsiz; gelişmiş filtreler Pro ile ayda 9 $Koyu temalı, elle seçilmiş siteler; koyu tema tasarlarken kontrast, boşluk ve vurgu örnekleri.
ÜcretÜcretsiz; şablonlar ve sponsorlu kartlar da var2013’ten beri seçilen sade ve işlevsel site örnekleri; site, şablon ve araç bölümleri var, Framer ve Webflow gibi altyapılara göre süzülür.
ÜcretGezinmek ücretsiz, sponsorlu kartlar varNeredeyse her gün güncellenen seçilmiş siteler; stile, teknolojiye ve renge göre süzülür, MCP sunucusu da var.
ÜcretGezinmek ücretsiz, ücretsiz hesapta 2 panoda 30 kayıt; Pro ayda 9 $5 binden fazla siteden bölüm örnekleri: hero, özellik, yorum, CTA, footer; bölüm türüne göre süzülür.
ÜcretÜcretsiz hesapta kategori başına 30 bölüm ve 100 kayıt; Pro ayda 5 $Türüne göre (sabit, açılır, mega menü, kenar çubuğu) gezinme çubuğu örnekleri.
ÜcretÜcretsizStile ve türe göre seçilmiş footer tasarımları.
ÜcretÜcretsiz, sponsorlu kart varYaratıcı 404 (sayfa bulunamadı) sayfaları galerisi.
ÜcretÜcretsiz, sponsorlu kartlar varJürinin ödüllendirdiği siteler ve yıllar öncesine uzanan “günün sitesi” arşivi; kategori, teknoloji (React, Webflow, Three.js), yazı tipi ve etikete göre süzülür.
ÜcretGezinmek ücretsiz; kurslar ve Pro üyelik ücretli“web design”, “dashboard ui” gibi aramalarla geniş görsel arşiv; beğendiklerini panolara kaydedersin.
ÜcretÜcretsizTasarımcı ve geliştiricilerin yeni işlerini paylaştığı akış; beğendiğin kişileri bir listede toplarsın.
ÜcretÜcretsizWeb animasyonu ve etkileşim deneyleri, kodu ve adım adım anlatımıyla (kaydırma efektleri, WebGL, metin animasyonları).
ÜcretÜcretsizUygulama ve sitelerdeki küçük sihirli ayrıntılar: mikro etkileşimler, geçişler, gizli sürprizler (easter egg), 404 sayfaları, konfeti.
ÜcretÜcretsizGSAP ile yapılmış ödüllü sitelerin vitrini; animasyonun canlı sitede nasıl kullanıldığını gösterir.
ÜcretÜcretsizÜzerine gelme efektleri, hareketli yazılar ve kaydırmaya tepki veren etkileşimleriyle seçilmiş siteler.
ÜcretÜcretsizPortföy örnekleri
Bölüm başlığı “Portföy örnekleri”Kişisel portföy sitesi için örnek siteler, ücretsiz şablonlar ve portföy galerileri. Siteler bu videodan, Framer şablonları bu videodan, kitap gibi açılan portföy bu videodan alındı; bilgiler 05.11.2026’da sitelerinden doğrulandı. Akılda kalan portföy tek bir fikri sonuna kadar götürür: gazete, kitap, eski bir bilgisayar; fikri al, kendi hikâyene uyarla.
Dokulu kâğıt üstünde eski bir gazete gibi dizilmiş portföy: dev “MIRANDA” manşeti, projeler yana sürüklenen bir şeritte.
Ücret—Sade bir UX ve marka danışmanlığı sitesi; aşağı kaydırdıkça bir T-rex animasyonu başlıktaki kelimeleri yiyor (Webflow ve Lottie).
Ücret—3B ve hareket tasarımcısının portföyü: 80’lerin ürün tasarımına selam, eski bir ekranın içinde müzikle hareket eden 3B nesneler ve klavye tuşu gibi menü.
Ücret—Tasarımcı Simon Dupety’nin cam aydınlatma koleksiyonu: neredeyse boş beyaz sayfada küçük, dikey bir film şeridi ve sesli gezinme.
Ücret—Portföyü loş bir masada duran 3B ciltli bir kitap olarak gösterir; sayfalar tıklayarak ya da sürükleyerek çevrilir. Videodaki kitap portföyün kaynağı bu; ubernatural stüdyosunun tasarımı.
ÜcretÜcretli: prompt, kod ve Figma dosyası Pro üyelikle (ayda 23 $, yılda 199 $)Görselleri film şeridi gibi dizen sade galeri ve portföy şablonu.
ÜcretÜcretsiz (Framer’da kopyalanır); kendi alan adın için Framer’ın ücretli planı gerekir (Basic, yıllık ödemede ayda 10 $)Büyük yazılı, görsel ağırlıklı dijital ajans ve yaratıcı ajans şablonları.
ÜcretÜcretsiz (Framer); kendi alan adı için ücretli planKırmızı ağırlıklı, cesur bir yaratıcı portföy şablonu.
ÜcretÜcretsiz (Framer); kendi alan adı için ücretli planTopluluğun eklediği kişisel web siteleri dizini.
ÜcretÜcretsizGeliştirici portföylerinin GitHub’da tutulan uzun listesi.
ÜcretÜcretsizTek sayfalık portföy sitelerinin seçilmiş örnekleri ve şablonları.
ÜcretGezinmek ücretsiz, bazı şablonlar ücretliTehlikeli işlemler
Bölüm başlığı “Tehlikeli işlemler”Silme gibi geri alınamaz işlemler için altı arayüz kalıbı; bu videodan alındı. Her kartta kalıbın bizim yazdığımız çalışan örneği var; “Kodu kopyala” tek dosyalık HTML’ini verir.
“Emin misin?” penceresi yerine düğmeyi kısa bir süre basılı tutturup halka dolunca sil; erken bırakılırsa hiçbir şey olmaz.
NedenOnay pencereleri alışkanlıkla okunmadan geçilir.Düğmelerde “Evet” ve “Hayır” yerine “Projeyi sil” ve “Projeyi tut” yaz.
NedenFiil, uyarının kendisidir.Sil düğmesini ana düğmenin yerine koyma; kaydet ya da iptal ana yerde kalsın, sil ayrı ve uzakta dursun.
NedenKas hafızası okumadan tıklar.Kırmızıyı sadece yıkıcı işlemlere ayır; uyarı, bildirim ve açık-kapalı düğmelerinde kullanma.
NedenHer yer kırmızıysa gerçek tehlike fark edilmez.Hesap ya da proje silme, sahipliği devretme gibi işlemleri ayarlar sayfasının en altında, çerçeveli ve başlıklı bir “Tehlikeli bölge”de topla.
NedenKonum sürtünme yaratır; oraya yanlışlıkla gidilmez.Hesap silmeyi hemen yapma; örneğin 14 gün sonra kalıcı sil, bu sürede tek tıkla iptal ettir.
NedenSon savunma hattı; süre dolunca veri yine gerçekten silinmeli (yayın öncesi 56. madde).Etkileşim örnekleri
Bölüm başlığı “Etkileşim örnekleri”Instagram’da görülen etkileşimlerin bizim yazdığımız çalışan hâli: kartta dener, “Kodu kopyala” ile tek dosyalık HTML’ini alırsın; kartın prompt’u etkileşimi projenin kendi altyapısında yaptırır. Özgün kod paylaşılmışsa nerede olduğu kartta yazar; lisansı olmayan kod sadece incelenir, projeye kopyalanmaz.
Seçili sekmenin üstünde bir damla durur, çubuk damlanın etrafında eriyormuş gibi kıvrılır ve hiç kırışmaz; damla çubuk boyunca sürüklenebilir. HTML, CSS ve JavaScript ile yapılmış.
Nerede işe yararWeb ve mobil alt menü, sekme geçişiÖzgün kodYazarın mağazasında ücretli (Meniscus, 9 $)On mobil alt menü: sıvı yüzen çubuk, mıknatıslı dock, cam kapsül, bölümlü dinamik çubuk, yörüngeli menü, dalgalı gösterge, neon dock, biçim değiştiren damla, katmanlı kartlar, sade dock.
Nerede işe yararMobil uygulamanın alt menüsüÖzgün kodPaylaşılmamış (tasarım fikri)Kart bilgisi yazıldıkça kart önizlemesi dolar, CVC alanına gelince kart arkası görünecek şekilde döner; ödeme sırasında kart parlar, sonra başarı geçişi gelir. React ve Motion ile yapılmış.
Nerede işe yararÖdeme ve abonelik ekranıÖzgün kodYorum yazana DM’den gönderiliyor“Fişi yazdır”a basınca fiş yazıcıdan kayarak çıkar ve üstüne “ÖDENDİ” damgası vurulur; yeniden yazdırma, fişi koparma ve kopyalama düğmeleri var.
Nerede işe yararÖdeme sonrası onay, makbuz ve fatura ekranıÖzgün kodPaylaşılmamışŞifre güçlendikçe simge açık kapıdan ataşa, asma kilide, sürgülü kilide ve kasa kapısına döner; şifrenin entropisini (bit) ve tahmini kırılma süresini yazar, “Güçlü öner” düğmesi şifre üretir. GSAP ile yapılmış.
Nerede işe yararKayıt ve şifre değiştirme formuÖzgün kodPaylaşılmamışLogo çizilerek açılır; Giriş ve Kayıt sekmeleri, alanın altında anında hata mesajı, giriş düğmesinde yükleniyor simgesinden onay işaretine geçiş. Flutter ile yapılmış.
Nerede işe yararMobil giriş ve kayıt ekranıÖzgün kodPaylaşılmamışCam görünümlü istatistik kartları üzerine gelince hafifçe yükselir; grafik, görev ve işlem listeleri kartlarda toplanır, mobilde alt alta dizilir. React, Motion ve Lucide ikonlarıyla yapılmış.
Nerede işe yararYönetim paneli, analitik ekranıÖzgün kodYorum yazana DM’den gönderiliyorKapalıyken sadece ikonlardan oluşan dar, yüzen bir sütun; üzerine gelince genişler, profil, arama ve menü adları belirir, alttaki eylem düğmeleri üst üste yığından yan yana sıraya kayar, görev rozeti ikonun köşesinden satır sonuna geçer. Seçili sayfa radyo düğmesiyle, açık-koyu tema onay kutusuyla tutulur; sadece HTML ve CSS ile yapılmış.
Nerede işe yararYönetim paneli, SaaS uygulamasının ana menüsüÖzgün kodÜcretsiz ama lisanssız, sadece incelenir (frontend-joe/css-components)Alt menüye çapraz giden imleç alttaki kategorinin üstünden geçince menü kapanmasın diye imleçten alt menünün iki köşesine görünmez bir üçgen çizilir; imleç üçgenin içindeyken menü değişmez, üçgenden çıkınca ya da kısa bir süre durunca altındaki kategori açılır. Örnekte üçgen görünür yapılmış, açılıp kapatılarak fark denenir.
Nerede işe yararAçılır menüler, mega menüler, iç içe bağlam menüleriÖzgün kodPaylaşılmamışListenin sonundan öteye çekince liste parmağı giderek daha az izler ve ne kadar çekilirse çekilsin görünen alanın yüksekliğini geçmez: b = (1 − 1 / (x·c/d + 1))·d, c = 0,55. Bırakınca yayla kenara döner; örnekte lastiği kapatıp farkı ve çekme mesafesini grafikte görebilirsin. Apple bu formülü yayınlamıyor, 2013’te UIScrollView incelenerek bulundu.
Hareket sürerken hedef değişince süreli animasyon o anki konumdan sıfır hızla yeniden başlar, top bir an durur; yay animasyonu o anki hızı korur ve yumuşakça döner. Apple WWDC23’te SwiftUI’ın varsayılan animasyonunu bu yüzden yay yaptı; yay süre yerine tepki ve sönümle ayarlanır.
Nerede işe yararAç-kapa düğmesi, çekmece, sürüklenip bırakılan kart, sekme göstergesiÖzgün kodPaylaşılmamış (iOS’un davranışı)Hareket türleri
Bölüm başlığı “Hareket türleri”Siteyi daha özenli gösteren dört hareket türü ve her birinin üç kalıbı; bu gönderiden alındı. İyi animasyon süs değil, geri bildirimdir: her hareket bir şeyi anlatsın, aynı hareket her yerde tekrarlanmasın.
Sayfa kullanıcıyla birlikte hareket eder; kaydırma bir hikâye anlatır.
KalıplarParallax (katmanlar farklı hızda kayar), Scrub (hareket kaydırma ilerlemesini izler), Pin + Transform (bölüm sabit kalır, içerik değişir)Her şey aynı anda görünmez; giriş sırası neyin önce okunacağını gösterir.
KalıplarFade + Lift (soluk hâlden hafifçe yukarı kalkar), Stagger (öğeler sırayla girer), Clip reveal (içerik bir maskenin altından açılır)İmleç bir şey hissettirir; öğe üzerine gelindiğini gösterir.
KalıplarMıknatıslı CTA (düğme imleci hafifçe izler), görsel yakınlaşma (düzen değil görsel büyür), metin kayması (ok, alt çizgi ya da etiket tepki verir)Her tıklama bir yanıt alır; kullanıcı işlemin gerçekleştiğini görür.
KalıplarBas ve yay (düğme sıkışıp geri gelir), durum değişimi (Gönder, Gönderiliyor, Gönderildi), tıklama onayıRenk çiftleri
Bölüm başlığı “Renk çiftleri”Yazı ve zemin için altı renk çifti; bu videodan alındı. Kontrast oranları WCAG formülüyle hesaplandı; hepsi normal metin için gereken 4,5:1 sınırını geçiyor.
Signal Blue + Porcelain
Yazı #0057FF, zemin #F8F7F4
Butter Yellow + Royal Iris
Yazı #3A0CA3, zemin #FFF275
Lime Spark + Graphite
Yazı #B6FF2E, zemin #23262F
Dragonfruit + Night Violet
Yazı #FF4696, zemin #1E1033
Emerald Ink + Champagne
Yazı #064E3B, zemin #F8E7C9
Ultra Violet + Soft Apricot
Yazı #6A00F4, zemin #FFD6A5
Vurgu rengi
Bölüm başlığı “Vurgu rengi”Uyumlu iki renge az kullanılan üçüncü bir vurgu rengi eklemek tasarımı akılda kalıcı yapar; bu videodan alındı, renk kodları videodaki kartlardan okundu. Vurguyu tek düğmede, tek başlıkta ya da tek şekilde kullan; her yere yayılırsa vurgu olmaktan çıkar. Kontrast oranları WCAG formülüyle hesaplandı; kartta yazı rengi zeminin üstünde görünür.
Midnight Black + Electric Cobalt + Acid Lime
Zemin #030407, ikinci renk #1558C9, vurgu #D4FF24; siyah ve mavi iyi durur, asit yeşili tasarımı elektriklendirir.
Pastel Orchid + Deep Eggplant + Signal Orange
Zemin #E7B0DE, yazı #400849, vurgu #FF5A0A; pembe ve mor iyi durur, turuncu tasarıma cesaret katar.
Muted Sage + Warm Cream + Deep Burgundy
Zemin #A5A79B, ikinci renk #E8D2B5, vurgu #590907; adaçayı grisi ve bej iyi durur, bordo tasarımı lüks gösterir.