Tasarım Sistemi
Bu sayfa ayrı, elle kurgulanmış bir demo değil — aşağıdaki her renk, punto ve boşluk değeri, bu sitenin gerçek lib/design-system/tokens.config.ts dosyasından geliyor. Tema düğmesini değiştirin — palet burada da anında dönüşür.
Marka Kimliği
Sitede fiilen kullanılan iki logo lockup'ı — public/Logo/ altında, açık ve koyu zemin karşılıklarıyla.
Grayscale.webp · açık zemin
Monochrome.webp · koyu zemin
Not: ayrı bir icon-only/favicon lockup bu klasörde yok — favicon aynı marka işaretinden ayrıca üretiliyor (app/icon.tsx). Belgelenmiş bir min-size/clear-space kuralı bu repoda yok, bu yüzden icat edilmedi.
Tipografi Ölçeği
9 punto tokeni — Tailwind v4'ün varsayılan ölçeği, tokens.config.ts'te belgelenmiş.
Renk Paleti
10 renk tokeni — sol değer light, sağ değer dark tema hex'i (kaynak: tokens.config.ts).
navy
#ffffff / #0a0a0f
navy-light
#f1f5f9 / #141419
navy-lighter
#e5e7eb / #1e1e28
slate-custom
#6b7280 / #a3a3a3
slate-custom-light
#374151 / #d4d4d4
lightest-slate
#111827 / #e5e5e5
white-bright
#030712 / #f5f5f5
green (primary accent)
#2563eb / #3b82f6
accent2 (emerald)
#059669 / #10b981
accent-cyan
#0891b2 / #06b6d4
Boşluk & Radius Skalası
4px'lik grid — bu repoda özel bir override yok, Tailwind v4 varsayılanı kullanılıyor (tokens.config.ts'te belgeli).
Spacing
Radius
Breakpoint'ler (kilitli)
4 sabit breakpoint — site genelinde kilitli, bu sayfadan düzenlenemez (kaynak: tokens.config.ts, responsive-system.md).
| Token | Değer | Referans cihaz |
|---|---|---|
| xs | 280px | Minimum destek (Galaxy Fold) |
| sm | 350px | Küçük telefon |
| md | 758px | Tablet — nav inline’a döner |
| lg | 1200px | Container max-width sınırı — masaüstü |
Komponent Örnekleri
Sitenin başka yerlerinde zaten kullanılan gerçek desenler — bu sayfaya özel yeni bir komponent icat edilmedi.
Card örneği
border-navy-lighter + bg-navy-light/40 + hover:border-green/60 — sitede hizmet/proje kartlarında kullanılan aynı desen.
Başlıklar & Metin
Başlık 1
Başlık 2
Başlık 3
Başlık 4
Başlık 5
Başlık 6
Normal paragraf, strong, emphasis, small text, işaretli metin, H2O, m2, HTML kısaltması.
Linkler
Listeler
- Sırasız öğe
- İç içe
- Alt öğe
- Sıralı öğe
- İkinci öğe
- Terim
- Tanım metni
Tablolar
| Sütun A | Sütun B |
|---|---|
| Satır 1 | Değer |
| Toplam | — |
Form Elemanları
Sitede henüz canlı bir form yok — aşağıdaki stiller bu sayfa için ilk kez tanımlandı, mevcut navy/green token'larından besleniyor (yeni bir renk icat edilmedi).
Buton Varyant Matrisi
Sitede fiilen kullanılan 2 buton stili — her biri açık ve koyu panelde. primary-inverse, ghost ve 3. parti (ör. whatsapp) varyantları bu sitede henüz uygulanmadı, burada icat edilmedi.
primary
secondary
Alıntı & Kod
Kaynak belirten bir alıntı örneği.
Satır içi code örneği.
function ornek() {
return true;
}Yatay Çizgi
Görsel / Figure
Rozet / Etiket
Sitedeki tek rozet deseni — bu sayfanın en üstünde ("Referans") de kullanılan aynı komponent.
Kartlar
Sitenin gerçek Card deseni — yukarıdaki "Komponent Örnekleri" bölümündeki "Card örneği" ile aynı sınıflar, burada tekrar icat edilmedi.
Card örneği
border-navy-lighter + bg-navy-light/40 + hover:border-green/60 — sitede hizmet/proje kartlarında kullanılan aynı desen.
Uyarı / Bilgi Kutuları
Bu sitede henüz info/success/warning/error semantic renk token'ları ve buna bağlı bir Alert/Callout komponenti yok (bkz. tokens.config.ts KNOWN GAPS #2-3) — burada icat edilmiyor, eksik olarak işaretleniyor.
Breadcrumb
Bu sayfanın en üstünde kullanılan gerçek desenin tekrarı.
Sayfalama
Sitede henüz bir pagination komponenti yok (blog listesi tek sayfada tüm yazıları gösteriyor) — burada icat edilmiyor, eksik olarak işaretleniyor.
Etkileşim Durumları
Buton, link ve form input'larının default/hover/focus-visible/disabled durumları yukarıdaki ilgili bölümlerde (buton matrisi, linkler, form elemanları) gösterildi. Focus-visible halkası statik bir simülasyon değil — bu sayfa aynı focus-visible:ring-* class'larını site genelinde kullanıyor; gerçek doğrulama klavye Tab sırasıyla yapılmalı.
Nasıl Çalışıyoruz
Her site tek bir tokens.config.ts dosyasından besleniyor: renk, tipografi, spacing, radius — hepsi tek kaynaktan. Komponent kodunda hardcoded hex ya da px kullanılmıyor; her değer bir token referansı. Bu sayfadaki her renk ve punto, o dosyanın canlı çıktısı.
Next.js 15 App Router ile route bazlı, tekrar kullanılabilir komponent yapısı kuruyoruz: paylaşılan navbar/footer, sayfa bazlı server component'ler, interaktif kısımlarda gerektiğinde client sınırı. Statik sayfalar force-static ile SSG'ye zorlanır — hız ve SEO için.
Responsive tasarım 4 sabit breakpoint üzerinden ilerliyor: 280 / 350 / 758 / 1200px. Container hiçbir zaman 1200px'i aşmaz, minimum destek Galaxy Fold genişliğine (280px) kadar iner. Bu disiplin, her yeni sayfanın aynı kurallarla üretilmesini garanti eder.
Müşteri projelerinde karşılığı somut: bir renk veya boşluk değişikliği tek dosyada yapılır, tüm site güncellenir. Bakım kolaylaşır, iterasyon hızlanır — yeni bir sayfa eklemek mevcut deseni bozmaz.
Projeniz için aynı disiplinle mi çalışalım?