メインコンテンツへスキップ
ブランドシステムv1

FlytBase視覚および言語システム

色、フォント、コンポーネント、モーション、そして音声。FlytBaseブランドで製品、マーケティング、パートナー企業を展開するすべてのチームにとってFlytBase共通のリファレンスとなる資料です。

2026.04版
観客
製品、ブランド、エンジニアリングチーム向け

システムは3つのアンカーカラーで構成されています。チャコールはデフォルトのページ背景色であり、モードではありません。シグナルオレンジは主要なアクセントカラーです。ユーカリはプラットフォーム上の重要な場面で使用される二次的なアクセントカラーです。シグナルオレンジとユーカリを同じビューポートで混在させないでください。

厳格なルール

同じビューポート内でo400とe400を混在させないでください。セクションごとに1つのアクセントカラーを選択してください。

木炭(濃いベース)

デフォルトのページ背景。表面、境界線、テキストはすべてこのスケールに基づいて作成されます。

シグナルオレンジ

CTA(行動喚起)ボタン、眉毛、ブランドロゴ、サーマルモーションなどの主要なアクセント。

ユーカリ

プラットフォームやデータイベントの補助的なアクセント。明暗反転セクションで使用されます。

クールグレー(ライトベース)

ユーカリが主役となる、逆転したセクション。

意味的ステータスの色

機能レイヤーはブランドとは切り離して配置します。すべてのステータスにはアイコンとラベルを組み合わせ、色だけを使うことは避けます。成功にはユーカリの色を再利用し、エラー、警告、情報、進捗状況、レビューにはそれぞれ専用の色を使用します。

トークン名で参照してください。16進数で参照しないでください。トークンは、@theme 内の src/app/globals.css で宣言されています。

タイポグラフィ

3つのファミリー、それぞれに明確な役割分担があります。LoRaは表示用、Geistはインターフェースのコピー用、Geist Monoはメタデータ用です。next/font経由でロードされ、実行時にfonts.googleapis.comからロードされることはありません。

画面

Lora

自律運用

見出し、表示、編集上のアクセント。イタリック体のLoraは、見出しの中の単語一つだけを強調表示し、文全体を強調表示することはありません。

インタフェース

Geist

拡張性を考慮して設計された、企業向けドローンフリート管理ソフトウェア。

本文、ボタン、ナビゲーション、フォームなど、すべてのUIテキストはGeistで作成されています。

メタデータ

Geist Mono

FLT-2026.04 - 12:00 UTC

眉毛、ラベル、タイムスタンプ、数字、コード。

規模

見出しはクランプ(32px, 4vw, 56px)曲線に沿って配置されます。本文は17px/1.6の比率で配置されます。眉毛は10pxの位置にあり、0.12emのトラッキングが適用されます。

図像学

アイコンは@phosphor-icons/reactに固定され、太さは細字(1pxストローク)となります。標準太さは、枠で囲まれたアイコンの場合、32~40pxの正方形の範囲内でのみ使用可能です。

許可する

  • - デフォルトではリン光体(薄い)
  • - 枠で囲まれた正方形の中にリン光体レギュラー
  • - グリフが欠落している場合は、src/components/icons/ に単発の SVG を作成し、Phosphor ストロークに一致させます。

一度もない

  • - デュオトーンまたは塗りつぶしウェイト
  • - 絵文字をアイコンとして使用
  • - その他のアイコンライブラリ(Lucide、Heroicons、Material、Tabler、Font Awesome)
import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

コンポーネント

すべてのコンポーネントはトークンのスケールを継承します。フレーム付き要素が必要な場合を除き、ボーダー半径は設定されません。トランジションはcubic-bezier(0.22, 1, 0.36, 1)で200msで実行されます。

プライマリ - シグナルオレンジの背景、モノクロラベル、マウスオーバー時に光る。

Ghost - 透明、マウスオーバー時に境界線がdhに温かみを帯びる。

眉毛とラベル

シグナル01 - 自律性更新日:2026年4月21日

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

間隔とレイアウト

8ピクセルの基本グリッドと単一の最大コンテンツ幅。表面は丸みを帯びません。

グリッド

8
16
24
32
48
64

基本サイズは8ピクセルです。8、16、24、32、48、64、96の増分値を使用してください。

容器

最大ページ幅1200px。水平方向のパディングは、モバイルでは24px、メインディスプレイでは48px。

境界半径

デフォルトではゼロです。枠付きアイコンと検証入力欄は例外です。

模様と表面

タイル状に並べられるパターンが3種類と、温度勾配が1種類。各区画につき1種類ずつ使用してください。

グリッド

チャコール色の背景に、アルファ値4%で32ピクセルの線を描画。

ドット

チャコール色の背景に、アルファ値14%の20ピクセルの放射状ドットを配置。

シグナルオレンジからチャコールへの斜めのグラデーション。特別な場面で使用され、カード内には使用されません。

暗い表面に適用される、アニメーション効果のあるフィルムグレインオーバーレイ。これは装飾的なものであり、これがなくても元のセクションは完全に判読可能です。

モーション

動きは意図的なものであり、環境的なものではありません。スクロールしてブロックを表示し、そのまま長押ししてください。Honorは動きの少ない操作を推奨します。

明らかにする

duration 0.9s - ease power3.out

0.9秒のイーズ、power3.out、24pxのライズ、12%のしきい値。要素ごとに1回実行されます。

ホバー

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

200msのイーズでcubic-bezier(0.22, 1, 0.36, 1)を適用します。プライマリボタンは1px持ち上がり、光ります。

動作の減少

prefers-reduced-motion: reduce

全ての表示は即座に解決します。穀物の発生は停止します。ホバーリフトは無効化されます。

メディア

動画やその他のモーション駆動型アセットがシステム全体とどのように連携するか。共有コンポーネント(AutoplayVideo)がサイト上のすべての自動再生クリップ(ランディングページのヒーロークリップ、ホーム画面の顧客紹介動画、ブランド紹介動画など)を担うため、再生の一貫性が保たれます。

動画の自動再生

デフォルトではミュートされており、右下にあるミュート切り替えボタンでミュートできます。ホーム画面の顧客の声を紹介する動画やランディングページのヒーローパネルで使用されています。親コンポーネントから渡される同じコンポーネント、同じラベルが使用されています。

  • ゲート画面に表示されている間(IntersectionObserver、しきい値0.25)かつタブが表示されている間のみ再生されます。いずれかの条件が変わると、すぐに一時停止します。
  • 動作軽減Honorsは、動きの少ない表示を推奨します。自動再生は無効です。ポスターには手動再生ボタンが表示されます。
  • ミュートトグルボタンは右下隅に固定されています。押すたびにスピーカーアイコンが反転し、再生関数が再発行されるため、ミュート解除時に動画が一時停止することはありません。

AutoplayVideo - home/Platform/devices.webm (Bunny Stream経由)

声とトーン

マーケターではなく、オペレーターのように書きましょう。短い文章で、具体的な名詞を使い、流行語は避けましょう。

する

  • - ブランド名FlytBaseをスペルアウトしてください。FとBは大文字です。
  • - 通常のハイフンのみを使用してください。
  • - 文頭に大文字と小文字を区別して見出しを作成してください。
  • - 機能ではなく、結果を明記してください。

しないでください

  • - emダッシュまたはenダッシュを使用してください。
  • - 製品、マーケティング、またはコードに絵文字を使用しましょう。
  • - フライトベース、フライトベース、FLYTBASE、または FLytbase と書きます。
  • - シナジー、レバレッジ、アンロックといった専門用語を積極的に活用しましょう。
  • - タイトル、見出し、またはラベルは必ずピリオドで終了してください。タイトルは文ではなくラベルとして読み取られます。

利用ルール

このブランドで出荷を行うすべての方のためのクイックリファレンスです。完全なルールは、Docs/AGENTS.md および Docs/DESIGN-SYSTEM.md に記載されています。

  1. 01

    デフォルトではサーバーコンポーネントが使用されます。クライアントコンポーネントは、状態、エフェクト、イベントハンドラ、またはブラウザAPIにのみ使用されます。

  2. 02

    インデックス登録可能なすべてのページは、generateMetadata 内で buildAlternates(path, locale) を呼び出します。ページ本文からリンク rel alternate を出力しないでください。

  3. 03

    ユーザー向けのテキストはすべてuseTranslationsを使用しています。手動で編集するのはsrc/messages/en.jsonのみです。

  4. 04

    Link、useRouter、usePathname、およびredirectは@/i18n/navigationからインポートしてください。next/linkまたはnext/navigationからはインポートしないでください。

  5. 05

    インラインスタイルは使用不可。CSSモジュールも使用不可。Tailwindユーティリティとトークンクラスのみ使用可能。

  6. 06

    Next.js の特殊ファイル (page、layout、error、loading、not-found) 以外には、デフォルトのエクスポートはありません。

リッチテキスト

長文コンテンツ(事例研究、ブログ記事、ドキュメントなど)における見出し、本文、インラインマークの表示方法。

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block quotes set a passage apart from the body — used for pulled statements and emphasis within an article.

  1. First ordered item
  2. Second ordered item
  3. Third ordered item
  • First unordered item
  • Second unordered item
  • Third unordered item

Text link

Bold text

Emphasis