● T.C. Mevzuat Tasarım Sistemi · Stratejik Çerçeve

Düstur

Mevzuatın görsel anayasası.
Anayasa'dan Tebliğ'e, basılı belgeden mobil arayüze.

Türkiye Cumhuriyeti mevzuat sisteminin kromatik, tipografik, jeton ve UI yüzey doktrini. Üç bağımsız evreni — tipografi, renk, geometri — tek bir devredilebilir kaynakta birleştirir. W3C DTCG · OASIS Akoma Ntoso · WCAG 2.1 AAA.

308
Jeton
14
LOCKED
5
Platform
7
Kademe
8
Audit
● Bölüm I · Manifesto

Üç Evren Doktrini

Sistem üç bağımsız ama birbirine sıkı bağlı evreni tek doktrinasyonda birleştirir. Her evren tek-amaç ayrılığı ile sistemin kararlılığını taşır.

01 / 03
A

Tipografik Evren

Variable serif (Fraunces) mevzuat metni · variable sans (Albert Sans) UI · variable mono (Recursive) URI ve veri. Üç ailenin tek-amaç ayrılığı sistemin kararlılığının temelidir.

Adalet
Fraunces · opsz 144 · WONK 1
→ {family.fr} · SIL OFL 1.1
02 / 03

Kromatik Evren

Beş ana renk ailesi (TBK, Turkuvaz, Bordo, Lacivert, Amber) + nötr gri. Her aile 12-step LCH ile algısal-eşit aralanır. Her renk bir kademe mührüdür.

→ TBK · Turkuvaz · Bordo · Lacivert · Amber · Gri
03 / 03

Geometrik Evren

Selçuklu motif kütüphanesi — rozet, sigil, elmas zinciri. Sabit 0 radius. iOS soft-corner doktrinasyonunun karşıtı: kurumsal sade keskin köşe.

● Bölüm III · Renk Sistemi

Kromatik Mührler

Her mevzuat kademesi kendi kromatik kimliğine sahiptir. Tek-renk monomania reddedilir — sistem dağıtık otoriteyi beş-renk kompozit palet ile görsel olarak ifade eder.

ANAYASA
Anayasa
/akn/tr/constitution/1982/2709

Türk Bayrağı Kırmızısı (TBK) ile mühürlenir. Devletin temel sözleşmesi. AYM iptal kararları aynı palette taşır.

→ Doktriner kaynak: TS 715/2010 · Türk Standardları Enstitüsü
#E30A17
border-top: 3px
AYM KARARI
Anayasa Mahkemesi
/akn/tr/judgment/2022/E2021-99

Cumhuriyet Lacivert ile mühürlenir. AYM kararları aksesuar yüzey olarak border-left ile işaretlenir.

→ Doktriner kaynak: Devlet teamülü · cumhuriyet sembolizmi
#002664
border-left: 3px
CBK
Cumhurbaşkanlığı Kararnamesi
/akn/tr/cbk/2018/1

Düstûr Bordo ile mühürlenir. 2018 Cumhurbaşkanlığı Hükümet Sistemi sonrası yürütme erkin asıl aracı.

→ Doktriner kaynak: Yürütme mührü teamülü
#5C1A1B
border-top: 3px
KANUN
Kanun
/akn/tr/act/2004/5237

Anadolu Selçuklu Turkuvazı ile mühürlenir. TBMM'nin en üst yasama tasarrufu. Primary action color olarak da rol üstlenir.

→ Doktriner kaynak: Karatay Medresesi · 1251 · Konya çini referans
#1A8B8C
border-top: 3px
YÖNETMELİK
Yönetmelik
/akn/tr/yonetmelik/2023/42

Turkuvaz scale step 7 (lighter) ile mühürlenir. Kanunun uygulanmasını düzenleyen ikincil mevzuat. Border kalınlığı 2px ile alt hiyerarşi.

→ Doktriner kaynak: Turkuvaz aile · step 7 (UI element border rolü)
#43A1A2
border-top: 2px
TEBLİĞ
Tebliğ
/akn/tr/teblig/2024/15

Tebliğ Amber ile mühürlenir. Bakanlık tarafından çıkarılan ayrıntılı uygulama belgesi. Aksesuar yüzey: border-left 2px.

→ Doktriner kaynak: Bakanlık mührü teamülü
#B45309
border-left: 2px
GENELGE
Genelge
/akn/tr/genelge/2025/3

Nötr gri ile mühürlenir. İdari uygulama açıklaması — bağlayıcılığı tartışmalı. Renk-yoksunluğu hiyerarşik konumun ifadesi.

→ Doktriner kaynak: İdari teamül · nötr gri (genelge hiyerarşi)
#525252
border-left: 2px

12-Step LCH Scales

Her renk ailesi LCH renk uzayında 12 algısal-eşit adıma türetilmiştir. Radix Renkler metodolojisi: her step belirli bir UI rolüne karşılık gelir (App bg, subtle bg, element bg, border, solid base, hover, text…).

TBK · Türk Bayrağı Kırmızısı
Solid: step 9 · #E30A17 · TS 715/2010
1
2
3
4
5
6
7
8
9
10
11
12
Turkuvaz · Anadolu Selçuklu
Solid: step 9 · #1A8B8C · Karatay 1251
1
2
3
4
5
6
7
8
9
10
11
12
Bordo · CBK
Solid: step 9 · #5C1A1B · Yürütme mührü
1
2
3
4
5
6
7
8
9
10
11
12
Lacivert · AYM
Solid: step 9 · #002664 · Cumhuriyet sembolizmi
1
2
3
4
5
6
7
8
9
10
11
12
Amber · Tebliğ
Solid: step 9 · #B45309 · Bakanlık mührü
1
2
3
4
5
6
7
8
9
10
11
12
Gri · UI Omurgası
OKLCH neutral · ana renklere nefes alanı
1
2
3
4
5
6
7
8
9
10
11
12
● Bölüm II · Tipografi

Üç Variable Font · Tek Amaç Ayrılığı

Her aile tek bir amaça hizmet eder. Karışım olmaz. Mevzuat metni Fraunces, UI Albert Sans, URI ve veri Recursive. Hepsi SIL OFL 1.1 lisansı altında, ticari kullanım serbest.

● Mevzuat · Body · Display
Fraunces
Phoebe Lickwar · Undercase Type · 2020
opsz · wght · SOFT · WONK axis
SIL OFL 1.1 · TR diakritik tam
● UI · Etiket · Rozet
Albert Sans
Florian Karsten · 2021
wght axis (400-700)
SIL OFL 1.1 · TR diakritik tam
● URI · Mono · Veri
Recursive
Stephen Nixon · Arrow Type · 2020
MONO · wght · CASL axis
SIL OFL 1.1 · TR diakritik tam
DISPLAY
opsz 144 · wght 800 · WONK 1
Adalet
PAGE-TITLE
opsz 96 · wght 700
Türk Ceza Kanunu
SECTION
opsz 36 · wght 700
Madde 220 · Suç işlemek amacıyla
H3 · SUB-HEAD
opsz 32 · wght 600
Örgüt kurma · cezai hükümler
LEAD
opsz 20 · italic · SOFT 25
Türkiye Cumhuriyeti'nin temel mevzuat sistemi.
BODY · MADDE
opsz 14 · wght 400
Kanunun suç saydığı fiilleri işlemek amacıyla örgüt kuranlar veya yönetenler, örgütün yapısı bakımından elverişli olması halinde cezalandırılır.
FOOTNOTE
opsz 9 · italic
Bu dipnot 9pt'de optical sizing axis ile farklı çizimle render edilir.
EYEBROW
mono · uppercase
Bölüm IV · Jeton Mimarisi Doktrini
URI
mono · MONO 1
/akn/tr/act/2004/5237/2026-01-15/main
● Bölüm V · UI Yüzey · Bölüm VI · Akoma Ntoso

Madde Detay Yüzeyi

Akoma Ntoso XML doğrudan render edildiğinde semantic jetonlar otomatik uygulanır. Aşağıdaki yüzey gerçek bir AKN belge'sini Düstur stilleriyle gösterir.

KANUN 5237 26.09.2004 · TBMM v2026-01-15 · konsolide

Türk Ceza Kanunu · Madde 220

Suç işlemek amacıyla örgüt kurma

(1)Kanunun suç saydığı fiilleri işlemek amacıyla örgüt kuranlar veya yönetenler, örgütün yapısı, sahip bulunduğu üye sayısı ile araç ve gereç bakımından amaç suçları işlemeye elverişli olması halinde, dört yıldan sekiz yıla kadar hapis cezası ile cezalandırılır.

(2)Suç işlemek amacıyla kurulmuş olan örgüte üye olanlar, iki yıldan dört yıla kadar hapis cezası ile cezalandırılır.

(3)Örgütün silahlı olması halinde, yukarıdaki fıkralara göre verilecek ceza dörtte birinden yarısına kadar artırılır.

(4)Örgütün faaliyeti çerçevesinde suç işlenmesi halinde, ayrıca bu suçlardan dolayı da cezaya hükmolunur. Bkz. Madde 221.

● Bölüm IV · Tasarım Jetonları

Üç Katmanlı Jeton Mimarisi

W3C DTCG Format Module standardı üzerinde inşa edilmiş üç katmanlı mimari. Bileşen kodu primitive değerleri tanımaz; sadece UI rolünü çağırır. Renk değişirse: tek nokta dokunulur, sistem güncellenir.

01 · KATMAN

Primitive

Ham değer kütüphanesi · politik olarak nötr · hiçbir UI rolüne bağlı değil. Doğrulanabilir kaynağa bağlı (TS standardı, akademik kaynak, devlet teamülü).

  • --tcm-color-tbk-9
  • --tcm-color-turkuvaz-9
  • --tcm-fr-opsz-144
  • --tcm-space-4
  • --tcm-radius-0
~140 jeton · 6 renk × 12 step + tipografi + space + motion
02 · KATMAN

Semantic

Rol-bağlam kütüphanesi · primitive'lere referans tutan. UI rolüne göre adlandırılmış. Bileşenlerin tek tükettiği katman.

  • --tcm-anayasa-mark
  • --tcm-kanun-rozet-bg
  • --tcm-link-default
  • --tcm-action-primary-bg
  • --tcm-sayfa-bg
~80 jeton · tier + action + surface + typography
03 · KATMAN

Component

Bileşen-düzeyi · semantic'e referans · bileşen-özel özelleştirmeler. Üçüncü katman bileşenleri semantic'ten ayırır.

  • --tcm-rozet-kanun-bg
  • --tcm-rozet-padding-x
  • --tcm-yuzey-padding-y
  • --tcm-atif-modal-z
  • --tcm-yuzey-tier-bar
~80 jeton · rozet + yuzey + atif-modal
"

Bir tasarım sistemi insan tarafından okunsa bile, makine tarafından uygulanmadığı sürece çoğaltılamaz, devredilemez, sürdürülemez.

— Bölüm IV · Jeton Mimarisi Doktrini
● Bölüm VII · Yönetişim · Denetim

Audit Dashboard

Sistemin her doktriner kararı kodla denetlenir. 8 audit script · 911ms full pipeline. CI'da her PR'da çalışır.

Token Lint
308
jeton · 0 hata · DTCG referans çözümlemesi
WCAG + APCA
13/13
contrast pair · AA + AAA + APCA Lc
LOCKED Jeton
14
doktriner sözleşme · MAJOR bump zorunlu
Diakritik
3 font
Ç Ğ İ Ş Ö Ü · SIL OFL 1.1 belgeli
CVD Audit
7 tier
Brettel + ΔE2000 · non-color cue zorunlu
AKN XSD
100%
OASIS LegalDocML 3.0 şema valide
Platform
5
CSS · iOS · Android · DTCG · TypeScript
Visual Regression
6 sayfa
Playwright + pixelmatch · <0.1% eşik
AuditScriptKapsamDurum
Token Lintlint-tokens.mjsJSON + DTCG + referans çözümleme✓ PASS
Contrast (WCAG + APCA)check-contrast.mjsTier rozet · body · link kombinasyonları✓ PASS
TR Diakritikcheck-diacritics.mjs3 font ailesi · 6 TR karakter belgeli✓ PASS
LOCKED Jetoncheck-locked.mjsindex.json ↔ $extensions tutarlılığı✓ PASS
Renk Körlüğücheck-colorblind.mjsBrettel + ΔE2000 · 7 tier × 3 CVD tipi✓ PASS
Akoma Ntoso XSDcheck-akn.mjsOASIS LegalDocML 3.0 · xmllint --schema✓ PASS
Cross-Platform Buildsd-config.mjs5 hedef · mm→dp/pt custom transform✓ PASS
Visual Regressionvisual-regression.mjsPlaywright + pixelmatch · 6 sayfa baseline✓ PASS
● Get Started · Hızlı Başlangıç

5 Dakikada Kurulum

Web'den iOS'a beş platforma tek kaynaktan. CDN, npm, self-hosted · seçim sizin.

Web · npm
@dustur/tasarim-sistemi
# 1. Yükle
npm install @dustur/tasarim-sistemi

# 2. CSS import et
<link rel="stylesheet"
      href="node_modules/@dustur/tasarim-sistemi/css/dustur.css">

# 3. Bileşeni kullan
<span class="yuzey-badge kanun">KANUN</span>
Web · CDN
unpkg
# Tek satır, npm gerektirmez
<link rel="stylesheet"
      href="https://unpkg.com/@dustur/tasarim-sistemi/css/dustur.css">

# Tema değiştirme
<html data-tema="yuksek-kontrast">
iOS · Swift
TCMTokens.swift
// Style Dictionary çıktısı
import UIKit

public class TCMTokens {
  public static let tcmKanunMark =
    UIColor(red: 0.102, green: 0.545,
            blue: 0.549, alpha: 1.0)
}
Android · XML
colors.xml + dimens.xml
<!-- Android resources -->
<resources>
  <color name="tcm_kanun_mark">#ff1a8b8c</color>
  <dimen name="tcm_space_4">15.12dp</dimen>
</resources>

Kaynaklar

Tam doktriner belge ~100 sayfa A4 PDF olarak hazırdır. Aşağıdaki kaynaklar sistemin tüm boyutlarını dolaşmanız için.

● Canlı Galeri

Component Showcase

9 demo bölüm · tema switcher · scrollspy · 7 tier · 12-step scale'lar

● Quickstart

Başlangıç Rehberi

5dk kurulum · ilk component · iOS/Android/AKN XML · dev workflow

● Tokens

W3C DTCG Tokenları

JSON kaynak · 308 jeton · 3 katman · LOCKED listesi · $extensions

● Architecture

Jeton Mimarisi

DTCG · naming · cross-platform export · governance · RACI

● XML

Akoma Ntoso 3.0

OASIS standart · element omurgası · ELI URI · TR adaptasyon

● A11y

Renk Körlüğü Stratejisi

Brettel + ΔE2000 audit · non-color cue zorunluluğu · doktriner kararlar

● Governance

Katkıda Bulun

4-aşamalı jeton RFC protokolü · RACI · Semver · LOCKED policy

● Reference

Doktriner Belge

Tam orijinal · Paged.js A4 PDF · ~100 sayfa · 7 bölüm + ön/arka-matter