v2.0.0 · standalone HTML

UI-kit i-free 2026

Готовый набор компонентов на чистом HTML+CSS — без React, без Tailwind, без сборщиков. Открывается двойным кликом, копируется в любой проект. Источник дизайна: ifree-site/src/app/globals.css.

Начать с токенов Блоки для импорта →

scroll↓

Палитра и токены

#tokens

Base / Night

--bg-deep

#0B1026

--bg-night

#111B3A

--bg-twilight

#1A2550

Dawn (теплая ось)

--dawn-pink

#F2A7B3

--dawn-peach

#F5C6AA

--dawn-blush

#E8899A

--dawn-coral

#F07B8A

Aurora (холодная ось)

--aurora-mint

#A8E6CF

--aurora-teal

#7EC8C8

--aurora-ice

#B4E4F7

--aurora-sky

#89B8D9

Текст и UI

--text-primary

#FFFFFF

--text-secondary

#B8C4D8

--text-muted

#6B7B99

--destructive

#ef4444

Типографика

#typography

--font-hero
clamp(2.5rem, 4vw, 3.75rem)

Hero · Северное сияние

--font-h1
clamp(2rem, 3.5vw, 3rem)

H1 · Заголовок раздела

--font-h2
clamp(1.5rem, 2.5vw, 2rem)

H2 · Подраздел

--font-h3
clamp(1.1rem, 1.5vw, 1.4rem)

H3 · Карточка / блок

body · 1rem / 1.6

Основной текст, предназначен для длинного чтения. Высота строки 1.6, цвет приглушённый --text-secondary для снижения визуального шума.

--font-number
clamp(2rem, 4vw, 3.5rem)

120+

Градиенты-фоны

#gradients

.bg-gradient-hero · .bg-gradient-section · .bg-conversations · .bg-gradient-stats · .bg-gradient-magenta

Текст-градиенты

#text-gradients

.text-gradient-aurora

.text-gradient-dawn

.text-gradient-brand

Кнопки

#buttons

Варианты

Размеры

Hero-варианты (заполняются при ховере)

Бэйджи

#badges

Default Outline ● Aurora ● Dawn ⚠ Destructive

Формы

#forms

Имя

Сообщение

Glass-карточки

#cards

.glow-aurora

Холодное мятно-бирюзовое сияние при наведении.

.glow-dawn

Тёплое розово-персиковое сияние при наведении.

.glow-ice

Ледяное голубое сияние при наведении.

Фичи-карточки

#feature-cards

★

Северное сияние

Aurora glow и звёздное поле создают глубину без тяжёлых иллюстраций.

◆

Рассвет

Тёплая палитра «зари» используется для CTA и эмоциональных акцентов.

◇

Прозрачность

Glassmorphism через backdrop-filter: blur(20px).

Аккордеон / FAQ

#accordion

Чем отличается Dawn от Aurora?

Dawn — тёплая палитра (розовый, персиковый, коралловый), используется для CTA, эмоциональных блоков, акцентов в hero. Aurora — холодная (мята, бирюза, лёд), используется для primary actions, ссылок, статистики.

Можно использовать без Tailwind?

Да. Этот UI-kit написан на чистом CSS, без зависимостей. Скопируйте секцию :root и нужные классы в свой проект.

Поддерживается prefers-reduced-motion?

Да. Все анимации (aurora float, twinkle, hero stagger) уважают системную настройку prefers-reduced-motion: reduce.

Full Hero

#full-hero

Релиз 14.05.2026

Технологии, которые меняют утро

Pre-seed инвестиции в AI, мобильные сервисы и контент. Превращаем идеи в продукты с миллионной аудиторией.

Подать заявку Посмотреть кейсы

Page Hero (компактный)

#page-hero

О компании

Венчурная команда с 25-летней историей

Помогаем стартапам пройти путь от прототипа до 100k+ пользователей: капитал, экспертиза, дистрибуция.

Команда Портфель

Stats strip

#stats

25+: лет на рынке
120+: проектов в портфеле
€500M: оценка экзитов
700+: сотрудников группы
13: дочерних компаний

Эффекты

#effects

.aurora-glow (на фоне)

.aurora-glow-subtle

.border-l-brand

«Если задача того стоит — она того стоит, чтобы вложиться в основу.»

.border-l-aurora

«Мы не строим — мы соединяем то, что уже работает.»

Motion и доступность

#motion

.hero-stagger

Этап 1

Появление по очереди

Дочерние элементы появляются с задержкой 0.1, 0.3, 0.5, 0.7s.

CTA

.scroll-indicator

scroll↓

Все анимации отключаются при prefers-reduced-motion: reduce. Звёзды и aurora — упрощаются на мобильных.

Кнопки и бэйджи: состояния

#states

default success warning info destructive aurora dawn outline

Чипы · Kbd

#chips

AI Fintech Seed SaaS

Сохранить: ⌘ S Поиск: Ctrl K Выйти: Esc

Alerts

#alerts

ИнформацияРаунд Pre-seed открыт до конца квартала.

ГотовоЗаявка отправлена. Ответим в течение 3 дней.

ВниманиеДедлайн подачи — через 48 часов.

ОшибкаНе удалось загрузить файл презентации.

Контролы форм

#controls

Стадия проекта

Бюджет раунда

Готов к питчу

Согласен с условиями Подписка на дайджест

Стартап Инвестор Партнёр

Progress · Skeleton · Spinner

#feedback

Прогресс раунда — 68%

Загрузка — 32%

Обработка заявки…

Аватары

#avatars

АК МВ ИИ АК МВ ИИ +5

Tabs · Segmented

#tabs

Краткое описание проекта и трекшна за последний квартал.

MRR, retention, CAC/LTV и динамика по когортам.

Основатели, ключевые роли и эдвайзеры.

Tooltip · Dropdown · Modal

#overlays

Breadcrumb · Pagination

#nav-cmp

Таблица

#table

Компания	Стадия	Чек	Статус
Nanoco	Seed	$1.2M	активен
Gloss AI	Pre-seed	$0.4M	скоринг
Vibechat	Series A	$5.0M	дью-дил
Meteor	Idea	—	отклонён

Separator · Empty state · Toast

#misc

Пока нет проектов

Добавьте первый проект в портфель, чтобы начать отслеживать метрики.

Разделитель:

Контент над и под линией.

Импорт в другие проекты

#blocks

Все блоки этого UI-kit вынесены в отдельный файл с готовыми copy-paste фрагментами:

→ ui-kit-blocks.md

Скопируйте блок «Дизайн-токены» в свой :root или tailwind.config.
Скопируйте утилитные классы (.glass-card, .text-gradient-*, .aurora-glow, .star-field).
Импортируйте нужные блоки — каждый самодостаточный, ссылается только на токены.
Если на Tailwind 4 — токены подключаются через @theme inline (см. globals.css).