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

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

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

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

色

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

01

厳格なルール

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

木炭（濃いベース）

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

dbg#1A1A1A
ds#242424
de#2E2E2E
db#3D3D3D
dm#5C5C5C
dsc#999999
dbd#D6D6D6
dh#F0F0F0

シグナルオレンジ

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

o50#FDF0E8
o100#F4B896
o200#EC7D42
o400#D95B28
o600#A33D14
o800#7A2B0E
o900#4A1808

ユーカリ

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

e50#EAF0EE
e100#BACDD0
e200#72A899
e400#3A7A65
e600#2B5A4A
e800#1B3A30
e900#0F2219

クールグレー（ライトベース）

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

lbg#F5F5F7
ls#FFFFFF
lb#DDDFE3
lsc#555555
lp#111111

検証

フォームエラー状態専用です。ブランドカラーとしては一切使用されません。

error - #F43F5E

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

タイポグラフィ

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

02

画面

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の正方形の範囲内でのみ使用可能です。

03

許可する

  • - デフォルトではリン光体（薄い）
  • - 枠で囲まれた正方形の中にリン光体レギュラー
  • - グリフが欠落している場合は、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で実行されます。

04

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

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

グリーン - プラットフォームおよびデータイベント用のユーカリ。

眉毛とラベル

シグナル01 - 自律性プラットフォーム02 - イベント更新日：2026年4月21日

間隔とレイアウト

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

05

グリッド

8
16
24
32
48
64

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

容器

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

境界半径

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

模様と表面

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

06

グリッド

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

ドット

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

熱

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

粒

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

モーション

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

07

明らかにする

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

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

声とトーン

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

08

する

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

しないでください

  • - emダッシュまたはenダッシュを使用してください。
  • - 製品、マーケティング、またはコードに絵文字を使用しましょう。
  • - フライトベース、フライトベース、FLYTBASE、または FLytbase と書きます。
  • - シナジー、レバレッジ、アンロックといった専門用語を積極的に活用しましょう。

利用ルール

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

09
  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) 以外には、デフォルトのエクスポートはありません。

バックオフィス業務全体を一つのプラットフォームで管理できます。 24時間365日稼働する無数のエージェント。

BVLOS経路

承認手続きをサイトごとに独自に進めるか、それともマネージドサービスの下で運用するか？

ROIフレームワーク

結果が特定のユースケースに限定されている場合、次の段階の予算をどのように確保すればよいでしょうか？

データからインテリジェンスへ

膨大なテラバイト規模の映像を、レビューに追われるチームを必要とせずに、いかにしてアクションにつなげるか？

ITおよびコンプライアンス

データはどこに保存されているのか、誰がアクセスできるのか、そしてハードウェアはNDAA（国防権限法）に準拠しているのか？