83.3K+ダウンロード
コミュニケーションプラットフォーム · 新着リソース

Twilio Paste デザインシステム.

Pasteのテーマとボタンの仕様、検証済みのスペーシングスケールを使って通知の下書きを作成し、編集、レビュー、実際の送信を明確に区別してください。

OpenDesign をダウンロード DESIGN.md をダウンロード
OpenDesign ガイド9 章40件の参考項目オリジナルアプリケーションガイド
01

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

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

通知の下書きスタジオ完全な例を開く
上流の Paste のスケールとボタンの状態ルールをオフラインでHTML解釈したものです。ネイティブのランタイムでも、メッセージングサービスでもありません。· 実装リファレンス
02

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

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

スペーシングエイリアス

ソース
名前 / ルール値 / 設定用途
space100.125rem16px をルートとした場合の 2px。
space200.25rem16px をルートとした場合の 4px。
space300.5remフィールド間の間隔は 8px。
space400.75remコントロール内のパディングは 12px。
space501rem局所的なグループ間の間隔は 16px。
space601.25rem20px。
space701.5remセクション間の間隔は 24px。
space902rem大きなグループ間の間隔は 32px。
space1303remより大きな領域間の間隔は 48px。

フォントサイズのエイリアス

ソース
名前 / ルール値 / 設定用途
fontSize200.75remデフォルトのルートサイズで12px。
fontSize300.875rem本文用の 14px の選択肢。
fontSize401rem本文用の 16px の選択肢。
fontSize601.25rem見出し用の 20px の選択肢。
fontSize701.5rem見出し用の 24px の選択肢。
fontSize902remディスプレイ用の 32px の選択肢。

行の高さ

ソース
名前 / ルール値 / 設定用途
lineHeight20 / lineHeight301.25remコンパクトなテキストには 20px。
lineHeight401.5rem16px のテキストには 24px。
lineHeight601.75rem20px のテキストには 28px。
lineHeight702rem24px のテキストには 32px。

角丸

ソース
名前 / ルール値 / 設定用途
borderRadius102px最小の角丸半径。
borderRadius204px小さなコントロール用の角丸半径。
borderRadius308px小〜中サイズの角丸半径。
borderRadius4012px中程度の角丸。
borderRadiusCircle50%円形にするには、幅と高さを同じにする必要があります。
borderRadiusPill100px円形とは異なるピル型の角丸半径。

テキストの役割と組み合わせ

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

ボタンの動作

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

テーマ名

ソース
名前 / ルール値 / 設定用途
default / darkTheme variantsテーマは明示的に選択します。
twilio / twilio-darkSeparate variantsすべてのバリアントが default と同一であるかのように説明しないでください。
sendgrid / evergreenAdditional variantsbrand を場当たり的な装飾に使わず、意図を持って選択してください。
03

Twilio Paste デザインシステム完全ガイド

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

DESIGN-twilio-paste.md

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

ガイドをダウンロード

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

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

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

この OpenDesign ガイドから

通知作成画面は、静的なボタン一覧では表現できない複数の状態を示すための実用的な例です。編集可能な内容、確認、作成済みのスナップショット、そして送信前の明確な境界を確認できます。このプレビューから 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として解釈したものであり、ネイティブのランタイムやメッセージサービスではありません。

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の送信ボタンを押すとアプリケーション側の検証後にスナップショットが準備されます。ラベル、テキストエリア、チェックボックスは、アプリケーションが所有するネイティブコントロールであることを明示しています。

jsx
// 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プレビューは個別にテストしています。
04

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

実装の出発点

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

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

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

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

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

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