Hızlı Özet (TL;DR)
Büyüyen ve onlarca sayfaya ulaşan kurumsal web sitelerinde yaşanan en büyük kaos; her sayfada farklı buton renklerinin, uyumsuz yazı boyutlarının ve dağınık boşlukların (spacing) türemesidir. Bu durum hem marka ciddiyetini zedeler hem de kod tabanını (Codebase) şişirerek bakım maliyetlerini katlar. Modern web mühendisliğinde bu sorun Tasarım Sistemi (Design System) ve CSS Değişkenleri (CSS Custom Properties) kullanılarak çözülür. Tasarım token’ları sayesinde sitenin tüm renk ve tipografi kuralları tek bir merkezden yönetilir.
Tasarım Token’larının (Design Tokens) Hiyerarşisi
| Token Türü | Ne Tanımlar? | Örnek CSS Değişkeni | Değer |
|---|---|---|---|
| Temel Renkler (Brand) | Kurumsal ana ve vurgu renkleri | --renk-ana: #0052cc; | Sabit marka tonu |
| Yüzey ve Arka Plan | Açık/koyu zemin, kart renkleri | --renk-zemin: #f8fafc; | Arka plan rengi |
| Tipografi Ölçeği | Başlık ve metin puntoları | --yazi-h1: clamp(2rem, 4vw, 3rem); | Akıcı duyarlı boyut |
| Boşluk Ölçeği (Spacing) | Kenar boşlukları ve paddingler | --bosluk-md: 1.5rem; | Tutarlı aralıklar |
| Yuvarlaklık (Border Radius) | Buton ve kart köşe ovalliği | --yari-cap-kart: 12px; | Tutarlı form dili |
Modern CSS Değişkenleri ile Merkezi Yönetim
Site genelinde tutarlılığı sağlayan tokens.css mimarisi:
:root {
/* Renk Paleti */
--renk-birincil: #0a2540;
--renk-vurgu: #00d4b8;
--renk-metin: #334155;
--renk-metin-soluk: #64748b;
/* Gölgeler */
--golge-kart: 0 4px 20px rgba(0, 0, 0, 0.08);
--golge-vurgu: 0 8px 30px rgba(0, 82, 204, 0.2);
/* Geçiş Zamanlaması */
--gecis-hizli: 0.2s ease;
--gecis-akici: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
Bileşen Tabanlı (Component-Driven) Geliştirme
Tasarım sistemi hazırlandıktan sonra sayfalardaki bileşenler ad-hoc (rastgele) stillerle değil, önceden tanımlanmış tasarım sınıflarıyla inşa edilir:
- Buton sınıfları (
.btn-birincil,.btn-ikincil), - Rozetler (
.rozet-guvenlik,.rozet-endustri), - Standart kart şablonları (
.ozellik-karti).
Bu sayede yeni bir hizmet sayfası veya kampanya açılacağı zaman saatlerce CSS yazmaya gerek kalmaz; hazır bileşenler legolar gibi birleştirilerek dakikalar içinde yayına alınır.
Modüler, tutarlı ve profesyonel tasarım sistemlerine sahip web altyapıları için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı inceleyin.