Sürüm 0.1 · iç belge

Yazarkasa fişinden çıkmış bir arayüz

Askıda'nın görsel dili mahalle esnafının emaye tabelasından ve yazarkasa fişinden geliyor: keskin köşe, ince mürekkep kontur, tabular sayı. Yuvarlatma bilinçli olarak yok — her yüzey basılı bir kağıt gibi durur. Aşağıdaki her bileşen hem açık hem koyu temada, üstteki seçiciyle anında değiştirilebilir.

Palet

Altı renk, ikisi zemin

Ham palet sabittir; tema yalnızca semantik değişkenleri yeniden bağlar. Amber açık temada metin için okunmadığı için metin varyantı (--accent-ink) koyultuldu; emaye yeşili koyu temada okunmadığı için açıldı. Her oran WCAG AA eşiği olan 4.5:1 üstünde.

#14243b--c-ink

Mürekkep lacivert

Başlık mürekkebi, kontur, perde

kağıt: 13,66:1AAA
is: 1,23:1yalnız dolgu

#0f5c4a--c-enamel

Emaye tabela yeşili

Ana eylem, askıda durumu

kağıt: 6,94:1AA
is: 2,43:1yalnız dolgu

#c0392f--c-sign

Tabela kırmızısı

Yıkıcı eylem, hata

kağıt: 4,75:1AA
is: 3,54:1AA·büyük

#d89b3c--c-crust

Ekmek kabuğu amberi

Vurgu, not şeridi, uyarı

kağıt: 2,12:1yalnız dolgu
is: 7,94:1AAA

#eef0f2--c-paper

Soğuk kağıt

Açık temada zemin

kağıt: 1,00:1yalnız dolgu
is: 16,82:1AAA

#0b0f14--c-soot

İs siyahı

Koyu temada zemin, gövde metni

kağıt: 16,82:1AAA
is: 1,00:1yalnız dolgu

Tipografi

Bricolage Grotesque · IBM Plex Sans · IBM Plex Mono

Başlıkta karakterli bir grotesk, gövdede yorulmadan okunan bir humanist, tutar ve fiş kodunda tabular monospace. Üç ailenin de latin-ext alt kümesi yüklenir — Türkçe diakritikler kırpılmaz.

Başlık

.font-display

Bricolage Grotesque

Askıda bir şey var

Fırıncı Şükrü'nün çırağı

Sayfa ve bölüm başlıkları, fiş ürün adı. 500–800 ağırlık.

Gövde

.font-sans

IBM Plex Sans

Mahallede kim neye ihtiyaç duyuyor, çoğu zaman kimse sormaz. Askıda, soru sormaya gerek bırakmadan çalışır: bağışçı fişi bırakır, ihtiyacı olan kodu söyler, esnaf ürünü verir.

İkincil metin — 6,4:1 kontrastla okunur.

Paragraf, etiket, buton metni. 400–600 ağırlık.

Sayı & kod

.font-mono

IBM Plex Mono

₺1.284,50

7KHM-4TPX

0123456789 · 46 fiş · %38

Tutar, fiş kodu, rozet, tablo başlığı. Tabular rakam.

Türkçe diakritik denetimi

Bricolage

ŞĞİIÖÜÇ şğıiöüç

Iğdır'lı şoför çöp öğütücüsü

Plex Sans

ŞĞİIÖÜÇ şğıiöüç

Iğdır'lı şoför çöp öğütücüsü

Plex Mono

ŞĞİIÖÜÇ şğıiöüç

Iğdır'lı şoför çöp öğütücüsü

Noktalı İ ile noktasız ı ayrı görünmeli; başlık satırlarında Ğ ve İ üst işareti kırpılmamalı. Üç ailenin de latin-ext alt kümesi yükleniyor.

Askı fişi

Ürünün imza bileşeni

Perfore kenar gerçek: sol ve sağ kenardaki delikler radial-gradient maskesiyle kesiliyor, şeffaf oldukları için kart her zeminde doğru görünür. Ortadaki koparma çizgisi noktalı perforasyon. Köşeler keskin — yuvarlatma yok.

Askı fişi

Tam buğday ekmeği

Askıda

EsnafFırıncı ŞükrüSemtKadıköy, İstanbulBırakıldı2 saat önce

“Sabah sıcak sıcak alınsın, afiyet olsun.”

Askı fişi

Kareli defter 80 yaprak

Alındı

EsnafIlgın KırtasiyeSemtÇankaya, AnkaraBırakıldıdün

Askı fişi

Türk kahvesi

Süresi geçti

EsnafÇınaraltı KahvesiSemtBeşiktaş, İstanbulBırakıldı3 hafta önce

“Bir öğretmenden bir öğrenciye.”

Buton

Üç varyant, tek asıl eylem

Bir ekranda yalnızca bir “ana” buton olur. Basma hissi gölge yerine 1px aşağı kaydırmayla verilir — kağıda mühür basmak gibi. Yükleniyor durumunda buton kilitlenir ve aria-busy taşır.

Ana

Sayfadaki tek asıl eylem. Emaye yeşili dolgu.

İkincil

Alternatif yol. Mürekkep konturlu kağıt.

Sessiz

Vazgeç, geri dön, ayrıntı. Yalnızca metin.

Form

Girdi ve alan hatası

Etiket her zaman görünür, yer tutucu etiketin yerini almaz. Hata metni aria-errormessage ile alana bağlanır ve role=alert taşır. Aşağıdaki alanlara geçersiz değer yazarak deneyin.

Bırakılacak tutar

₺

5 ₺ ile 5.000 ₺ arasında.

Fiş kodu

Esnafın okuyacağı sekiz karakterli kod.

Rumuz

Boş bırakırsan fiş “İsimsiz” görünür.

Kapalı alan

Tablo

Yazarkasa cetveli

Tutar kolonu sağa yaslı ve tabular — rakamlar satırlar arasında hizalanır. Dar ekranda ikincil kolonlar gizlenir, tablo klavyeyle yatay kaydırılabilir.

Son bırakılan askı fişleri: kod, ürün, esnaf, semt, durum ve tutar
Fiş kodu	Ürün	Esnaf	Semt	Durum	Tutar
7KHM-4TPX	Tam buğday ekmeği ×3	Fırıncı Şükrü	Kadıköy	Askıda	₺45
D9WN-CJ2F	Kareli defter ×2	Ilgın Kırtasiye	Çankaya	Alındı	₺70
MRT4-89KV	Türk kahvesi ×1	Çınaraltı Kahvesi	Beşiktaş	Süresi geçti	₺25
PW3H-KLND	Yumurta 10’lu ×1	Ağabey Market	Karşıyaka	Askıda	₺65

Pencere

Kalıcı pencere ve bildirim

Pencere açıldığında odak içeri alınır ve tuzaklanır; Esc ya da perdeye tıklamak kapatır; kapanışta odak tetikleyen butona döner. Bildirimler mobilde alta tam genişlik yerleşir.

Açtıktan sonra Sekme ve Esc tuşlarını deneyin.

Rozet

Durum tek bakışta

Renk tek başına anlam taşımaz: her rozette metin var, noktalı varyant renk körlüğünde de ayırt edilebilir biçim farkı sağlar. Tüm tonlar iki temada da 4.5:1 üstünde.

AskıdaAlındıSüresi geçtiYeni esnafTaslakAskıdaAlındıSüresi geçtiYeni esnafTaslak

Boş durum

Çıkmaz sokak yok

Her boş liste bir sonraki adımı önerir. Çizim konuya özgü: boşalmış askı çengeli ve yere düşmüş fiş silueti.

Bu semtte şu an askıda fiş yok

Kadıköy'de bekleyen fiş kalmadı — hepsi sahibini buldu. İlk fişi sen bırakabilir ya da yakın semtlere göz atabilirsin.

Yükleniyor

İskelet, gerçek içerikle aynı ölçüde

İskeletler yerini alacakları bileşenin ölçüsünü birebir taklit eder; içerik gelince zıplama olmaz. Hareketi azalt tercihi açıkken parlama durur.

Erişilebilirlik

Klavyeyle dolaşılabilir, okunur

Sekme tuşuyla bu sayfayı baştan sona dolaşın: her odaklanabilir öğede 2px mürekkep halka görünür. Kalıcı pencerede odak tuzaklanır, Esc kapatır, kapanışta odak tetikleyene döner.

Odak halkası
Tek :focus-visible kuralı, 2px kalınlık, 2px boşluk, her temada kontrastlı
Kontrast
Gövde metni 16.8:1 · ikincil metin 6.4:1 · rozet ve dolgular ≥ 4.5:1
Ekran okuyucu
Tabloda caption, rozetlerde durum metni, bildirimlerde aria-live
Hareket
prefers-reduced-motion açıkken animasyon ve yumuşak kaydırma kapanır
Dil
<html lang="tr"> — ekran okuyucu Türkçe telaffuz eder
Dokunma hedefi
Butonlar en az 32px, ana eylemler 40–48px yüksekliğinde