ブランド
Tanrei という名前、2 つのマークとその使い方、そしてシステムの描き方を決めている性格。
Tanrei（端麗）は、すっきりと整っていることを意味します。この名前は、そのままシステムへの要求です。静かで、正確で、読みやすいインターフェースを、プロダクトが出ていくすべてのプラットフォームで実現します。Tanrei は独立したプロジェクトです。
Tanrei には 2 つのマークがあり、一度に 1 つだけ使います。
シンボルとワードマーク
シンボル、ライト
シンボル、ダーク
ワードマーク、ライト
ワードマーク、ダーク
- シンボルは、しっぽり明朝の T の角をやわらげたものです。正方形や円の形が求められる場所だけで使います。favicon、アプリのアイコン、デザインファイルの隅の飾りのような素材の透かしです。控えめな宣伝や装飾にも使います。
- ワードマークは、シンボルの T に続けて Outfit SemiBold の「anrei」を組み、1 つの描画にしたものです。名前が読まれる場所での Tanrei のロゴです。このサイトのヘッダー（どの幅でも）、表紙、ページのタイトル、共有されたリンクの画像です。
マークは一度に 1 つだけ使い、シンボルとワードマークを組み合わせたロックアップは作りません。これは Tanrei 自身のマークについての規則です。アプリバーそのものは、プロダクトが自分のロゴを、そのロゴに必要な形で、ロックアップも含めて表示できるようにしています。
シンボルは、正方形のフレームの中心より少し下に置かれています。これは光学的な補正です。T は上に重さがあるので、少し下げると中央にあるように見えます。
どちらのマークも 1 色、sys.color.on-surface で、置かれたサーフェスの上に描きます。色は描画の一部ではなくトークンなので、マークはライトとダークのスキーム、そしてすべてのコントラストの段階に従います。使う場所ではそれぞれ on-surface を取ります。このサイトのヘッダーは、ワードマークを comp.app-bar.brand.color で塗っており、これは on-surface です。
クリアスペース
四方に、インクの高さの 4 分の 1
シンボルの四方に、その高さの 4 分の 1 を空けます。フレームではなく、インクから測ります。ワードマークの周りには、その x ハイトの半分を空けます。この空間には、ほかのものを入れません。テキストも、ほかのマークも、画面の端もです。
最小サイズ
シンボル: 24 px のフレーム
ワードマーク: 24 px の大文字
シンボルは 24 px のフレームより小さく描かず、ワードマークは大文字の高さが 24 px 未満になるように描きません。
例外は favicon だけです。ブラウザは favicon を 16 px で描くからです。favicon は 1 枚の SVG です。その横にある ICO と PNG のファイルは、同じ画像をブラウザが求める大きさで描いたもので、別のデザインではありません。16 px では輪郭がやわらぎますが、それは受け入れています。
非推奨
ほかの色で塗る
輪郭線にする
引き伸ばす
シンボルとワードマークを並べる
シンボルの横に名前を組む
- マークは一度に 1 つだけ使います。名前が読まれる場所にはワードマーク、正方形や円の形が求められる場所だけにシンボルです。
- マークは on-surface で、置かれたスキームのサーフェスの上に描きます。
- ホーム画面やラスター画像の favicon のように、プラットフォームが不透明なアイコンを求める場所では、シンボルをライトのスキームのサーフェスの上に置きます。その正方形はプラットフォームのもので、マークの一部ではありません。
- シンボルはフレームの中の位置のままにします。フレームの中心へ動かしません。
- マークの色を変えたり、グラデーション、輪郭線、影、背景の図形を加えたりしません。
- マークを引き伸ばしたり、回転させたり、切り取ったりしません。
- シンボルとワードマークを組み合わせたロックアップを作らず、シンボルの横に名前をテキストで組みません。
- ワードマークをほかの書体で組み直しません。その描画を使います。
- 「端麗」の文字をマークとして使いません。デザインファイルの表紙の装飾であり、アイデンティティの一部ではありません。
ブランドは、システムの見た目でもあります。
サーフェスはほぼモノクロームで、枠線は 1 ピクセルの細い線です。そのため、画面の中で最も色のあるものは、プロダクトのコンテンツになります。プライマリのアクションは、白の上の黒か、黒の上の白です。青のアクセントが 1 つだけあり、すぐに見つけられなければならないただ 1 つのもの、つまりキーボードのフォーカスリングのために取っておきます。リンクは下線で、選ばれている項目はプライマリの色で見分けられるので、画面の中でほかに青いものはありません。
階層は、重い影や色を重ねたパネルではなく、整列、スペーシング、細い線から生まれます。エレベーションは、リングとごく柔らかい影です。
既定は控えめです。より強い強調の段階、より大きくなめらかな角、より弾むモーションといった表現的な選択は、同じ構造の上に重ねる追加のトークンであり、構造を分岐させるものではありません。
Tanrei のコードとドキュメントは、Apache License 2.0 でライセンスされています。このライセンスの第 6 条は、作品の出どころを説明することと NOTICE ファイルを再現することを除いて、ライセンサーの名称、商標、製品名を使う許可を与えていません。
- あなたの作品が Tanrei を使っている、または Tanrei で作られていると、文章で書くことはできます。
- シンボルとワードマークは Tanrei Authors のものであり、ほかの人にはライセンスされていません。あなたのプロダクトの中、パッケージの名前やアイコンの中で使ったり、あなたの作品が Tanrei である、または Tanrei に推薦されていると思わせる形で使ったりしないでください。