Download

Airtable Designsystem.

Airtable Designsystem — Hybrid aus Tabellenkalkulation und Datenbank. Farbenfrohe, freundliche Ästhetik für strukturierte Daten.

Plugin nutzen → Auf GitHub ansehen →

Im Kontext ansehen

Dieselben Design-Tokens, angewendet auf verschiedene Artefaktarten – eine Website, eine App, eine Folie, ein Poster. Originale Mockups, neu mit diesem System gestaltet, keine Screenshots.

Website
Folien
App
Poster

Design-Tokens

56 Tokens, die dem Open Design Token-Vertrag entsprechen – dieselben strukturierten Werte für Palette, Typografie, Abstände und Motion, die dein Agent liest, um jedes Artefakt zu gestalten.

Oberfläche

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

Text

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

Rahmen

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

Akzent

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

Semantisch

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

Typografie

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

Typografie-Skala

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

Abstände

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

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

Elevation

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

Fokus

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

Motion

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

Von Airtable inspiriertes Designsystem

Category: Design & Kreatives Hybrid aus Tabellenkalkulation und Datenbank. Farbenfroh, freundlich, strukturierte Datenästhetik.

1. Visuelles Thema & Atmosphäre

Airtables Website ist eine klare, unternehmensfreundliche Plattform, die durch eine weiße Leinwand mit tiefem Marineblau-Text (#181d26) und Airtable Blue (#1b61c9) als primären interaktiven Akzent „anspruchsvolle Schlichtheit” vermittelt. Die Haas-Schriftfamilie (Display- + Text-Varianten) schafft mit durchgehend positivem Buchstabenabstand ein typografisches System in Schweizer Präzisionsmanier.

Hauptmerkmale:

  • Weiße Leinwand mit tiefem Marineblau-Text (#181d26)
  • Airtable Blue (#1b61c9) als primäre CTA- und Link-Farbe
  • Duales Schriftsystem Haas + Haas Groot Disp
  • Positiver Buchstabenabstand im Fließtext (0.08px–0.28px)
  • Buttons mit 12px Radius, Karten 16px–32px
  • Blaugetöntes Mehrschicht-Schatten: rgba(45,127,249,0.28) 0px 1px 3px
  • Semantische Theme-Tokens: --theme_* CSS-Variablennamensgebung

2. Farbpalette & Rollen

Primär

  • Tiefes Marineblau (#181d26): Primärer Text
  • Airtable Blue (#1b61c9): CTA-Buttons, Links
  • Weiß (#ffffff): Primäre Oberfläche
  • Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Semantisch

  • Erfolgsgrün (#006400): --theme_success-text
  • Schwacher Text (rgba(4,14,32,0.69)): --theme_text-weak
  • Sekundär Aktiv (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Neutral

  • Dunkelgrau (#333333): Sekundärer Text
  • Mittelblau (#254fad): Link-/Akzentblau-Variante
  • Rahmen (#e0e2e6): Kartenrahmen
  • Helle Oberfläche (#f8fafc): Subtile Oberfläche

Schatten

  • Blaugetönt (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)
  • Weich (rgba(15,48,106,0.05) 0px 0px 20px)

3. Typografieregeln

Schriftfamilien

  • Primär: Haas, Fallbacks: -apple-system, system-ui, Segoe UI, Roboto
  • Display: Haas Groot Disp, Fallback: Haas

Hierarchie

RolleSchriftGrößeStärkeZeilenhöheBuchstabenabstand
Display HeroHaas48px4001.15normal
Display FettHaas Groot Disp48px9001.50normal
AbschnittsüberschriftHaas40px4001.25normal
UnterüberschriftHaas32px400–5001.15–1.25normal
KartentitelHaas24px4001.20–1.300.12px
FeatureHaas20px4001.25–1.500.1px
FließtextHaas18px4001.350.18px
Fließtext MediumHaas16px5001.300.08–0.16px
ButtonHaas16px5001.25–1.300.08px
BildunterschriftHaas14px400–5001.25–1.350.07–0.28px

4. Komponenten-Styling

Buttons

  • Primär Blau: #1b61c9, weißer Text, 16px 24px Innenabstand, 12px Radius
  • Weiß: weißer Hintergrund, #181d26-Text, 12px Radius, 1px weißer Rahmen
  • Cookie-Zustimmung: #1b61c9-Hintergrund, 2px Radius (scharf)

Karten: 1px solid #e0e2e6, 16px–24px Radius

Eingabefelder: Standard-Haas-Styling

5. Layout

  • Abstände: 1–48px (8px Basis)
  • Radius: 2px (klein), 12px (Buttons), 16px (Karten), 24px (Abschnitte), 32px (groß), 50% (Kreise)

6. Tiefe

  • Blaugetöntes Mehrschicht-Schatten-System
  • Weicher Umgebungsschatten: rgba(15,48,106,0.05) 0px 0px 20px

7. Empfehlungen und Verbote

Empfohlen: Airtable Blue für CTAs verwenden, Haas mit positivem Tracking, 12px-Radius-Buttons

Verboten: Positiven Buchstabenabstand weglassen, schwere Schatten verwenden

8. Responsives Verhalten

Breakpoints: 425–1664px (23 Breakpoints)

9. Agent-Prompt-Leitfaden

  • Text: Tiefes Marineblau (#181d26)
  • CTA: Airtable Blue (#1b61c9)
  • Hintergrund: Weiß (#ffffff)
  • Rahmen: #e0e2e6
Modus
design-system
Szene
design
Oberfläche
web
Manifest-ID
design-system-airtable

Tags

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