open-design/design-systems/slack/DESIGN-tr.md

Slack'ten İlham Alan Tasarım Sistemi

Category: Verimlilik & SaaS İş yeri iletişim platformu. Aubergine birincil renk, çok vurgulu logo paleti, koyu kenar çubuğu ile açık yüzeyler, sıcak ve erişilebilir.

1. Görsel Tema & Atmosfer

Slack'in kimliği, işin insancıl ve hatta biraz eğlenceli hissettirmesi gerektiği fikri üzerine kuruludur. Kanonik yüzey açık renktir — derin aubergine (#4A154B) kenar çubuğu olan beyaz içerik alanları — karanlık öncelikli araçların tam tersi. Bu kontrast kasıtlıdır: kenar çubuğu sakin, her zaman mevcut bir navigasyon çapasıyken içerik alanı parlak ve açıktır.

Logo paleti — mavi, yeşil, sarı, kırmızı — esas olarak hashtag simgesinde ve pazarlama bağlamlarında görünür, kullanıcı arayüzüne yayılmış değildir. Ürünün kendisinde Slack, aubergine'i tek marka çapası olarak kullanan kısıtlı, profesyonel bir renk sistemi kullanır.

Temel Özellikler:

• Açık öncelikli içerik yüzeyleri: beyaz #FFFFFF ve beyaza yakın #F8F8F8
• Derin aubergine #4A154B kenar çubuğu — markanın en tanınmış kullanıcı arayüzü öğesi
• Dört logo vurgu rengi (mavi, yeşil, sarı, kırmızı) yalnızca vurgular olarak tutumlu biçimde kullanılır
• Başlıklar için Larsseit (pazarlama), kullanıcı arayüzü için sistem sans-serif
• Yuvarlak ama karikatür değil: çoğu bileşende 4–8px yarıçap
• Yoğun ama nefes alabilir: net konu hiyerarşisi ile kompakt mesaj satırları
• Sıcak ve konuşma dili tonu — emojiler, tepkiler ve çizimler birinci sınıf öğelerdir

---

2. Renk Paleti & Roller

Birincil Marka Rengi

Token	Hex	Rol
--color-aubergine	#4A154B	Kenar çubuğu arka planı, birincil marka rengi
--color-aubergine-dark	#350d36	Aubergine yüzeylerdeki hover durumları
--color-aubergine-light	#611f69	Kenar çubuğundaki aktif öğe vurgusu

Logo Vurgu Renkleri (tutumlu kullanın — yalnızca vurgular, simgeler, pazarlama için)

Token	Hex	Ad	Rol
--color-blue	#36C5F0	Gökyüzü Mavisi	Kanal simgeleri, bağlantılar, bilgi durumları
--color-green	#2EB67D	Teal Yeşili	Çevrimiçi durumu, başarı durumları
--color-yellow	#ECB22E	Altın	Uzakta durumu, uyarılar, vurgular
--color-red	#E01E5A	Yakut	Bildirimler, hatalar, bahsetme rozeti

Yüzey & Arka Plan

Token	Hex	Rol
--bg-primary	#FFFFFF	Ana mesaj alanı, modallar
--bg-secondary	#F8F8F8	Konu panelleri, ikincil yüzeyler
--bg-tertiary	#F1F1F1	Giriş arka planları, hover durumları
--bg-sidebar	#4A154B	Sol kenar çubuğu (aubergine)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Kenar çubuğu öğesi hover
--bg-sidebar-active	rgba(255,255,255,0.2)	Aktif kenar çubuğu öğesi
--bg-message-hover	#F8F8F8	Mesaj satırı hover

Metin Renkleri

Token	Hex	Rol
--text-primary	#1D1C1D	Birincil gövde metni (siyaha yakın)
--text-secondary	#616061	Zaman damgaları, soluk etiketler
--text-sidebar	rgba(255,255,255,0.9)	Kenar çubuğundaki kanal adları
--text-sidebar-muted	rgba(255,255,255,0.6)	Kenar çubuğundaki etkin olmayan öğeler
--text-link	#1264A3	Mesajlardaki satır içi bağlantılar
--text-mention	#1264A3	@bahsetme metin rengi

Semantik Renkler

Token	Hex	Rol
--color-success	#2EB67D	Başarı bildirimleri, olumlu durumlar
--color-warning	#ECB22E	Uyarı durumları
--color-danger	#E01E5A	Hata durumları, yıkıcı eylemler
--color-info	#36C5F0	Bilgilendirici vurgular

Kenarlık & Ayırıcı

Token	Hex	Rol
--border-default	#DDDDDD	Standart ayırıcılar, kart kenarlıkları
--border-subtle	#F1F1F1	Satırlar arasındaki hafif ayırıcılar
--border-focus	#1264A3	Odak halkası rengi

---

3. Tipografi Kuralları

Yazı Tipleri

Rol	Resmi	Web Yedeği
Görüntü / Pazarlama Başlıkları	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
Kullanıcı Arayüzü / Gövde / Chrome	Slack Lato (özel)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Kod / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack, pazarlama başlıkları için Larsseit ve ürün içi kullanıcı arayüzü için özel bir Lato varyantı kullanır. Web kullanımı için system-ui en güvenli yedeğidir.

Tipografi Ölçeği

Düzey	Boyut	Kalınlık	Satır Yüksekliği	Harf Aralığı	Kullanım
Görüntü XL	48px	800	1.1	-1px	Pazarlama hero başlıkları
Görüntü L	36px	700	1.15	-0.5px	Bölüm hero'ları
Başlık 1	28px	700	1.25	normal	Modal başlıkları, sayfa üstbilgileri
Başlık 2	22px	700	1.3	normal	Kart başlıkları, ayarlar bölümleri
Başlık 3	18px	700	1.35	normal	Alt bölüm üstbilgileri
Gövde L	16px	400	1.5	normal	Mesaj metni, açıklamalar
Gövde	15px	400	1.46667	normal	Varsayılan kullanıcı arayüzü metni (Slack'in temel boyutu)
Gövde SM	13px	400	1.38462	normal	İkincil meta veri
Altyazı	12px	400	1.33	normal	Zaman damgaları, ipuçları
Kod	12px	400	1.5	normal	Satır içi kod, kod blokları

Tipografi Kuralları

• Slack'in temel gövde boyutu 15px'dir — yoğunluk için 16px'den biraz daha küçük
• Okunmamış kanallar: kalınlık 700 — kalın, birincil okunmamış göstergesidir
• Zaman damgaları: 12px --text-secondary, yalnızca hover durumunda göster
• Kod blokları: arka plan #F8F8F8, kenarlık 1px solid #DDDDDD, border-radius 4px
• 12px'in altında yazı tipi boyutu kullanmayın
• Pazarlama başlıkları: büyük görüntü boyutları için letter-spacing -1px

---

4. Bileşen Stilleri

Düğmeler

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

Giriş Alanları

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

Kenar Çubuğu Kanal Öğesi

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

Okunmamış Rozeti

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

Mesaj Ekleri / Kartlar

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

Tepkiler

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. Düzen İlkeleri

Üç Sütunlu Düzen

┌──────────────┬──────────────────────────────┬─────────────┐
│ Kenar Çubuğu │        Mesaj Alanı           │   Konu      │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  isteğe bağlı│
└──────────────┴──────────────────────────────┴─────────────┘

Boşluk Sistemi (4px taban)

Token	Değer	Kullanım
--space-1	4px	Dar boşluklar
--space-2	8px	Bileşen dolgusu
--space-3	12px	Giriş dolgusu
--space-4	16px	Standart dolgu
--space-6	24px	Kart dolgusu
--space-8	32px	Bölüm boşlukları

Kenar Çubuğu Yapısı

[Çalışma Alanı Adı ▼]
────────────────────
Konular
Tüm DM'ler
Taslaklar & Gönderilenler
────────────────────
▼ Kanallar
  # general
  # random
  # design  ● (okunmamış)
────────────────────
▼ Doğrudan Mesajlar
  John Doe
  Jane Smith

Mesaj Oluşturucu

• Mesaj alanının altına sabitlenmiş
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Araç çubuğu: emoji, ekle, biçimlendir, gönder düğmesi

---

6. Derinlik & Yükseklik

Slack, açık yüzeyde hafif gölgeler kullanır:

Düzey	Kullanım	Gölge
Düz	Mesaj satırları, kenar çubuğu öğeleri	none
Düşük	Kartlar, giriş alanları	0 1px 3px rgba(0,0,0,0.08)
Orta	Açılır menüler, popover'lar	0 4px 12px rgba(0,0,0,0.12)
Yüksek	Modallar, iletişim kutuları	0 8px 24px rgba(0,0,0,0.15)
Katman	Modal arka planları	rgba(0,0,0,0.5)

---

7. Yapılacaklar ve Yapılmayacaklar

✅ Yapın

• Kenar çubuğu için aubergine #4A154B kullanın — Slack'in en ikonik kullanıcı arayüzü öğesidir
• Ana içerik alanını beyaz ve açık tutun
• Tüm gövde metni için saf siyah değil #1D1C1D (siyaha yakın) kullanın
• Okunmamış durumu göstermek için kanal adlarını kalın yapın — kalınlık göstergedir
• Dört vurgu rengini yalnızca semantik roller için kullanın (başarı, uyarı, tehlike, bilgi)
• Mesaj eklerine ve gömülü öğelere border-left: 4px uygulayın
• Zaman damgalarını yalnızca hover durumunda gösterin
• Bağlantılar ve odak durumları için #1264A3 kullanın
• Kenar çubuğu öğelerini kompakt tutun: 28px yükseklik, 6px border-radius

❌ Yapmayın

• Koyu bir ana içerik alanı kullanmayın — Slack açık önceliklidir
• Mavi/yeşil/sarı/kırmızıyı dekoratif vurgular olarak yaymayın
• Metin için saf siyah #000000 kullanmayın
• Konuşma balonları kullanmayın — mesajlar düz satırlardır
• Düğmeleri büyük yarıçaplı yapmayın — 4px standarttır
• Zaman damgalarını kalıcı olarak göstermeyin
• Kanal adları için BÜYÜK HARF kullanmayın
• 12px altında yazı tipi boyutu kullanmayın

---

8. Duyarlı Davranış

Kırılma Noktaları

Kırılma Noktası	Genişlik	Düzen
Mobil	< 768px	Tek panel, kenar çubuğu sol çekmece olarak
Tablet	768–1024px	Yalnızca kenar çubuğu + mesaj alanı
Masaüstü	> 1024px	Tam üç sütunlu düzen

Mobil Uyarlamalar

• Kenar çubuğu: sol çekmece, açmak için sağa kaydır
• Alt sekme çubuğu: Ana Sayfa, DM'ler, Etkinlik, Sen
• Konu paneli: tam ekran katman
• Oluşturucu: klavyenin üzerine sabitlenmiş
• Kanal listesi öğeleri: 44px dokunma hedefi yüksekliği
• Mobilde aubergine üst başlık çubuğu korunur

---

9. Ajan İstemi Kılavuzu

Slack tarzı tasarımlar oluştururken bu yaklaşımı izleyin:

Renk uygulaması:

background: #FFFFFF'i ana tuval olarak ayarlayın. Kenar çubuğu için #4A154B (aubergine) kullanın. Tüm birincil metin #1D1C1D'dir. Bağlantılar ve odak halkaları #1264A3 kullanır. Dört logo rengi — #36C5F0, #2EB67D, #ECB22E, #E01E5A — yalnızca semantiktir: bilgi, başarı, uyarı, tehlike.

Tipografi:

Tüm kullanıcı arayüzü için system-ui, -apple-system, sans-serif kullanın. Temel boyut 15px'dir. Okunmamış kanallar: kalınlık 700. Gövde metni: kalınlık 400. Zaman damgaları: 12px #616061, yalnızca hover'da. Kod: Monaco, Menlo, monospace, 12px, arka plan #F8F8F8.

Düzen:

Üç sütun: 240px aubergine kenar çubuğu + esnek beyaz mesaj alanı + isteğe bağlı 400px konu paneli. Kenar çubuğu öğeleri: 28px yükseklik, 6px yarıçap, okunmamışken kalın. Oluşturucu: alta sabitlenmiş, border: 1px solid #DDDDDD, border-radius: 8px.

Bileşenler:

Düğmeler: 4px yarıçap, 36px yükseklik, aubergine birincil. Giriş alanları: 1px solid #DDDDDD kenarlık, #1264A3 odak halkası. Mesaj satırları: düz, balon yok, 36px daire avatar. Tepkiler: pill border: 1px solid #DDDDDD, border-radius: 24px.

Ton:

Slack sıcak, profesyonel ve insancıldır. Boş durumlar dostane çizimler kullanır. Eylem çağrıları doğrudandır: "Mesaj gönder", "Başla". Hata mesajları açık ve yardımcıdır. Hiçbir zaman endişe verici değildir.

Kaçınılması gereken anti-desenler:

Koyu içerik alanı yok. Konuşma balonu yok. Saf siyah metin yok. Dağınık çok renkli vurgular yok. Kanal adlarında BÜYÜK HARF yok. 12px altında yazı tipi yok. Büyük düğme yarıçapı yok.