Tasarım Sistemi

Tüm Ordo yüzeyleri — Ordo Operasyon, Ordo Portal, Ordo İş Ortağı, Ordo Kontrol, mobil uygulamalar, bu site ve teknik sunum — tek bir tasarım sistemi üzerinde çalışır. Sistemin kaynağı tfs-frontend/packages/ui-kit paketidir; bu sayfadaki token tabloları o paketin tokens.css dosyasından derleme zamanında okunur ve bileşen örnekleri aynı özel özelliklerle çizilir. Sayfa, kodun gerisinde kalamaz: token değişirse tablo değişir.

Platformun teknik kod adı TFS’dir; URL’ler (tfs-*.karyabilisim.com), paket adları (@tfs/*), depo adları ve ortam değişkenleri bu kodu taşır. İnsanın okuduğu her yerde ürün adı Ordo’dur.

İlkeler

Hiyerarşi tip ve boşlukla kurulur, renk ve kutuyla değil. Görünüm başına tek vurgu.
Düz yüzeyler, ince çizgiler. Karttan önce 1px ayraç tercih edilir; kart içinde kart olmaz.
Yoğun ama sakin. 8px ızgara; bölüm boşlukları 32/48px; sayfa kenar boşluğu 24px masaüstü, 16px telefon.
Gradyan, ışıma, cam efekti yok. Yapışkan başlığın düz yarı saydam yüzeyi tek istisnadır.
İkonlar 1,5px çizgi, currentColor, 16/20px. Emoji yok; renkli daire içinde ikon ızgarası yok.
Tablolar operasyonun ana yüzeyidir. Yapışkan başlık, sağa hizalı tabular rakamlar, mono kimlikler, satır üzerinde --tfs-surface-hover, zebra yok.
Formlar bir yardımcı satır ayırır. Etiket 13px/500; kontrol 32px; para, telefon, e-posta, TCKN, IBAN ve tarih maskelidir. Hata metni --tfs-danger-text; yalnızca kırmızı kenarlık yetmez.
Sayfa başlığı deseni her sayfada aynıdır. Bölüm etiketi → h1 (24px/600) → tek satır açıklama → sağda eylemler; derinlik > 1 ise üstte kırıntı.
Boş, yükleniyor ve hata durumları tasarlanır. İskeletler son yerleşimi taklit eder.
390px’te hiçbir şey taşmaz. Tablolar kendi kabı içinde kayar; sayfa yatay kaymaz.
Simülasyonlar ve canlı önizlemeler sabit boyutludur. Çalıştırma öncesi ve sonrası scrollHeight ve kap getBoundingClientRect() birebir aynıdır.
Koyu tema birinci sınıftır. Her token’ın koyu karşılığı vardır; dokunulan her ekran iki temada kontrol edilir.
Kontrast eşli token’lar. Her dolu yüzeyin *-contrast, her yumuşak yüzeyin *-text eşi vardır (WCAG AA). Renkli zemine gövde metni konmaz.
Mevzuat notları InfoPopover ve ReferenceShelf içinde yaşar. Satır içi not yalnızca onaylı yerlerde (Mali Durum).

Token’lar

Renk — nötr (soğuk mürekkep)

Sayfa zemini gray-100, yüzeyler beyaz (koyu temada gray-950 / gray-900), kenarlıklar gray-200.

gray-50: #f7f8fa

gray-100: #f0f2f5

gray-200: #e1e4ea

gray-300: #c9ced7

gray-400: #9aa2af

gray-500: #6d7585

gray-600: #525a69

gray-700: #3c4350

gray-800: #282d37

gray-900: #181c24

gray-950: #0e1116

Renk — birincil (marine mürekkep)

Birincil dolgu açık temada primary-800, koyu temada primary-500; bağlantı ve etkin öğe --tfs-primary-text.

primary-50: #f1f5fa

primary-100: #dfe8f2

primary-200: #c0d2e6

primary-300: #94b1d2

primary-400: #6189b8

primary-500: #3d679c

primary-600: #2c5082

primary-700: #24416a

primary-800: #1c3454

primary-900: #152741

primary-950: #0c1829

Renk — anlamsal

Her swatch’ın sol yarısı açık, sağ yarısı koyu temanın değeridir.

bg: #f0f2f5; #0e1116

surface: #ffffff; #181c24

surface-raised: #ffffff; #282d37

surface-sunken: #f7f8fa; #0b0e13

surface-hover: #f0f2f5; #282d37

surface-tint: color-mix(in srgb, #1c3454 6%, #ffffff); color-mix(in srgb, #3d679c 12%, #181c24)

border: #e1e4ea; #282d37

border-strong: #c9ced7; #3c4350

text: #181c24; #f0f2f5

text-muted: #525a69; #9aa2af

text-subtle: #6d7585; #9aa2af

primary: #1c3454; #3d679c

primary-hover: #152741; #6189b8

primary-soft: #f1f5fa; rgb(97 137 184 / 0.16)

primary-contrast: #ffffff

primary-text: #24416a; #94b1d2

focus-ring: #3d679c; #94b1d2

focus-ring-soft: rgb(61 103 156 / 0.28); rgb(148 177 210 / 0.32)

overlay: rgb(14 17 22 / 0.55); rgb(8 10 14 / 0.72)

tooltip-bg: #181c24; #f0f2f5

tooltip-text: #f7f8fa; #181c24

Renk — vurgu (pirinç)

Sistemin tek sıcak notası. İşaret, öne çıkan tek figür, bölüm başlığı altındaki ince çizgi, bir döngünün “çekilen” dilimi. Asla düğme dolgusu, asla durum rengi.

accent: #a97f2c; #c9a24f

accent-contrast: #231a06

accent-soft: #f7f0df; rgb(201 162 79 / 0.16)

accent-text: #7a5a1a; #e2c27a

Renk — durum

Tam doygunluğun bir kademe altı. Eşleme kuralı: dolu yüzey + -contrast, yumuşak yüzey + -text. Amber asla beyaz metin taşımaz.

danger: #c0392f

danger-hover: #a22f27

danger-soft: #fbeeec; rgb(192 57 47 / 0.16)

danger-contrast: #ffffff

danger-text: #a12d25; #f2a39c

success: #1f7a4d

success-soft: #e9f5ee; rgb(31 122 77 / 0.16)

success-contrast: #ffffff

success-text: #1b6b43; #6fcf97

warning: #b8791f

warning-soft: #fbf3e3; rgb(184 121 31 / 0.16)

warning-contrast: #1f1400

warning-text: #8a5a12; #e8b45a

info: #2a6db3

info-soft: #eaf2fb; rgb(42 109 179 / 0.16)

info-contrast: #ffffff

info-text: #245f9c; #7fb3ea

Renk — grafik paleti

Sıra sabittir; tüketiciler chartPalette ile indeksler. İlk ikisi ev çiftidir (marine, pirinç); nakit akışı çifti para girişi/çıkışı için aynı çifti kullanır, böylece durum yeşili ve kırmızısı duruma kalır.

chart-1: #2c5082; #7fa6d6

chart-2: #a97f2c; #d6b36a

chart-3: #1f8a7a; #5cc3b2

chart-4: #6b7fb3; #a3b1dc

chart-5: #c0392f; #ef8d84

chart-6: #7d4e8c; #c493d2

chart-7: #3f8f4f; #85c98f

chart-8: #b5536d; #e295aa

chart-flow-in: #2c5082; #6189b8

chart-flow-out: #a97f2c; #c9a24f

chart-grid: #e1e4ea; #282d37

chart-axis: #6d7585; #9aa2af

chart-cursor: rgb(24 28 36 / 0.06); rgb(154 162 175 / 0.1)

Tipografi

IBM Plex Sans (metin ve başlıklar), IBM Plex Mono (kimlikler ve hizalanması gereken rakamlar). Site, dokümantasyon ve sunumda 28px ve üstü görüntü başlıkları Newsreader (serif, değişken) ile dizilir; gövde Plex’te kalır. Bölüm etiketleri 11–12px, büyük harf, 0,06em aralık, --tfs-text-subtle. Rakamlar tabular-nums.

Token	Değer	Örnek	Kullanım
`--tfs-text-muted`	`var(--tfs-gray-600) · var(--tfs-gray-600)`	Havuz bakiyesi ₺48.200.000,00
`--tfs-text-subtle`	`var(--tfs-gray-500) · var(--tfs-gray-500)`	Havuz bakiyesi ₺48.200.000,00
`--tfs-text-xs`	`0.75rem · 12px`	Havuz bakiyesi ₺48.200.000,00	Meta, rozet, tablo başlığı, yardımcı satır
`--tfs-text-sm`	`0.8125rem · 13px`	Havuz bakiyesi ₺48.200.000,00	Form etiketi, tablo hücresi, düğme
`--tfs-text-md`	`0.875rem · 14px`	Havuz bakiyesi ₺48.200.000,00	Gövde metni (uygulamalar)
`--tfs-text-lg`	`1rem · 16px`	Havuz bakiyesi ₺48.200.000,00	Diyalog başlığı
`--tfs-text-xl`	`1.25rem · 20px`	Havuz bakiyesi ₺48.200.000,00	Sayfa başlığı (h1, 600)
`--tfs-text-2xl`	`1.5rem · 24px`	Havuz bakiyesi ₺48.200.000,00	KPI değeri (tabular)
`--tfs-text-3xl`	`1.875rem · 30px`	Havuz bakiyesi ₺48.200.000,00	Pano başlığı
`--tfs-text-4xl`	`2.25rem · 36px`	Havuz bakiyesi ₺48.200.000,00	Yalnızca pazarlama/belge — Newsreader
`--tfs-font-sans`	`"IBM Plex Sans Variable", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
`--tfs-font-mono`	`"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
`--tfs-tracking-tight`	`-0.01em`
`--tfs-tracking-tighter`	`-0.02em`
`--tfs-tracking-wide`	`0.06em`
`--tfs-leading-tight`	`1.2`
`--tfs-leading-normal`	`1.5`

Yarıçap

Bilinçli olarak keskin. Her şeyin yuvarlatıldığı arayüz tüketici yazılımı gibi okunur; bir defterin sevimli değil, kesin görünmesi gerekir. Hap biçimi yalnızca durum noktası ve avatarda.

Token	Değer	Örnek
`--tfs-radius-sm`	`0.125rem · 2px`
`--tfs-radius-md`	`0.25rem · 4px`
`--tfs-radius-lg`	`0.375rem · 6px`
`--tfs-radius-xl`	`0.5rem · 8px`
`--tfs-radius-2xl`	`0.75rem · 12px`
`--tfs-radius-full`	`9999px · 9999px`

Boşluk ve yoğunluk

Token	Değer	Örnek
`--tfs-space-1`	`0.25rem · 4px`
`--tfs-space-2`	`0.5rem · 8px`
`--tfs-space-3`	`0.75rem · 12px`
`--tfs-space-4`	`1rem · 16px`
`--tfs-space-5`	`1.25rem · 20px`
`--tfs-space-6`	`1.5rem · 24px`
`--tfs-space-8`	`2rem · 32px`

Yoğunluk [data-density="compact"] ile sıkılaşır; tercih kalıcıdır.

Token	comfortable	compact
`--tfs-row-py`	`0.375rem`	`0.1875rem`
`--tfs-cell-px`	`0.75rem`	`0.5rem`

Gölge

xs ince kaldırma, sm kart, md açılır panel, lg diyalog. Marka yüzeylerinde en fazla sm.

Token	Değer	Örnek
`--tfs-shadow-xs`	`0 1px 1px 0 rgb(24 28 36 / 0.04)` `Koyu tema: 0 1px 1px 0 rgb(0 0 0 / 0.3)`
`--tfs-shadow-sm`	`0 1px 2px 0 rgb(24 28 36 / 0.06)` `Koyu tema: 0 1px 2px 0 rgb(0 0 0 / 0.4)`
`--tfs-shadow-md`	`0 4px 12px -2px rgb(24 28 36 / 0.12)` `Koyu tema: 0 4px 12px -2px rgb(0 0 0 / 0.5)`
`--tfs-shadow-lg`	`0 12px 32px -8px rgb(24 28 36 / 0.24)` `Koyu tema: 0 12px 32px -8px rgb(0 0 0 / 0.65)`
`--tfs-shadow-pinned`	`4px 0 8px -4px rgb(24 28 36 / 0.12)` `Koyu tema: 4px 0 8px -4px rgb(0 0 0 / 0.5)`

Hareket

Üç süre, üç eğri. Durum değişimi için standard, ekrana giren şeyler için emphasized, çıkanlar için exit. Sıçrama yok, hover’da büyüme yok, paralaks yok. Azaltılmış hareket tercihinde her şey 0,01ms.

Token	Değer
`--tfs-duration-fast`	`120ms`
`--tfs-duration-base`	`200ms`
`--tfs-duration-slow`	`320ms`
`--tfs-ease-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`
`--tfs-ease-emphasized`	`cubic-bezier(0.2, 0, 0, 1)`
`--tfs-ease-exit`	`cubic-bezier(0.4, 0, 1, 1)`
`--tfs-transition-fast`	`var(--tfs-duration-fast) var(--tfs-ease-standard)`

Bileşen envanteri

Her örnek packages/ui-kit/src/components altındaki bileşenin sabit bir çizimidir ve aynı token’larla boyanır; tema değiştirince yeniden boyanır. Durum rozeti nokta + etiket biçimindedir ve tonunu serbestçe seçmez — platform durum kaydındaki eşlemeyi kullanır (active → success, pending-approval → warning, refused → danger).

Düğmecomponents/button.tsx

BirincilİkincilSadeTehlikeDevre dışıKüçükBüyük

Form alanıcomponents/form-field.tsx · input.tsx · masked-input.tsx

Finansman tutarı*

Kuruş cinsinden tam sayı olarak saklanır

Vade (ay)

Ürün

IBAN

IBAN mod-97 kontrolünden geçmedi

Ön bilgilendirme formu teslim edildi (MADDE 16/5)

Durum rozeticomponents/status-badge.tsx · badge.tsx

TaslakOnay bekliyorAktifAskıdaReddedildiBilgiTahsis

Stat kartıcomponents/stat-card.tsx

Havuz bakiyesi₺48.200.000,00+%2,4önceki döneme göre

Açık görevler14+3bugün

Gecikmedeki tutar₺1.250.000,00−%0,8bu ay

Veri tablosucomponents/table.tsx

Sözleşme	Müşteri	Ürün	Tutar	Birikim	Durum
SZL-2026-0418	E. Kaya	KONUT-STD	₺1.250.000,00	%36,7	Onay bekliyor
SZL-2026-0102	M. Demir	KONUT-STD	₺1.500.000,00	%41,0	Aktif
SZL-2026-0423	A. Yılmaz	ARAC-STD	₺2.400.000,00	%12,5	Reddedildi
SZL-2025-0310	S. Çelik	KONUT-STD	₺900.000,00	%58,3	Tahsis

Sayfa başlığıcomponents/page-header.tsx · breadcrumbs.tsx

Sözleşmeler
SZL-2026-0418

Sekmelercomponents/tabs.tsx

ÖzetÖdeme planıOlaylarBelgeler

Boş ve hata durumlarıcomponents/empty-state.tsx · error-state.tsx

Henüz askıda ödeme yokEşleşmeyen havaleler burada listelenir ve görev kutusuna düşer.Ödeme kaydet

Liste yüklenemeditraceId 8f4a2c1e-9b3d ile destek ekibine bildirin.Yeniden dene

Bildirimcomponents/toast.tsx

Sözleşme onaylandı

SZL-2026-0418 · demo-approver · 09:41

Onay reddedildi

Aynı kullanıcı onaylayamaz — MSG-S-21

Bilgi balonu ve ipucucomponents/info-popover.tsx · tooltip.tsx · regulatory-note.tsx

MADDE 30/1 · İhtiyat fonu havuzun %5’idir; kapasite havuz bakiyesi × karşılama oranından türetilir.

Onay diyaloğucomponents/confirm-dialog.tsx · dialog.tsx

Çekilişi çalıştır

Bu dönemin çekilişi tek kullanımlıktır. Katılımcı listesi kilitlenecek ve tohum kaydedilecek.

VazgeçÇalıştır

Çekmececomponents/drawer.tsx

Teslim dosyası TSL-2026-0077Değerleme ✓ · Sigorta ✓ · Teminat — bekleniyor

OnaylaVazgeç

İskeletcomponents/skeleton.tsx

İlerleme ve eşik göstergesicomponents/progress.tsx · threshold-gauge.tsx

Birikim %36,7 · eşik %40

Adım göstergesicomponents/stepper.tsx · timeline.tsx

01Başvuru
02Kimlik
03Sözleşme
04İmza

Avatarcomponents/avatar.tsx

DAEKD

Uygulama kabuğucomponents/app-shell.tsx · command-palette.tsx

Sözleşme

SZL-2026-0418 · Standart Konut

Havuz bakiyesi₺48.200.000,00

Açık görevler14

Yerleşim desenleri

Sayfa deseni: kırıntı → bölüm etiketi → h1 → açıklama → eylemler → KPI satırı → tabloops-web · treasury

Hazine
Kapasite

Havuz bakiyesi₺48.200.000,00

İhtiyat fonu · %5₺2.410.000,00

Karşılama oranı%80

Tahsis edilebilir₺38.560.000,00

Sıra	Sözleşme	Birikim	İhtiyaç	Sonuç
1	SZL-0181	%60	₺260.000,00	Tahsis
2	SZL-0101	%52	₺720.000,00	Tahsis
3	SZL-0148	%41	₺708.000,00	Kapasite yetmedi

Form deseni: iki sütun, 32px kontroller, her alan bir yardımcı satır ayırır, eylemler altta sağdacomponents/form-field.tsx · FieldRow · FormActions

Müşteri*

Ürün*

Tutar*

Organizasyon ücreti kural setinden okunur: %7

Vade (ay)

VazgeçKaydet

Tablo bölgesi kendi kabı içinde kayar ve başlık o kap içinde yapışkandır; sayfa yatay kaymaz. KPI satırı StatCard ızgarasıdır: değer text-2xl tabular, delta ve ipucu text-xs.

Beyaz etiket sözleşmesi

Marka farklılaşması yalnızca kiracı yapılandırmasında yaşar; kod veya varlık çatallanması yoktur, aynı derleme her kiracıya hizmet eder. Yapılandırma PUT /api/v1/tenant/branding ile verilir (bkz. Marka API):

Kiracı neyi değiştirir	Nasıl
Logo	`logo.type: "svg"` satır içi işaret (belge içi `url(#id)` gradyan referansı serbest; harici URL ve script içeren SVG reddedilir) ya da `logo.type: "initials"`
Birincil üçlü	`primary` / `primarySoft` / `accent` — `--tfs-primary`, `--tfs-primary-soft`, `--tfs-primary-text` ve `--tfs-accent` türevleri bu üçlüden hesaplanır
Yerel ayar	`defaultLocale`, `availableLocales`
Destek kanalları	`supportEmail`, `supportPhone`

Kiracı neyi değiştiremez	Neden
Nötr gri skala, durum renkleri, yarıçaplar, tipografi, boşluk, hareket	Platformun kendi sesidir; marka üçlüsünden bağımsız kalır
Bileşen davranışı, yoğunluk, erişilebilirlik eşlemeleri	Kontrast çiftleri token katmanında çözülür; marka bunu bozamaz
Durum → ton eşlemesi	Durum rengi platform genelinde tektir

Varsayılan demo markası Demo Tasarruf Finansman (Örnek Kurulum), kısa adı “Demo TF”, baş harfi “D”dir. Lisanslı bir kurumu çağrıştıran bir demo adı kullanılmaz.

Böyle / böyle değil

Böyle · Zemin

Ordo

Havuz bakiyesi

Her olayda doğrulanır.

Beyaz ya da gray-50 zemin, serif başlık, tek cümle.

Böyle değil · Zemin

Havuz bakiyesi

Her olayda doğrulanır.

Gradyan bant ve ışıma yok. Hiyerarşi tip ve boşlukla kurulur.

Böyle · Durum

AktifOnay bekliyor

Nokta + etiket; ton eşlemesi durum kaydından gelir.

Böyle değil · Durum

AktifOnay bekliyor

Serbest renkli hap rozetler yok; rozet rengi tahmin edilmez.

Böyle · Liste

Havuz bakiyesi₺48.200.000,00
MADDE 30/15 %

İnce çizgili satırlar; terim solda, açıklama sağda.

Böyle değil · Liste

●▲■

Renkli daire içinde ikon ızgarası yok. İkonlar 1,5px çizgi, 16/20px, currentColor.

Böyle · Yüzey

Havuz bakiyesi

₺48.200.000,00

Düz yüzey, 1px kenarlık, en fazla shadow-sm.

Böyle değil · Yüzey

Havuz bakiyesi

₺48.200.000,00

Kart içinde kart yok; her yerde gölge yok; rounded-2xl yok.

Böyle · Vurgu

Havuz bakiyesi

OK—

Görünüm başına tek vurgu: pirinç bir çizgi ya da öne çıkan tek rakam.

Böyle değil · Vurgu

OKAktif

Pirinç düğme dolgusu ya da durum rengi olarak kullanılmaz.

Böyle · Rakamlar

SZL-2026-0418	₺1.250.000,00
SZL-2026-0102	₺900.000,00

Tablo rakamları sağa hizalı, tabular-nums, kimlikler mono.

Böyle değil · Rakamlar

SZL-2026-0418	₺1.250.000
SZL-2026-0102	₺900.000

Rakamlar oransal yazıyla sola hizalanmaz; kuruş kesilmez.

İşaret ve yazı markası

İşaret, marine mürekkepten bir halka ve bir pirinç çeyrektir: havuz ve havuzdan çekilen pay. Koyu yüzeylerde halka beyaza (currentColor) dönebilir; pirinç çeyrek her zaman pirinç kalır. Yazı markası “Ordo” görüntü yazısıyla (Newsreader) 500–600 ağırlıkta, −0,02em aralıkla dizilir. Lockup içinde tanımlayıcı satır dışında slogan bulunmaz: TR “Tasarruf Finansmanı Platformu”, EN “Savings Finance Platform”, DE “Plattform für Sparfinanzierung”.

OrdoTasarruf Finansmanı PlatformuAçık zemin — halka marine, çeyrek pirinç

OrdoTasarruf Finansmanı PlatformuKoyu zemin — halka beyaz, çeyrek pirinç kalır

OrdoTasarruf Finansmanı PlatformuMarine zemin — halka beyaz

Boşluk payı: her yönde halkanın çizgi kalınlığı kadar (x = işaret yüksekliğinin %11’i)

En küçük boyut: 16px (favicon), arayüzde 24px, baskıda 6mm

OrdoTasarruf Finansmanı PlatformuLockup: işaret + “Ordo” (Newsreader 600, −0,02em) + tanımlayıcı satır

✕ Gradyan kare içine koymayın

✕ Yeniden renklendirmeyin

✕ Döndürmeyin

✕ En küçük boyutun altına inmeyin

✕ Durum noktası ya da rozet eklemeyin

Yüzey adları: Ordo Operasyon (ops-web), Ordo Portal (customer-web), Ordo İş Ortağı (partner-web), Ordo Kontrol (kontrol düzlemi), Ordo (site).

Durum görselleştirme kuralları

Parasal değerler daima minor unit’ten biçimlenir (bkz. Para ve minor unit); kuruş kesilmez.
Durum rozetleri serbest renk seçmez; platform durum kaydındaki ton eşlemesini kullanır.
Boş ve hata durumları sessiz bırakılmaz: her liste bileşeni boş durum metni ve yeniden deneme eylemi tanımlar.
Her kullanıcıya görünen metin en/tr/de üçlüsüyle kaydedilir; eksik çeviri derleme sırasında testle yakalanır. ui-kit, i18n’e bağlı değildir: bileşenlerin gösterdiği her metin çağıran tarafından enjekte edilir.

Tasarım Sistemi

İlkeler

Token’lar

Renk — nötr (soğuk mürekkep)

Renk — birincil (marine mürekkep)

Renk — anlamsal

Renk — vurgu (pirinç)

Renk — durum

Renk — grafik paleti

Tipografi

Yarıçap

Boşluk ve yoğunluk

Gölge

Hareket

Bileşen envanteri

SZL-2026-0418 · Standart Konut

Yerleşim desenleri

Tahsis kapasitesi

Beyaz etiket sözleşmesi

Böyle / böyle değil

İşaret ve yazı markası

Durum görselleştirme kuralları