CFPB tasarım sistemi.

CFPB tasarım sistemi CFPB uygulama kapsamı

Süslemeden önce tüketici bilgisi

CFPB; editoryal bir bilgi mimarisini form ve açılır panel bileşenleriyle bir araya getirir. Izgarası, tipografi hiyerarşisi ve küçük, büyük harfli kısa başlıkları da tanıdık yeşil rengi kadar önemlidir. Bu örnek, özgün bir okuma çalışma sayfasıdır: temel yönlendirme görünür kalırken isteğe bağlı açıklamalar yerel Expandable bileşenlerini kullanır. Bu bir finansal öneri, şikâyet gönderimi veya kamu hizmeti değildir.

Paket herkese açıktır; ancak devlet mührü ve CFPB kimliği ayrı kısıtlamalara tabidir. Kodu yeniden kullanmak, bir hizmeti resmî kılmaz. Bu nedenle örnekte mühür, logo, resmî site bandı veya devlet kurumlarının başlık alanını taklit eden bir tasarım yoktur.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Tipografi ve okuma ritmi

Source Sans 3 ve sürüm farklılıkları

Güncel yazı tipi yönergeleri, Temmuz 2025'te Avenir Next'ten yapılan geçişin ardından Source Sans 3'ü belirtiyor. Yerel örnek, harici olarak barındırılan yazı tiplerine bağımlı değildir ve derlenmiş sistem yazı tipi yedeğini bilerek kullanır. Markalı, gerçek bir uygulama; belgelenmiş, lisanslı yazı tipi mixin'i aracılığıyla yetkili yazı tipi dosyalarını sağlamalıdır.

Herkese açık başlık tablosu ile geçerli temel stiller dizgesi birebir aynı değildir. 5.10.2 paketinde H1, 1,25 satır aralığıyla 2.125em'dir; 16px kök boyutunda bu, tablodaki 60px satır yüksekliği yerine 34/42.5 değerini verir. Yukarıdaki örnek, çalıştırılabilir kaynak kodunu temel alır. Başlık normalleştirmesi ayrıca her düzey için ayrı ayarlamalar kullanır; basitleştirilmiş tabloyu genel bir geçersiz kılma kuralına dönüştürmeyin.

Paragrafları yaklaşık 66 karakter genişliğinde tutun ve aralarında 15px boşluk bırakın. Kompakt H5/slug biçimi dışında başlıklarda cümle düzeninde büyük harf kullanın. Böylece her paragrafı bir karta zorlamadan kılavuz yazısını kolayca taranabilir hâle getirebilirsiniz.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Renk ve editoryal çerçeve

Yalnızca yeşili değil, kullanım amacını da gözetin

Derlenmiş CSS; --black, --green, --pacific ve derecelendirilmiş yardımcı renk ailelerini sunar. Metinde siyah kullanılır; Pacific ise daha belirgin bir etkileşim işareti sağlar. Açık gri Expandable arka planı devre dışı durumu değil, okuma alanının sınırını belirtir. Yerel slug başlıkları, tam genişlikte ince gri bir çizgiyi daha kalın ve kısa yeşil bir çizgiyle birleştirir.

Çalışma sayfasının ana okuma yüzeyi bilerek beyaz bırakılmıştır. Yeşil, bölüm ayırıcısında kullanılır; ilerleme sayısıysa kolayca okunabilen sıradan bir metindir. Bir öğe tamamlandığında veya işaretlendiğinde, yeşili kırmızıdan ayırt etmeye gerek kalmadan durum anlaşılır. Sayfa, her palet örneği için başarı ya da hata anlamı uydurmaz.

• Sakin bir açılır panel yüzeyi için --gray-5, kenarlık için --gray-40 kullanın.
• Bağlantıları, renklerinin yanı sıra alt çizgileri veya etkileşim biçimleriyle de ayırt edilebilir kılın.
• Kimlik işaretlerini yalnızca yetkili kullanım için ayırın; palet lisansı, bağlılık izlenimi verme izni değildir.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi On iki sütun ve kullanışlı yoğunluk

İşlevsel kenar boşluklarına sahip bir yazı

Belgelenmiş ızgara; on iki sütun, sabit 30px sütun aralıkları ve 1230px maksimum genişlik kullanır. Mobilde dış boşluk 15px, daha büyük düzenlerdeyse 30px'tir. Önizleme, bunu 901px ve üzerindeki genişliklerde sekiz sütunlu bir okuma alanı ve dört sütunlu bir çalışma kontrol listesi olarak uygular; daha dar düzenlerde kontrol listesi yazının altına taşınır. Bu ayrım, yayımlanmış ızgarayı kullanan bir uygulama düzenlemesidir; resmî ve evrensel bir sayfa şablonu değildir.

Sayfa daha da genişleyebilecek olsa bile uzun metinler 66ch maksimum genişliğini korur. Düğmeler gerektiğinde alt satıra geçer; kenar çubuğunda sabit yükseklik veya iç içe kaydırma alanı yoktur. Bir açıklamanın açılması, belgenin olağan yüksekliğini artırır; böylece aynı düzen kaynak sayfasının gömülü önizlemesinde de kullanılabilir.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Yerel Expandable yapısı

Tetikleyiciyi ve isteğe bağlı içeriği ayrı tutun

Eski bir Expandable kökü, __header düğmesi, __label ve __content bölgesi içerir. Odaklanma hedefi düğmedir. Bu örnekte etiketi bir span sağlar; dekoratif artı/eksi işaretleri erişilebilir addan gizlenir. Başlatma sırasında kitaplık, genişletilmiş durumunu ve davranış kancalarını atar; uygulama bu değişiklikleri yinelemez.

--background ve --border değiştiricileri çerçeveli görünümü sağlar. --padded değiştiricisi, etiketi de buna uygun biçimde büyüten daha geniş bir sunum seçeneğidir; her açılır panelde kullanılması gerekmez. Okurların isteğe bağlı açıklamaları açmadan önce görevi anlayabilmesi için çalışma sayfasındaki kritik yönergeler gizli panelin dışında tutulur.

<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>

Kod referansı

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Açılır paneller ve kontrol listesi davranışı

Birbirinden bağımsız iki durum türü

Açılır panel durumunu yerel kitaplık yönetir. Çalışma sayfası, üç standart onay kutusunun değerlerini ve bunlardan elde edilen sayıyı yönetir. Bir paneli açmak görevi tamamlanmış olarak işaretlemez; bir görevi işaretlemek de bilgileri daraltmaz. Bunlar bilerek ayrı tutulan modellerdir: görünürlük, kavrayışın kanıtı değildir.

5.10.2 örneği expand, collapse ve isExpanded özelliklerini sunar. Herkese açık Expandables sayfasında eski bir toggleTargetState başvurusu yer aldığından bu kılavuz, sürüm numarası belirtilmiş gerçek API sürümünü kullanır. Tümünü aç ve Tümünü kapat işlemleri başlatılmış örnekler üzerinde çalışır. Okurlar iki açıklamayı karşılaştırabileceği için panellerin bağımsız olması burada daha uygundur.

Sıfırlama işlemi, tüm onay kutularını temizler ve kitaplığın API aracılığıyla panelleri daraltır. Gönderimin onaylandığına dair uydurma bir mesaj oluşturmaz. İlerleme, her onay kutusu değişikliğinde klavye odağını taşımadan kibar bir durum öğesi aracılığıyla duyurulur.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Derlenmiş varlıklar ve temel stiller

Klasik betik değil, ES modülü

Sabitlenmiş paketi yükleyin, derlenmiş iki varlığı statik dizininize kopyalayın ve bir modül betiğiyle Expandable'ı içe aktarın. Yayımlanan 5.10.2 index.js, ES dışa aktarımları içerir; bu nedenle eski entegrasyon örneğinden kopyalanan klasik betik etiketi söz dizimi hatasına yol açar. Ayrıca eski Expandable köklerini otomatik olarak başlatmaz.

Bileşen stil sayfası tek başına, sayfa genelindeki başlık ve gövde kurallarını içermez. Üretim projeleri, resmî entegrasyon kılavuzunda gösterildiği gibi paketin temel SCSS dosyasını derleyebilir. Bu yalıtılmış örnekse, aynı yayımlanmış modülün içine gömülü olan tam temel CSS dizgesini korur ve bunu ayrı belgelenmiş yerel bir dosya olarak sunar. Bu çıkarım, yerel bir paketleme tercihidir; CFPB tarafından yeni yayımlanmış bir giriş noktası değildir.

Simge başvuruları içeren kaynak SCSS derliyorsanız projenin belgelenmiş PostCSS SVG değiştirme aracını ekleyin. Derlenmiş anlık görüntüde bu başvurular zaten çözümlenmiştir. --cfpb-background-icon-svg değişkenini çözümsüz bırakan, yalnızca Sass kullanan bir kurulum uydurmayın.

1. 5.10.2 sürümünü yükleyin ve yerel olarak sunulan varlıkların yanında TERMS.md dosyasını da bulundurun.
2. Bileşen CSS dosyasını seçtiğiniz genel temel stillerle birlikte yükleyin; yazı tiplerini açıkça yapılandırın.
3. Modül içe aktarımı kullanın, işaretlemesi oluşturulduktan sonra kapsayıcıyı başlatın ve ardından uygulama eylemlerini döndürülen örneklere bağlayın.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Okuma akışını doğrulayın

Erişilebilirlik sınaması yalnızca açılır panellerden ibaret değildir

Dar ekranlarda yerel temel stiller ana başlığın boyutunu küçültür ve kontrol listesini yazının altına taşır. Masaüstü genişliğinde iki sütunlu düzen, isteğe bağlı okuma içeriğini ve çalışma notlarını yan yana gösterir. Yalnızca kapalı durumdayken değil, tüm paneller açıkken de her iki görünümü sınayın.

Her yerel düğmeye ulaşmak için Tab tuşunu, açıp kapatmak için Enter veya Boşluk tuşunu kullanın. Kitaplığın aria-expanded değerini güncellediğini ve gizli içeriğin artık sekme sırasına girmediğini doğrulayın. Ardından iki görevi işaretleyin, tüm açıklamaları açıp kapatın ve sıfırlanana kadar sayının iki olarak kaldığını kontrol edin. Bu testler, ekran görüntüsünde görünmeyen uygulama ve kitaplık durumu çatışmalarını ortaya çıkarır.

Bu yerel örnek; depolama, analiz, ağ üzerinden gönderim veya gerçek kişisel veri kullanmaz. Yalnızca yerel bileşenleri kullanmak, ortaya çıkan sitenin erişilebilirliğini belgelemez; uygulamayı benimseyen hizmette kontrast, içerik, tarayıcı desteği ve yardımcı teknoloji davranışı yine de incelenmelidir.

Destekleyici belirtimi okuyun

CFPB tasarım sistemi Bileşen Örnekleri

<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>

npm install --save-exact @cfpb/[email protected]
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Separate a question from a request</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
  </div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>