zugzbot 1.0.20 → 1.0.22

package/.opencode/oh-my-design/web/references/airtable/.verification.md

@@ -1,136 +0,0 @@
-# Airtable — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `airtable.com/` (home — AI Workflows positioning)
-- `airtable.com/platform` (product platform page — different button system)
-
-### Raw observations
-
-**Marketing home — Primary "Sign up for free" / "Get started for free"**
-- bg `rgb(24, 29, 38)` = **`#181d26`** (Deep Navy — the marketing home Primary)
-- color `#ffffff`
-- border-radius **12px**
-- padding 16×24 (generous)
-- 55-56px height
-- 16px / weight 500 / Haas Grotesk
-- Use: every marketing-home Primary CTA — deep navy, generous radius
-
-**Marketing home — Secondary "Learn more" (outline)**
-- bg `#ffffff`
-- color `#181d26`
-- border 1px solid `#181d26` (verified visually)
-- radius 12px
-- padding 16×24
-- 56px / 16px·500
-- Use: paired secondary on home cards
-
-**Product Platform — Primary "Try it now"**
-- bg `rgb(27, 97, 201)` = **`#1b61c9`** (Airtable Blue — different surface, different geometry)
-- alternate variant `rgb(7, 104, 248)` = `#0768f8` (slightly brighter blue, also observed live)
-- color `#ffffff`
-- border-radius **10px** (tighter than home 12px)
-- padding 8×14 (much more compact)
-- 40px height (vs home 56px)
-- 18px / weight 500 / Haas Grotesk
-- Use: Product/Platform page Primary — visually different cadence from marketing home
-
-**Product Platform — Outline "Book demo"**
-- bg `rgba(255, 255, 255, 0.24)` (frosted on dark hero)
-- color `#181d26`
-- radius 10px
-- padding 8×14
-- 40px / 18px·500
-- Use: secondary on dark hero sections
-
-### Surface split (intentional, not conflict)
-
-Airtable runs **two parallel button systems** for marketing-home vs product-platform:
-- **Home (`airtable.com/`)** — Deep Navy `#181d26` + 12px + 16×24 + 56px + 16px·500 (generous, marketing register)
-- **Platform (`airtable.com/platform`)** — Airtable Blue `#1b61c9` + 10px + 8×14 + 40px + 18px·500 (compact, product register)
-
-The home uses Deep Navy because it's primarily showcasing AI workflows + customer logos on a clean white canvas — the navy reads as "enterprise-ready tool". The platform page uses brand blue because it dives into product/feature surfaces where the brand-color signal helps users recognize Airtable-specific UI.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/airtable` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Airtable` — no Airtable-branded entries (verified prior session)
-
-**Tier 2 status: unavailable.** Tier 1 (airtable.com home + platform) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 platform | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `#181d26` Deep Navy | `#1b61c9` Airtable Blue (also `#0768f8` brighter variant) | n/a | **Two systems** — home uses Navy, platform uses Brand Blue |
-| Primary radius | 12px | 10px | n/a | two systems |
-| Primary padding | 16×24 (generous) | 8×14 (compact) | n/a | two systems |
-| Primary height | 56px | 40px | n/a | two systems |
-| Primary font | 16px·500 | 18px·500 | n/a | two systems — platform font slightly larger to match compact button |
-| Outline pattern | white bg, navy text | frosted `rgba(255,255,255,0.24)` | n/a | both contextual |
-
-### Earlier mistakes
-- §4 prior version listed `#1b61c9` as the canonical Primary (correct for platform pages, but missed the **Deep Navy `#181d26` home Primary**). Now both documented separately.
-- §1 mentions `#181d26` as text color but didn't flag it as Primary CTA bg on home.
-
-### Unresolved
-- **None.** Two-system split documented intentionally.
-
----
-
-## Components in §4
-
-§4 already documents Buttons, Cards, Inputs. Audit needed:
-1. Add **Marketing Home Primary** (`#181d26` 12px 16×24 56px 16px·500) — currently missing as discrete variant
-2. Confirm **Platform Primary** (`#1b61c9` 10px 8×14 40px 18px·500) is documented
-3. Add Frosted Outline (rgba 0.24)
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- Founded **2012** (incorporated mid-2012; 2 years stealth, public launch March 2015)
-  - Source: [Airtable — Wikipedia](https://en.wikipedia.org/wiki/Airtable), [Taskade — Airtable History](https://www.taskade.com/blog/history-of-airtable)
-- Founders: **Howie Liu (CEO)**, **Andrew Ofstad**, **Emmett Nicholas** — engineers met through Duke connections
-  - Source: [Antler — Airtable with Andrew Ofstad](https://www.antler.co/blog/antler-early-days-episode-3-airtable-with-andrew-ofstad)
-- **Howie Liu background:** born 1989 College Station TX; Duke 2009 (Mech Eng + Public Policy); founded **Etacts** (Y Combinator W2010, age 20) → **acquired by Salesforce Dec 21, 2010**; Liu joined Salesforce as PM working on social CRM
-  - Source: [Howie Liu — Golden](https://golden.com/wiki/Howie_Liu-PBBK48Y)
-- **Emmett Nicholas:** former Stack Overflow software engineer (3+ years)
-- **Andrew Ofstad:** Duke EE+Econ; ex-Google PM on Android, led Google Maps redesign
-  - Source: Antler podcast
-- **Stealth period 2012-2014**, invite-only beta 2014, **public launch March 2015**
-- **Pre-seed angels (2012-2013):** Ashton Kutcher, Michael Birch (Bebo founder), Josh Reeves (Gusto)
-  - Source: Taskade history
-- **2015 funding:** Feb $3M (Caffeinated Capital, Freestyle Capital, Data Collective, CrunchFund); May $7.6M (Charles River Ventures, Ashton Kutcher)
-- **Series rounds:**
-  - Mar 2018: $52M Series B (with Airtable Blocks launch)
-  - Nov 2018: $100M Series C
-  - Sept 2020: $185M Series D
-  - Mar 2021: $270M Series E (Greenoaks-led)
-  - **Dec 13, 2021: $735M Series F** at **$11B valuation**
-  - Source: [Tracxn — Airtable Profile](https://tracxn.com/d/companies/airtable/__Xdq7WaiA79BBRynm6WLMDo_kp-jvnqvpW1GxVVOirjE)
-- **Total raised:** $1.35B
-- **2024-2025 pivot to AI:** "Build Enterprise-ready AI Workflows, Apps & Agents" — current homepage tagline (verified live 2026-05)
-
-### Voice samples (live-verified)
-- *"Sign up for free"* — homepage Primary CTA <!-- verified: airtable.com 2026-05 -->
-- *"Get started for free"* — repeated Primary <!-- verified: airtable.com 2026-05 -->
-- *"Learn more"* — outline secondary <!-- verified -->
-- *"Try it now"* / *"Book demo"* — platform-page CTAs <!-- verified: airtable.com/platform 2026-05 -->
-- *"Build Enterprise-ready AI Workflows, Apps & Agents"* — homepage page-title <!-- verified: airtable.com 2026-05 -->
-
----
-
-**Verified-against:**
-- Tier 1: airtable.com/, airtable.com/platform (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Wikipedia (Airtable), Taskade history, Antler podcast, Tracxn, Golden (Howie Liu)

package/.opencode/oh-my-design/web/references/airtable/DESIGN.md

@@ -1,314 +0,0 @@
----
-id: airtable
-name: Airtable
-country: US
-category: design-tools
-homepage: "https://www.airtable.com"
-primary_color: "#fcb400"
-logo:
-  type: simpleicons
-  slug: airtable
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: Airtable Trademark Guidelines
-  url: "https://www.airtable.com/company/trademark-guidelines"
-  type: brand
-  description: Airtable's trademark usage and brand guidelines.
-  og_image: "https://www.airtable.com/images/airtable-seo.jpg"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  note: "primary = Airtable Blue (#1b61c9); brand-amber (#fcb400) from primary_color frontmatter. Color belongs to user data, chrome stays neutral."
-  colors:
-    primary: "#1b61c9"
-    accent-blue: "#254fad"
-    brand: "#fcb400"
-    canvas: "#ffffff"
-    surface: "#f8fafc"
-    foreground: "#181d26"
-    body: "#333333"
-    on-primary: "#ffffff"
-    hairline: "#e0e2e6"
-    success: "#006400"
-  typography:
-    family: { sans: "Haas", display: "Haas Groot Disp" }
-    display-hero:    { size: 48, weight: 400, lineHeight: 1.15, use: "Hero headlines" }
-    display-bold:    { size: 48, weight: 900, lineHeight: 1.50, use: "Bold display, Haas Groot Disp" }
-    section:         { size: 40, weight: 400, lineHeight: 1.25, use: "Section headings" }
-    subheading:      { size: 32, weight: 450, lineHeight: 1.20, use: "Sub-headings" }
-    card-title:      { size: 24, weight: 400, lineHeight: 1.25, tracking: 0.12, use: "Card titles" }
-    feature:         { size: 20, weight: 400, lineHeight: 1.40, tracking: 0.1, use: "Feature text" }
-    body:            { size: 18, weight: 400, lineHeight: 1.35, tracking: 0.18, use: "Standard reading text" }
-    body-medium:     { size: 16, weight: 500, lineHeight: 1.30, tracking: 0.12, use: "Emphasized body" }
-    button:          { size: 16, weight: 500, lineHeight: 1.28, tracking: 0.08, use: "Button labels" }
-    caption:         { size: 14, weight: 450, lineHeight: 1.30, tracking: 0.18, use: "Captions, small labels" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
-  rounded: { sm: 2, md: 12, lg: 16, xl: 24, xxl: 32, full: 9999 }
-  shadow:
-    soft: "rgba(15,48,106,0.05) 0px 0px 20px"
-    standard: "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"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#1b61c9", fg: "#ffffff", radius: 12, padding: "16x24", font: "Haas 16/500", use: "primary CTA, blue-tinted lift" }
-    button-white: { type: button, bg: "#ffffff", fg: "#181d26", radius: 12, use: "secondary CTA on dark/blue surfaces" }
-    card: { type: card, bg: "#ffffff", radius: 16, use: "1px #e0e2e6 border, 24-32 radius featured, blue-tinted multi-layer shadow" }
-    input: { type: input, bg: "#ffffff", fg: "#181d26", radius: 12, padding: "12x16", use: "1px #e0e2e6 border" }
-    badge: { type: badge, bg: "#f8fafc", fg: "#181d26", radius: 12, font: "Haas 14/500", use: "1px #e0e2e6 border" }
----
-
-# Design System Inspiration of Airtable
-
-## 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**
-- Background: `#1b61c9`
-- Text: `#ffffff`
-- Radius: 12px
-- Padding: 16px 24px
-- Font: 16px / 500 / Haas
-- Use: Primary CTA buttons across the marketing site
-
-**White**
-- Background: `#ffffff`
-- Text: `#181d26`
-- Border: 1px solid `#ffffff`
-- Radius: 12px
-- Padding: 16px 24px
-- Font: 16px / 500 / Haas
-- Use: Secondary CTA on dark/blue surfaces
-
-**Cookie Consent**
-- Background: `#1b61c9`
-- Text: `#ffffff`
-- Radius: 2px
-- Padding: 16px 24px
-- Font: 16px / 500 / Haas
-- Use: Cookie banner accept (deliberately sharp 2px radius)
-
-### Inputs
-
-**Default**
-- Background: `#ffffff`
-- Text: `#181d26`
-- Border: 1px solid `#e0e2e6`
-- Radius: 12px
-- Padding: 12px 16px
-- Font: 16px / 400 / Haas
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Border: 1px solid `#e0e2e6`
-- Radius: 16px
-- Padding: 24px
-- Shadow: `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`
-- Use: Default card surface; blue-tinted multi-layer shadow
-
-**Large Section**
-- Background: `#ffffff`
-- Border: 1px solid `#e0e2e6`
-- Radius: 24px
-- Padding: 32px
-- Use: Larger feature/section containers
-
-### Badges
-
-**Default**
-- Background: `#f8fafc`
-- Text: `#181d26`
-- Border: 1px solid `#e0e2e6`
-- Radius: 12px
-- Padding: 4px 8px
-- Font: 14px / 500 / Haas
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-## 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 (`#1b61c9`) only for CTAs and links, set on a white (`#ffffff`) canvas with Deep Navy (`#181d26`) text
-- Set the Haas / Haas Groot Disp font system with positive letter-spacing on body and small text (0.08px–0.28px) — it is Airtable's typographic signature
-- Apply the radius scale by component size: 12px buttons, 16px standard cards, 24px sections, 32px large containers
-- Lift primary buttons with the signature blue-tinted multi-layer shadow (`rgba(45,127,249,0.28) 0px 1px 3px`) so elevation ties back to the brand color
-- Reserve color for user data and keep chrome neutral, signaling 'live work' with the spotlight surface (`rgba(249,252,255,0.97)`) plus subtle `#e0e2e6` borders
-- Name theme variables with the semantic `--theme_*` convention (e.g. `--theme_success-text` for `#006400`) to match Airtable's internal tokens
-
-### Don't
-- Skip the positive letter-spacing on body and caption text — it is what gives Airtable its Swiss-precision feel
-- Lean on heavy gray backgrounds or dark drop shadows for depth instead of the spotlight surface and the soft ambient `rgba(15,48,106,0.05) 0px 0px 20px` glow
-- Spread Airtable Blue (`#1b61c9`) across chrome or large backgrounds — color belongs to user data, not the UI frame
-- Reach for the deliberately sharp 2px radius outside its cookie-consent context where buttons and cards use 12px and up
-- Add bouncy spring motion or exceed the 150–400ms timing tokens, and respect `prefers-reduced-motion` by dropping the spotlight fade-in
-- Use forbidden voice like 'revolutionary database', 'no-code magic', or emoji in product chrome
-
-## 8. Responsive Behavior
-Breakpoints: 425–1664px (23 breakpoints)
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Airtable Blue (`#1b61c9`)
-- CTA hover: deepen to `#0f4ba0` (estimated ~10% darker)
-- Heading / body text: Deep Navy (`#181d26`)
-- Muted text: `~#6b7280` (estimated)
-- Page background: White (`#ffffff`)
-- Border default: `#e0e2e6`
-- Spotlight surface: `rgba(249,252,255,0.97)`
-- Success: Green (`#006400`)
-
-### Example Component Prompts
-- "Create an Airtable-style primary button: bg `#1b61c9`, white text, `12px` border-radius, `12px 20px` padding, Haas font weight 500 14px. Hover: bg darkens ~10%. Box-shadow: `rgba(45,127,249,0.28) 0px 1px 3px` for the signature blue-tinted lift."
-- "Build a card: white bg, `1px solid #e0e2e6` border, `16px` radius (or `24-32px` for featured cards), `24px` padding. Title in Haas Groot Disp 18px weight 600 `#181d26`. Body in Haas 14px weight 400 with `0.08-0.28px` positive letter-spacing for that Swiss precision."
-- "Design a navigation header: white sticky bar, Haas wordmark left, link nav (14px weight 500 `#181d26`, hover to `#1b61c9`), Airtable Blue CTA right. Bottom border `1px solid #e0e2e6` on scroll."
-
-### Iteration Guide
-1. Apply positive letter-spacing on body and small text (0.08-0.28px) — it's Airtable's typographic signature.
-2. Use the multi-layer blue-tinted shadow (`rgba(45,127,249,0.28) 0px 1px 3px`) on primary buttons — it ties elevation to the brand color.
-3. Use semantic `--theme_*` token naming when building shadcn variables — matches Airtable's internal convention.
-4. Cards use `12-32px` radius depending on size — small components 12px, hero cards up to 32px.
-5. Don't use heavy gray backgrounds — Airtable's depth comes from the spotlight surface (`rgba(249,252,255,0.97)`) and subtle borders.
-
-## 10. Voice & Tone
-
-Airtable's voice is **product-pragmatic and confidence-quiet** — speaks like an internal tools team explaining what just shipped. Hero messaging: *"Build enterprise-ready AI workflows, apps & agents"* (homepage 2026-05) — verb-first, capability-list, no hyperbole.
-
-| Context | Tone |
-|---|---|
-| CTA | Verb + noun. "Create base", "Add field", "Sync now" |
-| Empty state | Direct invitation. "Create your first base to get started" |
-| Error | Specific. "Couldn't connect to source. Check API key in Sync settings." |
-| Marketing | Capability-list, lower-case headings allowed |
-| Onboarding | One concept per screen, screenshots dominate |
-
-**Voice samples**
-- Marketing CTA: *"Sign up"* / *"Talk to sales"* <!-- verified: airtable.com homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary database", "no-code magic", emoji in product chrome.
-
-## 11. Brand Narrative
-
-Airtable was founded in **2012** by **Howie Liu** (CEO), **Andrew Ofstad**, and **Emmett Nicholas** in San Francisco — three engineers who met through Duke connections ([Airtable — Wikipedia](https://en.wikipedia.org/wiki/Airtable), [Antler — Airtable with Andrew Ofstad](https://www.antler.co/blog/antler-early-days-episode-3-airtable-with-andrew-ofstad)). Howie Liu had previously co-founded **Etacts** (YC W2010, age 20), a Gmail relationship-management tool **acquired by Salesforce on December 21, 2010** ([Golden — Howie Liu](https://golden.com/wiki/Howie_Liu-PBBK48Y)); the question that became Airtable formed during his Salesforce PM stint working on social CRM. Andrew Ofstad came from Google as PM on Android, leading the redesign of Google Maps. Emmett Nicholas was a Stack Overflow engineer for 3+ years. The thesis: spreadsheets and databases occupied opposite ends of "ease of use" vs "structural rigor" — Airtable proposed a hybrid. **2 years in stealth (2012-2014)** → invite-only beta 2014 → **public launch March 2015** ([Taskade history](https://www.taskade.com/blog/history-of-airtable)). Pre-seed angels included Ashton Kutcher + Michael Birch (Bebo) + Josh Reeves (Gusto). **Series F Dec 13, 2021: $735M at $11B valuation** ([Tracxn](https://tracxn.com/d/companies/airtable/__Xdq7WaiA79BBRynm6WLMDo_kp-jvnqvpW1GxVVOirjE)). Total raised: **$1.35B**. Evolved from collaborative database (2015-2020) to platform-with-AI-workflows (2024+) — current tagline *"Build Enterprise-ready AI Workflows, Apps & Agents"* (verified live 2026-05).
-
-What Airtable refuses: competing with Notion on docs, no-code-as-magic framing.
-
-## 12. Principles
-
-1. **Records are the unit.** Bases > tables > views > records. *UI implication:* hierarchies stay flat.
-2. **Views are personalized, data is shared.** *UI implication:* view chrome (filters, sort) at view level, never global.
-3. **Spotlight surface signals "live work".** `rgba(249,252,255,0.97)`. *UI implication:* canonical work surface = spotlight white.
-4. **Color belongs to user data, not chrome.** *UI implication:* avoid bright accents for chrome; reserve for user categorization.
-5. **AI workflows are first-class blocks.** *UI implication:* every AI step has visible config + output preview.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Airtable user segments (operations leaders, internal-tooling builders), not individual people.*
-
-**Renee Park, 34, San Francisco.** Operations Manager at Series B SaaS. Builds CRM-lite, vendor tracker, content calendar in Airtable.
-
-**Tomás Reyes, 41, Mexico City.** Independent consultant building Airtable-based tools for 8 clients. Cares about base portability + per-record pricing.
-
-**Linda Chen, 28, Singapore.** Marketing Ops at multinational. Heavy cross-table linking + automations user.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no bases)** | "Create your first base" CTA + template picker grid |
-| **Empty (no records)** | Inline row "+ Add a record" — no illustration |
-| **Loading (base opening)** | Spotlight surface fades in, table grid skeletons |
-| **Loading (sync)** | Inline progress chip on view header |
-| **Error (sync failed)** | Yellow warning chip on view header + "Reconnect source" link |
-| **Error (formula)** | Red `#ef4444` pill on field header + tooltip |
-| **Success (saved)** | Implicit — auto-saves, no toast. Cmd+Z works |
-| **Success (workflow run)** | Workflow log row appears with green check + duration |
-| **Skeleton (record detail)** | Field labels stay, values become `#e5e7eb` rectangles |
-| **Disabled** | 0.5 opacity. Read-only fields show lock icon |
-| **Loading (AI agent)** | Stepwise indicator + cancellable. Latency expectation set |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Cell commit |
-| `motion-fast` | 150ms | Hover |
-| `motion-standard` | 250ms | Modal, side panel |
-| `motion-slow` | 400ms | Spotlight surface arrival |
-
-Easings: `ease-enter cubic-bezier(0.2,0.6,0.25,1)`, `ease-exit cubic-bezier(0.4,0,1,1)`. No bouncy springs. `prefers-reduced-motion: reduce` removes spotlight fade-in.
-
----
-
-**Verified:** 2026-05-08 (B1 loop)
-**Tier 1 sources:** airtable.com (live DOM via playwright — round 50% icon buttons; ghost 12px; Sign up CTA)
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 1 (Philosophy):** airtable.com homepage; Howie Liu (CEO) public talks.
-**Style ref:** `notion`. **Conflicts unresolved:** none.

package/.opencode/oh-my-design/web/references/airtable/README.md

@@ -1,23 +0,0 @@
-# Airtable Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) extracted from the public [Airtable](https://airtable.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airtable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Airtable Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-dark-screenshot.png)
-
-### Light Mode
-![Airtable Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airtable/preview-screenshot.png)

package/.opencode/oh-my-design/web/references/airtable/preview-dark.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Design System Inspired by Airtable</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
-<style>
-  :root { --white:#181d26; --navy:#f0f2f5; --blue:#1b61c9; --gray:#b0b4be; --border:#2a2e38; --weak:rgba(240,242,245,0.6); --light:#1e2330; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }
-
-  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
-  .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
-  .nav-links { display:flex; gap:20px; list-style:none; }
-  .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
-  .nav-links a:hover { color:var(--blue); }
-  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }
-
-  .hero { padding:80px 24px 64px; text-align:center; }
-  .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
-  .hero h1 span { color:var(--blue); }
-  .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
-  .hero-buttons { display:flex; gap:12px; justify-content:center; }
-  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }
-  .btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }
-
-  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
-  .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
-  .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
-  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
-
-  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
-  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
-  .color-swatch-block { height:56px; }
-  .color-swatch-info { padding:8px; }
-  .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
-  .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
-  .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
-
-  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
-  .type-sample:last-child { border-bottom:none; }
-  .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
-
-  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .button-item { text-align:center; }
-  .button-label { font-size:9px; color:var(--weak); margin-top:4px; }
-
-  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
-  .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
-  .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
-  .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
-
-  .form-group { margin-bottom:12px; max-width:380px; }
-  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
-  .form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }
-  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
-  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
-  .form-input--error { border-color:#c00; }
-  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
-  .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
-
-  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
-  .spacing-item { text-align:center; }
-  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
-  .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
-
-  .radius-row { display:flex; gap:10px; flex-wrap:wrap; }
-  .radius-item { text-align:center; }
-  .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
-  .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
-
-  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
-  .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
-  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
-  .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
-
-  .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
-  .footer a { color:var(--white); text-decoration:underline; }
-
-  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
-</style>
-</head>
-<body>
-
-<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
-<div style="position:fixed;top:16px;right:16px;z-index:200;background:#1b61c9;color:#fff;font-size:9px;font-weight:500;padding:4px 10px;border-radius:12px;">Dark Mode</div>
-
-<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
-<div class="color-group-label">Primary</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
-</div>
-<div class="color-group-label">Neutral</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
-</div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
-<div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
-<div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
-<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
-<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);">Body — All your teams, all their workflows — connected in one workspace.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
-<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
-<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
-<div class="button-row">
-<div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
-<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
-</div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
-<div class="card-grid">
-<div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
-<div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
-<div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
-</div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
-<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
-<div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
-<div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
-<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
-<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
-<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
-<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
-
-<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
-
-</body>
-</html>