Baixar

Airtable design system.

Airtable design system — Híbrido de planilha e banco de dados. Estética colorida e amigável para dados estruturados.

Usar este plugin → Ver no GitHub →

Veja em contexto

Os mesmos design tokens aplicados a diferentes tipos de artefato — um site, um app, um slide, um pôster. Mockups originais retematizados com este sistema, não capturas de tela.

Site
Slides
App
Pôster

Design tokens

56 tokens em conformidade com o contrato de tokens do Open Design — os mesmos valores estruturados de paleta, tipografia, espaçamento e movimento que seu agent lê para tematizar qualquer artefato.

Superfície

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

Texto

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

Borda

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

Destaque

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

Semântico

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

Tipografia

  • --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

Escala tipográfica

  • --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

Espaçamento

  • --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

Raio

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

Elevação

  • --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)

Foco

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

Movimento

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

Layout

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

Sistema de design inspirado no Airtable

Category: Design & Criativo Híbrido de planilha e banco de dados. Estética colorida, amigável e de dados estruturados.

1. Tema visual e atmosfera

O site do Airtable é uma plataforma limpa e adequada para empresas que transmite “simplicidade sofisticada” por meio de uma tela branca com texto azul-marinho profundo (#181d26) e Airtable Blue (#1b61c9) como acento interativo principal. A família tipográfica Haas (variantes display e text) cria um sistema tipográfico de precisão suíça com espaçamento positivo entre letras em todo o site.

Características principais:

  • Tela branca com texto azul-marinho profundo (#181d26)
  • Airtable Blue (#1b61c9) como cor principal de CTA e links
  • Sistema de fonte dupla Haas + Haas Groot Disp
  • Espaçamento positivo entre letras no corpo do texto (0.08px–0.28px)
  • Raio de 12px nos botões, 16px–32px nos cards
  • Sombra multicamada com tom azul: rgba(45,127,249,0.28) 0px 1px 3px
  • Tokens de tema semânticos: nomenclatura de variáveis CSS --theme_*

2. Paleta de cores e papéis

Primário

  • Azul-marinho profundo (#181d26): Texto principal
  • Airtable Blue (#1b61c9): Botões CTA, links
  • Branco (#ffffff): Superfície principal
  • Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Semântico

  • Verde sucesso (#006400): --theme_success-text
  • Texto fraco (rgba(4,14,32,0.69)): --theme_text-weak
  • Secundário ativo (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Neutro

  • Cinza escuro (#333333): Texto secundário
  • Azul médio (#254fad): Variante de azul para links/destaque
  • Borda (#e0e2e6): Bordas de card
  • Superfície clara (#f8fafc): Superfície sutil

Sombras

  • Tom azul (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)
  • Suave (rgba(15,48,106,0.05) 0px 0px 20px)

3. Regras tipográficas

Famílias de fontes

  • Principal: Haas, fallbacks: -apple-system, system-ui, Segoe UI, Roboto
  • Display: Haas Groot Disp, fallback: Haas

Hierarquia

PapelFonteTamanhoPesoAltura de linhaEspaçamento
Display HeroHaas48px4001.15normal
Display NegritoHaas Groot Disp48px9001.50normal
Título de seçãoHaas40px4001.25normal
SubtítuloHaas32px400–5001.15–1.25normal
Título do cardHaas24px4001.20–1.300.12px
DestaqueHaas20px4001.25–1.500.1px
CorpoHaas18px4001.350.18px
Corpo MédioHaas16px5001.300.08–0.16px
BotãoHaas16px5001.25–1.300.08px
LegendaHaas14px400–5001.25–1.350.07–0.28px

4. Estilos de componentes

Botões

  • Azul principal: #1b61c9, texto branco, padding 16px 24px, raio 12px
  • Branco: fundo branco, texto #181d26, raio 12px, borda branca 1px
  • Consentimento de cookies: fundo #1b61c9, raio 2px (afiado)

Cards: 1px solid #e0e2e6, raio 16px–24px

Inputs: Estilo Haas padrão

5. Layout

  • Espaçamento: 1–48px (base 8px)
  • Raio: 2px (pequeno), 12px (botões), 16px (cards), 24px (seções), 32px (grande), 50% (círculos)

6. Profundidade

  • Sistema de sombra multicamada com tom azul
  • Ambiente suave: rgba(15,48,106,0.05) 0px 0px 20px

7. O que fazer e não fazer

Fazer: Usar Airtable Blue para CTAs, Haas com tracking positivo, botões com raio 12px

Não fazer: Omitir o espaçamento positivo entre letras, usar sombras pesadas

8. Comportamento responsivo

Breakpoints: 425–1664px (23 breakpoints)

9. Guia de prompt para Agent

  • Texto: Azul-marinho profundo (#181d26)
  • CTA: Airtable Blue (#1b61c9)
  • Fundo: Branco (#ffffff)
  • Borda: #e0e2e6
Modo
design-system
Cena
design
Superfície
web
ID do manifest
design-system-airtable

Tags

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