AetherVPN
AETHER / DESIGN SYSTEM — V1.0

Give connection form.
Make freedom feel real.

The foundations of AetherVPN's brand and interface: clear hierarchy, subtle light, and reusable components for a consistent experience.

Brand direction / Digital spaceVisual language / Light trails and spaceApplications / Website and apps
01 / BRAND CORE

The Aether light trail

The orbit suggests openness and connection; the central beam suggests one-tap access. The mark stays recognizable from a 16px favicon to large brand artwork.

AetherVPN markAetherVPNPRIMARY / DARK
AetherVPN markAetherVPNON LIGHT
AetherVPN app iconAPP ICON / FAVICON

Usage: Leave at least one quarter of the icon's width as clear space. Do not stretch, tilt, or place the unbacked mark directly on a busy background.

02 / COLOR & TYPE

Calm, with a hint of light.

Deep navy carries the brand and high-contrast information. Aether Mint highlights primary actions, while violet and sky blue add supporting light.

Midnight#081331 · Primary background
Ink#132444 · Primary text
Aether Mint#70E7D4 · Primary action
Sky#83BEFF · Supporting light
Violet#C3A8FF · Supporting light
Cloud#F7F9FC · Page background
DISPLAY / 72–126

Room to explore.

Bold weight and tight tracking create a clear focal point.

BODY / 16–18

From everyday browsing to fresh inspiration, one simple connection opens up more of the digital world.

Body text uses DM Sans / Noto Sans SC with a line height of 1.65–1.9.

03 / COMPONENTS

Components and states

Primary actions keep a clear visual priority. Information cards share a consistent radius, spacing, and border system.

BUTTONS / DEFAULT

Minimum tap target: 44px. Primary button height: 56px. Focus uses a 3px mint outline.

CARDS / INFORMATION
01 / EFFORTLESS

One tap to go

Give time back to you with a simpler connection.

Learn more ↗
STATUS / CONNECTION
Connected Connecting Disconnected

Status always includes text and never relies on color alone.

LAYOUT / RESPONSIVE
≥ 120012 columns / 1240px container
821–1199Tablet layout / Flexible columns
≤ 820Vertical layout / Mobile navigation
≤ 600Mobile cards / Two-column platform grid
DESIGNED TO MOVE WITH YOU

Bring it all together.

View website design ↗