# Twilio Paste Tasarım Sistemi

## Twilio Paste Tasarım Sistemi Arayüz Önizlemesi

İçeriği düzenleyin, telefon önizlemesini inceleyin ve ayrı bir yerel anlık görüntü hazırlayın.

## Twilio Paste Tasarım Sistemi Tasarım Referansı

Twilio'nun twilio-labs deposundaki doğrulanmış üst kaynak. Aşağıdaki değerlerde YAML belirteç adları ile JavaScript tarzı adlar birbirinden ayrılmıştır. Bu referans, bağımsız Paste DSys çatallanmasını Twilio belgeleri olarak sunmaz.

### Boşluk takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| space10 | 0.125rem | 16px kök boyutta 2px. |
| space20 | 0.25rem | 16px kök boyutta 4px. |
| space30 | 0.5rem | Alanlar arasında 8px boşluk. |
| space40 | 0.75rem | Denetim içi 12px dolgu. |
| space50 | 1rem | Yerel gruplama için 16px. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | Bölümler arasında 24px boşluk. |
| space90 | 2rem | Büyük gruplama için 32px. |
| space130 | 3rem | Daha büyük bölge için 48px. |
### Yazı tipi boyutu takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fontSize20 | 0.75rem | Varsayılan kök boyutta 12px. |
| fontSize30 | 0.875rem | Gövde metni seçeneği: 14px. |
| fontSize40 | 1rem | Gövde metni seçeneği: 16px. |
| fontSize60 | 1.25rem | Başlık seçeneği: 20px. |
| fontSize70 | 1.5rem | Başlık seçeneği: 24px. |
| fontSize90 | 2rem | Görüntüleme seçeneği: 32px. |
### Satır yükseklikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | Kompakt metin için 20px. |
| lineHeight40 | 1.5rem | 16px metin için 24px. |
| lineHeight60 | 1.75rem | 20px metin için 28px. |
| lineHeight70 | 2rem | 24px metin için 32px. |
### Köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| borderRadius10 | 2px | En küçük köşe yarıçapı. |
| borderRadius20 | 4px | Küçük denetim yarıçapı. |
| borderRadius30 | 8px | Küçük-orta yarıçap. |
| borderRadius40 | 12px | Orta yarıçap. |
| borderRadiusCircle | 50% | Daire için eşit genişlik ve yükseklik gerekir. |
| borderRadiusPill | 100px | Daire yarıçapından farklı olan hap biçimli yarıçap. |
### Metin rolleri ve eşleştirme

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| colorText | palette-gray-100 | Ana gövde metni; bağlantılı palet içinde #121c2d değerine karşılık gelir. |
| colorTextWeak | palette-gray-60 | İkincil metin; #606b85 değerine karşılık gelir. |
| colorTextLink | palette-blue-60 | Bağlantılar; #0263e0 değerine karşılık gelir. |
| colorTextError | palette-red-60 | Hata metni; #db132a değerine karşılık gelir. |
| colorTextSuccess | palette-green-70 | Başarı metni; #0e7c3a değerine karşılık gelir. |
| colorTextWeaker | palette-gray-40 | Kaynak, bunun etkinleştirilmiş sıradan metin olarak kullanılmaması gerektiği konusunda uyarıyor. |
### Düğme davranışı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | Örnekte birincil gönderme düğmesi ve ikincil geçiş düğmesi kullanılır. |
| type | button by default | Form gönderimi için submit değerini açıkça ayarlayın. |
| pressed | Secondary family only | Tema geçişi için ikincil düğmeyi kullanın. |
| loading | aria-busy and disabled control behavior | Yalnızca gerçekten devam eden bir işlem için kullanın. |
| as="a" | Requires href | Gezinme bağlantıları devre dışı/beklemede düğme durumlarını desteklemez. |
| tabIndex | 0 or -1 | Pozitif sekme dizini değerleri reddedilir. |
### Tema adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| default / dark | Theme variants | Tema seçimi açıkça yapılır. |
| twilio / twilio-dark | Separate variants | Her varyantı varsayılanla aynıymış gibi tanımlamayın. |
| sendgrid / evergreen | Additional variants | Marka rengini gelişigüzel bir dekorasyon olarak kullanmak yerine bilinçli seçim yapın. |
## Twilio Paste Tasarım Sistemi Eksiksiz Kılavuz

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ı.

## Twilio Paste Tasarım Sistemi Belge çatallanmasını ana sistemle karıştırmadan, üst kaynağın sistemini kullanın

### Twilio kaynağı ve bağımsız devamı

> Paste, twilio-labs deposunda yayımlanır. Doğrulama sırasında eski paste.twilio.design belge rotaları bu depoya yönlendirildi. Ayrı olarak barındırılan Paste DSys sitesi, kendisini Twilio ile bağlantısı olmayan bağımsız bir çatallanma olarak tanımlar. Bu nedenle bu kılavuz, belirteç değerlerini ve bileşen davranışlarını üst kaynak dosyalarına dayandırır.

Bildirim oluşturucu; düzenlenebilir içerik, inceleme onayı, hazırlanmış bir anlık görüntü ve gönderim öncesindeki net sınır gibi statik düğme galerilerinde gösterilemeyen çeşitli durumları ortaya çıkardığı için yararlı bir örnektir. Bu önizleme hiçbir Twilio API hizmetini çağırmaz.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Bir sonek seçmeden önce boşluk ölçeğini okuyun

### Belirteç numaraları piksel değerleri değil, adlardır

space30 yarım rem, space70 ise bir buçuk rem'dir. 30 ve 70 sonekleri ölçekteki konumları belirtir; 30px ve 70px anlamına gelmez. Kök boyut 16px olduğunda oluşturucu, etiket ile alan arasında 8px, bir denetimin içinde 12px ve bölgeler arasında 24px kullanabilir.

YAML kaynağında tirelerle ayrılmış adlar kullanılır. Referans tablosunda Paste kullanıcılarının kullandığı JavaScript biçimindeki adlar gösterilir ve çözümlenmiş değerler yanlarında verilir. rem tabanlı bir değer kök yazı tipi boyutuna göre ölçeklenir; piksel karşılığı koşulsuz bir tarayıcı ölçümü olarak değerlendirilmemelidir.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Yazı tipi boyutlarını ayrı satır yüksekliği belirteçleriyle eşleştirin

### Ölçek, sayısal değerlerin aynı olmasını gerektirmez

Yazı tipi boyutu ve satır yüksekliği takma adları birbirinden ayrıdır. fontSize30 varsayılan kök boyutunda 14px, lineHeight30 ise 20px değerindedir. fontSize70, 32px satır yüksekliği seçeneğiyle birlikte 24px değerindedir. Bu eşleştirmeler, her bölümü büyük bir pazarlama başlığına dönüştürmeden etiketlerin ve çok satırlı içeriğin okunabilir olmasını sağlar.

Gömülü örnekte sistem sans-serif yazı tipi yığını ve uygulama tarafından sağlanan bir telefon illüstrasyonu kullanılır. Bu seçimlerin yalnızca örnek niteliğinde olduğu açıkça belirtilmiştir. Tescilli bir yazı tipi dosyası yeniden dağıtılmaz ve telefon çerçevesinin boyutları Paste belirteçleri olarak sunulmaz.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Anlamsal metin rolleri kontrast kısıtlarını içerir

### Soluk metin, devre dışı metinle aynı şey değildir

Üst kaynak renk eşleşmelerini rollerle birlikte kaydeder. Ana metin, ikincil metin, hata ve başarı mesajları için amaçlanan ön plan rolleri farklıdır. Soluk metin rolüne, etkin denetimlerde kullanılmaması gerektiğine dair bir uyarı eklenmiştir. Soluk bir karakter sayacı için mevcut en açık gri tonu gelişigüzel kullanmayın.

Örnekte mavi, eylemi belirtirken mesajı koyu nötr metin taşır. Hazırlanan taslak, kullanıcı bir düğmeye bastı diye yeşile dönmez; durumu yerel bir anlık görüntünün oluşturulduğunu açıklar. Örnek değerler bağlantı verilen palete bağlıdır; diğer tema varyantları farklı değerlere çözümlenebilir.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Tema seçimi açık bir durum değişikliğidir

### Sağlayıcı varyantları ve uygulama yüzeyleri

Theme; bir Provider ve Consumer'ın yanı sıra adlandırılmış tema nesneleri ile yardımcı araçları dışa aktarır. Geçerli varyant sabitleri default, dark, twilio, twilio-dark, sendgrid ve evergreen değerlerini içerir. Örnek, özellikle yalnızca default ve dark arasında geçiş yapar.

Sağlayıcı değiştiğinde uygulamaya ait yerel denetimlere uygun bir yüzey stili uygulanmalıdır. Sağlayıcı, Paste bileşenlerine tema uygulayabilir; ancak harici her bileşeni kendiliğinden yeniden biçimlendirmez. Sağlanan kod çevreleyen ön plan ve arka plan renklerini açıkça ayarlar ve metin alanının uygulamaya ait olduğunu belirtir.

Destekleyici belirtimi okuyun

## Twilio Paste tasarım sistemi Basılı durumunu yalnızca desteklenen bir düğme ailesinde kullanın

### Eylem, gezinme ve bekleyen işlemlerin kuralları farklıdır

Button uygulaması belirli prop birleşimlerini doğrular. Tema geçişinde secondary ve pressed kullanılır. Form eyleminde type="submit" ayarlanır; çünkü bileşenin varsayılan türü button'dır. Bağlantı biçimindeki bir düğme href gerektirir ve devre dışı ya da yükleniyor durumundaki bir eylem olarak ele alınamaz.

- Taslağı hazırlamak için primary, bağımsız tema geçişi için secondary kullanın.

- Gezinmeyi bağlantı olarak tutun; karşılık gelen bağlantı biçimi olmadan düğmeye href eklemeyin.

- loading değerini yalnızca gerçekten bekleyen bir işlem için kullanın; bu değer hem busy hem de disabled davranışını değiştirir.

- Pozitif tabIndex değerlerinden kaçının; uygulama desteklenen değerleri 0 ve -1 ile sınırlar.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Düzenlenebilir metni incelenmiş anlık görüntüden ayırın

### Gerçeğe uygun bir akış

Canlı önizleme, geçerli metin alanı değerini izler. Hazırlanan kopya ayrı olarak saklanır ve yalnızca doğrulamadan sonra değişir. Yeniden düzenleme, daha önce hazırlanmış anlık görüntüyü sessizce değiştirmemelidir. İnceleme onay kutusu yerel bir etkileşim örneğidir; alıcı onayının veya yasal uygunluğun kanıtı değildir.

1. İçeriği etiketli metin alanına yazın.

2. Geçerli mesajı inceleyin ve yerel inceleme onay kutusunu işaretleyin.

3. Herhangi bir mesajlaşma hizmetini çağırmadan anlık görüntü hazırlayın.

4. Yeniden düzenleyin ve yeni bir anlık görüntü hazırlamadan önce taslağı hazırlanmış kopyayla karşılaştırın.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Geri bildirimi telefon maketini yorumlamaya gerek kalmadan anlaşılır kılın

### Etiketler ve metin geri bildirimi illüstrasyonun dışında kalır

Metin alanının görünür bir etiketi vardır ve sayaç ile hata açıklamalarına bağlantı verir. Sayaç Unicode kod noktalarına göre tanımlanmıştır; SMS segmentlerini, kodlamayı veya maliyeti ölçtüğünü iddia etmez. Hazırlanan sonuç da örnek cihazın dışında, sıradan metin olarak görünür.

Doğrulama, boş mesajı veya eksik inceleme onayını belirtmelidir. Durum bölgesi, mesajın teslim edildiği izlenimini vermeden yerel sonucu duyurur. Dar görünüm alanı dâhil tüm yerel denetimlerde ve düğmelerde klavye odağı görünür kalır.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Paketi çevrimdışı yorumlamadan ayrı olarak doğrulayın

### Sağlanan örneğin gösterdikleri

Kurulum, gerçek Paste Theme ve Button paketlerini içe aktarır ve eksiksiz bir React bileşimi sunar. Yerel form denetimlerinin uygulamaya ait olduğu belirtilir; doğrulanmamış bir bileşene atfedilmez API. Gömülü sürüm, harici CDN'ye bağımlı olmayan çevrimdışı bir HTML yorumudur.

Bir hizmette kullanmadan önce eş bağımlılıkları çözümleyin, yerel örneği derleyin ve gönderim için gerçek bir arka uç sınırı ekleyin. Başarılı bir yerel önizleme testi, düzenleyici davranışını doğrular; üretim ortamında mesajlaşma entegrasyonunu veya Twilio üzerinden teslimat iddiasını doğrulamaz.

Destekleyici belirtimi okuyun

## Twilio Paste Tasarım Sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Üst kaynak Paste ölçeklerinin ve düğme durumu kurallarının çevrimdışı HTML yorumu; yerel çalışma zamanı veya mesajlaşma hizmeti değildir.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Paste notification draft studio</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f4f6;color:#121c2d;font:14px/20px Arial,sans-serif}header{background:#121c2d;color:white;padding:20px 32px;display:flex;justify-content:space-between;gap:16px}.brand{font-weight:700;letter-spacing:.02em}header small{color:#cacdd8}main{max-width:1000px;padding:32px;margin:auto}h1{font-size:28px;line-height:40px;margin:0 0 8px}h2{font-size:18px;line-height:28px;margin:0 0 16px}.intro{color:#606b85;margin:0 0 32px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}form{background:white;border:1px solid #e1e3ea;border-radius:8px;padding:24px}label{display:block;font-weight:600}textarea{width:100%;font:16px/24px Arial,sans-serif;border:1px solid #8891aa;border-radius:4px;padding:12px;margin-top:8px;resize:vertical;min-height:150px}textarea:focus,button:focus-visible,input:focus-visible{outline:3px solid #0263e0;outline-offset:3px}.count{color:#606b85;font-size:12px;line-height:20px}.review{display:flex;align-items:start;gap:8px;margin-top:24px}.review label{font-weight:400}.review input{width:16px;height:16px;accent-color:#0263e0}button{font:600 14px/20px Arial,sans-serif;cursor:pointer;border:1px solid #0263e0;border-radius:4px;padding:10px 16px;background:#0263e0;color:white}button:hover{background:#043cb5}button.secondary{background:white;color:#0263e0}.error{color:#ad1111;min-height:20px}aside{text-align:center}.phone{margin:auto;background:white;border:8px solid #121c2d;border-radius:32px;min-height:400px;padding:24px 12px;box-shadow:0 12px 32px #121c2d14}.notch{width:72px;height:5px;background:#121c2d;border-radius:8px;margin:0 auto 24px}.sender{font-size:12px;color:#606b85;padding-bottom:16px;border-bottom:1px solid #e1e3ea}.bubble{background:#ebf4ff;border-radius:12px;padding:12px;margin-top:24px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;min-height:70px}.caption{font-size:12px;color:#606b85}.prepared{padding:24px;background:#fff;border:1px solid #e1e3ea;border-radius:8px;margin-top:24px}.prepared p{white-space:pre-wrap;overflow-wrap:anywhere}.status{color:#606b85;font-size:12px}.foot{font-size:12px;color:#606b85;margin-top:24px}@media(max-width:650px){header{padding:16px}main{padding:24px 16px}.layout{grid-template-columns:1fr}.phone{max-width:250px;min-height:300px}form{padding:20px}.intro{margin-bottom:24px}}
</style><header><span class="brand">Paste / Message studio</span><small>Local preview</small></header><main><h1>Notification draft</h1><p class="intro">Write the message. Review the copy. Keep a prepared version.</p><div class="layout"><div><form id="composer" novalidate><h2>Compose your message</h2><label for="message">Message</label><textarea id="message" aria-describedby="count error">Your appointment is confirmed for Thursday at 10:00.</textarea><p id="count" class="count"></p><div class="review"><input id="reviewed" type="checkbox"><label for="reviewed">I reviewed this draft</label></div><p id="error" class="error" role="alert"></p><button>Prepare local draft</button></form><section class="prepared"><h2>Prepared copy</h2><p id="snapshot">No draft prepared yet.</p><p class="status" id="status" role="status">Nothing has been sent.</p></section></div><aside><div class="phone" aria-label="Illustrative phone preview"><div class="notch"></div><div class="sender">Sample service · Preview</div><div class="bubble" id="bubble"></div></div><p class="caption">Live preview of the editable message</p></aside></div><p class="foot">HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection</p></main><script>
const $=id=>document.getElementById(id);function update(){$('bubble').textContent=$('message').value||'Your message will appear here.';$('count').textContent=Array.from($('message').value).length+' Unicode code points. Not an SMS segment estimate.'}$('message').oninput=()=>{update();$('reviewed').checked=false};$('composer').onsubmit=e=>{e.preventDefault();$('error').textContent='';$('message').removeAttribute('aria-invalid');if(!$('message').value.trim()){$('error').textContent='Write a message before preparing a draft.';$('message').setAttribute('aria-invalid','true');$('message').focus();return}if(!$('reviewed').checked){$('error').textContent='Confirm that you reviewed the message.';$('reviewed').focus();return}$('snapshot').textContent=$('message').value.trim();$('status').textContent='Draft prepared locally. Nothing was sent.'};update();
</script></html>
```

Kod referansı

- Telefon panelinde taslak anlık görüntüsü gösterilir. SMS gönderilmez; yerel Paste Theme ve Button davranışları için ayrı React örneğine bakın.

### Gerçek Paste teması ve düğme durumunu kullanan yerel bir taslak

Theme.Provider, bestecinin tamamını sarar. Secondary pressed durumu önizleme temasını değiştirir; birincil gönderim düğmesi, uygulama doğrulamasından sonra anlık görüntü hazırlar. Etiketler, metin alanı ve onay kutusu açıkça uygulamanın yerel denetimleri olarak belirtilmiştir.

```
// npm install @twilio-paste/button @twilio-paste/theme react react-dom
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
// Native textarea and labels are application-owned; this is not Paste TextArea.
function Composer() {
  const [message,setMessage] = useState('Your appointment is confirmed for Thursday at 10:00.');
  const [snapshot,setSnapshot] = useState('');
  const [error,setError] = useState('');
  const [confirmed,setConfirmed] = useState(false);
  const [mode,setMode] = useState('default');
  const length = Array.from(message).length;
  const background = mode === 'dark' ? '#121c2d' : '#ffffff';
  const foreground = mode === 'dark' ? '#ffffff' : '#121c2d';
  function prepare(event) {
    event.preventDefault();
    if (!message.trim()) return setError('Write a message before preparing a draft.');
    if (!confirmed) return setError('Confirm that you reviewed the message.');
    setError(''); setSnapshot(message.trim());
  }
  return <Theme.Provider theme={mode}>
    <main style={{padding:24,background,color:foreground,maxWidth:760,margin:'auto'}}>
      <h1>Notification draft</h1>
      <Button variant="secondary" pressed={mode==='dark'} onClick={() => setMode(mode==='dark'?'default':'dark')}>Dark preview</Button>
      <form onSubmit={prepare}>
        <label htmlFor="message" style={{display:'block',marginTop:24}}>Message</label>
        <textarea id="message" rows={5} value={message} onChange={e=>{setMessage(e.target.value);setConfirmed(false);}}
          aria-describedby="count error" aria-invalid={!!error}
          style={{width:'100%',padding:12,margin:'8px 0',font:'inherit',borderRadius:4}} />
        <p id="count">{length} Unicode code points. This is not an SMS segment estimate.</p>
        <label><input type="checkbox" checked={confirmed} onChange={e=>setConfirmed(e.target.checked)} /> I reviewed this draft</label>
        <p id="error" role="alert">{error}</p>
        <Button variant="primary" type="submit">Prepare local draft</Button>
      </form>
      <section aria-label="Prepared draft" style={{marginTop:24}}>
        <h2>Prepared copy</h2>
        <p style={{whiteSpace:'pre-wrap'}}>{snapshot || 'No draft prepared yet.'}</p>
        <p role="status">{snapshot ? 'Draft prepared locally. Nothing was sent.' : ''}</p>
      </section>
    </main>
  </Theme.Provider>;
}
createRoot(document.getElementById('root')).render(<Composer />);
```

Kod referansı

- Bu örnek, yerel denetimlerin Paste TextArea bileşeni olduğunu iddia etmez.

- Karakter göstergesi Unicode kod noktalarını sayar; SMS segmentlerini, kodlama birimlerini veya ücretlendirilebilir kullanımı saymaz.

- Yerel paket örneğinin kaynak kodu denetlenmiştir; çevrimdışı HTML önizlemesi ayrıca test edilmiştir.

## Twilio Paste Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Yukarıdaki kök öğe içeren eksiksiz React girişini kullanın. Modüler paketler yerel sağlayıcıyı ve düğmeyi sağlar; uyumlu eş bağımlılıkları seçin ve çözümlenen sürümleri uygulamanın kilit dosyasında sabitleyin.

```
npm install @twilio-paste/button @twilio-paste/theme react react-dom
```

### Projeniz İçin Bir İstem

```
Paste Theme.Provider ve Button kullanarak bir bildirim taslağı düzenleyicisi oluşturun. İkincil basılı durum geçişi anlambilimini, rem aralıklarını, kaynağa dayalı metin rollerini ve ayrı taslak/anlık görüntü durumlarını koruyun. SMS segment sayısı veya teslimat sonucu uydurmayın.
```

## Twilio Paste Tasarım Sistemi Kaynaklar ve Kapsam

Üst kaynak Paste'e bağımsız bir OpenDesign referansı. Paste DSys ayrı ve bağlantısız bir çataldır. Bu örnekte hiçbir mesaj gönderilmez.

- Üst kaynak Paste Yetkili depo ve sistem kimliği.

- Boşluklar rem tabanlı takma adlar.

- Yazı tipi ölçeği Yazı tipi boyutu takma adları.

- Satır yükseklikleri Ayrı satır yüksekliği ölçeği.

- Köşeler Köşe yarıçapı takma adları.

- Metin rolleri Anlamsal renkler ve kontrast eşleşmeleri.

- Palet Kaynağın çözümlenmiş palet değerleri.

- Düğme kaynağı Desteklenen prop birleşimleri ve davranışları.

- Tema dışa aktarımları Yerel sağlayıcı ve yardımcı araçlar.

- Tema varyantları Açıkça desteklenen varyant adları.

## Twilio Paste Tasarım Sistemi İlgili Kaynaklar

### Visa Product tasarım sistemi

Yerel radyo denetimleri, alternatif renkli başlık ve inceleme özeti içeren anlaşılır bir ekstre biçimi tercihi oluşturmak için Visa Nova CSS kullanın. Tam 1.6.5 tema değerlerini, ölçeklenebilir boşlukları ve eksiksiz stil sayfası entegrasyonunu inceleyin.

### Volvo Cars Web tasarım sistemi

Volvo Cars’ın HTML öncelikli web temelini, gerçek açık tema belirteçlerini ve yerel seçilebilir kart stillerini; bağımsız seçimler, tema değiştirme ve sıfırlama içeren eksiksiz bir paketleme planı örneğinde inceleyin.

### Wonderflow Wanda

Konu filtreleri, genişletilebilir kanıt bağlamı ve kalıcı yerel not defteri içeren eksiksiz bir geri bildirim okuma çalışma alanında Wanda’nın gerçek tema rollerini ve belirteç söz dizimini kullanın.


- [Uygulama başvurusu](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/line-height.yml)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [Kaynak](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/constants.ts)
- [Destekleyici belirtimi okuyun](https://github.com/twilio-labs/paste)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [Kod referansı](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [Üst kaynak Paste Yetkili depo ve sistem kimliği.](https://github.com/twilio-labs/paste)
- [Boşluklar rem tabanlı takma adlar.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [Yazı tipi ölçeği Yazı tipi boyutu takma adları.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [Satır yükseklikleri Ayrı satır yüksekliği ölçeği.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/line-height.yml)
- [Köşeler Köşe yarıçapı takma adları.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml)
- [Metin rolleri Anlamsal renkler ve kontrast eşleşmeleri.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [Palet Kaynağın çözümlenmiş palet değerleri.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml)
- [Düğme kaynağı Desteklenen prop birleşimleri ve davranışları.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [Tema dışa aktarımları Yerel sağlayıcı ve yardımcı araçlar.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx)
- [Tema varyantları Açıkça desteklenen varyant adları.](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/constants.ts)