Design system · v0.1

VerAna
Portfolio System

Anastasiia Veresova
Reconstructed from Figma
May 2026
01

Brand essence

Logomark
/assets/logo.svg
Voice

Чёткая, точная, без воды. Русский UI-копирайт. Никогда не «жмите кнопку» — всегда «Перейти на сайт», «Ознакомиться с проектом».

Signature gesture
Portfolio.
Display 150 / Benzin Semibold
02

Color tokens

Ink
--ink#171719
Ink 2
--ink-2#26262A
Signal Red
--red#D03438
Red Deep
--red-deep#A8262A
Paper White
--white#FFFFFF
Paper 2
--paper-2#EDEDED
Paper
--paper#D6D6D6
Muted
--muted#404040
Изменение: добавлен --red-deep для hover-состояний и --ink-2 для разделителей внутри тёмных поверхностей — в исходнике использовался один тон для всех состояний.
03

Typography

Display XLBenzin Semibold · 150 / 1.0 · +3% letter
Portfolio
Display LBenzin Semibold · 100 / 1.1
Связаться
Display MBenzin Semibold · 64 / 1.1 (new)
Section title
H1 / ProjectUbuntu Bold · 36 / 1.4
Lead4You
H2 / Role labelUbuntu Bold · 24 / 1.4
Роль в проекте:
Body LUbuntu Regular · 24 / 1.4
Сервис лидогенерации для бизнеса, помогает работать с тёплой аудиторией.
Nav / TagBenzin Regular · 20 / 1
Telegram  ·  LinkedIn  ·  Behance  ·  E-mail me
UI / CaptionBenzin Regular · 16 / 1 (new)
Ознакомиться с проектом
Заменитель шрифта: в браузере используется Space Grotesk как fallback для Benzin (геометрический гротеск с похожими пропорциями). При продакшн-сборке нужно подключить лицензированный Benzin (Regular / Semibold).
04

Spacing & radius

Spacing scale
4 · gap-xs · tags
8 · gap-s
12 · gap-m · grid & outer
20 · gap-l · text stacks
32 · gap-xl · card padding
72 · section gap
Radii
24--r-card-s
32--r-card
pill--r-pill
05

Components

Component / Pill nav · contact bar
Telegram LinkedIn E-mail me Behance
Изменение: опечатка "Telergram" в исходнике исправлена на "Telegram".
Component / CTA button · primary & secondary
Component / Tag pill
Web UX/UI Landing SaaS B2B
Component / Case card · 1213 + 671 split
WebUX/UI

Lead4You

Сервис лидогенерации для бизнеса, который помогает получать целевые заявки и работать с тёплой аудиторией.

Роль в проекте:

Был разработан дизайн сайта с нуля: структура лендинга, визуальная подача услуги, CTA-блоки, тарифы, формы заявки.

06

Motion principles (new)

01 · Reveal

Заголовки появляются по словам, со смещением 40px и blur(8px) → 0. Стаггер 60ms.

cubic-bezier(.2,.8,.2,1) · 700ms
02 · Marquee

Тёмная nav-таблетка превращается в бесконечную ленту контактов. Скорость 60s/loop, реверс на hover.

linear · infinite
03 · Magnetic

CTA-кнопки реагируют на курсор: 0.25× смещения, тень растёт. Стрелка внутри сдвигается на 4px.

spring · 200ms
04 · Hero glitch

Слово «Portfolio» рендерится в 3 слоя со сдвигом каналов R/G/B на 2px. Прокрутка усиливает сдвиг.

05 · Scroll parallax

Изображения кейсов сдвигаются на 8% медленнее скролла. Tags — на 12% быстрее.

06 · Hover tilt

Карточки кейсов наклоняются на ±4° по перспективе 1200px от позиции курсора.