# Decanter Tasarım Sistemi

## Decanter Tasarım Sistemi Arayüz Önizlemesi

Özgün etkinlik kartlarını filtreleyin, özeti açın ve konuya uygun sonuç bulunmadığında bu durumdan kurtulun.

## Decanter Tasarım Sistemi Tasarım Referansı

Decanter 7.5.3 paketi ve resmî v7 kurulumu/gelenekleri. v8'de kullanımdan kaldırılanlar, geçiş notları olarak ele alınır. Önizleme; yerel yazı tipi yedeklerini kullanan ve üniversite kimlik işaretleri içermeyen, etiketlenmiş bir HTML/CSS yorumudur.

### Yazı tipi yapılandırması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Primary sans / serif | Source Sans 3 / Source Serif 4 | Yedek yazı tipleri Helvetica/Arial ve Georgia/Times'tır. |
| Long-form line height | 1.4–1.5em | Önerilen okuma aralığı. |
| Short text / headings | 1.2–1.3em | Daha sıkı gruplar. |
### Seçilmiş modüler ayarlar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | type-* adımları arasındaki oran. |
| basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | Örnekte kullanılan açık yapılandırma. |
| Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | Duyarlı eşikler. |
| cc maximum | 1500px at 1700px viewport | Ekran kenarlarıyla birlikte akışkan içerik kapsayıcısı. |
| Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | Matematiksel bir ölçek değil, özenle seçilmiş değerler. |
### Kimlik rengi ve eylem rengi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Cardinal red | #8c1515 | Birincil kimlik rengi. |
| Black / cool grey | #2e2d29 / #53565a | Birincil nötr palet. |
### Web etkileşim paleti

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Digital red / dark | #b1040e / #820000 | Etkileşim stili; logo rengi yerine kullanılmaz. |
| Digital blue / dark | #006cb8 / #00548f | Bağlantı stili. |
## Decanter Tasarım Sistemi Eksiksiz Rehber

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Decanter Tasarım Sistemi: SDK değil, Tailwind ön ayarı

### Belgelenmiş sürüm yolunu sabitleyin

> Doğrulanmış Decanter paketi 7.5.3'tür ve Tailwind CSS ^3.4.17 sürümünü belirtir. Genel giriş noktası bir Tailwind yapılandırma ön ayarıdır. presets listesine require("decanter") ekleyin, content alanını gerçek kaynak dosyalarına yönlendirin ve yardımcı sınıf stil sayfasını derleyin. İçe aktarılacak bir Decanter React sağlayıcısı yoktur.

Belgelerde, kurulum yolu hâlâ v7 olarak belirtilirken yakında v8'de kaldırılacak öğelere de yer verilir. Bu referans v7.5.3 sürümünü sabitler; kullanımdan kaldırılmış foggy, slab ve eski modüler metin yardımcı sınıflarını kullanmaz. Bağımsız önizleme, Tailwind ile derlendiği iddiası taşımayan, düzen kurallarının açıkça etiketlenmiş bir yorumudur.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Duyarlı modüler tipografi

### Ölçek, taban değerine bağlıdır

Source Sans 3 ve Source Serif 4, birincil sans serif ve serif yazı tipi aileleridir; Helvetica/Arial ve Georgia/Times ise yedekleridir. type-* yardımcı sınıfları, sabit piksel boyutlu başlıklar değil, orantılı rollerdir. Ölçek çarpanı mobilde 1.15, tablette 1.2 ve masaüstünde 1.25'tir.

Örnek, belgelenmiş basefont-23 yapılandırmasını seçer: XS–SM aralığında 18px, MD–XL aralığında 21px ve 2XL'de 23px. Başlıkta type-3 boyutu kullanılır; böylece dar alana yerleştirilmiş örnekte görünüm orantılı kalır. Farklı bir taban değeri seçen proje, bu önizlemedeki piksel değerlerini kopyalamak yerine ortaya çıkan boyutları yeniden hesaplamalıdır.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Akışkan kapsayıcı ve ızgara

### Ekran kenarı düzenin bir parçasıdır

cc kapsayıcısı, özenle belirlenmiş kenar boşlukları kullanır: XS'de 20px, SM'de 30px, MD'de 50px, LG'de 80px ve XL'de 100px. İçerik genişliği, 1700px görünüm alanında 1500px'lik üst sınıra ulaşıncaya kadar artar. Bu, yalnızca sabit 1200px genişliğinde bir kapsayıcı değil, açıkça tanımlanmış kenar kuralları olan akışkan bir sistemdir.

Örnek bu kenar boşluklarını izler ve MD'nin altında iki editoryal kartı tek sütuna dönüştürür. Kart içerikleri olağan belge sırasını kullanır; bu nedenle düzen tek sütuna geçtiğinde klavye gezintisi de aynı okuma sırasını izler.

Destekleyici belirtimi okuyun

## Decanter tasarım sistemi Duyarlı boşluklar

### Duyarlı yardımcı sınıfları bilinçli kullanın

Decanter, duyarlı margin ve padding için rs-m-* ve rs-p-* ailelerini sunar. Seçilen adım, belgelenmiş aralıklarda değişir; Tailwind'in sabit boşluk değerleriyle eşdeğer değildir. Örnek kod, kartın çevresinde rs-p-1; eyleminde ise sıradan sabit padding kullanır.

Referansı yeniden üretilebilir tutmak için bağımsız yorumda her CSS düzenlemesi uygulama kodu olarak belirtilir. Yerel bir derlemede, aynı adla ikinci bir çakışan kural tanımlamak yerine ön ayarın oluşturduğu yardımcı sınıfı kullanın. Derleme tarayıcısı sınıfın tamamını algılayamıyorsa "rs-p-" + size gibi dinamik parçalar kullanmaktan kaçının.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Kimlik ve etkileşim renkleri

### Cardinal ve dijital kırmızı farklı amaçlara hizmet eder

Stanford'un birincil Cardinal kırmızısı #8c1515'tir. Dijital kırmızı #b1040e, etkileşim/vurgu rengidir ve üniversite kimliğinde Cardinal renginin yerini almaz. Dijital mavi #006cb8 bağlantılarda, daha koyu etkileşim durumu içinse #00548f kullanılır.

Örnek, açılır ayrıntı eyleminde dijital kırmızıyı; yüzeylerde ise ölçülü nötr renkleri kullanır. Stanford logosu, mührü veya resmî kimlik çubuğu içermez. Bir kurumda kullanıma alınacaksa yetkili kimlik öğeleri ve üniversitenin marka kuralları kullanılmalıdır; teknik bir referans, resmî onay anlamına gelmez.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Eylem içeren editoryal kartlar

### Bileşen API tahmin etmek yerine içeriği bir araya getirin

Resmî kart örnekleri; boşluk, tipografi, yüzey ve eylem yardımcı sınıfları kullanan anlamsal HTML öğelerdir. Bizim kompozisyonumuzda etkinlik kategorisi başlıktan ayrı tutulur, tarih ve mekân metin olarak gösterilir, özet ise olduğu yerde açılmak üzere gerçek bir düğme kullanılır. Var olmayan bir Decanter Card prop API uydurulmaz.

Gezinme gerçekten yapılacak işlemse başlığın bağlantı olması uygundur. Burada sonuç, içeriğin sayfa içinde genişletilmesidir; bu nedenle aria-expanded ve aria-controls özelliklerine sahip bir düğme bu davranışı açıkça belirtir. Önizlemede üniversite haberleri kopyalanmak yerine özgün etkinlik adları ve özetleri kullanılır.

- Kart başlığı olarak etkinlik adını kullanın.

- Saat ve konumu açılmadan önce görünür tutun.

- İçeriği açıp kapatmak için düğme, yalnızca gerçek gezinme için bağlantı kullanın.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Filtreler ve açılır içerik

### İçeriği tüm düzenlerde erişilebilir tutun

Konu seçici, özgün iki araştırma etkinliği kartını filtreler ve görünür sonuç sayısını günceller. Eşleşme bulunmayan seçenek, boş durumu ve filtreyi sıfırlama yolunu göstermek için özellikle eklenmiştir. Filtre, başlık hiyerarşisini değiştirmez ve kartları formda seçilebilir seçeneklere dönüştürmez.

Her özetin kendine ait bir düğme durumu vardır. Kartı kapatmak odağı aynı tetikleyicide bırakır. Filtre değiştirildiğinde gizlenen özetler kapatılır; böylece bir konuya geri dönüldüğünde tutarlı bir genel bakışla başlanır. Kontroller, yardımcı sınıf tabanlı tasarım yaklaşımına eklenen uygulama davranışlarıdır; Decanter JavaScript ile birlikte sunulmazlar.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Derleyin ve sonucu doğrulayın

### Oluşturulan sınıflar, taranan kaynakları gerektirir

Sağlanan kurulum Tailwind 3'ü ve doğrulanmış Decanter 7.5.3 hazır ayarını hedefler. Girdi yönergelerini, içerik globunu, çıktı komutunu ve özgün bir kart düzenini içerir. Ortaya çıkan stil sayfasını belge başlığına bağlayın. Onaylı yazı tipi dosyalarını ayrıca yükleyin veya belgelenmiş yedekleri bilinçli olarak kullanmaya devam edin.

Önizleme bu araç zinciriyle oluşturulmadı ve uygulama etiketinde bu açıkça belirtiliyor. Üretim ortamındaki bir entegrasyon, eksiksiz sınıf kümesini derlemeli ve oluşturulan çıktıyı incelemelidir; özellikle de ana sürüm yükseltmesi kullanımdan kaldırılmış yardımcı sınıfları değiştirdikten sonra.

1. Decanter ve uyumlu Tailwind ana sürümünü sabitleyin.

2. Hazır ayarı kaydedin ve gerçek kaynak dizinini tarayın.

3. Üç Tailwind yönerge katmanını derleyin.

4. Seçilen temel yazı tipini, ekran kenarlarını ve kart eylemlerini belgelenmiş kesme noktalarında doğrulayın.

Destekleyici belirtimi okuyun

## Decanter Tasarım Sistemi Bileşen Örnekleri

### Özgün editoryal kart

Doğrulanmış yardımcı sınıf aileleriyle oluşturulmuş anlamsal HTML; açıklama düğmesi uygulamaya özeldir.

```
<article class="bg-white border border-solid border-black-20 rs-p-1">
  <p class="font-semibold text-digital-red">Research conversation</p>
  <h2 class="type-2 font-serif leading-display">Reading the changing coast</h2>
  <p class="leading-normal">An original example event about field observations.</p>
  <button type="button" class="bg-digital-red text-white px-26 py-10
    hocus:bg-cardinal-red-dark focus:outline focus:outline-2">
    Show session details
  </button>
</article>
```

Kod referansı

### Hazır ayar yapılandırması

Sabitlenmiş Tailwind 3 yaklaşımı için eksiksiz ve asgari yapılandırma.

```
module.exports = {
  presets: [require('decanter')],
  content: ['./src/**/*.{html,js}']
};
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Decanter Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Kaynak kodla doğrulanmış hazır ayar derleme girişi; yorumlanmış bağımsız önizleme için çalıştırılmamıştır. dist/styles.css dosyasını belge başlığına bağlayın. Yazı tipleri ve kurumsal kimlik varlıkları ayrı değerlendirilmelidir. Kaynaklardaki eksiksiz çalışan örnek ZIP'i, tam belgeyle birlikte önizlemenin kesin bağımlılıklarını da sağlar. ZIP'i ayıklayın, o dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/stanford-decanter.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install --save-dev decanter@7.5.3 tailwindcss@3.4.17
# tailwind.config.cjs
# module.exports = {
#   presets: [require('decanter')],
#   content: ['./src/**/*.{html,js}']
# };
# src/input.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;
npx tailwindcss -c tailwind.config.cjs -i ./src/input.css -o ./dist/styles.css
```

### Projeniz İçin Bir İstem

```
Decanter 7.5.3/Tailwind 3 ile editoryal bir etkinlik sayfası oluşturun. Hazır ayarı, açıkça belirtilen basefont seçimini, type-* ölçeğini ve cc ekran kenarlarını kullanın. Konu, başlık, saat ve konum bilgilerini anlamsal kartlarda birbirinden ayırın. Konu filtrelemesini ve aria-expanded özniteliği kullanan özet kontrollerini uygulayın. Eski foggy/slab yardımcı sınıflarından, kopyalanmış üniversite hikâyelerinden ve kurumsal kimlik işaretlerinden kaçının. Elle yorumlanmış tüm önizlemeleri derlenmiş bir Decanter yapısından ayrı olarak etiketleyin.
```

## Decanter Tasarım Sistemi Kaynakları ve Kapsamı

Bağımsız bir OpenDesign eğitim amaçlı düzenlemesidir; resmî üniversite etkinlik sayfası değildir. İçerik özgündür ve Stanford işaretleri kullanılmamıştır. Kodun entegrasyonu ile marka tarafından yetkilendirilmiş kimlik kullanımını ayrı değerlendirin.

- Decanter genel bakış Resmî amaç, hedef kitleler ve kaynaklara erişim noktaları.

- Geliştirici kurulumu Sürüme özgü uygulama ve yapılandırma yönergeleri.

- Figma'da tasarlama Resmî tasarım kitaplığı girişi.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Decanter Tasarım Sistemi İlgili Kaynaklar

### Suomi.fi tasarım sistemi

Source Sans 3, açıkça tanımlanmış boşluk belirteçleri ve kurtarılabilir belge seçimi düzeniyle okunaklı Fince kamu hizmeti formları oluşturun.

### UNDP tasarım sistemi

UNDP’nin yayımladığı renk ve boşluk belirteçlerini, klavyeyle kullanılabilen yerel sekmeleri ve yerel inceleme ilerlemesini içeren eksiksiz bir atölye okuma örneğini keşfedin.

### USWDS

Aranabilir bir fırsat karşılaştırma arayüzünde USWDS boşluk belirteçlerini, tema rollerini, anlamsal tabloları ve yerel akordeonları bir araya getirin.


- [Uygulama başvurusu](https://decanter.stanford.edu/for-developers/strategies-and-conventions)
- [Kaynak](https://decanter.stanford.edu/for-designers/type-grids-and-color)
- [Kaynak](https://decanter.stanford.edu/for-developers/strategies-and-conventions)
- [Kaynak](https://identity.stanford.edu/design-elements/color/primary-colors/)
- [Kaynak](https://identity.stanford.edu/design-elements/color/web/)
- [Destekleyici belirtimi okuyun](https://decanter.stanford.edu/for-developers/installation)
- [Destekleyici belirtimi okuyun](https://decanter.stanford.edu/for-developers/strategies-and-conventions)
- [Destekleyici belirtimi okuyun](https://identity.stanford.edu/design-elements/color/web/)
- [Destekleyici belirtimi okuyun](https://decanter.stanford.edu/examples/cards)
- [Kod referansı](https://decanter.stanford.edu/examples/cards)
- [Kod referansı](https://decanter.stanford.edu/for-developers/installation)
- [Kod referansı](https://decanter.stanford.edu/for-developers/strategies-and-conventions)
- [Decanter genel bakış Resmî amaç, hedef kitleler ve kaynaklara erişim noktaları.](https://decanter.stanford.edu/)
- [Geliştirici kurulumu Sürüme özgü uygulama ve yapılandırma yönergeleri.](https://decanter.stanford.edu/for-developers/installation)
- [Figma'da tasarlama Resmî tasarım kitaplığı girişi.](https://decanter.stanford.edu/for-designers/figma)