Sistem · Marka ve tasarım

Palet, belirteçler ve bileşenler: denetlenmiş.

Bu pano elle yazılmadı: av.iadeos.com tasarım sisteminin tokens.json dosyasından, sitenin kendi stil dosyalarından ve bileşen paketinden derleme anında üretilir. Her renk çifti WCAG oranıyla, her değer kaynağıyla karşılaştırılır; tutmayan bir değer olursa test düşer.

43 / 43kontrast çifti eşiği geçti · 38 tanesi AAA

25 / 25değer kaynakla eşit (tokens.json ↔ site ↔ paket)

3tema: kâğıt · mürekkep · ay (sitenin koyu görünümü)

01 · Palet

Üç çekirdek renk, altı destek tonu.

Beyaz ~%80, mürekkep ~%15, mavi ~%5. Kırmızı, yeşil, sarı yoktur; renk hüküm vermez. Değerler tokens.json'dan okunur.

iadeos-white#FFFFFFBeyaz · White

iadeos-ink#0B1220Mürekkep · Ink

iadeos-blue#176BFDIADEOS Mavisi · IADEOS Blue

iadeos-blue-700#0F4FC4Mavi 700 · Blue 700

iadeos-blue-100#D6E4FFMavi 100 · Blue 100

iadeos-blue-50#EEF4FFMavi 50 · Blue 50

iadeos-gray-600#4A5363Gri 600 · Gray 600

iadeos-line#E3E7EEÇizgi · Line

iadeos-surface#F6F8FBYüzey · Surface

iadeos-line-strong#C9D0DBKart kenarı · Card border

02 · Roller ve temalar

Aynı rol, üç zemin.

Bileşenler rengi değil rolü kullanır. Kâğıt ve mürekkep değerleri tokens.json'dan; ay (sitenin koyu görünümü) değerleri assets/ds/bundle.css hasta ekinden.

Rol	Kâğıt	Mürekkep	Ay
`ground`	`#ffffff`	`#0b1220`	`#0B1220`
`ground-2`	`#f6f8fb`	`rgba(255,255,255,0.04)`	`#101A2C`
`text`	`#0b1220`	`#ffffff`	`#EEF2F8`
`text-2`	`#4a5363`	`rgba(255,255,255,0.72)`	`#A9B4C6`
`rule`	`#e3e7ee`	`rgba(255,255,255,0.12)`	`#223049`
`rule-strong`	`#c9d0db`	`rgba(255,255,255,0.24)`	`#33435F`
`rule-ink`	`#0b1220`	`#ffffff`	`#EEF2F8`
`control-border`	`#4a5363`	`rgba(255,255,255,0.56)`	`#6B7A96`
`action`	`#176bfd`	`#176bfd`	`#176BFD`
`action-hover`	`#0f4fc4`	`#0f4fc4`	`#0F4FC4`
`on-action`	`#ffffff`	`#ffffff`	`#FFFFFF`
`link`	`#176bfd`	`#d6e4ff`	`#8DB4FF`
`link-strong`	`#0f4fc4`	`#d6e4ff`	`#8DB4FF`
`focus`	`#d6e4ff`	`#d6e4ff`	`#3D6FD8`
`focus-inner`	`#176bfd`	`#ffffff`	`#8DB4FF`
`selected`	`#eef4ff`	`rgba(23,107,253,0.18)`	`#13213D`
`hair-1`	`rgba(11,18,32,0.06)`	`rgba(255,255,255,0.06)`	`rgba(255,255,255,0.06)`
`hair-2`	`rgba(11,18,32,0.14)`	`rgba(255,255,255,0.16)`	`rgba(255,255,255,0.16)`
`light`	`rgba(23,107,253,0.08)`	`rgba(23,107,253,0.18)`	`rgba(23,107,253,0.18)`
`glass`	`rgba(255,255,255,0.86)`	`rgba(11,18,32,0.72)`	`rgba(11, 18, 32, 0.86)`
`grain`	`rgba(11,18,32,0.035)`	`rgba(255,255,255,0.035)`	`rgba(255,255,255,0.035)`

03 · Kontrast

Her çift ölçüldü.

Oran WCAG 2.2 bağıl parlaklık formülüyle hesaplanır; saydam değerler zeminin üstüne karıştırılarak ölçülür. Metin için eşik 4,5:1 (AA), kontrol kenarı ve odak için 3:1 (1.4.11).

Tema	Kullanım	Örnek	Çift	Oran	Eşik	Sonuç
kagit	metin	Aa 186.000	`text` / `ground`	18,72:1	≥ 4,5	AAA
kagit	ikincil metin	Aa 186.000	`text-2` / `ground`	7,75:1	≥ 4,5	AAA
kagit	metin · ikinci zemin	Aa 186.000	`text` / `ground-2`	17,6:1	≥ 4,5	AAA
kagit	ikincil metin · ikinci zemin	Aa 186.000	`text-2` / `ground-2`	7,29:1	≥ 4,5	AAA
kagit	bağlantı	Aa 186.000	`link` / `ground`	4,61:1	≥ 4,5	AA
kagit	küçük mavi metin	Aa 186.000	`link-strong` / `ground`	7,15:1	≥ 4,5	AAA
kagit	birincil düğme	Aa 186.000	`on-action` / `action`	4,61:1	≥ 4,5	AA
kagit	seçili satır	Aa 186.000	`text` / `selected`	16,96:1	≥ 4,5	AAA
kagit	kontrol kenarı (WCAG 1.4.11)	Aa 186.000	`control-border` / `ground`	7,75:1	≥ 3,0	AAA
kagit	odak kenarı (WCAG 1.4.11)	Aa 186.000	`focus-inner` / `ground`	4,61:1	≥ 3,0	AAA
kagit	bölüm çizgisi	Aa 186.000	`rule-ink` / `ground`	18,72:1	≥ 3,0	AAA
murekkep	metin	Aa 186.000	`text` / `ground`	18,72:1	≥ 4,5	AAA
murekkep	ikincil metin	Aa 186.000	`text-2` / `ground`	9,95:1	≥ 4,5	AAA
murekkep	metin · ikinci zemin	Aa 186.000	`text` / `ground-2`	17,2:1	≥ 4,5	AAA
murekkep	ikincil metin · ikinci zemin	Aa 186.000	`text-2` / `ground-2`	9,34:1	≥ 4,5	AAA
murekkep	bağlantı	Aa 186.000	`link` / `ground`	14,62:1	≥ 4,5	AAA
murekkep	küçük mavi metin	Aa 186.000	`link-strong` / `ground`	14,62:1	≥ 4,5	AAA
murekkep	birincil düğme	Aa 186.000	`on-action` / `action`	4,61:1	≥ 4,5	AA
murekkep	seçili satır	Aa 186.000	`text` / `selected`	15,68:1	≥ 4,5	AAA
murekkep	kontrol kenarı (WCAG 1.4.11)	Aa 186.000	`control-border` / `ground`	6,39:1	≥ 3,0	AAA
murekkep	odak kenarı (WCAG 1.4.11)	Aa 186.000	`focus-inner` / `ground`	18,72:1	≥ 3,0	AAA
murekkep	bölüm çizgisi	Aa 186.000	`rule-ink` / `ground`	18,72:1	≥ 3,0	AAA
ay	metin	Aa 186.000	`text` / `ground`	16,67:1	≥ 4,5	AAA
ay	ikincil metin	Aa 186.000	`text-2` / `ground`	8,94:1	≥ 4,5	AAA
ay	metin · ikinci zemin	Aa 186.000	`text` / `ground-2`	15,5:1	≥ 4,5	AAA
ay	ikincil metin · ikinci zemin	Aa 186.000	`text-2` / `ground-2`	8,32:1	≥ 4,5	AAA
ay	bağlantı	Aa 186.000	`link` / `ground`	9,01:1	≥ 4,5	AAA
ay	küçük mavi metin	Aa 186.000	`link-strong` / `ground`	9,01:1	≥ 4,5	AAA
ay	birincil düğme	Aa 186.000	`on-action` / `action`	4,61:1	≥ 4,5	AA
ay	seçili satır	Aa 186.000	`text` / `selected`	14,24:1	≥ 4,5	AAA
ay	kontrol kenarı (WCAG 1.4.11)	Aa 186.000	`control-border` / `ground`	4,32:1	≥ 3,0	AA
ay	odak kenarı (WCAG 1.4.11)	Aa 186.000	`focus-inner` / `ground`	9,01:1	≥ 3,0	AAA
ay	bölüm çizgisi	Aa 186.000	`rule-ink` / `ground`	16,67:1	≥ 3,0	AAA
site · aydınlık	metin	Aa 186.000	`--ink` / `--white`	18,72:1	≥ 4,5	AAA
site · aydınlık	ikincil metin	Aa 186.000	`--gray-600` / `--white`	7,75:1	≥ 4,5	AAA
site · aydınlık	metin · yüzey	Aa 186.000	`--ink` / `--surface`	17,6:1	≥ 4,5	AAA
site · aydınlık	ikincil · yüzey	Aa 186.000	`--gray-600` / `--surface`	7,29:1	≥ 4,5	AAA
site · aydınlık	bağlantı	Aa 186.000	`--blue-700` / `--white`	7,15:1	≥ 4,5	AAA
site · ay	metin	Aa 186.000	`--ink` / `--white`	16,67:1	≥ 4,5	AAA
site · ay	ikincil metin	Aa 186.000	`--gray-600` / `--white`	8,94:1	≥ 4,5	AAA
site · ay	metin · yüzey	Aa 186.000	`--ink` / `--surface`	15,5:1	≥ 4,5	AAA
site · ay	ikincil · yüzey	Aa 186.000	`--gray-600` / `--surface`	8,32:1	≥ 4,5	AAA
site · ay	bağlantı	Aa 186.000	`--blue-700` / `--white`	9,01:1	≥ 4,5	AAA

04 · Çapraz denetim

Kaynak, site ve paket aynı değeri söylüyor mu?

Çekirdek renkler tokens.json ↔ sitenin :root değişkenleri; roller tokens.json (kâğıt) ↔ bileşen paketindeki var() yedek değerleri.

Belirteç	Kaynak	Nerede	Bulunan	Sonuç
`iadeos-white`	`#FFFFFF`	`--white`	`#FFFFFF`	EŞİT
`iadeos-ink`	`#0B1220`	`--ink`	`#0B1220`	EŞİT
`iadeos-blue`	`#176BFD`	`--blue`	`#176BFD`	EŞİT
`iadeos-blue-700`	`#0F4FC4`	`--blue-700`	`#0F4FC4`	EŞİT
`iadeos-blue-100`	`#D6E4FF`	`--blue-100`	`#D6E4FF`	EŞİT
`iadeos-blue-50`	`#EEF4FF`	`--blue-50`	`#EEF4FF`	EŞİT
`iadeos-gray-600`	`#4A5363`	`--gray-600`	`#4A5363`	EŞİT
`iadeos-line`	`#E3E7EE`	`--line`	`#E3E7EE`	EŞİT
`iadeos-surface`	`#F6F8FB`	`--surface`	`#F6F8FB`	EŞİT
`ground`	`#FFFFFF`	`bundle.css var() yedeği`	`#FFFFFF`	EŞİT
`ground-2`	`#F6F8FB`	`bundle.css var() yedeği`	`#F6F8FB`	EŞİT
`text`	`#0B1220`	`bundle.css var() yedeği`	`#0B1220`	EŞİT
`text-2`	`#4A5363`	`bundle.css var() yedeği`	`#4A5363`	EŞİT
`rule`	`#E3E7EE`	`bundle.css var() yedeği`	`#E3E7EE`	EŞİT
`rule-strong`	`#C9D0DB`	`bundle.css var() yedeği`	`#C9D0DB`	EŞİT
`rule-ink`	`#0B1220`	`bundle.css var() yedeği`	`#0B1220`	EŞİT
`control-border`	`#4A5363`	`bundle.css var() yedeği`	`#4A5363`	EŞİT
`action`	`#176BFD`	`bundle.css var() yedeği`	`#176BFD`	EŞİT
`action-hover`	`#0F4FC4`	`bundle.css var() yedeği`	`#0F4FC4`	EŞİT
`on-action`	`#FFFFFF`	`bundle.css var() yedeği`	`#FFFFFF`	EŞİT
`link-strong`	`#0F4FC4`	`bundle.css var() yedeği`	`#0F4FC4`	EŞİT
`focus`	`#D6E4FF`	`bundle.css var() yedeği`	`#D6E4FF`	EŞİT
`focus-inner`	`#176BFD`	`bundle.css var() yedeği`	`#176BFD`	EŞİT
`selected`	`#EEF4FF`	`bundle.css var() yedeği`	`#EEF4FF`	EŞİT
`glass`	`rgba(255,255,255,0.86)`	`bundle.css var() yedeği`	`rgba(255,255,255,0.86)`	EŞİT

05 · Yazı

IBM Plex: biri konuşur, biri sayar.

Belirteç	Örnek	Boyut · ağırlık	Kullanım
`display-xl` Görüntü · Display	Farkı ölçün.	96px · 300	Yalnızca tanıtım sayfası kahraman başlığı; clamp(48px, 6.6vw, 96px). Sayfada bir kez.
`display` Görüntü · Display	Renk paleti	60px · 300	Sayfa başlığı (palet sayfası h1); clamp(36px, 5vw, 60px).
`display-sm` Görüntü · Display	SUT motoru nasıl karar verir	40px · 300	Tanıtım sayfası bölüm başlığı; clamp(30px, 3.4vw, 40px).
`h2` Metin · Text	Ana renkler · Core	20px · 500	Bölüm başlığı; üstünde 1px `rule-ink` çizgi ve 20px boşluk (palet sayfası h2).
`h3` Metin · Text	Renk hüküm vermez	16px · 500	Kart ve kural başlığı (palet sayfası .rule strong).
`lede` Metin · Text	Üç ana renk: beyaz zemin, mürekkep metin, IADEOS mavisi eylem.	18px · 400	Giriş paragrafı, `text-2`, en çok 62ch.
`body` Metin · Text	Dökümlü faturayı satır satır okur.	16px · 400	Gövde metni.
`body-strong` Metin · Text	Mürekkep	16px · 500	Vurgu, renk adı, tablo içi anahtar değer.
`small` Metin · Text	Zemin · Background · ~%80	14px · 400	Rol satırı, kart açıklaması, form yardım metni.
`caption` Metin · Text	Üretim 2026-10-11 · Değerler kaynaklarla karşılaştırıldı.	13px · 400	Alt bilgi, kaynak notu, dipnot.
`label` Mono	IADEOS · TASARIM SİSTEMİ 1.0	12px · 400	Üst etiket (eyebrow): BÜYÜK HARF, `link-strong`. Türkçe büyük harf: i → İ.
`th` Mono	ÖN / ARKA	11px · 500	Tablo başlığı: BÜYÜK HARF, `text-2`, altında 1px `rule-ink`.
`badge` Mono	KANITLI	11px · 600	Durum etiketi: BÜYÜK HARF, 6px 9px iç boşluk, `radius-xs`.
`code` Mono	#176BFD	15px · 500	Renk kodu, SUT kodu, tutar vurgusu.
`mono-sm` Mono	--iadeos-blue · RGB 23, 107, 253	12px · 400	Değişken adı, RGB satırı, belge özeti (hash), madde atfı.
`figure` Mono	206.678	56px · 300	Kaynaklı büyük rakam (tanıtım sayfası). Her rakamın altında kaynak satırı `caption`.

06 · Aralık, köşe, çizgi, katman

4 px taban; gölge yok.

Aralık	Değer	Kullanım
`space-1`	4px	İkon ile etiket arası.
`space-2`	8px	Etiket grupları arası, rozet içi.
`space-3`	12px	Izgara aralığı (palet .grid gap), kart iç üst boşluğu.
`space-4`	16px	Kart iç boşluğu, h2 alt boşluğu.
`space-5`	20px	Bölüm çizgisi ile başlık arası (h2 padding-top), menü öğeleri.
`space-6`	24px	Sayfa kenar boşluğu (gutter), form alanları arası.
`space-7`	28px	Başlık ile oran çubuğu arası.
`space-8`	32px	Kart grupları arası.
`space-14`	56px	Bölümler arası (palet h2 margin-top, sayfa üst boşluğu).
`space-16`	64px	Sayfa alt boşluğu; tanıtım sayfasında küçük bölüm ritmi.
`space-24`	96px	Tanıtım sayfası bölüm ritmi (masaüstü).
`space-32`	128px	Kahraman ve kapanış bölümlerinin dikey boşluğu (masaüstü).

Köşe	Değer	Kullanım
`radius-0`	0px	Tablo, oran çubuğu, bölüm bandı.
`radius-xs`	2px	Durum etiketi (KANITLI…), madde atfı çipi.
`radius-sm`	6px	Buton, giriş alanı, kontrast çifti çipi.
`radius-md`	10px	Kart, renk örneği, kural kartı, dosya bırakma alanı, başlık içi işaret kutusu.

Çizgi	Değer	Kullanım
`border-hair`	0.5px	Tuval desenlerinde vektör kıl çizgisi (girişim, halka). DOM'da kullanılmaz.
`border-1`	1px	Varsayılan çizgi: ayraç, kart, ADAY çerçevesi, ÖLÇÜLMEDİ kesik çizgisi.
`border-2`	2px	ÇELİŞKİ çerçevesi, form hata çerçevesi.
`border-focus`	3px	Odak halkası kalınlığı.

Katman	z	Kullanım
`z-ground`	0	L0 zemin ve gren.
`z-pattern`	1	L1 desen tuvali (girişim, plan, iplik).
`z-light`	2	L2 ışık alanı.
`z-scene`	3	L3 3B görsel / canlı sahne.
`z-glass`	4	L4 cam etiketler ve sahne üstü kartlar.
`z-content`	5	L5 başlık, metin, butonlar.
`z-sticky`	20	L6 yapışkan menü ve ilerleme rayı.
`z-overlay`	30	L7 örtü, diyalog, komut paleti.

07 · Bileşenler

Aynı paket, canlı.

Aşağıdakiler resim değil: sitenin her sayfasında çalışan bileşen paketinin kendisi. Ekranlar: DEOS (14 durum), ücretsiz araçlar (5 araç), marka.

Palet, belirteçler ve bileşenler: denetlenmiş.

Üç çekirdek renk, altı destek tonu.

Aynı rol, üç zemin.

Her çift ölçüldü.

Kaynak, site ve paket aynı değeri söylüyor mu?

IBM Plex: biri konuşur, biri sayar.

4 px taban; gölge yok.

Aynı paket, canlı.

Düğmeler

Kanıt durumları

Atıf ve yükleme

Alan

Hareket anahtarı

Arama tetikleyici