Скачать

Airtable дизайн-система.

Airtable дизайн-система — Гибрид электронных таблиц и базы данных. Яркая, дружелюбная эстетика структурированных данных.

Использовать плагин → Посмотреть на GitHub →

Посмотрите в контексте

Одни и те же дизайн-токены, применённые к разным типам артефактов — сайту, приложению, слайду, постеру. Оригинальные макеты, переоформленные этой системой, а не скриншоты.

Сайт
Слайды
Приложение
Постер

Дизайн-токены

56 токенов, соответствующих контракту токенов Open Design — та же структурированная палитра, шрифты, отступы и значения анимации, которые ваш agent читает, чтобы оформить любой артефакт.

Поверхность

  • --bg #ffffff
  • --surface #ffffff
  • --surface-warm var(--surface)

Текст

  • --fg #181d26
  • --fg-2 #333333
  • --muted rgba(4, 14, 32, 0.69)
  • --meta var(--muted)

Границы

  • --border #e0e2e6
  • --border-soft #eef0f3

Акцент

  • --accent #1b61c9
  • --accent-on #ffffff
  • --accent-hover #254fad
  • --accent-active color-mix(in oklab, var(--accent), black 14%)

Семантика

  • --success #006400
  • --warn #eab308
  • --danger #dc2626

Типографика

  • --font-display "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-body Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace

Шкала шрифтов

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 20px
  • --text-xl 24px
  • --text-2xl 32px
  • --text-3xl 40px
  • --text-4xl 48px
  • --leading-body 1.35
  • --leading-tight 1.2
  • --tracking-display 0

Отступы

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 48px

Скругление

  • --radius-sm 12px
  • --radius-md 16px
  • --radius-lg 24px
  • --radius-pill 9999px

Тени

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0 0 1px rgba(0, 0, 0, 0.32), 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(45, 127, 249, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06)

Фокус

  • --focus-ring 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

Анимация

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

Макет

  • --container-max 1200px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 12px

Дизайн-система, вдохновлённая Airtable

Category: Дизайн и творчество Гибрид таблицы и базы данных. Красочная, дружелюбная эстетика структурированных данных.

1. Визуальная тема и атмосфера

Сайт Airtable — это чистая, ориентированная на корпоративных пользователей платформа, которая передаёт «утончённую простоту» с помощью белого полотна, глубокого тёмно-синего текста (#181d26) и Airtable Blue (#1b61c9) в качестве основного интерактивного акцента. Семейство шрифтов Haas (варианты display и text) создаёт типографическую систему швейцарской точности с положительным межбуквенным интервалом на протяжении всего сайта.

Ключевые характеристики:

  • Белое полотно с глубоким тёмно-синим текстом (#181d26)
  • Airtable Blue (#1b61c9) как основной цвет CTA и ссылок
  • Двойная шрифтовая система Haas + Haas Groot Disp
  • Положительный межбуквенный интервал в основном тексте (0.08px–0.28px)
  • Радиус кнопок 12px, карточек 16px–32px
  • Многослойная тень с синим оттенком: rgba(45,127,249,0.28) 0px 1px 3px
  • Семантические токены темы: именование CSS-переменных --theme_*

2. Цветовая палитра и роли

Основные

  • Глубокий тёмно-синий (#181d26): Основной текст
  • Airtable Blue (#1b61c9): Кнопки CTA, ссылки
  • Белый (#ffffff): Основная поверхность
  • Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Семантические

  • Зелёный успех (#006400): --theme_success-text
  • Слабый текст (rgba(4,14,32,0.69)): --theme_text-weak
  • Вторичный активный (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Нейтральные

  • Тёмно-серый (#333333): Вторичный текст
  • Средний синий (#254fad): Вариант синего для ссылок/акцента
  • Граница (#e0e2e6): Границы карточек
  • Светлая поверхность (#f8fafc): Тонкая поверхность

Тени

  • С синим оттенком (rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset)
  • Мягкая (rgba(15,48,106,0.05) 0px 0px 20px)

3. Правила типографики

Семейства шрифтов

  • Основной: Haas, запасные: -apple-system, system-ui, Segoe UI, Roboto
  • Дисплейный: Haas Groot Disp, запасной: Haas

Иерархия

РольШрифтРазмерНасыщенностьМежстрочныйМежбуквенный
Display HeroHaas48px4001.15normal
Display ЖирныйHaas Groot Disp48px9001.50normal
Заголовок разделаHaas40px4001.25normal
ПодзаголовокHaas32px400–5001.15–1.25normal
Заголовок карточкиHaas24px4001.20–1.300.12px
ФункцияHaas20px4001.25–1.500.1px
Основной текстHaas18px4001.350.18px
Основной MediumHaas16px5001.300.08–0.16px
КнопкаHaas16px5001.25–1.300.08px
ПодписьHaas14px400–5001.25–1.350.07–0.28px

4. Стилизация компонентов

Кнопки

  • Основной синий: #1b61c9, белый текст, отступы 16px 24px, радиус 12px
  • Белый: белый фон, текст #181d26, радиус 12px, граница 1px белая
  • Согласие с cookie: фон #1b61c9, радиус 2px (острый)

Карточки: 1px solid #e0e2e6, радиус 16px–24px

Поля ввода: стандартная стилизация Haas

5. Макет

  • Отступы: 1–48px (база 8px)
  • Радиус: 2px (маленький), 12px (кнопки), 16px (карточки), 24px (секции), 32px (большой), 50% (круги)

6. Глубина

  • Система многослойных теней с синим оттенком
  • Мягкая подсветка: rgba(15,48,106,0.05) 0px 0px 20px

7. Что делать и чего не делать

Делать: использовать Airtable Blue для CTA, Haas с положительным трекингом, кнопки с радиусом 12px

Не делать: пропускать положительный межбуквенный интервал, использовать тяжёлые тени

8. Адаптивное поведение

Контрольные точки: 425–1664px (23 контрольные точки)

9. Руководство по промптам для Agent

  • Текст: Глубокий тёмно-синий (#181d26)
  • CTA: Airtable Blue (#1b61c9)
  • Фон: Белый (#ffffff)
  • Граница: #e0e2e6
Режим
design-system
Сцена
design
Поверхность
web
ID манифеста
design-system-airtable

Теги

  • design-system
  • first-party
  • design
  • design-creative