BIG FISH DIGITAL / Дизайн / UI kit

Системный.
Живой. Точный.

UI kit собран по фактическим стилям bfd.su: три системных шрифтовых стека, редакционная типографика, плоская геометрия без скруглений, фирменный красный акцент и крупные ритмические интервалы.

Токены Источник

01 / Цветовая система

Тёплая бумага.Чёткий акцент.

Основной интерфейс строится на приглушённых тёплых поверхностях, почти чёрном тексте и одном красном акценте. Тени используются редко; структура задаётся линиями и сменой фоновых плоскостей.

Paper#E9E9DE

Soft panel#F1F0E6

Field#F3F3EB

Promo#F0EFE7

Services#DEDED0

FAQ#EEEEE5

Partner#E0E4DC

Footer#D7D8C9

Ink#151716

Olive ink#313B33

Muted#585D52

Big Fish red#C9231B

02 / Типографика

Helvetica задаёт голос.Georgia добавляет характер.

Загружаемых веб-шрифтов нет. Основа — системные Helvetica и Arial; Georgia применяется курсивом в редакционных акцентах. Это делает систему быстрой и предсказуемой.

Primary sans

Helvetica

Helvetica, Arial, sans-serif
400 / 500 / 600

UI sans

Arial

Arial, Helvetica, sans-serif
400 / 700

Editorial serif

Georgia Italic

Georgia, Times New Roman, serif
400 italic

Display / 0.98 / −5.5%

Большая
история.

H1 / 1.02 / −5.5%

Веб-студия.

H2 / 1.07 / −5.5%

Разные истории.

Lead / 1.13 / −3.5%

Создаём сайты,
цифровые сервисы.

Body / 1.60

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

Caption / 1.65 / −1.2%

У каждого проекта — свой путь к клиенту. Дизайн и функциональность складываются вокруг задач бизнеса.

BIG FISH DIGITAL / SECTION LABEL

Стиль	Размер desktop	Размер mobile	Вес	Интерлиньяж	Трекинг
Hero display	`clamp(44, 7.5vw, 116)`	`14vw / 42px line`	400	0.98	−0.055em
H1	`clamp(50, 6.4vw, 100)`	`clamp(43, 9.5vw, 70)`	500–600	1.02	−0.055em
H2	`clamp(37, 3.14vw, 48)`	`37–48px`	500	1.07	−0.055em
H3 service	`clamp(33, 2.7vw, 41)`	`clamp(32, 8.2vw, 42)`	500	1.11	−0.045em
H3 process	`clamp(29, 2.45vw, 38)`	`clamp(28, 7.4vw, 36)`	500	1.12	−0.045em
Lead	`clamp(26, 3.05vw, 48)`	`clamp(25, 5.8vw, 38)`	400	1.13	−0.035em
Body	16px	16px	400	1.60	normal
Caption	14–16px	14px	400	1.65	−0.012em
Control	14–16px	14–16px	400–600	1.50	normal
Kicker	10–11px	9–10px	500	1.40–1.55	+0.13–0.14em

03 / Ритм и интервалы

Плотные детали.Воздух между главами.

Локальные интервалы компактны, а крупные секции разнесены на 110 px. На планшете ритм сжимается до 84 px, на мобильном — до 60 px.

Базовая шкала

space-14 px

space-28 px

space-412 px

space-516 px

space-620 px

space-724 px

space-828 px

space-932 px

space-1140 px

space-1348 px

space-1560 px

space-1664 px

space-2084 px

space-24110 px

Полная наблюдаемая шкала

4 · 8 · 10 · 12 · 16 · 18 · 20 · 22 · 24 · 28 · 30 · 32 · 36 · 40 · 44 · 48 · 52 · 60 · 64 · 68 · 75 · 78 · 84 · 96 · 100 · 105 · 110 · 115 px

Внутри поля	`11 × 12`
Между полями	`16`
Кнопка	`16 × 20/24`
Карточка	`28 × 32`
Заголовок → текст	`20–32`
Шапка → секция	`48–60`
Секция desktop	`110`
Секция tablet	`84`
Секция mobile	`60`

Desktop container89%по 5.5% с каждой стороны

Header64 / 60desktop / mobile, px

Corner radius0 pxосновной принцип системы

04 / Кнопки и ссылки

Контрастная геометрия.Красный на действии.

Все компоненты прямоугольные. Чёрная primary-кнопка становится красной на hover; красная submit-кнопка — чёрной. Фокус всегда отмечается красным контуром 2 px.

Primary / dark

min 48 · padding 16×24 · hover red · focus 2px red

Primary / red

height 58 · padding 16×20 · weight 600 · hover ink

Outline & text

Всё портфолио

transparent · 1px line · underline for editorial links

Icon controls

44×44 · gallery 60×60 · mobile 40×40 · radius 0

Tabs / segmented

height 45 · selected #23352B · hover border red

States

Default

Hover

Disabled

transition 180–200ms ease · disabled opacity 0.6

05 / Формы

Нейтральная основа.Явная ошибка.

Поля высотой 46 px на слегка светлой поверхности. Focus и invalid используют красную границу. На мобильном размер текста увеличивается до 16 px, чтобы избежать автозума.

06 / Компоненты

Линии вместо теней.Контент вместо декора.

Карточки, аккордеоны и табы держатся на смене плоскостей, тонких разделителях и типографической иерархии.

Service card

01 / BIG FISH

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

Корпоративный сайт, интернет-магазин, каталог или сервис.

Accordion

Сколько стоит разработка сайта?

Стоимость зависит от типа и сложности проекта. Оценка строится после определения архитектуры и функциональности.

Какие сайты вы разрабатываете?

Корпоративные сайты, магазины, каталоги, порталы, кабинеты и web-сервисы.

Что входит в разработку?

Аналитика, UX/UI, разработка, интеграции, тестирование и запуск.

Tabs

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

Editorial list

01Разбираемся. Проектируем.

Собираем структуру, сценарии и прототип.

02Создаём. Проверяем.

Разрабатываем дизайн, адаптивы и интеграции.

03Запускаем. Развиваем.

Тестируем, передаём и развиваем продукт.

07 / Адаптивность

Четыре контрольные точки.Один ритм.

Компоненты переключаются в мобильный режим до 767 px, крупные заголовочные блоки — до 900 px, секционные интервалы — до 1000 px, навигация — до 1100 px.

320 767 900 1000 1100 1280+

≤ 767

Mobile

1 column · 60px sections · 5% inset · 40px icons

≤ 900

Compact

headers reflow · blocks stack · 36px local gap

≤ 1000

Tablet

84px sections · reduced grids

≤ 1100

Navigation

menu + phone · 60px header

08 / Готовые токены

Из макета —в продукт.

Токены подготовлены в CSS и JSON. Ниже — минимальный набор для старта; полные файлы можно открыть или скачать.

CSS-токены JSON-токены

bfd-tokens.css

:root {
  --bfd-font-sans: Helvetica, Arial, sans-serif;
  --bfd-font-serif: Georgia, "Times New Roman", serif;
  --bfd-paper: #e9e9de;
  --bfd-ink: #151716;
  --bfd-red: #c9231b;
  --bfd-line: rgba(21, 23, 22, .19);
  --bfd-section-gap: 110px;
  --bfd-page-inline: 5.5%;
  --bfd-radius: 0;
}

Usage

<link rel="stylesheet" href="/assets/bfd-ui-kit-v1/bfd-tokens.css">

<button class="bfd-btn">
  Обсудить проект <svg aria-hidden="true">…</svg>
</button>

<label>
  <span class="bfd-label">Ваше имя *</span>
  <input class="bfd-field" placeholder="Имя">
</label>

Системный.Живой. Точный.