İÇ ARAÇ
Renk ve tipografi rehberi
Bu sayfa yönetmeliğin canlı karşılığıdır. Kutular değerleri tekrar
yazmaz; tokens.css içindeki token’ları
boyar. Ölçülen kontrast oranları
docs/renk-tipografi-olcum.md dosyasında.
1. Palet
Ham değerler. Bileşen kodu bu katmanı kullanmaz — aşağıdaki amaç katmanını kullanır.
brand — derin petrol
Güven + mühendislik. Tek doygun renk yüzeyin büyük kısmını taşır.
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
brand-950
accent — sıcak amber
Yalnız eylem ve tek vurgu. Bir ekranda amber TEK yerde yaşar.
accent-50
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
neutral — sıcak kâğıt ve mürekkep
Sitenin ~%80’i. neutral-500 ve daha açığı METİN rengi olamaz.
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
2. Amaç katmanı
Bileşenlerin gördüğü tek katman. Marka tonu değişirse yalnız burası güncellenir; sitenin tamamı kendiliğinden doğru olur.
Metin
--metin-birincil gövde metni --metin-ikincil ikincil metin --metin-soluk yalnız meta / figcaption --metin-vurgu açık zeminde vurgulu söz Zemin
--zemin-govde sayfa gövdesi --zemin-yuzey kart / tablo yüzeyi --zemin-vurgu-yumusak bilgi bandı --zemin-koyu anlam bölgesi — hero, footer --zemin-koyu-yumusak ikinci koyu kademe Çizgi
--ayrac satır ayracı --ayrac-guclu tablo başlık çizgisi --ayrac-form form denetimi kenarlığı --ayrac-koyu koyu bölgede ayraç Eylem ve bağlantı
--cta-zemin birincil CTA --cta-koyu-zemin koyu bölgede CTA --cta2-cerceve ikincil buton konturu --link bağlantı --odak-halka odak göstergesi Durum (§3.5)
--success form başarı, “dahil” imi --warning bilgi-uyarı bantları --danger son-tarih, form hatası --info nadir bilgi notu 3. Koyu bölge çiftleri
Koyu bölgede nötr gri kullanılmaz — petrol ailesi soğuk-tutarlı kalır.
ZEMİN-KOYU
Birincil metin — metin-ters
İkincil metin — metin-ters-ikincil. Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Koyu bölge CTA
ZEMİN-KOYU-YUMUŞAK
Birincil metin — metin-ters
İkincil metin — metin-ters-ikincil. Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Koyu bölge CTA
4. Ölçek merdiveni
| Token | Boyut | Kullanım | Örnek |
|---|---|---|---|
text-xs | 13 px | YALNIZ BÜYÜK etiket (tracking’li) | Iğdır şölen |
text-sm | 15 px | yardımcı metin, figcaption | Iğdır şölen |
text-base | 17 px | gövde (640px altında 16) | Iğdır şölen |
text-lg | 19 px | giriş paragrafı | Iğdır şölen |
text-xl | 22 px | H4 | Iğdır şölen |
text-2xl | 28 px | H3 | Iğdır şölen |
text-3xl | 36 px | H2 | Iğdır şölen |
text-4xl | 36–48 px | H1 / büyük rakam | Iğdır şölen |
text-5xl | 44–60 px | hero | Iğdır şölen |
5. Ağırlık ve iki ses
Sans yalnız 400 ve 500 taşır — font ekseni zaten 500’de bitiyor, 600 istense tarayıcı üretemez. Serif tek kesim (400) ve sayfa başına bir kez konuşur.
SANS 400 — GÖVDE
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
SANS 500 — VURGU
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
SERİF 400 — SÖZ
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
SERİF İTALİK — ALINTI
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
BAŞLIK STİLLERİ
Hero başlığı serif — Iğdır şöleni
H2 sans 500 — Işığı gördüğüm çiğ şölen
H3 sans 500 — ÇÖĞÜŞİ
6. Bağlantı, buton, form
BAĞLANTI
Cümle içinde altı çizili bir bağlantı böyle görünür. Altı çizgi şart: link yalnız renkle ayırt edilemez.
BUTON
Birincil İkincil Marka
FORM
Yardım metni.
Hata metni — renk tek başına değil, kelimeyle.
7. Sayı, para, tarih
Hepsi src/lib/tr.ts içindeki tek
kaynaktan geliyor — aşağıdakiler canlı çıktı, elle yazılmış örnek
değil.
| Fonksiyon | Çıktı | Kural |
|---|---|---|
para(149800) | ₺149.800 | ₺ önde, binlik nokta, kuruş yok |
tarihUzun(…) | uzun biçim + <time> | |
yuzde(18) | %18 | işaret ÖNDE — Türkçe kuralı |
birim(70, 'gün') | 70 gün | kırılmaz boşluk |
trBuyuk('istanbul') | İSTANBUL |
CSS uppercase “ISTANBUL” üretirdi
|
siralaTR(…) | Ankara, çilek, ıspanak, İstanbul, şeker, Ürün, Zirve | ç ğ ı ö ş ü doğru sırada |
1.234.567,89 — 0123456789
Hizalı rakam (tabular-nums) — hizalı
rakam olmadan tablo titrer.
8. Diakritik kabul cümlesi
Alt-küme testinin ta kendisi. Herhangi bir karakter yedek fonta
düşüyorsa (harf “farklı” görünüyorsa) alt-küme hatalıdır ve yayın
durur. npm run check:glif bunu
ölçüyor — hem bildirilen aralığı hem dosyanın gerçek içeriğini.
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
IŞIĞI IĞDIR’DA GÖRDÜĞÜM ÇİĞ ŞÖLEN — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
Işığı Iğdır’da gördüğüm çiğ şölen — ÇÖĞÜŞİ ₺1.234,56
9. Açılış seremonisi
Ana sayfa oturumun ilk açılışında önce 0 ve 1 yağmuruyla tamamen kaplanıyor; sonra bütün yüzey aynı anda sayfaya dönüşüyor ve amber kıvılcımlar sahneden en son çekiliyor. Seremoni bir sayfa imzası değil, ayrı bir katman: proje başına bir tane, 2 saniye, hiçbir şey saklamıyor. Kaldırıldığında sayfadan hiçbir bilgi eksilmiyor.
Tekrar izleme
Seremoni hiçbir şey saklamıyor: ana sayfanın her açılışında
oynuyor. Hareket azaltma gibi bir tercih onu kestiyse
?seremoni=1 bütün kapıları
ezer; ?seremoni=0 ise
tamamen kapatır.
Hangi durumlarda hiç oynamaz?
- Hareket azaltma tercihi açıkken — pazarlıksız
- Veri tasarrufu modunda
- Yüksek kontrast (zorlanmış renk) modunda
- JavaScript kapalıyken; katmanın taban hâli zaten kapalı
- Ana sayfa dışındaki sayfalarda
Kapanış CSS ile garanti altında: betik hiç çalışmasa bile
katman 2 saniyede görünmez ve tıklanamaz hâle geliyor.
Kapısı npm run check:seremoni.