Télécharger

Airtable système de design.

Airtable système de design — Hybride tableur-base de données. Esthétique colorée et conviviale pour données structurées.

Utiliser ce plugin → Voir sur GitHub →

Voyez-le en contexte

Les mêmes tokens de design appliqués à différents types d’artefacts — un site web, une application, une diapositive, une affiche. Des maquettes originales réhabillées avec ce système, et non des captures d’écran.

Site web
Diapositives
Application
Affiche

Tokens de design

56 tokens conformes au contrat de tokens d’Open Design — les mêmes valeurs structurées de palette, de typographie, d’espacement et de mouvement que votre agent lit pour thématiser n’importe quel artefact.

Surface

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

Texte

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

Bordure

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

Accent

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

Sémantique

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

Typographie

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

Échelle typographique

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

Espacement

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

Rayon

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

Élévation

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

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

Mouvement

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

Mise en page

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

Système de design inspiré d’Airtable

Category: Design & Créatif Hybride tableur-base de données. Esthétique colorée, conviviale et structurée.

1. Thème visuel & Atmosphère

Le site d’Airtable est une plateforme propre et adaptée aux entreprises, qui traduit une « simplicité sophistiquée » grâce à une toile blanche, un texte bleu marine profond (#181d26) et Airtable Blue (#1b61c9) comme couleur d’accentuation interactive principale. La famille de polices Haas (variantes display + text) crée un système typographique de précision suisse avec un espacement positif des lettres sur l’ensemble du site.

Caractéristiques clés :

  • Toile blanche avec texte bleu marine profond (#181d26)
  • Airtable Blue (#1b61c9) comme couleur principale pour les CTA et les liens
  • Système à double police Haas + Haas Groot Disp
  • Espacement positif des lettres sur le corps de texte (0.08px–0.28px)
  • Boutons à rayon 12px, cartes 16px–32px
  • Ombre multi-couches teintée de bleu : rgba(45,127,249,0.28) 0px 1px 3px
  • Tokens de thème sémantiques : nommage de variables CSS --theme_*

2. Palette de couleurs & Rôles

Primaire

  • Bleu marine profond (#181d26) : Texte principal
  • Airtable Blue (#1b61c9) : Boutons CTA, liens
  • Blanc (#ffffff) : Surface principale
  • Spotlight (rgba(249,252,255,0.97)) : --theme_button-text-spotlight

Sémantique

  • Vert succès (#006400) : --theme_success-text
  • Texte faible (rgba(4,14,32,0.69)) : --theme_text-weak
  • Secondaire actif (rgba(7,12,20,0.82)) : --theme_button-text-secondary-active

Neutre

  • Gris foncé (#333333) : Texte secondaire
  • Bleu moyen (#254fad) : Variante de lien/bleu d’accentuation
  • Bordure (#e0e2e6) : Bordures de carte
  • Surface claire (#f8fafc) : Surface subtile

Ombres

  • Teintée de bleu (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)
  • Douce (rgba(15,48,106,0.05) 0px 0px 20px)

3. Règles typographiques

Familles de polices

  • Principale : Haas, replis : -apple-system, system-ui, Segoe UI, Roboto
  • Display : Haas Groot Disp, repli : Haas

Hiérarchie

RôlePoliceTailleGraisseInterligneEspacement
Display HeroHaas48px4001.15normal
Display GrasHaas Groot Disp48px9001.50normal
Titre de sectionHaas40px4001.25normal
Sous-titreHaas32px400–5001.15–1.25normal
Titre de carteHaas24px4001.20–1.300.12px
FonctionnalitéHaas20px4001.25–1.500.1px
CorpsHaas18px4001.350.18px
Corps MediumHaas16px5001.300.08–0.16px
BoutonHaas16px5001.25–1.300.08px
LégendeHaas14px400–5001.25–1.350.07–0.28px

4. Styles des composants

Boutons

  • Bleu principal : #1b61c9, texte blanc, rembourrage 16px 24px, rayon 12px
  • Blanc : fond blanc, texte #181d26, rayon 12px, bordure blanche 1px
  • Consentement aux cookies : fond #1b61c9, rayon 2px (vif)

Cartes : 1px solid #e0e2e6, rayon 16px–24px

Champs de saisie : Styling Haas standard

5. Mise en page

  • Espacement : 1–48px (base 8px)
  • Rayon : 2px (petit), 12px (boutons), 16px (cartes), 24px (sections), 32px (grand), 50% (cercles)

6. Profondeur

  • Système d’ombre multi-couches teintée de bleu
  • Ambiance douce : rgba(15,48,106,0.05) 0px 0px 20px

7. À faire et à ne pas faire

À faire : Utiliser Airtable Blue pour les CTA, Haas avec un tracking positif, boutons à rayon 12px

À ne pas faire : Omettre l’espacement positif des lettres, utiliser des ombres lourdes

8. Comportement responsive

Points de rupture : 425–1664px (23 points de rupture)

9. Guide d’invite Agent

  • Texte : Bleu marine profond (#181d26)
  • CTA : Airtable Blue (#1b61c9)
  • Arrière-plan : Blanc (#ffffff)
  • Bordure : #e0e2e6
Mode
design-system
Scène
design
Surface
web
ID du manifest
design-system-airtable

Tags

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