Design system

MINSK tokens & primitives

One accent over a cool neutral ramp, Geist for everything, an 8pt grid, and two radii. Every value below is sampled from the reference set in reference/ui/ — the Gradient Blind hero (accent), the Nexus signal landing (neutrals), and the Agentic cards (radii). Dark is the primary mode; use the toggle in the nav to review light.

01 — Colour

One accent, nine neutrals

Electric blue is the only brand colour on the site. Neutrals carry a slight blue cast so dark surfaces feel engineered, not flat grey. Red exists solely as a form-error semantic.

  • bg

    #030407 · #F7F9FA

    Page background

  • surface

    #0A0C12 · #FFFFFF

    Cards, inputs, panels

  • surface-2

    #12151D · #EDF1F4

    Nested fills, hovers, icon chips

  • border

    #171C26 · #DCE2E8

    Default hairlines

  • border-strong

    #252C3A · #C3CCD6

    Emphasised borders, secondary buttons

  • fg

    #EDF1F7 · #0C1118

    Headings, primary text

  • fg-muted

    #98A2B3 · #525E6E

    Body copy, nav links

  • fg-faint

    #7C8698 · #6B7684

    Placeholders, footnotes

  • accent

    #2563EB · #2563EB

    The accent. Primary actions, focus rings

  • accent-strong

    #1D4ED8 · #1D4ED8

    Primary hover / active

  • accent-deep

    #1E3A8A · #1E3A8A

    Hero gradient stop only

  • accent-text

    #60A5FA · #1D4ED8

    Accent-coloured text and icons (AA-safe)

  • danger

    #F97066 · #B42318

    Form errors only — never decorative

Verified contrast (WCAG 2.1)

PairDarkLightGrade
fg / bg18.1:117.9:1AAA
fg-muted / bg8.0:16.2:1AAA / AA+
fg-faint / surface5.3:14.6:1AA
accent-text / bg8.1:16.4:1AAA / AA+
on-accent / accent5.2:15.2:1AA
on-accent / accent-strong6.7:16.7:1AA+
danger / surface7.0:16.6:1AA+

02 — Typography

Geist Sans + Geist Mono

One family carries the site; mono is reserved for eyebrows, metadata, and figures. Headings are tight and confident, body sits at a comfortable 62–68ch measure.

  • Display60px · 1.05 · -0.025em · 600 · accent full stops

    Every carrier. One contract.

  • Heading 148px · 1.1 · -0.02em · 600

    Telecom procurement without the vendor maze

  • Heading 236px · 1.15 · -0.015em · 600

    Solutions across every carrier

  • Heading 324px · 1.3 · -0.01em · 600

    Vendor-neutral sourcing & carrier selection

  • Body large18px · 1.6 · 400

    We consolidate sourcing, contracts, and SLAs across carriers, so your network runs on the best route — not the loudest vendor.

  • Body16px · 1.6 · 400

    Dedicated internet access, MPLS and SD-WAN, dark fibre, wholesale voice, and managed services — specified, tendered, and governed by one team.

  • Caption14px · 1.5 · 400

    Backed by a 99.995% uptime SLA and 24/7/365 support.

  • Mono label12px · 0.14em tracking · uppercase · Geist Mono

    LDI · A–Z Termination · SIP Trunking

03 — Spacing

The 8pt grid

Every padding, margin, and gap snaps to this scale (4px exists for icon-level nudges). Sections breathe at 96–128px on desktop; cards keep 24px internal padding.

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
  • 128

04 — Radius & elevation

Two radii, borders over shadows

Controls sit at 10px, card faces at 16px, actions are full pills. Elevation is expressed with hairline borders and surface steps — shadows barely read on dark UI, so we don't lean on them.

control · 10px
card · 16px
pill · actions
border — default hairline
border-strong — emphasis and hover
surface-2 — nested fill instead of shadow

05 — Buttons

Primary, secondary, ghost

Pills, per the reference set. Primary is the only filled-accent element on any given screen; secondary is a neutral outline; ghost is for tertiary actions. Focus is a 2px accent outline — keyboard-visible on every variant.

06 — Inputs

Quote-form controls

Fields inherit the control radius, focus with the accent ring, and reserve red strictly for errors. Labels stay outside the field — no floating-label tricks.

Enter a work email address.

07 — Cards

The solution card

Agentic-style: quiet surface, hairline border, 16px radius, a Lucide icon in a surface-2 chip. Hover lifts 2px and firms the border — no glow, no colour flood.

Connectivity & Infrastructure

DIA, MPLS and SD-WAN, dark fibre, IP transit, and colocation — sourced across carriers with CIR-backed SLAs.

Explore

Voice & Wholesale

LDI and wholesale minutes, A–Z termination, SIP trunking, and interconnect with least-cost routing oversight.

Explore

Procurement & Commercial

RFQ and tender management, rate-deck analysis, contract negotiation, and ongoing SLA governance.

Explore

08 — Iconography

Lucide, 1.5px stroke

One line-icon family across the whole site. 20–24px in cards and nav, 1.5px stroke; 2px stroke only inside buttons where the weight has to match the label.

09 — Signature

The radio-static language

Telecom is signal out of noise — the one texture MINSK owns. A fine-grain grid of tiny monospace glyphs: a slow interference wave underneath, fast per-cell flicker on top, drawn on canvas in a single colour at ~20fps so it reads as broadcast static. It appears in three arrangements and nowhere else: the free noise field behind the hero, wifi-icon arc bands pulsing outward on the CTA section, and the rotating glyph globe in Why MINSK. All pause off-screen and render still frames under prefers-reduced-motion.

field — homepage hero
wifi pulse — CTA section
globe — why MINSK