ロゴ

提供されたアートワークは、作り直したり、色を変えたり、並べ替えたりせずに使ってください。プライマリロックアップはマスターブランドを Tinyrack と示します。Tinyrack UI などのプロダクト名は、別の画面テキストとして配置します。

アセットと仕上がりを選ぶ

1. Tinyrack の名前を示す: 周囲だけではブランドが分からない場合はロックアップを選びます。
2. 小さくブランドを示す: 近くに Tinyrack の名前がある場合だけマークを選びます。
3. 正方形の領域: ファビコン、ランチャー、サービスアバターにはアプリアイコンを選びます。
4. 仕上がり: 提供された SVG を変更せず、プロダクト名は別の画面テキストとして配置します。

バリエーション

文脈に応じて、ブランドを識別できる最小の承認済みバリエーションを選んでください。

プライマリロックアップドキュメント、ナビゲーション、告知、共有素材など、ブランド名を示す必要がある場面で使います。

反転ロックアップ黒に近い背景では、提供された反転アートワークを使います。CSS でプライマリファイルの色を反転しないでください。

マーク近くに Tinyrack の名前がある場合、またはロックアップを配置できないほど領域が小さい場合に使います。

アプリアイコンファビコン、ランチャー、サービスアバターなどの正方形領域では、承認済みのタイルを使います。

色と背景

ブランドアイデンティティには、意図的に無彩色を使っています。色はロゴではなく、プロダクトの状態やインタラクションを表すために使います。

暗いアートワーク白または白に近い背景では #0a0a0a を使います。

明るいアートワーク黒または黒に近い背景では #fafafa を使います。

ラックベイやステータス用の開口部が判別しにくくなるため、情報量の多い画像、グラデーション、コントラストの低い背景には、どちらのバリエーションも配置しないでください。

クリアスペース

x をマークの高さの 4 分の 1 とします。マークまたはロックアップの全周に少なくとも x の余白を確保し、画面端、テキスト、罫線、ほかのロゴはその外側に配置してください。

xx

マーク: クリアスペースは、表示したマークの高さの 25% です。

ロックアップ: マークを基準に x を測り、ロックアップ全体の周囲に同じ距離を確保します。

余白を広く取ることは問題ありません。この規則は最小値であり、推奨するコンテナサイズではありません。

最小サイズ

最小サイズは、ネガティブスペースで表したインジケーターとワードマークの字形を保つための基準です。ロックアップを最小幅より小さくせず、マークへ切り替えてください。

マーク

デジタル表示の最小サイズ: 16px 四方。

ロックアップ

デジタル表示の最小幅: 112px。

配置

1 つの画面にはロックアップを 1 回だけ使い、構図の安定した端に配置してください。左から右へ読むインターフェースでは左上を推奨します。起動画面、読み込み画面、終了画面では中央配置が適しています。ファビコンやサービスアバターなど、繰り返し現れる小さな領域にはマークを使います。

プロダクト名、プロジェクト名、パートナー名は、ロックアップのクリアスペース外に配置してください。新しいロゴを組み立てたり文字を追加したりせず、Tinyrack UI は通常の画面テキストとして表示します。

アクセシビリティ

ロゴだけをリンクの内容にする場合は alt="Tinyrack" を使い、リンクに簡潔なアクセシブル名を付けてください。近くのテキストがすでに Tinyrack を示していて画像の説明が重複する場合は、空の alt 属性を使います。

<a href="/">
  <img src="/brand/tinyrack-lockup.svg" alt="Tinyrack" width="156" height="38" />
</a>

ラックの図柄を説明する文言を alt テキストに追加しないでください。アクセシブル名はブランドを識別するために使い、アートワークの説明はページ本文に記載します。

誤用

形状と構成

マークは、ステータス孔をそろえた 3 段のラックベイで構成されています。ロックアップでは、アウトライン化した IBM Plex Sans SemiBold のワードマーク、マーク、固定間隔が 1 つのアートワークです。各部分を組み直したり、分離したり、並べ替えたりしないでください。

ローカライズされたロックアップ

韓国語の画面では韓国語ロックアップを、それ以外の言語ではラテン文字のロックアップを使ってください。読み手のブラウザ設定ではなく、画面の言語で選びます。

韓国語ロックアップは同じグリッド上にあります。マークと余白、高さ 38、ワードマーク前の間隔はすべて同じです。ワードマークはアウトライン化した IBM Plex Sans KR SemiBold で、字面の高さがラテン文字のキャップハイトと一致するように調整しています。韓国語の字幅はラテン文字のワードマークと異なるため、キャンバスの幅は狭くなります。幅ではなく高さを基準に拡大縮小してください。

上記の規則はそのまま適用されます。韓国語ワードマークもアウトラインのアートワークなので、文字として組んではいけません。

ダウンロード

デジタル用途では SVG を使ってください。文字をアウトライン化したアートワークなので、フォントのインストールや実行時のスタイルシートは不要です。

スライド資料、ストアの掲載情報、ソーシャルプロフィールなど、SVG を受け付けない場面でのみ PNG を選んでください。すべての PNG は同じ SVG マスターを透過背景でレンダリングしているため、反転アートワークも暗い背景で判読できます。正方形のアセットは一辺の長さ、ロックアップは高さで表記しています。ロックアップの幅はアートワークの比率に従います。

同じアートワークを @tinyrack/ui にも収録しています。ビルドツールでファイルをコピーし、ハッシュを付ける場合は、brand サブパスから読み込んでください。

import tinyrackIconUrl from '@tinyrack/ui/brand/tinyrack-app-icon-512.png';
import tinyrackLogoUrl from '@tinyrack/ui/brand/tinyrack-lockup.svg';