Design System

NZT Business Lab

The shared visual language — the dala void aesthetic, rebranded for NZT. Every token below is read live from the loaded CSS: edit any value to preview it instantly across the components on this page, then export your overrides. Scroll to watch the particle field morph through all six shapes.

Foundations

Color

The void palette from danifo.ru/dala plus status hues. Click a name to copy var(--token); edit a value to preview.

Foundations

Typography

Unbounded (display) + PT Sans (body), with the fluid type scale, weights, line-heights and tracking.

Display hero
Display large
Display small

Lede — a calm intro line set in PT Sans on ash.

Body copy — the default paragraph voice on the void.

Muted / secondary text.

Foundations

Spacing

6px base ramp used for gaps, padding and rhythm.

Foundations

Radius

Foundations

Elevation

On the void, depth = hairlines + blur + glass fills. A couple of soft shadows exist for floating layers.

Foundations

Motion

Foundations

Layout

Foundations

Z-index

Foundations

Other tokens

Any token not matched above lands here — so a newly added --var shows up automatically.

Brand

Logo & wordmark

Wordmark SVG
NZT Business Lab
Spark
CSS wordmark
NZTBusiness Lab
Components

Buttons & links

Components

Service cards — the six

The signature 3-per-row grid: six cards in two rows.

01

Разработка сайтов

Корпоративные сайты, лендинги, магазины — от аналитики до публикации.

02

Поддержка

Хостинг, обновления, бэкапы и мониторинг.

Тарифы
03

SEO-продвижение

Технический аудит, контент, аналитика, рост органики.

04

Веб-приложения

SaaS, кабинеты, интеграции — от MVP до продукта.

05

Автоматизация

CRM, мессенджеры, документооборот, бот-сценарии.

06

AI-трансформация

Внедрение AI в продажи, маркетинг и операции.

Components

Forms & quiz

Спасибо!

Мы свяжемся с вами скоро.

Components

Feedback & status

DefaultNew ActivePending ErrorInfo tag
Heads up
An informational alert with a left accent.
Saved
Your changes were stored.
Something broke
A destructive / error alert.
hover meA tooltip bubble
Nothing here yet

An empty-state placeholder.

Components

Data

128
Leads
▲ 12%
2.4s
Avg load
▼ 0.3s
99.9%
Uptime
ProjectStatusOwner
Agro AnalyticsLiveNZT
AI UnderwriterBetaNZT
Buona FortunaNewNZT
Start
₽0/мес
  • 1 проект
  • Базовая поддержка
Motion

The six-shape particle field

One continuous Three.js field morphs through six shapes as you scroll the whole page: brain → globe → document → gear → network → chart. The last two (network, chart) are NZT additions — the node-link graph and the rising "check-graph". Reduced-motion users get a static snapshot.

04 → 05

network

Hub nodes wired by edges — a knowledge graph.

05 → 06

chart

Axis + six rising bars + trend line.

+

extend

Add a generator in particle-lib.js, wire an index in nzt-particles.js.

Modal dialog

A centered dialog on a blurred backdrop. Click the backdrop or ✕ to close.

Copied