Structure Core / v 1.4.2

Фундамент
интерфейса

Детальная конфигурация системных сеток, математических отступов и базовой типографики. Строгая дисциплина для создания вечных интерфейсов.

Скачать демо-файл Посмотреть спецификацию

Визуализация модульной сетки и типографической шкалы

Философия модульной сетки

Хаос устраняется не хаотичными усилиями, а введением жесткого порядка. Модульная сетка — это скелет, на котором держится доверие пользователя.

В Modkit мы отказались от фиксированных колонок в пользу «дышащего» потока (Fluid Grid). Наша система использует CSS `clamp()` и относительные единицы измерения, чтобы контент всегда занимал идеальное положение, будь то экран смартфона iPhone SE или широкоформатный монитор 4K. Мы не просто выравниваем элементы — мы создаем визуальную иерархию, которая направляет взгляд пользователя к самому важному.

Математика пространства

Система отступов 8px, 4px и 2px.

Мы используем модульную шкалу, основанную на степени двойки. Это обеспечивает предсказуемость и ритм.

8px: Базовый модуль. Используется для микро-отступов внутри кнопок и иконок.
16px (2x): Стандартный отступ между связанными элементами (лейбл и инпут).
32px (4x): Разделение логических блоков контента.
64px+ (8x): Глобальные секции и «воздух» для сложных интерфейсов.

Схема распределения

Visual Rhythm

Типографические шкалы

Cormorant Garamond

Элегантная антиква для заголовков. Используется для создания контраста и ощущения премиальности. Начертания: Light, Regular, Italic.

Aa Bb Cc

Manrope

Современный гротеск для основного текста и интерфейса. Максимальная читаемость на любых экранах. Начертания: 300–500.

Aa Bb Cc

Шкала модулей

Мы используем коэффициент 1.25 (Майорская секунда) для расчета размеров шрифтов, обеспечивая плавный переход от подписей к заголовкам.

14px — Caption

16px — Body

20px — Subhead

25px — H4

Интеграция в дизайн-систему

Полная совместимость с Figma и Sketch.

Structure Core поставляется не просто как набор изображений, а как готовая к использованию библиотека компонентов.

Figma Variables

Используйте локальные и глобальные переменные для мгновенной смены тем. Сетки привязаны к Auto Layout.

Sketch Libraries

Поддержка символов и символьных оверлеев. Автоматическая синхронизация стилей текста и цветов.

// system.config.json

{
  "spacing": {
    "base": 8,
    "scale": "powers_of_2"
  },
  "typography": {
    "serif": "Cormorant Garamond",
    "sans": "Manrope",
    "ratio": 1.25
  },
  "grid": {
    "type": "fluid",
    "columns": 12,
    "gutter": "24px"
  }
}

Начните со структуры

Скачайте демо-файл Structure Core и проверьте, как математическая точность меняет восприятие вашего дизайна.

Скачать .fig файл (12MB)

Фундаментинтерфейса