Remote.It

DESIGN SYSTEM · v1.0

A textured, technical system for connected devices.

The foundations, components, and motion primitives behind the Remote.It website — built to hand straight to engineering.

SoraRobotoRoboto Mono#0096E7

01 — Color

Brand & palette

Brand blue leads. Deep navy carries dark moments, a light cyan drives glow and motion, and a warm-neutral paper keeps the whole system textured rather than clinical.

Brand Primary

--brand-500#0096E7

Brand Deep

--brand-700#034B9D

--brand-300

#7FD2FF

--brand-050

#EAF6FE

--ink-900

#0A1326

--ink-500

#5D6066

--paper

#FAFAFB

--navy-900

#070D18

--ok

#2FB389

--warn

#E8964C

--err

#B04848

--hairline

ink / 10%

02 — Typography

Type system

Sora sets every headline — geometric, a little quirky, and heavy. Roboto handles body at a comfortable measure. Roboto Mono carries labels, data, and code — the system's "technical voice."

Display / 58

Open zero ports

Heading / 34

Connect everything. Expose nothing.

Title / 22

Built for fleets behind firewalls

Body / 16–18

Remote.It gives your fleet secure, peer-to-peer connectivity — no VPNs, no port forwarding, no public IPs. Connect to anything, anywhere.

Mono label / 12

Zero-trust device networking

03 — Components

Core components

Buttons

Badges & status

Eyebrow API

connected pending offline

Code surface

$ remoteit connect rpi-edge-7

→ establishing p2p tunnel … ok

✓ connected · 0 ports · e2e

Gradient card

Brand + live motif

For hero use-cases & CTAs.

04 — Motion

Network motifs

Two reusable canvas components. <NetworkField> (mesh · globe · radial) and <LineArt> (cone · cube · rings · waves). Always-on, GPU-light, and tinted from any token.

variant="mesh"

variant="globe"

variant="radial"

variant="cone"

variant="cube"

variant="rings"

variant="waves"

05 — Tokens

Design tokens

These map directly to the Tailwind theme in 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 */
}