Black Belt Design Library

Black Beltはブラジリアン柔術のトレーニングアプリです。これはそのデザインライブラリです。システムを説明する文書ではなく、システムそのものを描画しています。

収録内容

• 基礎 — 4ptの半ステップを持つ8単位のグリッド、3つの角丸、5サイズ・3ウェイトにわたる7つの文字の役割、1つのアクセントと画面ごとに1色相のチャートを使うニュートラルな配色
• カード — すべての画面のカードは、前置きラベル、タイトル、補足行、本体、キャプション、操作という共通構造を持ちます。違うのは本体の内容だけです
• コンポーネント — ピクセルグリッド手法の4レイヤーでそれぞれを描画：グリッド、パディングと領域、構造、文字
• 画面 — 画面全体とチャートの見本を、すべてライト・ダーク両方で表示
• 出荷しない条件 — ビルドに入る前にデザインを却下するルール

説明せず、描画する理由

ライブラリは何もインポートしない、単独で完結した1ページです。すべての見本をアプリの画面キャンバスと同じスタイルシートで描くため、コンポーネントと文書が食い違うことはありません。文書そのものが コンポーネント だからです。この書き方では、各ルールを実際に描画できる必要があります。対応する見本がない余白の値は、ページに採用しませんでした。

組み込んだ制約

ボールドもセミボールドも使いません。強調にはウェイト500かセカンダリーカラーを使い、文字サイズは大きくしません。受動的なコンテンツカードは不透明でアクセシブルなままにし、ナビゲーションと一時的なUIにはネイティブのガラス表現を使います。チャートの色相は画面ごとに1つとし、すべての描画要素をその範囲内のグラデーションにします。