Кнопки
ButtonНажми «Скачать файл», чтобы увидеть загрузку.
Версия 0.4Каталог
Дизайн-система
Fibra
Простые элементы для больших задач.
Общий язык для каждой страницы проекта.
Полный каталог компонентов
13 разделов: элементы, состояния, шаблоны и правила применения.
Спокойная основа
Монохромная палитра. Иерархия через контраст, размер и свободное пространство.
Фон
--color-backgroundПоверхность
--color-surfaceНаведение
--color-surface-hoverРамка
--color-borderВторичный текст
--color-text-secondaryТекст / действие
--color-textПростые инструменты
для больших задач
Один шрифт для заголовков, текста и элементов управления.
Заголовок 32Раздел 24Текст 16Подпись 14
Ритм и форма
Отступы кратны 4 px. Скругления мягкие, без лишнего объёма.
481216243248646 px10 px14 pxХарактер Fibra
Оригинальный логотип и маскот. У героя два настроения — для разных состояний интерфейса.
Белая версия · на тёмном
Чёрная версия · на светломТёмная тема — основная. Светлая подложка здесь показывает вторую версию брендовых ассетов.
Элементы, которые работают вместе
Общие размеры, состояния и поведение. Эти же компоненты используются в примерах страниц.
Поля ввода
FieldПодпись помогает понять, что нужно ввести.
Убери символ / из названия файла.
Выбор и настройки
Switch · SegmentedControlСвязанные размеры меняются вместе.
НейтральныйГотовоОшибка
Обратная связь
Notice · ProgressВыбран локальный файл
Сообщение описывает текущее состояние.
Не удалось открыть файл
Проверь формат и выбери файл ещё раз.
Пример прогресса64%
От элемента к странице
Повторяемые паттерны каталога и рабочей области инструмента.
Downloader
Скачать файлы из интернета
PDF → Word
Конвертировать PDF в Word
Удалить фон
Убрать фон с изображения
Выбор файла
FileDropzoneПеретащи файл сюда
PNG, JPG или WebP · до 10 МБ
Проверка формата и размера работает локально. Файлы не отправляются.
Один каркас, разные задачи
Каталог использует поиск и карточки. Страница инструмента — заголовок, рабочую область, настройки и результат.
На телефоне навигация перемещается вниз, а карточки становятся компактными.
Используй для заметок, исходного текста и описаний.
Система для следующих страниц
Общие компоненты и правила уже находятся в проекте. Codex получает их из AGENTS.md.
Начинай с каркаса
Используй AppShell и PageHeader. Они задают ширину, отступы и навигацию.
Переиспользуй элементы
Импортируй компоненты из @/components/ui. Цвета и размеры бери из tokens.css.
Расширяй общую систему
Новый повторяемый паттерн добавляй в библиотеку и на эту страницу.
Проверяй состояния
Наведение, фокус, загрузка, ошибка, пустой результат и узкий экран — часть компонента.
Пример новой страницыimport { Button, Field, FileDropzone } from "@/components/ui";
import { AppShell } from "@/components/layout/app-shell";
import { PageHeader } from "@/components/layout/page-header";
export default function ToolPage() {
return (
<AppShell active="tool">
<div className="page-container--tool">
<PageHeader title="Название инструмента"
description="Что делает инструмент" />
<FileDropzone />
</div>
</AppShell>
);
}