Живые компоненты RAND: состояния, параметры и готовые стили для копирования.
7 базовых элементов визуальной системы.
Скругление 30, паддинг 40 × 16. Акцентная — основное действие, второстепенная — поддержка.
.rand-button { padding: 16px 40px; border-radius: 30px; font: 500 18px/1 "Golos Text", sans-serif; color: #101010; }
.rand-button--primary { background: #9DEC00; border: 0; }
.rand-button--primary:hover { background: #86C900; }
.rand-button--secondary { background: #F4F4F6; border: 1px solid #E5E7EB; }
.rand-button--secondary:hover { background: #D5D8DD; }
.rand-button:disabled { color: #9AA1AC; }Скругление 16, обводка 1px #E5E7EB. Фокус — рамка в зелёный, ошибка — в красный. Плейсхолдер серый.
.rand-field { display: grid; gap: 8px; }
.rand-field__label { font: 600 15px/1.2 "Golos Text", sans-serif; }
.rand-field__input { padding: 15px 18px; border: 1px solid #E5E7EB; border-radius: 16px; font: 400 17px/1.2 "Golos Text", sans-serif; }
.rand-field__input:focus { border: 2px solid #9DEC00; box-shadow: 0 0 0 3px rgb(157 236 0 / 25%); }
.rand-field--error .rand-field__input { border-color: #E5484D; }Закрытое состояние — поле с нижним шевроном. Открытое меню: радиус 16, мягкая тень, ховер-строка на сером и верхний шеврон.
.rand-dropdown { width: 320px; }
.rand-dropdown__label { display: block; margin-bottom: 8px; color: #101010; font: 600 15px/1.2 "Golos Text", sans-serif; }
.rand-dropdown__control { display: flex; padding: 14px 18px; align-items: center; gap: 12px; align-self: stretch; border: 1px solid #E5E7EB; border-radius: 16px; background: #FFFFFF; }
.rand-dropdown__menu { display: flex; width: 320px; padding: 8px; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid #E5E7EB; border-radius: 16px; background: #FFFFFF; box-shadow: 0 8px 24px rgb(0 0 0 / 8%); }
.rand-dropdown__option { width: 100%; padding: 12px 14px; border-radius: 10px; color: #101010; font: 400 17px/1.2 "Golos Text", sans-serif; }
.rand-dropdown__option:hover { background: #F4F4F6; }Скругление 24, внутренний отступ 24. Базовый фон — белый или спокойный серый, обводка 1px по необходимости.
Белый фон, тонкая обводка. Для контента на сером фоне.
Спокойный серый фон — основа бенто-сетки и секций.
.rand-card { padding: 24px; border-radius: 24px; }
.rand-card--base { background: #FFFFFF; border: 1px solid #E5E7EB; }
.rand-card--muted { background: #F4F4F6; border: 1px solid transparent; }Динамику создаём сочетанием фирменных цветов и разной шириной плашек. Расстояние между карточками — 20 px.
Компании теряют прибыль, не внедрив ERP вовремя.
Настроим единую ERP-систему: продажи, закупки, склад, финансы и сервис.
Начинаем с малого и закрываем процессы за один спринт.
Переходим на свои сервисы прямо сейчас.
.rand-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rand-bento__wide { grid-column: span 2; }
.rand-bento__card { padding: 24px; border-radius: 24px; background: #F4F4F6; }
.rand-bento__card--accent { background: #9DEC00; }
.rand-bento__card--dark { background: #101010; color: #FFFFFF; }Заполнение #9DEC00, дорожка #EAEAF5, высота 6 px и скругление 30 px. Чёрное заполнение используется только внутри акцентной зелёной карточки.
.rand-progress { width: 100%; height: 6px; overflow: hidden; border-radius: 30px; background: #EAEAF5; }
.rand-progress__value { height: 100%; border-radius: 30px; background: #9DEC00; }
.rand-step--active .rand-progress { background: #FFFFFF; }
.rand-step--active .rand-progress__value { background: #101010; }Номер + длительность + заголовок + описание + прогресс этапа. Активный шаг — акцентная плашка.
Разбираем процессы и находим, где теряются деньги.
Описываем сценарии, собираем прототипы и интерфейсы.
Запускаем рабочую версию и показываем эффект.
Поэтапно закрываем процессы автоматизации.
.rand-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rand-step { display: flex; padding: 24px; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; border-radius: 24px; background: #F4F4F6; }
.rand-step--active { background: #9DEC00; }
.rand-step__number { color: #101010; font: 700 14px/normal "Golos Text", sans-serif; }
.rand-step__duration { color: #4A5565; font: 500 13px/normal "Golos Text", sans-serif; }
.rand-step__title { color: #101010; font: 500 20px/1.3 "Golos Text", sans-serif; }
.rand-step__description { color: #4A5565; font: 400 15px/1.35 "Golos Text", sans-serif; }
.rand-step__progress { width: 100%; height: 6px; overflow: hidden; border-radius: 30px; background: #EAEAF5; }
.rand-step__progress-value { height: 100%; border-radius: 30px; background: #9DEC00; }
.rand-step--active .rand-step__progress-value { background: #101010; }