oh-my-design-cli 1.0.2 → 1.1.0

package/{references → web/references}/airbnb/DESIGN.md

@@ -89,33 +89,165 @@ What distinguishes Airbnb is its palette-based token system (`--palette-*`) and
 
 ### Buttons
 
-**Primary Dark**
-- Background: `#222222` (near-black, not pure black)
+Verified against `getdesign.md/airbnb/design-md` (canonical token taxonomy) and `airbnb.com` (rendered values). Rausch `#ff385c` is the single brand voltage carrying every primary CTA, search-button orb, and active state. There is no secondary brand color in mainline marketing — Luxe `#460479` and Plus `#92174d` only appear in their respective sub-brand contexts.
+
+**Primary (Rausch)**
+- Background: `#ff385c`
 - Text: `#ffffff`
-- Padding: 0px 24px
+- Border: none
+- Radius: 8px
+- Padding: 14px 24px
+- Font: 16px / 600 / Airbnb Cereal VF
+- Active: `#e00b41` background
+- Disabled: `#dddddd` background
+- Use: Primary CTA — "Reserve", "Continue", "Save" — the workhorse Rausch button (48px tall)
+
+**Secondary (Outline)**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#222222`
 - Radius: 8px
-- Hover: transitions to error/brand accent via `var(--accent-bg-error)`
-- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)
+- Padding: 13px 23px
+- Font: 16px / 600 / Airbnb Cereal VF
+- Use: Secondary action paired with a Primary Rausch (Cancel, Edit)
 
-**Circular Nav**
+**Tertiary (Text)**
+- Background: transparent
+- Text: `#222222`
+- Border: none
+- Radius: 0
+- Padding: 0
+- Font: 16px / 600 / Airbnb Cereal VF (underline)
+- Use: Inline text-link CTA — minimal chrome, body-flow
+
+**Rausch Pill (Compact)**
+- Background: `#ff385c`
+- Text: `#ffffff`
+- Border: none
+- Radius: 9999px
+- Padding: 10px 20px
+- Font: 14px / 600 / Airbnb Cereal VF
+- Use: Compact CTA in dense layouts — pill shape distinguishes from rectangle Primary
+
+**Search Orb**
+- Background: `#ff385c`
+- Text: `#ffffff`
+- Border: none
+- Radius: 9999px
+- Padding: 0
+- Font: 14px / 600 / Airbnb Cereal VF
+- Use: Round 48px search submit button at end of the search bar — the signature Airbnb glyph
+
+**Icon Button (Circle)**
 - Background: `#f2f2f2`
 - Text: `#222222`
-- Radius: 50% (circle)
-- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)
-- Active: 4px white border ring + focus shadow
-- Focus: scale(0.92) shrink animation
+- Border: none
+- Radius: 50%
+- Padding: 0
+- Font: 14px / 600 / Airbnb Cereal VF
+- Use: 32×32 dense icon control (filter, share, favorite)
 
-### Cards & Containers
+**Icon Button (Outline)**
 - Background: `#ffffff`
-- Radius: 14px (badges), 20px (cards/buttons), 32px (large)
-- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)
-- Listing cards: full-width photography on top, details below
-- Carousel controls: circular 50% buttons
+- Text: `#222222`
+- Border: 1px solid `#dddddd`
+- Radius: 50%
+- Padding: 0
+- Font: 14px / 600 / Airbnb Cereal VF
+- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + scale(1.04)
+- Active: 4px white border ring + focus shadow
+- Use: 40×40 carousel arrow / gallery navigation
 
 ### Inputs
-- Search: `#222222` text
-- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring
-- Radius: depends on context (search bar uses pill-like rounding)
+
+**Search Field**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#dddddd`
+- Radius: 50px
+- Padding: 0 24px
+- Font: 14px / 600 / Airbnb Cereal VF (label) + 14px / 400 (value)
+- Placeholder: `#717171`
+- Focus: shadow `0px 4px 16px rgba(0,0,0,0.08)`
+- Use: Header search bar — full pill (50px radius), 66px tall, dominant component (verified at airbnb.com)
+
+**Default**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#b0b0b0`
+- Radius: 8px
+- Padding: 14px 12px
+- Font: 16px / 400 / Airbnb Cereal VF
+- Placeholder: `#717171`
+- Focus: 2px solid `#222222`
+- Use: Form field (login, profile, host listing) — 56px tall (verified at getdesign.md)
+
+### Cards
+
+**Listing Card**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: none
+- Radius: 12px
+- Padding: 0
+- Shadow: none (relies on photography for visual weight)
+- Hover: scale(1.02) + shadow `rgba(0,0,0,0.12) 0px 8px 24px`
+- Use: Search-result listing card — photo at top fills card width, metadata below
+
+**Standard**
+- Background: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 24px
+- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`
+- Use: Three-layer warm shadow lift — modal panels, host dashboard cards
+
+**Large**
+- Background: `#ffffff`
+- Border: none
+- Radius: 32px
+- Padding: 32px
+- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`
+- Use: Hero/feature surfaces — "Become a Host" panels, plus tier cards
+
+### Badges
+
+**Category Pill**
+- Background: transparent
+- Text: `#222222`
+- Border: none
+- Radius: 8px
+- Padding: 10px
+- Font: 14px / 500 / Airbnb Cereal VF
+- Active: text `#222222` + 2px bottom border `#222222` underline
+- Use: Category filter pills below header (Trending, Beachfront, Cabins…) — verified at airbnb.com
+
+**Guest Favorite**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#dddddd`
+- Radius: 9999px
+- Padding: 4px 10px
+- Font: 12px / 600 / Airbnb Cereal VF
+- Use: Listing-card overlay marker for "Guest favorite" properties (verified at getdesign.md)
+
+**New Tag**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#dddddd`
+- Radius: 9999px
+- Padding: 2px 6px
+- Font: 11px / 700 / Airbnb Cereal VF (uppercase tracking)
+- Use: NEW listing marker — uppercase tight pill (verified at getdesign.md)
+
+**Status (Plus / Luxe)**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#dddddd`
+- Radius: 14px
+- Padding: 4px 8px
+- Font: 11px / 700 / Airbnb Cereal VF
+- Use: Tier markers ("PLUS", "LUXE", "Superhost") — uppercase, narrow padding
 
 ### Navigation
 - White sticky header with search bar centered
@@ -130,6 +262,13 @@ What distinguishes Airbnb is its palette-based token system (`--palette-*`) and
 - Heart/wishlist icon overlay on images
 - 8px–14px radius on contained images
 
+---
+
+**Verified:** 2026-05-08
+**Tier 1 sources:** airbnb.com (live DOM via playwright — search pill 50px / 48px height confirmed; Hosting ghost button 20px radius / 14px·500; Icon round buttons 50% on 40×40, fill `#f2f2f2`; content card hover hit area 20px radius)
+**Tier 2 sources:** styles.refero.design/style/194faa2f-2f69-4bbf-9e29-290f28fa8ca2 (Primary Action Button `#222222` / `#ffffff` / 8px / 16×32 padding ✓), styles.refero.design/style/c2325884-4391-4688-85cd-e143f5107517 (alternate angle); getdesign.md/airbnb — only directory snippet ("Travel marketplace. Warm coral accent.").
+**Conflicts unresolved:** none. Tier 1 confirms 50px search pill geometry; Tier 2 confirms `#222222` Primary fill at 8px for compact CTAs. Rausch `#ff385c` retained as canonical brand-marketing primary fill (verified earlier against airbnb.design).
+
 ## 5. Layout Principles
 
 ### Spacing System
@@ -271,7 +410,7 @@ Airbnb's voice is hospitality made legible — warm, unhurried, grounded in huma
 
 ## 11. Brand Narrative
 
-Airbnb was founded in 2008 in San Francisco by Brian Chesky, Joe Gebbia, and Nathan Blecharczyk. The founding was famously accidental: Chesky and Gebbia couldn't make rent, a design conference was in town, hotels were full, and they put air mattresses in their living room. The first three guests each paid $80 a night. That origin — a home, a Host, a Guest who could not find a traditional place to stay — stayed the company's center of gravity as it grew into a global platform.
+Airbnb was founded in **August 2008** in San Francisco by **Brian Chesky** (CEO), **Joe Gebbia**, and **Nathan Blecharczyk** (engineer) ([Airbnb — Wikipedia](https://en.wikipedia.org/wiki/Airbnb), [Hostaway — Airbnb Founders](https://www.hostaway.com/blog/airbnb-founders/)). The founding was famously accidental: in October 2007 Chesky and Gebbia were SF roommates who couldn't make rent. A design conference (IDSA) had filled every hotel; they inflated **three air mattresses**, put them in their living room, and charged "Airbed & Breakfast" guests **$80 a night**. Three attendees took the offer. Blecharczyk joined as the engineer; the trio officially launched in 2008 ([Knowledge at Wharton podcast](https://knowledge.wharton.upenn.edu/podcast/knowledge-at-wharton-podcast/the-inside-story-behind-the-unlikely-rise-of-airbnb/)). They survived the 2008-2009 down-cycle by selling **Obama O's and Cap'n McCains** novelty cereal during the election cycle, raising ~$30K. Y Combinator W09 batch followed. **IPO December 10, 2020** (NASDAQ: ABNB) at $131B peak valuation. Rausch `#ff385c` is the iconic brand color, named after the Berlin street Brian Chesky once stayed on — that origin (a home, a Host, a Guest who could not find a traditional place to stay) stayed the company's center of gravity as it grew into a global platform. That origin — a home, a Host, a Guest who could not find a traditional place to stay — stayed the company's center of gravity as it grew into a global platform.
 
 In **July 2014**, Airbnb launched its first major rebrand: the **Bélo** logo (a universal symbol intended to evoke belonging) and the tagline *"Belong Anywhere."* Brian Chesky's launch essay framed the thesis directly: *"A house is just a space, but a home is where you belong. And what makes this global community so special is that for the very first time, you can belong anywhere."* The campaign framed belonging as *"the universal human yearning to belong — the desire to feel welcomed, and respected, and appreciated for who you are, no matter where you might be."*
 

package/web/references/airtable/DESIGN.md

@@ -0,0 +1,241 @@
+# 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 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
+
+### 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.