Core Tokens
Базовые атомы: цвета (HEX, RGBA), типографика (размеры, веса), отступы и радиусы. Это фундамент, который никогда не меняется.
Архитектура системы
Дизайн-токены и архитектура Glypha
Система дизайна, которая дышит цветом. Превратите визуальный язык в код и управляйте вашим продуктом с точностью до пикселя.
Основы
Что такое дизайн-токены?
Дизайн-токены — это абстракции ваших дизайн-решений. Вместо того чтобы писать жестко заданные цвета или размеры, мы храним их как переменные.
В Glypha мы разделяем визуальные атрибуты на семантические единицы. Например, вместо использования кода `#8A2BE2` мы используем токен `color-primary`. Это позволяет менять цвет бренда во всем приложении, редактируя всего один файл конфигурации.
Система поддерживает автоматическую генерацию кода для React, Vue и Angular, сохраняя строгую типизацию и доступность.
Структура
Три уровня иерархии
Мы следуем принципам атомного дизайна, чтобы обеспечить гибкость на каждом этапе создания интерфейса.
Semantic Tokens
Высокоуровневые значения. Например, `color-background-error` или `spacing-component-gap`. Они описывают, зачем используется элемент.
Component Tokens
Специфические настройки для конкретных элементов. Размеры кнопок, состояния ховера и фокуса, комбинации отступов в карточках.
Редактор токенов
Визуальная настройка структуры без написания кода.
Наши разработчики могут быстро переключаться между вкладками "Core", "Semantic" и "Component", чтобы понять, как изменения в одном слое влияют на другой. Все изменения синхронизируются в реальном времени.
Гибкость
Кастомизация тем
Создание интерфейсов для разных аудиторий или брендов больше не требует копирования всей файловой структуры. Glypha использует наследование токенов.
Вы можете создать тему "Dark Mode" или "Cyberpunk", которая наследует базовые цвета (Core), но переопределяет уровни яркости и акценты (Semantic). Это позволяет нам поддерживать 5+ актуальных тем с минимальными усилиями.
- Генерация тем на лету
- Сохранение настроек пользователя
Пример конфигурации
// Базовая тема $primary: #8A2BE2; $bg-body: #F8F9FE; // Тема "Neon" (наследует всё) $primary: #00D4FF; $bg-body: #0A0A0A;
Интеграция
Экспорт токенов в разные форматы
Мы понимаем, что разработчики работают в разных экосистемах. Glypha поддерживает экспорт токенов в любые форматы.
JSON & YAML
Идеально для фронтенд-библиотек. Получите чистую структуру данных для использования в веб-приложениях и мобильных клиентах.
CSS Variables
Мгновенная интеграция в существующие проекты. Просто подключите сгенерированный файл стилей и начните использовать переменные.
Figma & Sketch
Полная синхронизация с инструментами для дизайнеров. Ваши изменения в Glypha мгновенно появляются в макетах в Figma.
Управляйте дизайном на уровне кода
Подключитесь к Glypha и получите доступ к полной системе токенов и инструментам для кастомизации тем.