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.
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
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.
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?