デザイン・デザイン/無料ツール
デザイントークン生成ツール
ライブコンポーネントのプレビューで、セマンティックカラー、間隔、半径、およびタイポグラフィトークンを作成します。 輸出入 CSS カスタムプロパティまたは JSON、AIなしで放して下さい。
デザイントークン
design-tokens.css
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}単語数: 38詳しくはこちら ↑
出力テキストは英語のままです。入力内容はそのまま保持されます。
サインアップはありません。 AIクレジットなし。 このツールは、お使いのブラウザで出力を組み立てます。
アイデアから何か役に立つものまで。
- 01
意味のある色とベース値を設定します。
- 02
ライブサンプルと生成された間隔のスケールを調べます。
- 03
コピー CSS 変数または一致を輸出して下さい JSON 値。
小さな文脈。
セマンティックトークンは、名前を繰り返し設計決定を与えます。 このツールは、あなたの選択からコンパクトなパレットと間隔のスケールを構築します。 CSS そして、 JSON エクスポートは同じ値を共有します。 ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ JSON 特定のトークン交換基準の遵守の主張ではなく、単純なキー値トークン文書です。
よくある質問
既存のテーマで利用できますか?
はい。 エクスポートされたトークンを、確立されたシステムを盲目に置き換えるのではなく、テーマの慣行にマップまたは名前を変更します。
光とダークなテーマを創り出していますか?
一度にパレットを1個ずつエクスポートします。 各パレットを個別に作成してダウンロードし、あらゆるモードでのコントラストを見直します。