admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/airtable/DESIGN-ar.md
+92
View File
@@ -0,0 +1,92 @@
# نظام تصميم مستوحى من Airtable
> Category: التصميم والإبداع
> هجين بين جدول البيانات وقاعدة البيانات. جمالية بيانات منظمة: ملونة وودية.
## 1. الطابع البصري والأجواء
موقع Airtable منصة نظيفة وملائمة للشركات، تنقل "بساطة متطورة" عبر لوحة بيضاء مع نص أزرق بحري عميق (`#181d26`) و Airtable Blue (`#1b61c9`) كلون تفاعلي رئيسي. تخلق عائلة خطوط Haas (المتغيرات العرضية والنصية) نظام طباعة دقيقاً بالأسلوب السويسري مع تباعد إيجابي للأحرف في جميع أنحاء الموقع.
**الخصائص الرئيسية:**
- لوحة بيضاء مع نص أزرق بحري عميق (`#181d26`)
- Airtable Blue (`#1b61c9`) كلون رئيسي لأزرار الدعوة إلى الإجراء والروابط
- نظام خطين مزدوج Haas + Haas Groot Disp
- تباعد إيجابي للأحرف في نص الجسم (0.08px–0.28px)
- نصف قطر الأزرار 12px، البطاقات 16px–32px
- ظل متعدد الطبقات بنبرة زرقاء: `rgba(45,127,249,0.28) 0px 1px 3px`
- رموز موضوع دلالية: تسمية متغيرات CSS `--theme_*`
## 2. لوحة الألوان والأدوار
### الألوان الأساسية
- **الأزرق البحري العميق** (`#181d26`): النص الأساسي
- **Airtable Blue** (`#1b61c9`): أزرار الدعوة إلى الإجراء، الروابط
- **الأبيض** (`#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`
### التسلسل الهرمي
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display عريض | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| عنوان القسم | Haas | 40px | 400 | 1.25 | normal |
| عنوان فرعي | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| عنوان البطاقة | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| الميزة | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| النص الأساسي | Haas | 18px | 400 | 1.35 | 0.18px |
| النص الأساسي المتوسط | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| الزر | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| التسمية التوضيحية | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. تنسيق المكونات
### الأزرار
- **الأزرق الأساسي**: `#1b61c9`، نص أبيض، حشو 16px 24px، نصف قطر 12px
- **الأبيض**: خلفية بيضاء، نص `#181d26`، نصف قطر 12px، حد أبيض 1px
- **موافقة ملفات تعريف الارتباط**: خلفية `#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. ما يجب فعله وما يجب تجنبه
### افعل: استخدم Airtable Blue لأزرار الدعوة إلى الإجراء، Haas مع تتبع إيجابي، أزرار بنصف قطر 12px
### تجنب: تخطي التباعد الإيجابي للأحرف، استخدام الظلال الثقيلة
## 8. السلوك التجاوبي
نقاط الكسر: 425–1664px (23 نقطة كسر)
## 9. دليل موجهات Agent
- النص: الأزرق البحري العميق (`#181d26`)
- الدعوة إلى الإجراء: Airtable Blue (`#1b61c9`)
- الخلفية: الأبيض (`#ffffff`)
- الحدود: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-de.md
+92
View File
@@ -0,0 +1,92 @@
# 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
| Rolle | Schrift | Größe | Stärke | Zeilenhöhe | Buchstabenabstand |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Fett | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Abschnittsüberschrift | Haas | 40px | 400 | 1.25 | normal |
| Unterüberschrift | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Kartentitel | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Fließtext | Haas | 18px | 400 | 1.35 | 0.18px |
| Fließtext Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Bildunterschrift | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-es.md
+92
View File
@@ -0,0 +1,92 @@
# Sistema de diseño inspirado en Airtable
> Category: Diseño y Creatividad
> Híbrido de hoja de cálculo y base de datos. Estética de datos estructurados, colorida y amigable.
## 1. Tema visual y atmósfera
El sitio web de Airtable es una plataforma limpia y adecuada para empresas que transmite "simplicidad sofisticada" mediante un lienzo blanco con texto azul marino profundo (`#181d26`) y Airtable Blue (`#1b61c9`) como acento interactivo principal. La familia tipográfica Haas (variantes display y text) crea un sistema tipográfico de precisión suiza con espaciado de letras positivo en todo el sitio.
**Características clave:**
- Lienzo blanco con texto azul marino profundo (`#181d26`)
- Airtable Blue (`#1b61c9`) como color principal para CTA y enlaces
- Sistema de doble fuente Haas + Haas Groot Disp
- Espaciado positivo de letras en el texto del cuerpo (0.08px–0.28px)
- Botones con radio de 12px, tarjetas de 16px–32px
- Sombra multicapa con tono azul: `rgba(45,127,249,0.28) 0px 1px 3px`
- Tokens de tema semánticos: nomenclatura de variables CSS `--theme_*`
## 2. Paleta de colores y roles
### Primario
- **Azul marino profundo** (`#181d26`): Texto principal
- **Airtable Blue** (`#1b61c9`): Botones CTA, enlaces
- **Blanco** (`#ffffff`): Superficie principal
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semántico
- **Verde éxito** (`#006400`): `--theme_success-text`
- **Texto débil** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Secundario activo** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Neutral
- **Gris oscuro** (`#333333`): Texto secundario
- **Azul medio** (`#254fad`): Variante de azul para enlaces/acento
- **Borde** (`#e0e2e6`): Bordes de tarjeta
- **Superficie clara** (`#f8fafc`): Superficie sutil
### Sombras
- **Con tono 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. Reglas tipográficas
### Familias tipográficas
- **Principal**: `Haas`, respaldos: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, respaldo: `Haas`
### Jerarquía
| Rol | Fuente | Tamaño | Peso | Altura de línea | Espaciado |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Negrita | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Encabezado de sección | Haas | 40px | 400 | 1.25 | normal |
| Subtítulo | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Título de tarjeta | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Característica | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Cuerpo | Haas | 18px | 400 | 1.35 | 0.18px |
| Cuerpo Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Botón | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Pie de foto | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Estilos de componentes
### Botones
- **Azul principal**: `#1b61c9`, texto blanco, relleno 16px 24px, radio 12px
- **Blanco**: fondo blanco, texto `#181d26`, radio 12px, borde blanco 1px
- **Consentimiento de cookies**: fondo `#1b61c9`, radio 2px (agudo)
### Tarjetas: `1px solid #e0e2e6`, radio 16px–24px
### Entradas: Estilo Haas estándar
## 5. Diseño
- Espaciado: 1–48px (base 8px)
- Radio: 2px (pequeño), 12px (botones), 16px (tarjetas), 24px (secciones), 32px (grande), 50% (círculos)
## 6. Profundidad
- Sistema de sombra multicapa con tono azul
- Ambiente suave: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Qué hacer y qué no hacer
### Hacer: Usar Airtable Blue para CTA, Haas con tracking positivo, botones de radio 12px
### No hacer: Omitir el espaciado positivo de letras, usar sombras pesadas
## 8. Comportamiento responsive
Puntos de quiebre: 425–1664px (23 puntos de quiebre)
## 9. Guía de prompts para Agent
- Texto: Azul marino profundo (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Fondo: Blanco (`#ffffff`)
- Borde: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-fr.md
+92
View File
@@ -0,0 +1,92 @@
# 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ôle | Police | Taille | Graisse | Interligne | Espacement |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Gras | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Titre de section | Haas | 40px | 400 | 1.25 | normal |
| Sous-titre | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Titre de carte | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Fonctionnalité | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Corps | Haas | 18px | 400 | 1.35 | 0.18px |
| Corps Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Bouton | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Légende | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-id.md
+92
View File
@@ -0,0 +1,92 @@
# Sistem Desain Terinspirasi dari Airtable
> Category: Desain & Kreatif
> Hibrida spreadsheet-database. Estetika data terstruktur yang berwarna-warni dan ramah.
## 1. Tema Visual & Atmosfer
Situs web Airtable adalah platform bersih yang ramah untuk perusahaan, yang menyampaikan "kesederhanaan yang canggih" melalui kanvas putih dengan teks biru navy dalam (`#181d26`) dan Airtable Blue (`#1b61c9`) sebagai aksen interaktif utama. Keluarga font Haas (varian display + text) menciptakan sistem tipografi presisi Swiss dengan jarak huruf positif di seluruh halaman.
**Karakteristik Utama:**
- Kanvas putih dengan teks biru navy dalam (`#181d26`)
- Airtable Blue (`#1b61c9`) sebagai warna CTA dan tautan utama
- Sistem font ganda Haas + Haas Groot Disp
- Jarak huruf positif pada teks isi (0.08px–0.28px)
- Radius tombol 12px, kartu 16px–32px
- Bayangan multi-lapis bernada biru: `rgba(45,127,249,0.28) 0px 1px 3px`
- Token tema semantis: penamaan variabel CSS `--theme_*`
## 2. Palet Warna & Peran
### Primer
- **Biru Navy Dalam** (`#181d26`): Teks utama
- **Airtable Blue** (`#1b61c9`): Tombol CTA, tautan
- **Putih** (`#ffffff`): Permukaan utama
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semantis
- **Hijau Sukses** (`#006400`): `--theme_success-text`
- **Teks Lemah** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Sekunder Aktif** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Netral
- **Abu-abu Gelap** (`#333333`): Teks sekunder
- **Biru Tengah** (`#254fad`): Varian biru tautan/aksen
- **Batas** (`#e0e2e6`): Batas kartu
- **Permukaan Terang** (`#f8fafc`): Permukaan halus
### Bayangan
- **Bernada Biru** (`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`)
- **Lembut** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Aturan Tipografi
### Keluarga Font
- **Primer**: `Haas`, fallback: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, fallback: `Haas`
### Hierarki
| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Jarak Huruf |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Tebal | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Judul Bagian | Haas | 40px | 400 | 1.25 | normal |
| Sub-judul | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Judul Kartu | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Fitur | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Isi | Haas | 18px | 400 | 1.35 | 0.18px |
| Isi Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Tombol | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Keterangan | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Gaya Komponen
### Tombol
- **Biru Primer**: `#1b61c9`, teks putih, padding 16px 24px, radius 12px
- **Putih**: latar belakang putih, teks `#181d26`, radius 12px, batas putih 1px
- **Persetujuan Cookie**: latar belakang `#1b61c9`, radius 2px (tajam)
### Kartu: `1px solid #e0e2e6`, radius 16px–24px
### Input: Gaya Haas standar
## 5. Tata Letak
- Spasi: 1–48px (basis 8px)
- Radius: 2px (kecil), 12px (tombol), 16px (kartu), 24px (bagian), 32px (besar), 50% (lingkaran)
## 6. Kedalaman
- Sistem bayangan multi-lapis bernada biru
- Ambien lembut: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Yang Harus dan Tidak Harus Dilakukan
### Lakukan: Gunakan Airtable Blue untuk CTA, Haas dengan tracking positif, tombol radius 12px
### Jangan: Lewatkan jarak huruf positif, gunakan bayangan berat
## 8. Perilaku Responsif
Breakpoint: 425–1664px (23 breakpoint)
## 9. Panduan Prompt untuk Agent
- Teks: Biru Navy Dalam (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Latar Belakang: Putih (`#ffffff`)
- Batas: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-it.md
+92
View File
@@ -0,0 +1,92 @@
# Sistema di design ispirato ad Airtable
> Category: Design e Creatività
> Ibrido tra foglio di calcolo e database. Estetica dei dati strutturati: colorata, amichevole e organizzata.
## 1. Tema visivo e atmosfera
Il sito di Airtable è una piattaforma pulita e adatta alle aziende che comunica una "semplicità sofisticata" attraverso una tela bianca con testo blu navy profondo (`#181d26`) e Airtable Blue (`#1b61c9`) come accento interattivo principale. La famiglia tipografica Haas (varianti display e text) crea un sistema tipografico di precisione svizzera con spaziatura positiva tra le lettere su tutto il sito.
**Caratteristiche principali:**
- Tela bianca con testo blu navy profondo (`#181d26`)
- Airtable Blue (`#1b61c9`) come colore principale per CTA e link
- Sistema a doppio font Haas + Haas Groot Disp
- Spaziatura positiva tra le lettere nel testo del corpo (0.08px–0.28px)
- Raggio dei pulsanti 12px, card 16px–32px
- Ombra multistrato con tonalità blu: `rgba(45,127,249,0.28) 0px 1px 3px`
- Token di tema semantici: nomenclatura delle variabili CSS `--theme_*`
## 2. Palette di colori e ruoli
### Primario
- **Blu navy profondo** (`#181d26`): Testo principale
- **Airtable Blue** (`#1b61c9`): Pulsanti CTA, link
- **Bianco** (`#ffffff`): Superficie principale
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semantico
- **Verde successo** (`#006400`): `--theme_success-text`
- **Testo debole** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Secondario attivo** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Neutro
- **Grigio scuro** (`#333333`): Testo secondario
- **Blu medio** (`#254fad`): Variante di blu per link/accento
- **Bordo** (`#e0e2e6`): Bordi delle card
- **Superficie chiara** (`#f8fafc`): Superficie sottile
### Ombre
- **Tonalità blu** (`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`)
- **Morbida** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Regole tipografiche
### Famiglie di font
- **Principale**: `Haas`, fallback: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, fallback: `Haas`
### Gerarchia
| Ruolo | Font | Dimensione | Peso | Altezza di riga | Spaziatura |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Grassetto | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Intestazione di sezione | Haas | 40px | 400 | 1.25 | normal |
| Sottotitolo | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Titolo della card | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Funzionalità | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Corpo | Haas | 18px | 400 | 1.35 | 0.18px |
| Corpo Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Pulsante | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Didascalia | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Stili dei componenti
### Pulsanti
- **Blu principale**: `#1b61c9`, testo bianco, padding 16px 24px, raggio 12px
- **Bianco**: sfondo bianco, testo `#181d26`, raggio 12px, bordo bianco 1px
- **Consenso cookie**: sfondo `#1b61c9`, raggio 2px (netto)
### Card: `1px solid #e0e2e6`, raggio 16px–24px
### Input: Stile Haas standard
## 5. Layout
- Spaziatura: 1–48px (base 8px)
- Raggio: 2px (piccolo), 12px (pulsanti), 16px (card), 24px (sezioni), 32px (grande), 50% (cerchi)
## 6. Profondità
- Sistema di ombra multistrato con tonalità blu
- Ambiente morbido: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Cosa fare e cosa non fare
### Fare: Usare Airtable Blue per le CTA, Haas con tracking positivo, pulsanti con raggio 12px
### Non fare: Omettere la spaziatura positiva tra le lettere, usare ombre pesanti
## 8. Comportamento responsive
Breakpoint: 425–1664px (23 breakpoint)
## 9. Guida ai prompt per Agent
- Testo: Blu navy profondo (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Sfondo: Bianco (`#ffffff`)
- Bordo: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-ja.md
+92
View File
@@ -0,0 +1,92 @@
# 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`
### 階層
| 役割 | フォント | サイズ | ウェイト | 行高 | レタースペーシング |
|------|------|------|--------|-------------|----------------|
| ディスプレイヒーロー | Haas | 48px | 400 | 1.15 | normal |
| ディスプレイボールド | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| セクション見出し | Haas | 40px | 400 | 1.25 | normal |
| サブ見出し | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| カードタイトル | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| フィーチャー | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| ボディ | Haas | 18px | 400 | 1.35 | 0.18px |
| ボディミディアム | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| ボタン | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| キャプション | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-ko.md
+92
View File
@@ -0,0 +1,92 @@
# 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`
### 계층구조
| 역할 | 폰트 | 크기 | 굵기 | 줄높이 | 자간 |
|------|------|------|--------|-------------|----------------|
| 디스플레이 히어로 | Haas | 48px | 400 | 1.15 | normal |
| 디스플레이 볼드 | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| 섹션 제목 | Haas | 40px | 400 | 1.25 | normal |
| 소제목 | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| 카드 제목 | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| 피처 | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| 본문 | Haas | 18px | 400 | 1.35 | 0.18px |
| 본문 미디엄 | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| 버튼 | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| 캡션 | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. 컴포넌트 스타일링
### 버튼
- **기본 블루**：`#1b61c9`，흰색 텍스트, 16px 24px 패딩, 12px 반경
- **흰색**：흰색 배경, `#181d26` 텍스트, 12px 반경, 1px 흰색 테두리
- **쿠키 동의**：`#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`
open-design/design-systems/airtable/DESIGN-nl.md
+92
View File
@@ -0,0 +1,92 @@
# Ontwerpsysteem geïnspireerd door Airtable
> Category: Design & Creatief
> Hybride van spreadsheet en database. Kleurrijke, vriendelijke, gestructureerde data-esthetiek.
## 1. Visueel thema & Sfeer
De website van Airtable is een strak, bedrijfsvriendelijk platform dat "verfijnde eenvoud" uitstraalt via een wit canvas met diepdonkerblauwe tekst (`#181d26`) en Airtable Blue (`#1b61c9`) als primair interactief accent. De Haas-lettertypefamilie (display + text-varianten) creëert een typografisch systeem van Zwitserse precisie met positieve letterafstand door de hele website.
**Kernkenmerken:**
- Wit canvas met diepdonkerblauwe tekst (`#181d26`)
- Airtable Blue (`#1b61c9`) als primaire CTA- en linkkleur
- Duaal lettertypesysteem Haas + Haas Groot Disp
- Positieve letterafstand in bodytekst (0.08px–0.28px)
- Knoppen met radius 12px, kaarten 16px–32px
- Meerlaagse schaduw met blauwe tint: `rgba(45,127,249,0.28) 0px 1px 3px`
- Semantische thema-tokens: CSS-variabelennaamgeving `--theme_*`
## 2. Kleurenpalet & Rollen
### Primair
- **Diep donkerblauw** (`#181d26`): Primaire tekst
- **Airtable Blue** (`#1b61c9`): CTA-knoppen, links
- **Wit** (`#ffffff`): Primaire oppervlakte
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semantisch
- **Succesgroen** (`#006400`): `--theme_success-text`
- **Zwakke tekst** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Secundair actief** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Neutraal
- **Donkergrijs** (`#333333`): Secundaire tekst
- **Middenblauw** (`#254fad`): Blauwvariant voor links/accent
- **Rand** (`#e0e2e6`): Kaartranden
- **Lichte oppervlakte** (`#f8fafc`): Subtiele oppervlakte
### Schaduwen
- **Blauwe tint** (`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`)
- **Zacht** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Typografieregels
### Lettertypefamilies
- **Primair**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, fallback: `Haas`
### Hiërarchie
| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Vet | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Sectiekopregel | Haas | 40px | 400 | 1.25 | normal |
| Subkop | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Kaarttitel | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Functie | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Bodytekst | Haas | 18px | 400 | 1.35 | 0.18px |
| Bodytekst Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Knop | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Bijschrift | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Componentstijlen
### Knoppen
- **Primair blauw**: `#1b61c9`, witte tekst, padding 16px 24px, radius 12px
- **Wit**: witte achtergrond, tekst `#181d26`, radius 12px, witte rand 1px
- **Cookie-toestemming**: achtergrond `#1b61c9`, radius 2px (scherp)
### Kaarten: `1px solid #e0e2e6`, radius 16px–24px
### Invoervelden: Standaard Haas-stijl
## 5. Indeling
- Afstanden: 1–48px (basis 8px)
- Radius: 2px (klein), 12px (knoppen), 16px (kaarten), 24px (secties), 32px (groot), 50% (cirkels)
## 6. Diepte
- Meerlaags schaduwsysteem met blauwe tint
- Zachte omgevingsschaduw: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Wat wel en niet te doen
### Wel: Airtable Blue gebruiken voor CTA's, Haas met positieve tracking, knoppen met radius 12px
### Niet: Positieve letterafstand weglaten, zware schaduwen gebruiken
## 8. Responsief gedrag
Breekpunten: 425–1664px (23 breekpunten)
## 9. Agent-promptgids
- Tekst: Diep donkerblauw (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Achtergrond: Wit (`#ffffff`)
- Rand: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-pl.md
+92
View File
@@ -0,0 +1,92 @@
# System projektowania inspirowany Airtable
> Category: Design i Kreatywność
> Hybryda arkusza kalkulacyjnego i bazy danych. Kolorowa, przyjazna, estetyka danych strukturalnych.
## 1. Motyw wizualny i atmosfera
Strona Airtable to czysta, przyjazna dla przedsiębiorstw platforma, która komunikuje „wyrafinowaną prostotę" poprzez białe płótno z głęboko granatowym tekstem (`#181d26`) i Airtable Blue (`#1b61c9`) jako głównym interaktywnym akcentem. Rodzina fontów Haas (warianty display i text) tworzy system typograficzny w stylu szwajcarskiej precyzji z dodatnim odstępem między literami w całym serwisie.
**Kluczowe cechy:**
- Białe płótno z głęboko granatowym tekstem (`#181d26`)
- Airtable Blue (`#1b61c9`) jako główny kolor CTA i linków
- Podwójny system fontów Haas + Haas Groot Disp
- Dodatni odstęp między literami w tekście podstawowym (0.08px–0.28px)
- Przyciski z promieniem 12px, karty 16px–32px
- Wielowarstwowy cień z niebieskim odcieniem: `rgba(45,127,249,0.28) 0px 1px 3px`
- Semantyczne tokeny motywu: nazewnictwo zmiennych CSS `--theme_*`
## 2. Paleta kolorów i role
### Podstawowe
- **Głęboki granat** (`#181d26`): Tekst podstawowy
- **Airtable Blue** (`#1b61c9`): Przyciski CTA, linki
- **Biały** (`#ffffff`): Główna powierzchnia
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semantyczne
- **Zielony sukcesu** (`#006400`): `--theme_success-text`
- **Słaby tekst** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Drugorzędny aktywny** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Neutralne
- **Ciemnoszary** (`#333333`): Tekst drugorzędny
- **Niebieski średni** (`#254fad`): Wariant niebieskiego dla linków/akcentu
- **Obramowanie** (`#e0e2e6`): Obramowania kart
- **Jasna powierzchnia** (`#f8fafc`): Subtelna powierzchnia
### Cienie
- **Niebieski odcień** (`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`)
- **Miękki** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Zasady typografii
### Rodziny fontów
- **Podstawowy**: `Haas`, zapasowe: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, zapasowy: `Haas`
### Hierarchia
| Rola | Font | Rozmiar | Grubość | Wysokość linii | Odstęp liter |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Pogrubiony | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Nagłówek sekcji | Haas | 40px | 400 | 1.25 | normal |
| Podnagłówek | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Tytuł karty | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Funkcja | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Treść | Haas | 18px | 400 | 1.35 | 0.18px |
| Treść Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Przycisk | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Podpis | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Stylizacja komponentów
### Przyciski
- **Niebieski podstawowy**: `#1b61c9`, biały tekst, padding 16px 24px, promień 12px
- **Biały**: białe tło, tekst `#181d26`, promień 12px, białe obramowanie 1px
- **Zgoda na cookies**: tło `#1b61c9`, promień 2px (ostry)
### Karty: `1px solid #e0e2e6`, promień 16px–24px
### Pola wejściowe: Standardowa stylizacja Haas
## 5. Układ
- Odstępy: 1–48px (baza 8px)
- Promień: 2px (mały), 12px (przyciski), 16px (karty), 24px (sekcje), 32px (duży), 50% (koła)
## 6. Głębia
- Wielowarstwowy system cieni z niebieskim odcieniem
- Miękkie otoczenie: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Co robić i czego unikać
### Robić: Używać Airtable Blue dla CTA, Haas z dodatnim trackingiem, przyciski z promieniem 12px
### Unikać: Pomijać dodatni odstęp między literami, używać ciężkich cieni
## 8. Zachowanie responsywne
Punkty przełamania: 425–1664px (23 punkty przełamania)
## 9. Przewodnik po promptach dla Agent
- Tekst: Głęboki granat (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Tło: Biały (`#ffffff`)
- Obramowanie: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-pt-br.md
+92
View File
@@ -0,0 +1,92 @@
# 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
| Papel | Fonte | Tamanho | Peso | Altura de linha | Espaçamento |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Negrito | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Título de seção | Haas | 40px | 400 | 1.25 | normal |
| Subtítulo | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Título do card | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Destaque | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Corpo | Haas | 18px | 400 | 1.35 | 0.18px |
| Corpo Médio | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Botão | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Legenda | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-ru.md
+92
View File
@@ -0,0 +1,92 @@
# Дизайн-система, вдохновлённая Airtable
> Category: Дизайн и творчество
> Гибрид таблицы и базы данных. Красочная, дружелюбная эстетика структурированных данных.
## 1. Визуальная тема и атмосфера
Сайт Airtable — это чистая, ориентированная на корпоративных пользователей платформа, которая передаёт «утончённую простоту» с помощью белого полотна, глубокого тёмно-синего текста (`#181d26`) и Airtable Blue (`#1b61c9`) в качестве основного интерактивного акцента. Семейство шрифтов Haas (варианты display и text) создаёт типографическую систему швейцарской точности с положительным межбуквенным интервалом на протяжении всего сайта.
**Ключевые характеристики:**
- Белое полотно с глубоким тёмно-синим текстом (`#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`
- Семантические токены темы: именование CSS-переменных `--theme_*`
## 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`
### Иерархия
| Роль | Шрифт | Размер | Насыщенность | Межстрочный | Межбуквенный |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Жирный | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Заголовок раздела | Haas | 40px | 400 | 1.25 | normal |
| Подзаголовок | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Заголовок карточки | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Функция | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Основной текст | Haas | 18px | 400 | 1.35 | 0.18px |
| Основной Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Кнопка | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Подпись | Haas | 14px | 400–500 | 1.25–1.35 | 0.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. Что делать и чего не делать
### Делать: использовать Airtable Blue для CTA, Haas с положительным трекингом, кнопки с радиусом 12px
### Не делать: пропускать положительный межбуквенный интервал, использовать тяжёлые тени
## 8. Адаптивное поведение
Контрольные точки: 425–1664px (23 контрольные точки)
## 9. Руководство по промптам для Agent
- Текст: Глубокий тёмно-синий (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Фон: Белый (`#ffffff`)
- Граница: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-tr.md
+92
View File
@@ -0,0 +1,92 @@
# 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
| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Kalın | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Bölüm Başlığı | Haas | 40px | 400 | 1.25 | normal |
| Alt Başlık | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Kart Başlığı | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Özellik | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Gövde | Haas | 18px | 400 | 1.35 | 0.18px |
| Gövde Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Düğme | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Alt Yazı | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-uk.md
+92
View File
@@ -0,0 +1,92 @@
# Дизайн-система, натхненна Airtable
> Category: Дизайн і творчість
> Гібрид електронної таблиці та бази даних. Барвиста, дружня естетика структурованих даних.
## 1. Візуальна тема та атмосфера
Сайт Airtable — це чиста, орієнтована на корпоративних користувачів платформа, яка передає «витончену простоту» завдяки білому полотну, глибокому темно-синьому тексту (`#181d26`) та Airtable Blue (`#1b61c9`) як основному інтерактивному акценту. Сімейство шрифтів Haas (варіанти display і text) формує типографічну систему швейцарської точності з позитивним міжлітерним інтервалом на всьому сайті.
**Ключові характеристики:**
- Біле полотно з глибоким темно-синім текстом (`#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`
- Семантичні токени теми: іменування CSS-змінних `--theme_*`
## 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`
### Ієрархія
| Роль | Шрифт | Розмір | Насиченість | Міжрядковий | Міжлітерний |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Жирний | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Заголовок розділу | Haas | 40px | 400 | 1.25 | normal |
| Підзаголовок | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Заголовок картки | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Функція | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Основний текст | Haas | 18px | 400 | 1.35 | 0.18px |
| Основний Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Кнопка | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Підпис | Haas | 14px | 400–500 | 1.25–1.35 | 0.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. Що робити і чого не робити
### Робити: використовувати Airtable Blue для CTA, Haas із позитивним трекінгом, кнопки з радіусом 12px
### Не робити: пропускати позитивний міжлітерний інтервал, використовувати важкі тіні
## 8. Адаптивна поведінка
Контрольні точки: 425–1664px (23 контрольні точки)
## 9. Посібник із промптів для Agent
- Текст: Глибокий темно-синій (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Фон: Білий (`#ffffff`)
- Межа: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-vi.md
+92
View File
@@ -0,0 +1,92 @@
# Hệ thống thiết kế lấy cảm hứng từ Airtable
> Category: Thiết kế & Sáng tạo
> Kết hợp giữa bảng tính và cơ sở dữ liệu. Thẩm mỹ dữ liệu có cấu trúc: đầy màu sắc, thân thiện.
## 1. Chủ đề hình ảnh & Bầu không khí
Trang web của Airtable là một nền tảng sạch sẽ, thân thiện với doanh nghiệp, truyền tải cảm giác "đơn giản tinh tế" qua nền trắng với văn bản xanh navy đậm (`#181d26`) và Airtable Blue (`#1b61c9`) làm màu nhấn tương tác chính. Họ font Haas (biến thể display + text) tạo nên hệ thống typography chính xác theo phong cách Thụy Sĩ với khoảng cách chữ dương xuyên suốt.
**Đặc điểm chính:**
- Nền trắng với văn bản xanh navy đậm (`#181d26`)
- Airtable Blue (`#1b61c9`) là màu CTA và liên kết chính
- Hệ thống font kép Haas + Haas Groot Disp
- Khoảng cách chữ dương trong văn bản thân (0.08px–0.28px)
- Nút bo tròn 12px, thẻ 16px–32px
- Bóng đổ nhiều lớp màu xanh: `rgba(45,127,249,0.28) 0px 1px 3px`
- Token theme ngữ nghĩa: cách đặt tên biến CSS `--theme_*`
## 2. Bảng màu & Vai trò
### Chính
- **Xanh navy đậm** (`#181d26`): Văn bản chính
- **Airtable Blue** (`#1b61c9`): Nút CTA, liên kết
- **Trắng** (`#ffffff`): Bề mặt chính
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Ngữ nghĩa
- **Xanh lá thành công** (`#006400`): `--theme_success-text`
- **Văn bản yếu** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Phụ đang hoạt động** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Trung tính
- **Xám đậm** (`#333333`): Văn bản phụ
- **Xanh trung** (`#254fad`): Biến thể xanh cho liên kết/nhấn
- **Viền** (`#e0e2e6`): Viền thẻ
- **Bề mặt sáng** (`#f8fafc`): Bề mặt tinh tế
### Bóng đổ
- **Tông xanh** (`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`)
- **Mềm** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Quy tắc typography
### Họ font
- **Chính**: `Haas`, dự phòng: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, dự phòng: `Haas`
### Phân cấp
| Vai trò | Font | Kích thước | Độ đậm | Chiều cao dòng | Khoảng cách chữ |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Đậm | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Tiêu đề phần | Haas | 40px | 400 | 1.25 | normal |
| Tiêu đề phụ | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Tiêu đề thẻ | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Tính năng | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Thân | Haas | 18px | 400 | 1.35 | 0.18px |
| Thân vừa | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Nút | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Chú thích | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Kiểu dáng thành phần
### Nút
- **Xanh chính**: `#1b61c9`, chữ trắng, padding 16px 24px, bo tròn 12px
- **Trắng**: nền trắng, chữ `#181d26`, bo tròn 12px, viền trắng 1px
- **Đồng ý cookie**: nền `#1b61c9`, bo tròn 2px (sắc nét)
### Thẻ: `1px solid #e0e2e6`, bo tròn 16px–24px
### Ô nhập liệu: Kiểu Haas tiêu chuẩn
## 5. Bố cục
- Khoảng cách: 1–48px (cơ sở 8px)
- Bo tròn: 2px (nhỏ), 12px (nút), 16px (thẻ), 24px (phần), 32px (lớn), 50% (tròn)
## 6. Chiều sâu
- Hệ thống bóng đổ nhiều lớp tông xanh
- Ánh sáng môi trường mềm: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Nên làm và không nên làm
### Nên: Dùng Airtable Blue cho CTA, Haas với tracking dương, nút bo tròn 12px
### Không nên: Bỏ qua khoảng cách chữ dương, dùng bóng đổ nặng
## 8. Hành vi responsive
Breakpoint: 425–1664px (23 breakpoint)
## 9. Hướng dẫn prompt cho Agent
- Văn bản: Xanh navy đậm (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Nền: Trắng (`#ffffff`)
- Viền: `#e0e2e6`
open-design/design-systems/airtable/DESIGN-zh-tw.md
+92
View File
@@ -0,0 +1,92 @@
# 受 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`
- 語義化主題 token：`--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`
### 層級
| 角色 | 字體 | 字號 | 字重 | 行高 | 字間距 |
|------|------|------|--------|-------------|----------------|
| 展示主標 | Haas | 48px | 400 | 1.15 | normal |
| 展示粗體 | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| 區塊標題 | Haas | 40px | 400 | 1.25 | normal |
| 二級標題 | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| 卡片標題 | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| 特性文字 | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| 內文 | Haas | 18px | 400 | 1.35 | 0.18px |
| 內文中號 | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| 按鈕 | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| 說明文字 | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN-zh.md
+92
View File
@@ -0,0 +1,92 @@
# 受 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`
- 语义化主题 token：`--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`
### 层级
| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 |
|------|------|------|--------|-------------|----------------|
| 展示主标 | Haas | 48px | 400 | 1.15 | normal |
| 展示粗体 | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| 区块标题 | Haas | 40px | 400 | 1.25 | normal |
| 二级标题 | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| 卡片标题 | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| 特性文字 | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| 正文 | Haas | 18px | 400 | 1.35 | 0.18px |
| 正文中号 | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| 按钮 | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| 说明文字 | Haas | 14px | 400–500 | 1.25–1.35 | 0.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`
open-design/design-systems/airtable/DESIGN.md
+92
View File
@@ -0,0 +1,92 @@
# Design System Inspired by Airtable
> Category: Design & Creative
> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
## 1. Visual Theme & Atmosphere
Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
**Key Characteristics:**
- White canvas with deep navy text (`#181d26`)
- Airtable Blue (`#1b61c9`) as primary CTA and link color
- Haas + Haas Groot Disp dual font system
- Positive letter-spacing on body text (0.08px–0.28px)
- 12px radius buttons, 16px–32px for cards
- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
- Semantic theme tokens: `--theme_*` CSS variable naming
## 2. Color Palette & Roles
### Primary
- **Deep Navy** (`#181d26`): Primary text
- **Airtable Blue** (`#1b61c9`): CTA buttons, links
- **White** (`#ffffff`): Primary surface
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
### Semantic
- **Success Green** (`#006400`): `--theme_success-text`
- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
### Neutral
- **Dark Gray** (`#333333`): Secondary text
- **Mid Blue** (`#254fad`): Link/accent blue variant
- **Border** (`#e0e2e6`): Card borders
- **Light Surface** (`#f8fafc`): Subtle surface
### Shadows
- **Blue-tinted** (`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`)
- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
## 3. Typography Rules
### Font Families
- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, fallback: `Haas`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|------|------|------|--------|-------------|----------------|
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
| Section Heading | Haas | 40px | 400 | 1.25 | normal |
| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
| Body | Haas | 18px | 400 | 1.35 | 0.18px |
| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
## 4. Component Stylings
### Buttons
- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
- **White**: white bg, `#181d26` text, 12px radius, 1px border white
- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
### Cards: `1px solid #e0e2e6`, 16px–24px radius
### Inputs: Standard Haas styling
## 5. Layout
- Spacing: 1–48px (8px base)
- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
## 6. Depth
- Blue-tinted multi-layer shadow system
- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
## 7. Do's and Don'ts
### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
### Don't: Skip positive letter-spacing, use heavy shadows
## 8. Responsive Behavior
Breakpoints: 425–1664px (23 breakpoints)
## 9. Agent Prompt Guide
- Text: Deep Navy (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Background: White (`#ffffff`)
- Border: `#e0e2e6`
open-design/design-systems/airtable/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Airtable Usage
Design System 2.0 package guide for OpenDesign agents and reviewers.
## Read Order
1. Read this file first to understand the package contract.
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
5. Inspect `preview/` pages when a visual sanity check is useful.
## Design Highlights
- White canvas with deep navy text (`#181d26`)
- Airtable Blue (`#1b61c9`) as primary CTA and link color
- Haas + Haas Groot Disp dual font system
- Positive letter-spacing on body text (0.08px–0.28px)
## Do
- Preserve the schema token names exactly so cross-brand switching stays reliable.
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
- Reuse component groups from `components.manifest.json` before inventing new controls.
- Treat `source/` files as audit evidence for the bundled fixture backfill.
## Avoid
- Avoid raw hex values outside the copied `:root` token block.
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
open-design/design-systems/airtable/components.html
+493
View File
@@ -0,0 +1,493 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/airtable. White canvas, Deep Navy text,
Airtable Blue accent, Haas typography, blue-tinted multi-layer card shadow."
/>
<style>
:root {
--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;
}
/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg-2);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
}
/* ─── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
section { padding-block: var(--section-y-desktop); }
section + section { border-top: 1px solid var(--border); }
@media (max-width: 1023px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 639px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography — Haas / Groot Disp, navy headings ─────── */
h1, h2, h3 {
font-family: var(--font-display);
color: var(--fg);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
margin: 0;
}
h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: 0.12px; }
p { margin: 0; }
.lead {
font-size: var(--text-lg);
color: var(--fg-2);
line-height: 1.5;
letter-spacing: 0.1px;
}
.body-muted { color: var(--muted); }
.body-sm { font-size: var(--text-sm); letter-spacing: 0.07px; }
.eyebrow {
font-size: var(--text-xs);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.28px;
font-weight: 500;
}
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
/* ─── Buttons — 12px radius, positive tracking ──────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 14px 24px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
letter-spacing: 0.08px;
line-height: 1.25;
cursor: pointer;
border: 1px solid transparent;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary {
background: var(--accent);
color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary {
background: #ffffff;
color: var(--fg);
border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--fg); }
/* ─── Inputs — 12px radius, navy-on-white ───────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg);
letter-spacing: 0.07px;
}
.field input {
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
letter-spacing: 0.08px;
outline: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input:focus-visible {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.field input::placeholder { color: var(--muted); }
.field-help { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.07px; }
/* ─── Cards — 16px radius, blue-tinted shadow ───────────── */
.card {
background: var(--surface);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--elev-raised);
transition: transform var(--motion-base) var(--ease-standard);
}
.card:hover { transform: translateY(-2px); }
.card .card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: color-mix(in oklab, var(--accent), transparent 88%);
color: var(--accent);
margin-block-end: var(--space-2);
}
.card-link {
color: var(--accent);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0.07px;
text-decoration: none;
margin-block-start: var(--space-2);
}
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ─── Badges ────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14px;
line-height: 1.6;
}
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 88%); }
.badge-muted { color: var(--fg-2); background: color-mix(in oklab, var(--fg), transparent 92%); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ─── Base-color chips (Airtable's hallmark) ────────────── */
.base-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.base-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14px;
color: var(--fg);
background: var(--surface);
border: 1px solid var(--border);
}
.base-chip::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
}
.base-chip-product::before { background: #1b61c9; }
.base-chip-marketing::before { background: #f5a623; }
.base-chip-design::before { background: #ec4899; }
.base-chip-sales::before { background: #16a34a; }
/* ─── Links ─────────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
kbd {
font-family: var(--font-mono); font-size: var(--text-xs);
padding: 2px 6px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--surface); color: var(--fg-2);
}
/* ─── Layout helpers ────────────────────────────────────── */
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-12); align-items: center; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
.hero-meta {
display: flex; flex-direction: column; gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--elev-raised);
}
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; }
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon-lg { width: 22px; height: 22px; flex-shrink: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.divider { height: 1px; background: var(--border-soft); }
</style>
</head>
<body>
<main class="container">
<section data-od-id="hero">
<div class="hero-grid">
<div class="stack-4">
<p class="eyebrow">Reference fixture · airtable</p>
<h1 style="font-size: 56px; line-height: 1.1">
Build the apps your team needs — without writing code.
</h1>
<p class="lead" style="max-width: 56ch">
Turn any workflow into a custom app. Airtable connects your data,
your processes, and your people in a single workspace that scales
from a side project to enterprise-wide.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">
Start building free
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="./DESIGN.md" class="btn btn-secondary">Watch the demo</a>
</div>
<p class="body-sm body-muted" style="margin-block-start: var(--space-2)">
Trusted by 500,000+ organizations · No credit card required
</p>
</div>
<aside class="hero-meta" aria-label="Workspace status">
<div class="row-between">
<span class="body-sm" style="color: var(--fg); font-weight: 500">
Marketing campaigns
</span>
<span class="badge badge-success">
<span class="badge-dot" aria-hidden="true"></span>
Synced
</span>
</div>
<div class="divider"></div>
<div class="stack-3">
<p class="body-sm" style="color: var(--fg-2); font-weight: 500">
Your bases
</p>
<div class="base-chips">
<span class="base-chip base-chip-product">Product</span>
<span class="base-chip base-chip-marketing">Marketing</span>
<span class="base-chip base-chip-design">Design</span>
<span class="base-chip base-chip-sales">Sales</span>
</div>
</div>
<p class="body-sm body-muted">
Press <kbd>⌘</kbd> <kbd>K</kbd> to jump between bases.
</p>
</aside>
</div>
</section>
<section data-od-id="features">
<div class="stack-3">
<p class="eyebrow">One workspace, every workflow</p>
<h2 style="max-width: 24ch">
Bring data, automations, and interfaces together.
</h2>
<p class="lead" style="max-width: 60ch; color: var(--fg-2)">
Configure once, deploy everywhere. Every base, app, and automation
stays in sync — across teams, devices, and stakeholders.
</p>
</div>
<div class="features-grid" style="margin-block-start: var(--space-8)">
<article class="card">
<span class="card-icon" aria-hidden="true">
<svg class="icon-lg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="16" rx="2"/>
<path d="M3 10h18M9 4v16"/>
</svg>
</span>
<h3>Flexible bases</h3>
<p class="body-muted">
Spreadsheets meet databases. Color-code records, link tables,
and surface the views each teammate actually needs.
</p>
<a href="./tokens.css" class="card-link">Explore bases →</a>
</article>
<article class="card">
<span class="card-icon" aria-hidden="true">
<svg class="icon-lg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24"/>
</svg>
</span>
<h3>Automations that run themselves</h3>
<p class="body-muted">
Trigger on a status change, a form submit, or a scheduled hour.
Connect Slack, Gmail, and 50+ apps without writing a line of code.
</p>
<a href="./DESIGN.md" class="card-link">See automations →</a>
</article>
<article class="card">
<span class="card-icon" aria-hidden="true">
<svg class="icon-lg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="3"/>
<path d="M3 9h18M9 9v12"/>
</svg>
</span>
<h3>Interfaces for every role</h3>
<p class="body-muted">
Wrap any base in a tailored interface — dashboards for execs,
forms for contractors, kanbans for project leads. One source of truth.
</p>
<a href="./tokens.css" class="card-link">Build an interface →</a>
</article>
</div>
</section>
<section data-od-id="form">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Get started in 90 seconds</p>
<h2>Spin up your first base.</h2>
<p class="body-muted" style="max-width: 48ch; font-size: var(--text-lg); line-height: 1.5">
Drop in your work email and we'll send a starter base template,
the API quick-start, and a 14-day Pro trial — no credit card needed.
</p>
<ul class="stack-3" style="list-style: none; padding: 0; margin: 0; color: var(--fg-2)">
<li style="display: flex; gap: var(--space-2); align-items: center">
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="var(--accent)" stroke-width="2.25"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 13l4 4L19 7"/>
</svg>
Unlimited bases on the free plan
</li>
<li style="display: flex; gap: var(--space-2); align-items: center">
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="var(--accent)" stroke-width="2.25"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 13l4 4L19 7"/>
</svg>
Native integrations with Slack, Gmail, Jira
</li>
<li style="display: flex; gap: var(--space-2); align-items: center">
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="var(--accent)" stroke-width="2.25"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 13l4 4L19 7"/>
</svg>
SOC 2 Type II, HIPAA-ready on Enterprise
</li>
</ul>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Work email</label>
<input id="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<p class="field-help">We'll send the starter base and API keys to this address.</p>
</div>
<div class="field">
<label for="team">Team size</label>
<input id="team" type="text" placeholder="e.g. 1–10, 50, 500+" />
<p class="field-help">Helps us recommend the right plan and templates.</p>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create my workspace</button>
<button type="button" class="btn btn-secondary">Talk to sales</button>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/components.manifest.json
+505
View File
@@ -0,0 +1,505 @@
{
"schemaVersion": 1,
"brandId": "airtable",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Airtable — reference components",
"description": "Reference fixture for design-systems/airtable. White canvas, Deep Navy text, Airtable Blue accent, Haas typography, blue-tinted multi-layer card shadow.",
"styleBlockCount": 1,
"selectorCount": 62,
"classCount": 35,
"elementCount": 27
},
"tokens": {
"declared": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--danger",
"--ease-standard",
"--elev-flat",
"--elev-raised",
"--elev-ring",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-1",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--surface-warm",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display",
"--warn"
],
"referenced": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--ease-standard",
"--elev-raised",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display"
],
"unusedDeclared": [
"--danger",
"--elev-flat",
"--elev-ring",
"--meta",
"--radius-lg",
"--space-1",
"--surface-warm",
"--text-2xl",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".badge",
".badge-dot",
".badge-muted",
".badge-success",
".base-chip",
".base-chip-design::before",
".base-chip-marketing::before",
".base-chip-product::before",
".base-chip-sales::before",
".base-chip::before",
".base-chips",
".body-muted",
".body-sm",
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".card",
".card .card-icon",
".card-link",
".card-link:hover",
".card:hover",
".container",
".divider",
".eyebrow",
".features-grid",
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help",
".form",
".form-actions",
".form-row",
".hero-actions",
".hero-grid",
".hero-meta",
".icon",
".icon-lg",
".lead",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"*",
"*::after",
"*::before",
"a",
"a:hover",
"body",
"h1",
"h2",
"h3",
"html",
"kbd",
"p",
"section",
"section + section"
],
"classes": [
"badge",
"badge-dot",
"badge-success",
"base-chip",
"base-chip-design",
"base-chip-marketing",
"base-chip-product",
"base-chip-sales",
"base-chips",
"body-muted",
"body-sm",
"btn",
"btn-primary",
"btn-secondary",
"card",
"card-icon",
"card-link",
"container",
"divider",
"eyebrow",
"features-grid",
"field",
"field-help",
"form",
"form-actions",
"form-row",
"hero-actions",
"hero-grid",
"hero-meta",
"icon",
"icon-lg",
"lead",
"row-between",
"stack-3",
"stack-4"
],
"elements": [
"a",
"article",
"aside",
"body",
"button",
"div",
"form",
"h1",
"h2",
"h3",
"head",
"html",
"input",
"kbd",
"label",
"li",
"main",
"meta",
"p",
"path",
"rect",
"section",
"span",
"style",
"svg",
"title",
"ul"
],
"groups": [
{
"id": "buttons",
"label": "Buttons and calls to action",
"present": true,
"selectors": [
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible"
],
"classes": [
"btn",
"btn-primary",
"btn-secondary"
],
"elements": [
"button"
],
"tokenReferences": [
"--accent",
"--accent-active",
"--accent-on",
"--ease-standard",
"--fg",
"--font-body",
"--motion-fast",
"--radius-sm",
"--space-2",
"--text-base"
]
},
{
"id": "inputs",
"label": "Form fields and controls",
"present": true,
"selectors": [
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help"
],
"classes": [
"field",
"field-help",
"form",
"form-actions",
"form-row"
],
"elements": [
"form",
"input",
"label"
],
"tokenReferences": [
"--accent",
"--fg",
"--focus-ring",
"--muted",
"--text-sm",
"--text-xs"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": true,
"selectors": [
".card",
".card .card-icon",
".card-link",
".card-link:hover",
".card:hover"
],
"classes": [
"card",
"card-icon",
"card-link"
],
"elements": [],
"tokenReferences": [
"--accent",
"--space-2",
"--text-sm"
]
},
{
"id": "badges",
"label": "Badges, chips, and status labels",
"present": true,
"selectors": [
".badge",
".badge-dot",
".badge-muted",
".badge-success"
],
"classes": [
"badge",
"badge-dot",
"badge-success"
],
"elements": [],
"tokenReferences": [
"--fg",
"--fg-2",
"--radius-pill",
"--space-2",
"--text-xs"
]
},
{
"id": "links",
"label": "Links and inline actions",
"present": true,
"selectors": [
"a",
"a:hover"
],
"classes": [],
"elements": [
"a"
],
"tokenReferences": [
"--accent-hover"
]
},
{
"id": "keyboard",
"label": "Keyboard hints",
"present": true,
"selectors": [
"kbd"
],
"classes": [],
"elements": [
"kbd"
],
"tokenReferences": []
},
{
"id": "icons",
"label": "Icon slots",
"present": true,
"selectors": [
".icon",
".icon-lg"
],
"classes": [
"icon",
"icon-lg"
],
"elements": [
"svg"
],
"tokenReferences": []
},
{
"id": "typography",
"label": "Typography scale and text utilities",
"present": true,
"selectors": [
".body-muted",
".body-sm",
".eyebrow",
".lead",
"h1",
"h2",
"h3"
],
"classes": [
"body-muted",
"body-sm",
"eyebrow",
"lead"
],
"elements": [
"h1",
"h2",
"h3",
"p"
],
"tokenReferences": [
"--accent",
"--fg",
"--font-display",
"--leading-tight",
"--muted",
"--text-3xl",
"--text-xs",
"--tracking-display"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"section",
"section + section"
],
"classes": [
"container",
"features-grid",
"hero-grid",
"row-between",
"stack-3",
"stack-4"
],
"elements": [
"main",
"section"
],
"tokenReferences": [
"--border",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--space-3",
"--space-4"
]
}
],
"literals": {
"colorExpressions": 8,
"pixelValues": 47,
"hardcodedFontFamilies": 5
}
}
open-design/design-systems/airtable/design-tokens.json
+701
View File
@@ -0,0 +1,701 @@
{
"schemaVersion": 1,
"format": "od-design-tokens/v1",
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"source": {
"tokensCss": "tokens.css",
"tokenContractReport": "source/token-contract.report.json"
},
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 2,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:101"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:102"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:103"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"value": "#181d26",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"value": "#333333",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:113"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"value": "rgba(4, 14, 32, 0.69)",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:114"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"value": "var(--muted)",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:115"
],
"sourceName": "--meta"
},
{
"name": "--border",
"value": "#e0e2e6",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"value": "#eef0f3",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"value": "#1b61c9",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:135"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"value": "#ffffff",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:136"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"value": "#254fad",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:137"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:138"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"value": "#006400",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:146"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#eab308",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:147"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#dc2626",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"Haas Groot Disp\", Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:157"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:158"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"type": "fontFamily",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:159"
],
"sourceName": "--font-mono"
},
{
"name": "--text-xs",
"value": "12px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:165"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"value": "14px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:166"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:167"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "20px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:168"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "32px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"value": "40px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:171"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "48px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:172"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"value": "1.35",
"type": "number",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:181"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.2",
"type": "number",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"value": "0",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:183"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:191"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"value": "8px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:192"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:193"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"value": "16px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:194"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"value": "20px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:195"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"value": "24px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:196"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"value": "32px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:197"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"value": "48px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:198"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"value": "96px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:204"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"value": "64px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:205"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"value": "48px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:216"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"value": "16px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "24px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"value": "9999px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"sourceName": "--radius-pill"
},
{
"name": "--elev-flat",
"value": "none",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:229"
],
"sourceName": "--elev-flat"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:230"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "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)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:231"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:242"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"value": "150ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:249"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"value": "200ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:250"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"type": "cubicBezier",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:251"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"value": "1200px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:257"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:258"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:259"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:260"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/airtable/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "airtable",
"name": "Airtable",
"category": "Design & Creative",
"description": "Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
"source": {
"type": "bundled",
"origin": "OpenDesign curated bundled fixture"
},
"files": {
"design": "DESIGN.md",
"tokens": "tokens.css",
"designTokens": "design-tokens.json",
"tailwind": "tailwind-v4.css",
"components": "components.html"
},
"usage": "USAGE.md",
"componentsManifest": "components.manifest.json",
"importMode": "normalized",
"craft": {
"applies": [],
"suggested": [
"color",
"accessibility-baseline"
],
"exemptions": []
},
"preview": {
"dir": "preview",
"pages": [
{
"path": "preview/colors.html",
"role": "colors",
"title": "Colors"
},
{
"path": "preview/typography.html",
"role": "typography",
"title": "Typography"
},
{
"path": "preview/spacing.html",
"role": "spacing",
"title": "Spacing"
}
]
},
"sourceFiles": {
"evidence": "source/evidence.md",
"tokens": "source/tokens.source.json",
"report": "source/token-contract.report.json"
}
}
open-design/design-systems/airtable/preview/colors.html
+39
View File
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable colors</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
.color { height: 88px; background: var(--value); }
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
</style>
</head>
<body>
<main>
<h1>Color roles</h1>
<section class="grid">
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/preview/spacing.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable spacing</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
</style>
</head>
<body>
<main>
<h1>Spacing and radius</h1>
<section class="stack">
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
</section>
<section class="radii">
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
<article style="border-radius: var(--radius-md)">--radius-md</article>
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/preview/typography.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable typography</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
</style>
</head>
<body>
<main>
<h1>Typography</h1>
<section class="type-stack">
<p class="eyebrow">Design & Creative</p>
<h2>Display sample for Airtable</h2>
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Airtable Source Evidence
## Source Scope
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
It does not claim a fresh crawl of the original upstream brand repository or website.
## Included Fixture Files
- design-systems/airtable/DESIGN.md
- design-systems/airtable/tokens.css
- design-systems/airtable/components.html
## Token Contract
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
open-design/design-systems/airtable/source/token-contract.report.json
+641
View File
@@ -0,0 +1,641 @@
{
"schemaVersion": 1,
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"sourceScope": "open-design-bundled-fixture",
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 2,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:101"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:102"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"layer": "B-slot",
"value": "var(--surface)",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:103"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"layer": "A1-identity",
"value": "#181d26",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"layer": "B-slot",
"value": "#333333",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:113"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"layer": "A1-identity",
"value": "rgba(4, 14, 32, 0.69)",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:114"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"layer": "B-slot",
"value": "var(--muted)",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:115"
],
"sourceName": "--meta"
},
{
"name": "--border",
"layer": "A1-identity",
"value": "#e0e2e6",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"layer": "B-slot",
"value": "#eef0f3",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"layer": "A1-identity",
"value": "#1b61c9",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:135"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"layer": "A2",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:136"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"layer": "A2",
"value": "#254fad",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:137"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"layer": "A2",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:138"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"layer": "A2",
"value": "#006400",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:146"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#eab308",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:147"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#dc2626",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"Haas Groot Disp\", Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:157"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:158"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"layer": "A2",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:159"
],
"sourceName": "--font-mono"
},
{
"name": "--text-xs",
"layer": "A1-structure",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:165"
],
"sourceName": "--text-xs"
},
{
"name": "--text-sm",
"layer": "A1-structure",
"value": "14px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:166"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:167"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:168"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"layer": "A1-structure",
"value": "40px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:171"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:172"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"layer": "A1-structure",
"value": "1.35",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:181"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.2",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"layer": "A1-structure",
"value": "0",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:183"
],
"sourceName": "--tracking-display"
},
{
"name": "--space-1",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:191"
],
"sourceName": "--space-1"
},
{
"name": "--space-2",
"layer": "A2",
"value": "8px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:192"
],
"sourceName": "--space-2"
},
{
"name": "--space-3",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:193"
],
"sourceName": "--space-3"
},
{
"name": "--space-4",
"layer": "A2",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:194"
],
"sourceName": "--space-4"
},
{
"name": "--space-5",
"layer": "A2",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:195"
],
"sourceName": "--space-5"
},
{
"name": "--space-6",
"layer": "A2",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:196"
],
"sourceName": "--space-6"
},
{
"name": "--space-8",
"layer": "A2",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:197"
],
"sourceName": "--space-8"
},
{
"name": "--space-12",
"layer": "A2",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:198"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"layer": "A1-structure",
"value": "96px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:204"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"layer": "A1-structure",
"value": "64px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:205"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:216"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"layer": "A2",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"layer": "A2",
"value": "9999px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"sourceName": "--radius-pill"
},
{
"name": "--elev-flat",
"layer": "A2",
"value": "none",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:229"
],
"sourceName": "--elev-flat"
},
{
"name": "--elev-ring",
"layer": "A2",
"value": "0 0 0 1px var(--border)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:230"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "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)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:231"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"layer": "A2",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:242"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"layer": "A2",
"value": "150ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:249"
],
"sourceName": "--motion-fast"
},
{
"name": "--motion-base",
"layer": "A2",
"value": "200ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:250"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"layer": "A2",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:251"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"layer": "A1-structure",
"value": "1200px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:257"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:258"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:259"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"layer": "A1-structure",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:260"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/airtable/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "airtable",
"files": [
"DESIGN.md",
"tokens.css",
"components.html"
],
"generatedAt": "2026-06-06T00:00:00.000Z",
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"layer": "A1-identity",
"source": "tokens.css:101"
},
{
"name": "--surface",
"value": "#ffffff",
"layer": "A1-identity",
"source": "tokens.css:102"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"layer": "B-slot",
"source": "tokens.css:103"
},
{
"name": "--fg",
"value": "#181d26",
"layer": "A1-identity",
"source": "tokens.css:112"
},
{
"name": "--fg-2",
"value": "#333333",
"layer": "B-slot",
"source": "tokens.css:113"
},
{
"name": "--muted",
"value": "rgba(4, 14, 32, 0.69)",
"layer": "A1-identity",
"source": "tokens.css:114"
},
{
"name": "--meta",
"value": "var(--muted)",
"layer": "B-slot",
"source": "tokens.css:115"
},
{
"name": "--border",
"value": "#e0e2e6",
"layer": "A1-identity",
"source": "tokens.css:122"
},
{
"name": "--border-soft",
"value": "#eef0f3",
"layer": "B-slot",
"source": "tokens.css:123"
},
{
"name": "--accent",
"value": "#1b61c9",
"layer": "A1-identity",
"source": "tokens.css:135"
},
{
"name": "--accent-on",
"value": "#ffffff",
"layer": "A2",
"source": "tokens.css:136"
},
{
"name": "--accent-hover",
"value": "#254fad",
"layer": "A2",
"source": "tokens.css:137"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"layer": "A2",
"source": "tokens.css:138"
},
{
"name": "--success",
"value": "#006400",
"layer": "A2",
"source": "tokens.css:146"
},
{
"name": "--warn",
"value": "#eab308",
"layer": "A2",
"source": "tokens.css:147"
},
{
"name": "--danger",
"value": "#dc2626",
"layer": "A2",
"source": "tokens.css:148"
},
{
"name": "--font-display",
"value": "\"Haas Groot Disp\", Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:157"
},
{
"name": "--font-body",
"value": "Haas, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:158"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"layer": "A2",
"source": "tokens.css:159"
},
{
"name": "--text-xs",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:165"
},
{
"name": "--text-sm",
"value": "14px",
"layer": "A1-structure",
"source": "tokens.css:166"
},
{
"name": "--text-base",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:167"
},
{
"name": "--text-lg",
"value": "20px",
"layer": "A1-structure",
"source": "tokens.css:168"
},
{
"name": "--text-xl",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:169"
},
{
"name": "--text-2xl",
"value": "32px",
"layer": "A1-structure",
"source": "tokens.css:170"
},
{
"name": "--text-3xl",
"value": "40px",
"layer": "A1-structure",
"source": "tokens.css:171"
},
{
"name": "--text-4xl",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:172"
},
{
"name": "--leading-body",
"value": "1.35",
"layer": "A1-structure",
"source": "tokens.css:181"
},
{
"name": "--leading-tight",
"value": "1.2",
"layer": "A1-structure",
"source": "tokens.css:182"
},
{
"name": "--tracking-display",
"value": "0",
"layer": "A1-structure",
"source": "tokens.css:183"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:191"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:192"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:193"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:194"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:195"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:196"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:197"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:198"
},
{
"name": "--section-y-desktop",
"value": "96px",
"layer": "A1-structure",
"source": "tokens.css:204"
},
{
"name": "--section-y-tablet",
"value": "64px",
"layer": "A1-structure",
"source": "tokens.css:205"
},
{
"name": "--section-y-phone",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:206"
},
{
"name": "--radius-sm",
"value": "12px",
"layer": "A2",
"source": "tokens.css:216"
},
{
"name": "--radius-md",
"value": "16px",
"layer": "A2",
"source": "tokens.css:217"
},
{
"name": "--radius-lg",
"value": "24px",
"layer": "A2",
"source": "tokens.css:218"
},
{
"name": "--radius-pill",
"value": "9999px",
"layer": "A2",
"source": "tokens.css:219"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:229"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:230"
},
{
"name": "--elev-raised",
"value": "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)",
"layer": "A2",
"source": "tokens.css:231"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"layer": "A2",
"source": "tokens.css:242"
},
{
"name": "--motion-fast",
"value": "150ms",
"layer": "A2",
"source": "tokens.css:249"
},
{
"name": "--motion-base",
"value": "200ms",
"layer": "A2",
"source": "tokens.css:250"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"layer": "A2",
"source": "tokens.css:251"
},
{
"name": "--container-max",
"value": "1200px",
"layer": "A1-structure",
"source": "tokens.css:257"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:258"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:259"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:260"
}
]
}
open-design/design-systems/airtable/system/artifacts/deck.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Pitch deck</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Deck module</p>
<h1>Airtable Executive deck</h1>
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Pitch deck</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/artifacts/email.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Email</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Email module</p>
<h1>Airtable Email module</h1>
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Email</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/artifacts/form.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Form page</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Form module</p>
<h1>Airtable Capture form</h1>
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Form page</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/artifacts/landing.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Landing page</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Landing module</p>
<h1>Airtable Launch narrative</h1>
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Landing page</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/artifacts/newsletter.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Newsletter</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Newsletter module</p>
<h1>Airtable Editorial issue</h1>
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Newsletter</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/artifacts/poster.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - Poster</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Poster module</p>
<h1>Airtable Campaign poster</h1>
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
<div class="actions">
<a class="button primary" href="#">Continue</a>
<a class="button secondary" href="#">View details</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Preview</p>
<h3>Poster</h3>
<p class="lead" style="font-size:16px">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="card-grid" style="grid-template-columns:1fr 1fr">
<div class="field"><label>Primary input<input value="Airtable" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/index.html
+128
View File
@@ -0,0 +1,128 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - system assets</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<p class="eyebrow">Design &amp; Creative</p>
<h1>Airtable system assets</h1>
<p class="lead">Generated preview modules for bundled official presets.</p>
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/kit.dark.html
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - dark component kit</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Design &amp; Creative system</p>
<h1>Airtable component kit</h1>
<p class="lead">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/kit.html
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airtable - component kit</title>
<style>
:root {
--accent: #1b61c9;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #254fad;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #e0e2e6;
--border-soft: #eef0f3;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #dc2626;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--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);
--elev-ring: 0 0 0 1px var(--border);
--fg: #181d26;
--fg-2: #333333;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.35;
--leading-tight: 1.2;
--meta: var(--muted);
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: rgba(4, 14, 32, 0.69);
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #006400;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 40px;
--text-4xl: 48px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: 0;
--warn: #eab308;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #181d26;
--od-muted: rgba(4, 14, 32, 0.69);
--od-border: #e0e2e6;
--od-accent: #1b61c9;
--od-radius: 16px;
--od-font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--od-font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Design &amp; Creative system</p>
<h1>Airtable component kit</h1>
<p class="lead">Bundled OpenDesign package for Airtable, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/airtable/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#1b61c9",
"colorPrimaryBg": "var(--surface)",
"colorPrimaryHover": "#254fad",
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
"fontSize": 16,
"borderRadius": 16
}
open-design/design-systems/airtable/tailwind-v4.css
+63
View File
@@ -0,0 +1,63 @@
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
@import "tailwindcss";
@import "./tokens.css";
@theme {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-warm: var(--surface-warm);
--color-fg: var(--fg);
--color-fg-2: var(--fg-2);
--color-muted: var(--muted);
--color-meta: var(--meta);
--color-border: var(--border);
--color-border-soft: var(--border-soft);
--color-accent: var(--accent);
--color-accent-on: var(--accent-on);
--color-accent-hover: var(--accent-hover);
--color-accent-active: var(--accent-active);
--color-success: var(--success);
--color-warn: var(--warn);
--color-danger: var(--danger);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-sans: var(--font-body);
--font-mono: var(--font-mono);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--leading-body: var(--leading-body);
--leading-tight: var(--leading-tight);
--tracking-display: var(--tracking-display);
--spacing-1: var(--space-1);
--spacing-2: var(--space-2);
--spacing-3: var(--space-3);
--spacing-4: var(--space-4);
--spacing-5: var(--space-5);
--spacing-6: var(--space-6);
--spacing-8: var(--space-8);
--spacing-12: var(--space-12);
--spacing-section-desktop: var(--section-y-desktop);
--spacing-section-tablet: var(--section-y-tablet);
--spacing-section-phone: var(--section-y-phone);
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-pill: var(--radius-pill);
--shadow-flat: var(--elev-flat);
--shadow-ring: var(--elev-ring);
--shadow-raised: var(--elev-raised);
--shadow-focus-ring: var(--focus-ring);
--duration-fast: var(--motion-fast);
--duration-base: var(--motion-base);
--ease-standard: var(--ease-standard);
--container-max: var(--container-max);
--spacing-container-desktop: var(--container-gutter-desktop);
--spacing-container-tablet: var(--container-gutter-tablet);
--spacing-container-phone: var(--container-gutter-phone);
}
open-design/design-systems/airtable/tokens.css
+261
View File
@@ -0,0 +1,261 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/airtable/tokens.css
*
* Structured token bindings for "Design System Inspired by Airtable" —
* the spreadsheet-database hybrid that talks to enterprise without
* shouting. A white canvas with deep-navy text, Airtable Blue as the
* single chromatic accent, Haas Swiss-precision typography, and a
* signature blue-tinted multi-layer shadow that makes cards feel
* built into the page rather than dropped onto it.
*
* Brand-specific schema decisions (each one bends a schema convention
* to match Airtable's voice rather than the cross-brand default):
*
* 1. `--accent` is Airtable Blue (#1b61c9), not deep navy. Deep
* navy is already `--fg`; the brand expresses primary CTAs by
* using `--accent` as the button background and reserves
* navy-on-white for headlines and body. `--accent-hover` binds
* to the documented "Mid Blue" #254fad rather than a generic
* color-mix darken — Airtable explicitly differentiates the
* hover tier as a discrete brand tone, not a calculated shade.
*
* 2. `--fg` is `#181d26` (Deep Navy), not `#000000`. The faint
* blue undertone at the top of the neutral ramp is part of the
* brand — pure black would clash with Airtable Blue and make
* the page read as harsh against the white canvas. `--fg-2`
* drops to `#333333` (documented Dark Gray) for body
* description; `--muted` binds to the documented Weak Text
* `rgba(4, 14, 32, 0.69)` so cross-brand `var(--muted)` calls
* land on Airtable's actual semitransparent navy tier instead
* of a flat gray.
*
* 3. `--surface-warm` aliases to `--surface` because Airtable has
* no warm tier — the canvas is white and the lifted surface is
* the documented `#f8fafc` light-surface, both cool. Adding a
* warm sibling would invent a tone the brand does not use.
*
* 4. `--elev-raised` is the full multi-layer Airtable shadow stack
* reproduced VERBATIM from DESIGN.md §6: a 1px dark hairline, a
* 2px ambient, a 3px blue-tinted (rgba(45,127,249,0.28))
* "Airtable glow" at 1px y-offset, and a 0.5px inner ring. The
* blue tint is the brand signature — it makes cards feel
* authored by the same hand as the Airtable Blue CTAs, instead
* of a generic gray-shadow drop. Never drop the third layer
* when overriding this token.
*
* 5. Radius scale binds 12 / 16 / 24 / 9999 (sm / md / lg / pill)
* per DESIGN.md §5. Buttons sit at 12px (documented), cards at
* 16px, large feature containers at 24px. The 2px "sharp"
* cookie-consent radius is component-specific and inlined
* where needed, not promoted to the schema. The 32px "large"
* radius is also section-specific; binding it to `--radius-lg`
* would over-round the typical card surface.
*
* 6. `--leading-body` is 1.35 (DESIGN.md body 18px / 24px), not
* the schema-conventional 1.5. Airtable runs body copy at a
* slightly tighter rhythm so dense product UI (table rows,
* record cards) does not feel sparse. `--leading-tight` is 1.2
* for headings, matching the documented 1.15–1.25 band.
*
* 7. `--tracking-display` is `0` (normal), not negative. DESIGN.md
* §3 explicitly lists display headings as `letter-spacing:
* normal` and body text as POSITIVE tracking (0.08–0.28px).
* The Haas family is engineered for positive tracking; mapping
* display to a negative em would fight the typeface. Body-tier
* positive tracking is applied at the component level (button,
* caption) since `--tracking-display` only covers display sizes.
*
* 8. `--success` is `#006400` (documented `--theme_success-text`),
* a darker forest green than the schema's #16a34a. Airtable's
* semantic green is intentionally deeper so it reads as a
* "confirmed / saved" tone against the white canvas rather
* than a vibrant alert.
*
* 9. Section rhythm is 96 / 64 / 48 (desktop / tablet / phone).
* DESIGN.md does not pin section padding numerically but the
* site's airy enterprise voice asks for generous vertical
* space — this matches the documented 8px-base spacing scale
* (96 = 12 × 8) without inventing a new tier. Container caps
* at 1200px, consistent with Airtable's documented
* 425–1664px responsive band centered on a desktop sweet spot.
*
* Source contracts:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* - A2 fallback parity: design-systems/_schema/defaults.css
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
*
* Keep this file additive: never invent token names not also
* documented in DESIGN.md or the schema. The Haas family does not
* need a CDN reference here — the font stack lists OS fallbacks
* (`-apple-system, system-ui, Segoe UI, Roboto`) per DESIGN.md §3
* so artifacts render acceptably even when Haas is not loaded.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface ─────────────────────────────────────────────────────
* White canvas, white lifted card. Airtable explicitly does not
* vary background between sections — depth comes from the
* blue-tinted shadow stack, not from tinting one surface against
* another. `--surface-warm` aliases to surface because the brand
* has no warm tier (DESIGN.md §2 lists only cool neutrals). */
--bg: #ffffff; /* primary canvas */
--surface: #ffffff; /* card / lifted container */
--surface-warm: var(--surface); /* alias — Airtable has no warm tier */
/* ─── Foreground ──────────────────────────────────────────────────
* Deep Navy → Dark Gray → Weak Text (semitransparent navy) →
* tertiary alias. The four-tier ramp matches DESIGN.md §2 + §6
* exactly: `#181d26` headings, `#333333` body, the documented
* `rgba(4, 14, 32, 0.69)` weak tier for captions, and `--meta`
* aliasing to muted because Airtable does not differentiate a
* fourth tertiary tone. */
--fg: #181d26; /* Deep Navy — primary text */
--fg-2: #333333; /* Dark Gray — secondary text / body */
--muted: rgba(4, 14, 32, 0.69); /* Weak Text — captions, meta */
--meta: var(--muted); /* alias — no distinct tertiary tier */
/* ─── Border ──────────────────────────────────────────────────────
* `#e0e2e6` is the documented card-border tone from DESIGN.md §4.
* `--border-soft` drops to a lighter `#eef0f3` for inner row
* separators (table rows, list dividers) that must not visually
* compete with the outer card edge. */
--border: #e0e2e6; /* card / input edge */
--border-soft: #eef0f3; /* inner row separator */
/* ─── Accent ──────────────────────────────────────────────────────
* Airtable Blue — the single chromatic accent across the brand.
* Used for primary CTAs, links, focus rings, and active-state
* highlights. Hard cap of ≤2 visible uses per screen (lint
* enforced); decorative blue is forbidden because the brand reads
* the accent as "this is the action".
*
* `--accent-hover` binds to the documented "Mid Blue" #254fad
* rather than a generic color-mix darken — Airtable explicitly
* differentiates the hover tier as a discrete brand tone. */
--accent: #1b61c9; /* Airtable Blue — CTA, links */
--accent-on: #ffffff; /* white label on blue */
--accent-hover: #254fad; /* Mid Blue — documented hover tone */
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ────────────────────────────────────────────────────
* `--success` is the documented `--theme_success-text` (#006400),
* a deeper forest green than the schema's #16a34a — Airtable's
* green reads as "confirmed / saved" against white, not as a
* vivid alert. Warn / danger inherit schema defaults because the
* brand has no defined yellow / red. */
--success: #006400; /* documented Success Green */
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ──────────────────────────────────────────────────
* Haas (display + Groot Disp variant) is Airtable's proprietary
* Swiss family. The OS fallbacks `-apple-system, system-ui,
* Segoe UI, Roboto` are documented in DESIGN.md §3 and ensure
* artifacts render legibly when Haas is not loaded. The Groot
* Disp variant carries display headings; Haas regular carries
* body and UI. */
--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;
/* Type scale — derived from DESIGN.md §3 hierarchy. The scale
* tops out at 48px (display hero); Airtable reads as "sophisticated
* simplicity" because hierarchy comes from weight + tracking
* variation within the Haas family, not from inflated px counts. */
--text-xs: 12px; /* metadata, tags */
--text-sm: 14px; /* caption, small UI */
--text-base: 16px; /* body medium, button */
--text-lg: 20px; /* feature copy */
--text-xl: 24px; /* card title */
--text-2xl: 32px; /* sub-heading */
--text-3xl: 40px; /* section heading */
--text-4xl: 48px; /* display hero */
/* `--leading-body` is 1.35 (DESIGN.md body 18px / 24px), not 1.5.
* Dense product UI (table rows, record cards) needs the tighter
* rhythm so rows do not feel sparse. `--leading-tight` is 1.2
* for headings, matching the documented 1.15–1.25 band.
* `--tracking-display` is `0` because DESIGN.md §3 explicitly
* lists display headings as `letter-spacing: normal`; positive
* body tracking (0.08–0.28px) is applied per-component. */
--leading-body: 1.35;
--leading-tight: 1.2;
--tracking-display: 0;
/* ─── Spacing ─────────────────────────────────────────────────────
* 8px base unit per DESIGN.md §5 (1–48px range). The 4/8/12/16/
* 20/24/32/48 tier covers structural rhythm; finer sub-tier
* increments (1–3px micro-padding inside chips and badges) are
* inlined per-component because they are too granular for the
* shared schema. */
--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 rhythm — Airtable's enterprise voice asks for generous
* vertical space between marketing sections without going gallery-
* empty. 96 desktop / 64 tablet / 48 phone matches the 8px base
* (96 = 12 × 8) and stays within the documented responsive band. */
--section-y-desktop: 96px;
--section-y-tablet: 64px;
--section-y-phone: 48px;
/* ─── Radius ──────────────────────────────────────────────────────
* DESIGN.md §5 radius scale: 2 / 12 / 16 / 24 / 32 / 50%. We bind
* the four schema tiers to: 12 (button/input, documented), 16
* (card, documented), 24 (large feature container, documented),
* 9999 (pill). The 2px "sharp" cookie-consent radius is
* component-specific and inlined where it appears; the 32px
* section radius would over-round typical surfaces and is
* intentionally not bound here. */
--radius-sm: 12px; /* buttons, inputs, chips */
--radius-md: 16px; /* cards, modals */
--radius-lg: 24px; /* featured containers */
--radius-pill: 9999px; /* badges, avatars */
/* ─── Elevation ───────────────────────────────────────────────────
* Airtable's signature: blue-tinted multi-layer shadow that makes
* cards feel authored by the same hand as the Airtable Blue CTAs.
* Four layers reproduced verbatim from DESIGN.md §6:
* 1px dark hairline (defines the edge)
* 2px ambient (soft surround)
* 3px blue glow @ 1y (the Airtable signature — never drop)
* 0.5px inset ring (subtle inner highlight) */
--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 ──────────────────────────────────────────────────
* 3px Airtable-Blue alpha glow — keyboard focus reads as
* "actionable" without competing with the saturated CTA fill.
* Matches schema default formula so cross-brand focus styles
* remain visually consistent. */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
/* ─── Motion ──────────────────────────────────────────────────────
* Standard durations + curve. Airtable's product UI uses motion
* to confirm direct manipulation (cell edits, drag-and-drop),
* not to choreograph entrances — 150/200ms feels responsive
* without dragging. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ──────────────────────────────────────────────────────
* 1200px max content width — sits in the middle of Airtable's
* documented 425–1664px responsive band. Gutters narrow on
* mobile to preserve line length on dense marketing copy. */
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}