İndir

Airtable tasarım sistemi.

Airtable tasarım sistemi — Elektronik tablo ve veritabanı karması. Renkli, samimi, yapılandırılmış veri estetiği.

Bu eklentiyi kullan → GitHub’da görüntüle →

Bağlam içinde görün

Aynı tasarım token’ları farklı çıktı türlerine uygulandı — bir web sitesi, bir uygulama, bir slayt, bir poster. Bu sistemle yeniden giydirilmiş özgün mock’lar, ekran görüntüleri değil.

Web sitesi
Slaytlar
Uygulama
Poster

Tasarım token’ları

Open Design token sözleşmesine uyan 56 token — agent’ınızın herhangi bir çıktıyı temalandırmak için okuduğu aynı yapılandırılmış palet, tipografi, boşluk ve hareket değerleri.

Yüzey

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

Metin

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

Kenarlık

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

Vurgu

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

Semantik

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

Tipografi

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

Tipografi ölçeği

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

Boşluk

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

Köşe yarıçapı

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

Yükseklik

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

Odak

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

Hareket

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

Yerleşim

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

Airtable’dan İlham Alan Tasarım Sistemi

Category: Tasarım ve Yaratıcılık Elektronik tablo-veritabanı hibridi. Renkli, dostane, yapılandırılmış veri estetiği.

1. Görsel Tema ve Atmosfer

Airtable’ın web sitesi, beyaz bir tuval üzerinde derin lacivert metin (#181d26) ve birincil etkileşimli vurgu rengi olarak Airtable Blue (#1b61c9) ile “sofistike sadelik” ileten, temiz ve kurumsal dostu bir platformdur. Haas yazı tipi ailesi (display + text varyantları), site genelinde pozitif harf aralığıyla İsviçre hassasiyetinde bir tipografi sistemi oluşturur.

Temel Özellikler:

  • Derin lacivert metinli (#181d26) beyaz tuval
  • Birincil CTA ve bağlantı rengi olarak Airtable Blue (#1b61c9)
  • Haas + Haas Groot Disp çift yazı tipi sistemi
  • Gövde metninde pozitif harf aralığı (0.08px–0.28px)
  • 12px yarıçaplı düğmeler, kartlar için 16px–32px
  • Mavi tonlu çok katmanlı gölge: rgba(45,127,249,0.28) 0px 1px 3px
  • Anlamsal tema token’ları: --theme_* CSS değişken adlandırması

2. Renk Paleti ve Roller

Birincil

  • Derin Lacivert (#181d26): Birincil metin
  • Airtable Blue (#1b61c9): CTA düğmeleri, bağlantılar
  • Beyaz (#ffffff): Birincil yüzey
  • Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Anlamsal

  • Başarı Yeşili (#006400): --theme_success-text
  • Zayıf Metin (rgba(4,14,32,0.69)): --theme_text-weak
  • İkincil Aktif (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Nötr

  • Koyu Gri (#333333): İkincil metin
  • Orta Mavi (#254fad): Bağlantı/vurgu mavisi varyantı
  • Kenarlık (#e0e2e6): Kart kenarlıkları
  • Açık Yüzey (#f8fafc): İnce yüzey

Gölgeler

  • Mavi Tonlu (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)
  • Yumuşak (rgba(15,48,106,0.05) 0px 0px 20px)

3. Tipografi Kuralları

Yazı Tipi Aileleri

  • Birincil: Haas, yedekler: -apple-system, system-ui, Segoe UI, Roboto
  • Display: Haas Groot Disp, yedek: Haas

Hiyerarşi

RolYazı TipiBoyutAğırlıkSatır YüksekliğiHarf Aralığı
Display HeroHaas48px4001.15normal
Display KalınHaas Groot Disp48px9001.50normal
Bölüm BaşlığıHaas40px4001.25normal
Alt BaşlıkHaas32px400–5001.15–1.25normal
Kart BaşlığıHaas24px4001.20–1.300.12px
ÖzellikHaas20px4001.25–1.500.1px
GövdeHaas18px4001.350.18px
Gövde MediumHaas16px5001.300.08–0.16px
DüğmeHaas16px5001.25–1.300.08px
Alt YazıHaas14px400–5001.25–1.350.07–0.28px

4. Bileşen Stilleri

Düğmeler

  • Birincil Mavi: #1b61c9, beyaz metin, 16px 24px dolgu, 12px yarıçap
  • Beyaz: beyaz arka plan, #181d26 metin, 12px yarıçap, 1px beyaz kenarlık
  • Çerez Onayı: #1b61c9 arka plan, 2px yarıçap (keskin)

Kartlar: 1px solid #e0e2e6, 16px–24px yarıçap

Giriş Alanları: Standart Haas stili

5. Düzen

  • Boşluk: 1–48px (8px temel)
  • Yarıçap: 2px (küçük), 12px (düğmeler), 16px (kartlar), 24px (bölümler), 32px (büyük), 50% (daireler)

6. Derinlik

  • Mavi tonlu çok katmanlı gölge sistemi
  • Yumuşak ortam ışığı: rgba(15,48,106,0.05) 0px 0px 20px

7. Yapılacaklar ve Yapılmayacaklar

Yap: CTA’lar için Airtable Blue kullan, pozitif izleme ile Haas kullan, 12px yarıçaplı düğmeler

Yapma: Pozitif harf aralığını atla, ağır gölgeler kullan

8. Duyarlı Davranış

Kırılma noktaları: 425–1664px (23 kırılma noktası)

9. Agent Prompt Kılavuzu

  • Metin: Derin Lacivert (#181d26)
  • CTA: Airtable Blue (#1b61c9)
  • Arka Plan: Beyaz (#ffffff)
  • Kenarlık: #e0e2e6
Mod
design-system
Sahne
design
Yüzey
web
Manifest ID
design-system-airtable

Etiketler

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