tenzir-design-system

Tenzir デザインシステム

Tenzir デザインシステムの正式な拠点です。機械可読なトークン、デザイン原則、ブランドアセットを提供します。このスキルが定義するのは値とデザイン上の決定事項であり、それらを各ツールでどのように実現するかは対象外です。

**すべての値について、YAML データファイルが正となり、Markdown にはデザイン上の決定事項、つまりトークンの選び方と適用方法を記載しています。**スニペットと YAML の内容に食い違いがある場合は、YAML を優先してください。

データファイル

• data/brand.yml：カラーパレット、セマンティックロール（primary/success/warning/…）、グラフカラー、タイポグラフィ、ロゴを定義します。Quarto の brand.yml スキーマに準拠しているため、Quarto/Shiny からそのまま利用できます。
• data/tokens.yml：そのスキーマで定義されている内容以外のすべてを tenzir: キーの下に定義します。スペーシング、角丸、タイプスケール、シャドウ、不透明度と色合い、モーション、z-index、ブレークポイント、ダークモードのマッピングが含まれます。
• source.md：対象範囲と対象外の事項を記載します。

質問の振り分け

質問	読み込むファイル
トークンの 16 進数値／値は？	data/brand.yml、data/tokens.yml
どの色／フォント／サイズを使えばよいですか？	references/colors.md、references/typography.md
スペーシング、角丸、ブレークポイント、z-index については？	references/layout.md
シャドウ、オーバーレイ、サーフェスの重なり順については？	references/elevation.md
アニメーションの再生時間とイージングについては？	references/motion.md
どのアイコンセット／スタイルを使えばよいですか？	references/iconography.md
ブランド効果（グラデーションボーダー、グラデーションテキスト、キッカー、本文）については？	references/branded-effects.md
必ず守るべきデザインルールは？	references/invariants.md
対象範囲と対象外の事項は？	source.md

現在のタスクに必要なファイルだけを読み込んでください。独自のスタイリングより、デザイントークンと既存のコンポーネントパターンを優先してください。

コンポーネント

Tenzir のコンポーネント仕様はありません。このシステムが提供するのは不変のルール（トークン、フラットなサーフェス、エレベーション、グラデーション、アイコングラフィー）であり、コンポーネントの構造ではありません。プロジェクトのライブラリを使ってコンポーネントを構築し、不変のルールを守ってください。

規約

• このスキルはツールに依存しません。値（data/）とデザイン上の決定事項（references/ の原則ドキュメントと不変のルール）を管理します。それらを各ツールでどのように実現するかは対象外です。
• ライトモードとダークモードは、どちらも厳格に適用される第一級のモードです。1 つのパレットを共有し、セマンティックロールを再マッピングします。背景のノイズは最小限に抑えてください。

アセット

公式ロゴは assets/logos/ にあります。バリアント名はアートワークの色を示します。ダークカラーのアートワークは明るい背景に使用してください。

• logo-dark.svg、logomark-dark.svg：明るい背景用
• logo-light.svg、logomark-light.svg：暗い背景用

ロゴマークはアイコンのみのマークです。フルロゴがすでに表示されている場合や、スペースが限られている場合に使用してください。