MAGIC
Design System

01 · Принципы

Ясно. Живо. Системно.

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

02 · Цвет

ink#1A1A1A

cream#F4DFBF

paper#F4F2EC

mint#E7ECE5

pink#F7DFF2

lilac#CBC4D1

yellow#FFE34D

orange#FF8C00

03 · Типографика

Display · Fraunces Regular

От идеи к системе.

Title · Fraunces Regular

AI-трансформация бизнеса

Body · DM Mono Regular

MAGIC собирает контекст компании и превращает его в работающие AI-системы с измеримым эффектом.

Meta · DM Mono · CAPS · 12% tracking

04 · Действия

Основное действие →Вторичное действие →Компактное →

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

05 · Карточки

01 / контекст

Мозг компании

Мягкая рамка, радиус 16 px, много воздуха.

02 / система

AI-архитектура

Цвет маркирует тип информации, а не украшает.

03 / действие

Приоритет

Жёлтый и оранжевый используются точечно.

06 · Движение

AmbientМедленное живое движение бренда

FunctionalПоток данных объясняет логику схем

→

ResponseБыстрый ответ на действие пользователя

Три скорости: 180–300 мс для отклика, 700–900 мс для появления контента, 4–14 секунд для фонового движения. Анимация всегда объясняет состояние или направление.

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

Один ритм на любом экране.

Десктоп строится на 12 колонках и максимальной ширине 1280 px. Планшет переводит сложные блоки в одну колонку. На мобильном минимальное поле — 12 px, кнопки становятся полноширинными, таблицы получают безопасный горизонтальный скролл. Анимация отключается системной настройкой reduced motion.

MAGICDesign System