# Twilio Paste デザインシステム

## Twilio Paste デザインシステムのインターフェースプレビュー

内容を編集し、スマートフォンでのプレビューを確認して、別個のローカルスナップショットを作成します。

## Twilio Paste デザインシステムのデザインリファレンス

検証済みの上流 twilio-labs/paste ソースです。以下の値では、YAML のトークン名とJavaScript形式の名前を区別しています。このリファレンスは、独立した Paste DSys フォークを Twilio のドキュメントとして扱うものではありません。

### スペーシングエイリアス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| space10 | 0.125rem | 16px をルートとした場合の 2px。 |
| space20 | 0.25rem | 16px をルートとした場合の 4px。 |
| space30 | 0.5rem | フィールド間の間隔は 8px。 |
| space40 | 0.75rem | コントロール内のパディングは 12px。 |
| space50 | 1rem | 局所的なグループ間の間隔は 16px。 |
| space60 | 1.25rem | 20px。 |
| space70 | 1.5rem | セクション間の間隔は 24px。 |
| space90 | 2rem | 大きなグループ間の間隔は 32px。 |
| space130 | 3rem | より大きな領域間の間隔は 48px。 |
### フォントサイズのエイリアス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| fontSize20 | 0.75rem | デフォルトのルートサイズで12px。 |
| fontSize30 | 0.875rem | 本文用の 14px の選択肢。 |
| fontSize40 | 1rem | 本文用の 16px の選択肢。 |
| fontSize60 | 1.25rem | 見出し用の 20px の選択肢。 |
| fontSize70 | 1.5rem | 見出し用の 24px の選択肢。 |
| fontSize90 | 2rem | ディスプレイ用の 32px の選択肢。 |
### 行の高さ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | コンパクトなテキストには 20px。 |
| lineHeight40 | 1.5rem | 16px のテキストには 24px。 |
| lineHeight60 | 1.75rem | 20px のテキストには 28px。 |
| lineHeight70 | 2rem | 24px のテキストには 32px。 |
### 角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| borderRadius10 | 2px | 最小の角丸半径。 |
| borderRadius20 | 4px | 小さなコントロール用の角丸半径。 |
| borderRadius30 | 8px | 小〜中サイズの角丸半径。 |
| borderRadius40 | 12px | 中程度の角丸。 |
| borderRadiusCircle | 50% | 円形にするには、幅と高さを同じにする必要があります。 |
| borderRadiusPill | 100px | 円形とは異なるピル型の角丸半径。 |
### テキストの役割と組み合わせ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| colorText | palette-gray-100 | メインの本文テキスト。リンク先のパレットでは #121c2d に解決されます。 |
| colorTextWeak | palette-gray-60 | 補助テキスト。リンク先のパレットでは #606b85 に解決されます。 |
| colorTextLink | palette-blue-60 | リンク。リンク先のパレットでは #0263e0 に解決されます。 |
| colorTextError | palette-red-60 | エラーテキスト。リンク先のパレットでは #db132a に解決されます。 |
| colorTextSuccess | palette-green-70 | 成功メッセージのテキスト。リンク先のパレットでは #0e7c3a に解決されます。 |
| colorTextWeaker | palette-gray-40 | ソースでは、通常の有効なテキストとして使用しないよう警告しています。 |
### ボタンの動作

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | この例では、送信に primary、切り替えに secondary を使用します。 |
| type | button by default | フォーム送信では submit を明示的に設定します。 |
| pressed | Secondary family only | テーマ切り替えには secondary を使用してください。 |
| loading | aria-busy and disabled control behavior | 実際に処理が保留中の場合に限り使用してください。 |
| as="a" | Requires href | ナビゲーションリンクでは、ボタンの disabled/loading 状態はサポートされていません。 |
| tabIndex | 0 or -1 | 正の tabIndex 値は拒否されます。 |
### テーマ名

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| default / dark | Theme variants | テーマは明示的に選択します。 |
| twilio / twilio-dark | Separate variants | すべてのバリアントが default と同一であるかのように説明しないでください。 |
| sendgrid / evergreen | Additional variants | brand を場当たり的な装飾に使わず、意図を持って選択してください。 |
## Twilio Paste デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Twilio Paste デザインシステム：ドキュメントのフォークと混同せずに上流のシステムを使う

### Twilio のソースと独立した派生版

> Paste は twilio-labs リポジトリで公開されています。検証時、以前の paste.twilio.design ドキュメントのルートはそのリポジトリにリダイレクトされました。別途ホスティングされている Paste DSys サイトは、Twilio とは無関係の独立したフォークであると説明しています。そのため、このガイドではトークンの値とコンポーネントの動作の根拠として、上流のソースファイルを参照します。

通知作成画面は、静的なボタン一覧では表現できない複数の状態を示すための実用的な例です。編集可能な内容、確認、作成済みのスナップショット、そして送信前の明確な境界を確認できます。このプレビューから Twilio API が呼び出されることはありません。

関連する仕様を確認する

## Twilio Paste デザインシステム：サフィックスを選ぶ前にスペーシングスケールを確認する

### トークンの数字は名前であり、ピクセル値ではありません

space30 は 0.5rem、space70 は 1.5rem です。末尾の 30 と 70 はスケール内の位置を表し、30px や 70px を意味するものではありません。ルートを 16px とした場合、作成画面ではラベルとフィールドの間に 8px、コントロール内に 12px、各領域間に 24px を使用できます。

YAML ソースではハイフン区切りの名前を使用します。このリファレンステーブルでは Paste の利用者が使うJavaScript形式の名前を示し、解決後の値を併記しています。rem ベースの値はルートフォントサイズに応じて拡大・縮小されるため、ピクセル換算値を常に適用されるブラウザー上の測定値として扱わないでください。

関連する仕様を確認する

## Twilio Paste デザインシステム：フォントサイズは別個の行高トークンと組み合わせる

### スケールの数値が同じになるとは限りません

フォントサイズと行高のエイリアスは別々です。デフォルトのルートサイズでは、fontSize30 は 14px、lineHeight30 は 20px です。fontSize70 は 24px で、行高には 32px の選択肢があります。これらを組み合わせることで、すべてのセクションを大きなマーケティング見出しにすることなく、ラベルや複数行の内容を読みやすく保てます。

埋め込みのサンプルでは、システムのサンセリフフォントスタックと、アプリケーション側で用意したスマートフォンのイラストを使用しています。これらは説明用であることを明示しています。プロプライエタリなフォントファイルの再配布はなく、スマートフォンのフレーム寸法を Paste のトークンとして示してもいません。

関連する仕様を確認する

## Twilio Paste デザインシステム：セマンティックなテキストの役割にはコントラスト上の制約がある

### 弱いテキストは、無効状態のテキストとは異なります

上流のカラーソースには、役割とあわせてコントラストの組み合わせが記録されています。メインテキスト、補助テキスト、エラー、成功メッセージには、それぞれ異なる前景色の役割が想定されています。弱いテキストの役割には、通常の有効なコントロールに使用しないよう警告があります。文字数表示を、ただ最も薄いグレーにするべきではありません。

このサンプルでは、アクションを青で示し、メッセージには暗いニュートラルカラーのテキストを使用しています。下書きのステータスは、ユーザーがボタンを押しただけで緑色になるのではなく、ローカルスナップショットが作成されたことを伝えます。サンプルの値はリンク先のパレットに基づいており、ほかのテーマバリアントでは異なる値に解決されることがあります。

関連する仕様を確認する

## Twilio Paste デザインシステム：テーマの選択は明示的な状態変更

### プロバイダーバリアントとアプリケーションの背景

Theme は Provider と Consumer のほか、名前付きのテーマオブジェクトやユーティリティをエクスポートします。現在のバリアント定数には、default、dark、twilio、twilio-dark、sendgrid、evergreen があります。この例では default と dark の切り替えのみを意図的に行います。

プロバイダーの切り替えに合わせて、アプリケーション側で用意したネイティブコントロールにも適切な背景スタイルを設定する必要があります。プロバイダーが Paste のコンポーネントにテーマを適用しても、外部のウィジェットまで自動的にスタイルが変わるわけではありません。提示するコードでは、周囲の前景色と背景色を明示的に設定し、textarea がアプリケーション側の要素であることを示しています。

関連する仕様を確認する

## Twilio Paste デザインシステム サポートされているボタンの種類に限り、押下状態を使う

### アクション、ナビゲーション、処理中では、それぞれ仕様が異なります

Button の実装では、一部のプロパティの組み合わせが検証されます。テーマ切り替えでは、pressed とともに secondary を使用します。コンポーネントの既定の種類は button なので、フォームのアクションでは type="submit" を設定します。アンカー形式のボタンには href が必要で、disabled や loading のアクションとして扱うことはできません。

- 下書きの作成には primary、独立したテーマ切り替えには secondary を使用してください。

- ナビゲーションはリンクのままにしてください。対応するアンカー形式にせず、ボタンに href を付けないでください。

- loading は、実際の処理が保留中の場合に限り使用してください。busy と disabled の動作がどちらも変わります。

- 実装ではサポートされる値が 0 と -1 に制限されているため、正の tabIndex 値は避けてください。

関連する仕様を確認する

## Twilio Paste デザインシステム 編集可能なコピーとレビュー済みスナップショットを分ける

### 正確な手順

ライブプレビューには、現在のテキストエリアの内容が表示されます。準備済みのコピーは別に保存され、検証後にのみ変更されます。再編集しても、以前に準備したスナップショットが意図せず書き換わることはありません。レビュー用チェックボックスはローカルでの操作体験であり、受信者の同意や法令遵守を示すものではありません。

1. ラベル付きテキストエリアに内容を入力します。

2. 現在のメッセージを確認し、ローカルのレビューチェックボックスをオンにします。

3. メッセージサービスを呼び出さずにスナップショットを準備します。

4. もう一度編集し、新しいスナップショットを準備する前に、下書きと準備済みのコピーを比較します。

関連する仕様を確認する

## Twilio Paste デザインシステム スマートフォンのモックアップを読み解かなくても、フィードバックを理解できるようにする

### ラベルとテキストによるフィードバックをイラストの外に配置

テキストエリアには可視ラベルがあり、文字数とエラーの説明が関連付けられています。文字数はUnicodeコードポイントとして定義されており、SMSの分割、エンコード、料金を測定するものではありません。準備済みの結果も、イラストの端末の外に通常のテキストとして表示されます。

空のメッセージやレビュー確認の不足を検証時に特定します。ステータス領域は、メッセージが送信されたかのように見せることなく、ローカルでの結果を通知します。狭いビューポートでも、すべてのネイティブコントロールとボタンでキーボードフォーカスが見える状態を保ちます。

関連する仕様を確認する

## Twilio Paste デザインシステム パッケージの検証とオフラインでの解釈を分ける

### 提供された例で確認できること

セットアップでは実際のPaste ThemeとButtonのパッケージをインポートし、完全なReactの構成を示します。ネイティブのフォームコントロールはアプリケーション側で所有すると明記し、未検証のコンポーネントAPIの機能として扱いません。埋め込み版はオフラインのHTMLによる解釈であり、外部CDNに依存しません。

サービスで使用する前に、peer dependenciesを解決し、ネイティブの例をビルドして、送信のための実際のバックエンド境界を追加してください。ローカルプレビューのテストが成功しても確認できるのはエディターの動作までであり、本番のメッセージング連携やTwilioの配信に関する主張を裏付けるものではありません。

関連する仕様を確認する

## Twilio Paste デザインシステム コンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開きます。アップストリームPasteのスケールとボタン状態のルールをオフラインでHTMLとして解釈したものであり、ネイティブのランタイムやメッセージサービスではありません。

```
<!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>
```

コードリファレンス

- スマートフォンのパネルには下書きのスナップショットが表示されます。SMSは送信されません。ネイティブのPaste ThemeとButtonの動作を確認するには、別途Reactの例が必要です。

### 実際のPasteテーマとボタン状態を使ったローカルの下書き

Theme.Providerがコンポーザー全体をラップします。Secondaryの押下状態を切り替えるとプレビューのテーマが変わり、Primaryの送信ボタンを押すとアプリケーション側の検証後にスナップショットが準備されます。ラベル、テキストエリア、チェックボックスは、アプリケーションが所有するネイティブコントロールであることを明示しています。

```
// 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 />);
```

コードリファレンス

- この例では、ネイティブコントロールがPaste TextAreaコンポーネントであるとは意図的に主張していません。

- 文字数の表示ではUnicodeコードポイントを数えます。SMSの分割数、エンコード単位、課金対象の使用量は数えません。

- ネイティブパッケージの例はソースを確認済みです。オフラインのHTMLプレビューは個別にテストしています。

## Twilio Paste デザインシステム エージェントのセットアップ

### 実装の出発点

ルート要素を含む、上記の完全なReactエントリーを使用します。モジュラーパッケージはネイティブのプロバイダーとボタンを提供します。互換性のあるpeer dependenciesを選び、解決したバージョンをアプリケーションのロックファイルに固定してください。

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

### あなたのプロジェクト向けプロンプト

```
Paste Theme.ProviderとButtonを使って、通知の下書きエディターを作成してください。Secondaryの押下時の切り替え動作、rem単位のスペーシング、ソースに裏付けられたテキストロール、下書きとスナップショットの分離を維持してください。SMSの分割数や配信結果を作り出さないでください。
```

## Twilio Paste デザインシステム 情報源と対象範囲

アップストリームPasteを独立して参照したOpenDesignです。Paste DSysは独立した非公式フォークです。この例ではメッセージは送信されません。

- アップストリームPaste 公式リポジトリとシステムの識別情報。

- スペーシング remベースのエイリアス。

- 文字のサイズ階層 フォントサイズのエイリアス。

- 行の高さ 独立した行の高さのスケール。

- 角丸 角丸のエイリアス。

- テキストロール セマンティックカラーとコントラストの組み合わせ。

- パレット 解決済みのソースパレット値。

- Buttonの出典 サポートされているプロパティの組み合わせと動作。

- テーマのエクスポート ネイティブのプロバイダーとユーティリティ。

- テーマのバリエーション 明示的にサポートされているバリエーション名。

## Twilio Paste デザインシステム 関連リソース

### Visa Product デザインシステム

VisaのNova CSSを使って、ネイティブのラジオボタン、色違いのヘッダー、確認用サマリーを備えた、見やすい明細形式の選択画面を作成します。正確な1.6.5のテーマ値、拡張可能なスペーシング、スタイルシート全体の組み込み方法を確認できます。

### Volvo Cars Web デザインシステム

Volvo CarsのHTMLを優先したWeb基盤、実際のライトモードのトークン、ネイティブの選択可能なカードのスタイルを、個別の選択、テーマ切り替え、リセットを備えた完成版のパッキングプランの例で確認できます。

### Wonderflow Wanda

Wandaの実際のテーマロールとトークン構文を使って、トピックフィルター、展開可能な根拠の詳細、常時表示されるローカルノートブックを備えた、フィードバックを読み解くための包括的なワークスペースを作成します。


- [実装リファレンス](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/line-height.yml)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [ソース](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/constants.ts)
- [関連する仕様を確認する](https://github.com/twilio-labs/paste)
- [関連する仕様を確認する](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [関連する仕様を確認する](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [関連する仕様を確認する](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [関連する仕様を確認する](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx)
- [関連する仕様を確認する](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [コードリファレンス](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [アップストリームPaste 公式リポジトリとシステムの識別情報。](https://github.com/twilio-labs/paste)
- [スペーシング remベースのエイリアス。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
- [文字のサイズ階層 フォントサイズのエイリアス。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
- [行の高さ 独立した行の高さのスケール。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/line-height.yml)
- [角丸 角丸のエイリアス。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml)
- [テキストロール セマンティックカラーとコントラストの組み合わせ。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
- [パレット 解決済みのソースパレット値。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml)
- [Buttonの出典 サポートされているプロパティの組み合わせと動作。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- [テーマのエクスポート ネイティブのプロバイダーとユーティリティ。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx)
- [テーマのバリエーション 明示的にサポートされているバリエーション名。](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/constants.ts)