ダウンロード

Airtable デザインシステム.

Airtable デザインシステム — スプレッドシートとデータベースのハイブリッド。カラフルでフレンドリーな構造化データの美学。

このプラグインを使う → GitHub で見る →

コンテキストの中で見る

同じデザイントークンを、ウェブサイト、アプリ、スライド、ポスターといったアーティファクトの種類にわたって適用しています。スクリーンショットではなく、このシステムでリスキンしたオリジナルのモックです。

ウェブサイト
スライド
アプリ
ポスター

デザイントークン

Open Design のトークン契約に準拠した 56 個のトークン。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 フォントファミリー（ディスプレイバリアントとテキストバリアント）はポジティブなレタースペーシングを全体に施し、スイス精密主義のタイポグラフィシステムを構築しています。

主な特徴：

  • ディープネイビーテキスト（#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
  • セマンティックテーマトークン：--theme_* CSS 変数命名

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

階層

役割フォントサイズウェイト行高レタースペーシング
ディスプレイヒーローHaas48px4001.15normal
ディスプレイボールドHaas Groot Disp48px9001.50normal
セクション見出しHaas40px4001.25normal
サブ見出しHaas32px400–5001.15–1.25normal
カードタイトルHaas24px4001.20–1.300.12px
フィーチャーHaas20px4001.25–1.500.1px
ボディHaas18px4001.350.18px
ボディミディアムHaas16px5001.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. すべきこと・避けること

すべきこと：CTA には Airtable Blue を使用、ポジティブなトラッキングで Haas を使用、12px 角丸ボタン

避けること：ポジティブなレタースペーシングを省略する、重いシャドウを使用する

8. レスポンシブ挙動

ブレークポイント：425–1664px（23 ブレークポイント）

9. Agent プロンプトガイド

  • テキスト：ディープネイビー（#181d26）
  • CTA：Airtable Blue（#1b61c9）
  • 背景：ホワイト（#ffffff）
  • ボーダー：#e0e2e6
モード
design-system
シーン
design
サーフェス
web
Manifest ID
design-system-airtable

タグ

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