Remote.It

デザインシステム · v1.0

接続されたデバイス向けの、質感にこだわった高度なシステム。

Remote.It ウェブサイトの基盤、構成要素、およびモーションプリミティブ――これらはエンジニアリング部門に直接引き継げるよう構築されています。

ソラRobotoRoboto Mono#0096E7

01 — 色

ブランドとカラーパレット

ブランドカラーのブルーが主導的な役割を果たしています。深いネイビーは暗い雰囲気を醸し出し、明るいシアンは輝きと動きを生み出し、温かみのあるニュートラルな紙の質感が、システム全体に無機質さを感じさせず、質感豊かな仕上がりとなっています。

主要ブランド

--brand-500#0096E7

ブランド・ディープ

--brand-700#034B9D

--brand-300

#7FD2FF

--brand-050

#EAF6FE

--ink-900

#0A1326

--ink-500

#5D6066

--論文

#FAFAFB

--navy-900

#070D18

--OK

#2FB389

--警告

#E8964C

--err

#B04848

--ヘアライン

インク / 10%

02 — タイポグラフィ

型システム

「Sora」はすべての見出しを担当しています。幾何学的で、少し風変わり、そして重厚な印象を与えます。「Roboto」は本文を適度なバランスで表現しています。「Roboto Mono」はラベル、データ、コードを担当し、このシステムの「技術的な声」となっています。

表示 / 58

ゼロポートを開く

見出し / 34

すべてを接続し、何も公開しない。

タイトル / 22

ファイアウォール内のフリート向けに構築されています

ボディ / 16～18

Remote.Itは、VPNやポートフォワーディング、パブリックIPを一切必要とせずに、御社の車両群に安全なピアツーピア接続を提供します。どこからでも、あらゆるデバイスに接続できます。

モノ・レーベル / 12

ゼロトラスト型デバイス・ネットワーキング

03 — 構成要素

主要コンポーネント

ボタン

バッジとステータス

眉 API

接続中保留中オフライン

コードサーフェス

$ remoteit connect rpi-edge-7

→ P2Pトンネルの確立中… OK

✓ 接続済み · 0ポート · e2e

グラデーションカード

ブランド＋ライブモチーフ

ヒーロー画像の活用例やCTAについて。

04 — 動き

ネットワークモチーフ

再利用可能なキャンバスコンポーネントが2つ。 <NetworkField> (メッシュ・グローブ・ラジアル) および <LineArt> (円錐・立方体・リング・波)。常時稼働、GPU負荷が軽く、任意のトークンから色付けが可能。

variant="mesh"

variant="globe"

variant="radial"

variant="cone"

variant="cube"

variant="rings"

variant="waves"

05 — トークン

デザイントークン

これらは、 src/styles/global.css.

tokens.css

:root {
  /* color */
  --brand-500: #0096E7;   /* primary */
  --brand-700: #034B9D;   /* deep / secondary */
  --brand-300: #7FD2FF;   /* glow / motion accent */
  --brand-050: #EAF6FE;   /* tint surface */
  --ink-900:   #0A1326;   /* text, navy */
  --ink-500:   #5D6066;   /* muted text */
  --paper:     #FAFAFB;   /* page background */
  --navy-900:  #070D18;   /* dark sections, footer */
  --hairline:  rgba(10,19,38,.10);
  --ok: #2FB389;  --warn: #E8964C;  --err: #B04848;

  /* type */
  --font-display: "Sora", sans-serif;
  --font-body:    "Roboto", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", monospace;

  /* radius + elevation */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(10,19,38,.05);
  /* elegant system: prefer hairline dividers over boxes; avoid glows */
}