Brandbook · Mirage Design System

Logo · Primary · On dark · On accent

Mirageprimary · amber on bg

Miragemono · on surface

Mirageon accent

Icons · currentColor · 1.8 stroke · rounded caps · 24 viewBox

Brand motif · ASCII mesh · L1 → L2 → Internet

┌──────┐ ┌────────┐ ┌────────┐ ┌──────────┐ │ ВЫ │━━━▶│ L1 MSK │━━━▶│ L2 AMS │━━━▶│ INTERNET │ └──────┘ └────────┘ └────────┘ └──────────┘ relay exit / obfs4 wireguard

Surface ladder · 5 steps · dark-only

bg-0#08090B

bg#0E0E11

surface#14151A

raised#1C1D23

hover#23252C

Text · Four levels + on-amber

fg-0Aa — Mirage

fg-1Aa — Mirage

fg-2Aa — Mirage

fg-3Aa — Mirage

on-accentAa — 1A1400

Accent · Layer-coded · Status

accent#FBB26A

accent-dim12% α

L1 blue#6DB8F5

L1 dim15% α

ok#5CB87A

warn#E8A838

error#EB5757

on-darkamber only

Display · Space Grotesk 500 · tight -0.02em

Mirage / Relay

font-display · clamp(40–72px) · letter-spacing −0.02em · line-height 1.05

UI type · PT Root UI · dev-tool density

h2 / 24Выберите провайдеров L1 и L2 h3 / 19Двухузловая маршрутизация body / 15Мы разворачиваем конфигурацию WireGuard с обфускацией трафика. small / 13Нестабильный статус — проверяйте IP перед использованием.

Eyebrow labels · Mono · 11/10px · 0.1em tracking

01 · Infrastructure L1 RELAY · MOSCOW ● ONLINE UNSTABLE v0.2.0 [14:02:17] handshake ok 185.x.x.x →

Mono · JetBrains · tabular-nums · data-first

latency18msp50 · 24h

uptime99.98%30d

throughput842Mbpspeak 1.2G

nodes2/2L1 · L2

Buttons · primary amber · outline · ghost · mono variant

Badges · Layer · Status · Payment

L1 RELAY L2 EXIT ONLINE UNSTABLE OFFLINE Рубли · Мир · USDT Двухузловая маршрутизация

Log row · timestamps · colour-coded tags

[14:02:17.182] OK handshake l1-msk-01 → l2-ams-03 rtt=18ms

[14:02:17.201] OK wireguard peer established 184.82.x.x:51820

[14:02:17.409] WARN obfs4 bridge latency p95=142ms (target <120)

[14:02:18.003] OK tunnel up mirage0 mtu=1420 keepalive=25s

[14:02:19.551] OK dns via l2 1.1.1.1 dot verified

Provider card · L1 relay · tags + price chip + layer badge

Selectel от 300 ₽/мес

Крупнейший независимый российский облачный провайдер. Партнёр ViPNet Coordinator — IP в белых списках ТСПУ.

МоскваСПбЛенобласть

Spacing · Radii · Shadows

Space

4

8

16

24

40

64

96

Radius

4 xs

6 sm

8 md

12 lg

pill

Shadow

card

glow

overlay

Perforated dots · 8 variants · CSS only · radial-gradient

01 · mirage default

#0B0B0E · 18px · α16

02 · amber warm

#08090B · amber · glow

03 · L1 blue

#0A0E14 · blue · glow

04 · phantom violet

#0D0A14 · 28px · vignette

05 · echo mint

#0A1210 · 18px

06 · red tight

#110A0A · 12px · glow

07 · paper inverse

#F4F4F2 · 18px

08 · sparse

#0B0B0E · 36px

body {
  background-color: #0B0B0E;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.4px);
  background-size: 18px 18px;
}

Брендбук