Airtable

Overview

Airtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA — nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from **full-bleed signature cards** in `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.

Type voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 — emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: **Inter Display** at unusual mid-weights (475 / 575) and **pill-shaped buttons** (`{rounded.pill}`) that don't appear on any other page — a deliberate sub-system signaling "this page is about commercial precision."

**Key Characteristics:**

• Primary CTA is `{colors.primary}` (near-black ink) with white text and a `{rounded.lg}` (12px) corner — it reads as confident and final, never decorative.
• Secondary CTA is a `{colors.canvas}` button with `{colors.ink}` text and a hairline outline. The two together form Airtable's signature button pair.
• Hero is white canvas. There is no atmospheric gradient, no mesh, no background flourish. The brand strength comes from the type and the buttons sitting in clean whitespace.
• Brand voltage lives in **signature surface cards**: `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` carry full-bleed product callouts every few screens.
• Demo-card grids carry product UI fragments on `{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-cream}` and other warm pastel surfaces.
• Section rhythm: white canvas → coral signature card → white body → cream callout band → dark navy CTA → light gray CTA banner → footer. The canvas resets between every signature surface.
• Border radius is hierarchical: `{rounded.lg}` (12px) for primary CTAs and large signature cards, `{rounded.md}` (10px) for content cards and demo grids, `{rounded.sm}` (6px) for inputs, `{rounded.full}` for icon buttons. Pricing buttons jump to `{rounded.pill}` to mark themselves as a separate dialect.
• Vertical rhythm is `{spacing.section}` (96px) between major bands — universal across every page.

Colors

Brand & Accent

• **Primary** (`{colors.primary}` — #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the `{component.surface-dark}` band. Not "blue, then black" — black IS the primary throughout the marketing system.
• **Primary Active** (`{colors.primary-active}` — #0d1218): The press state on primary buttons.

Surface

• **Canvas** (`{colors.canvas}` — #ffffff): The default page surface; the floor of every editorial body.
• **Surface Soft** (`{colors.surface-soft}` — #f8fafc): Tabbed feature cards and the featured pricing tier.
• **Surface Strong** (`{colors.surface-strong}` — #e0e2e6): The light gray "Start building with Airtable" CTA banner near the footer.
• **Surface Dark** (`{colors.surface-dark}` — #181d26): The dark navy CTA cards used mid-page (for example "The path to 10× every person in your organization").
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1d1f25): The articles-page hero base behind the rainbow-stripe overlay.
• **Hairline** (`{colors.hairline}` — #dddddd): The 1px border tone for input outlines, table dividers, secondary-button outlines.

Text

• **Ink** (`{colors.ink}` — #181d26): The strongest text — h1/h2 display type and primary button text-on-light. Same hex as `{colors.primary}` because they are the same role expressed at type and button layers.
• **Body** (`{colors.body}` — #333840): The default running-text color.
• **Muted** (`{colors.muted}` — #41454d): Footer links, breadcrumbs, captions.
• **Border Strong** (`{colors.border-strong}` — #9297a0): The 1px outline color on disabled secondary buttons.
• **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): The text color on primary buttons and dark surfaces.

Signature Card Surfaces

These are the colors that carry Airtable's brand voltage. They appear as full-bleed, full-card surfaces — never as accents on a small element.

• **Coral** (`{colors.signature-coral}` — #aa2d00): The largest signature card on the homepage ("Production apps in prototype speed"). Full-bleed dark coral with white type.
• **Forest** (`{colors.signature-forest}` — #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.
• **Cream** (`{colors.signature-cream}` — #f5e9d4): The cream callout band ("The path to 10× every person in your organization") — a soft beige surface holding dark type and product UI fragments.
• **Peach** (`{colors.signature-peach}` — #fcab79), **Mint** (`{colors.signature-mint}` — #a8d8c4), **Yellow** (`{colors.signature-yellow}` — #f4d35e), **Mustard** (`{colors.signature-mustard}` — #d9a441): Demo-card surfaces that carry small product UI fragments inside the multi-card grid sections.

Semantic

• **Link** (`{colors.link}` — #1b61c9): Inline body links and anchor text. Darker on press to `{colors.link-active}` (#1a3866). Despite the `--theme_button-background-primary` CSS-variable name, this color is **not** the primary button color — it is the link color.
• **Info** (`{colors.info}` — #254fad) and **Info Border** (`{colors.info-border}` — #458fff): Inline info badges and focused-input outline.
• **Success** (`{colors.success}` — #006400) and **Success Border** (`{colors.success-border}` — #39bf45): Confirmation states.

Typography

Font Family

The system runs **Haas / Haas Groot Disp** (Airtable's licensed display + text type). Haas Groot Disp covers display sizes (h1 / h2); Haas Grotesk covers everything 24px and below. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`.

The pricing surface runs a separate **Inter Display** stack at mid-weights (475 / 575) — a deliberate sub-system signaling commercial precision.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 48px | 500 | 1.1 | 0 | Articles page h2 — second-tier editorial headline |

| `{typography.display-lg}` | 40px | 400 | 1.2 | 0 | Homepage h1 hero |

| `{typography.display-md}` | 32px | 400 | 1.2 | 0 | Platform-page h2 — feature-section headlines |

| `{typography.title-lg}` | 24px | 400 | 1.35 | 0.12px | Section titles |

| `{typography.title-md}` | 20px | 400 | 1.5 | 0 | Sub-section titles in tabbed feature cards |

| `{typography.title-sm}` | 18px | 500 | 1.4 | 0 | Article-card titles |

| `{typography.label-md}` | 16px | 500 | 1.4 | 0 | Demo-card titles, list labels |

| `{typography.button}` | 16px | 500 | 1.4 | 0 | Standard CTA button labels |

| `{typography.body-md}` | 14px | 400 | 1.25 | 0 | Body copy, footer links, top-nav items |

| `{typography.caption}` | 14px | 500 | 1.35 | 0.16px | Light captions and meta text |

| `{typography.legal}` | 13.12px | 600 | 1.2 | 0 | Cookie/legal CTA buttons |

| `{typography.pricing-display}` | 44.8px | 475 | 1.1 | 0 | Pricing-page h1 |

| `{typography.pricing-section}` | 28px | 475 | 1.2 | 0 | Pricing-page section heads |

| `{typography.pricing-card-title}` | 20px | 475 | 1.3 | 0 | Pricing tier card plan name |

Principles

The Haas system prefers weight 400 for display sizes — a 40px h1 is **not** bold. Visual emphasis is delegated to size, color contrast, and the signature surface cards. Where the system does want weight, it pivots to 500 (sub-titles, buttons, article titles), never 600 or 700 in the editorial body. The only true bold (600) lives in `{typography.legal}` — a sign that boldness is reserved for terms-of-service surfaces, not marketing.

The pricing-page sub-system uses Inter Display at `font-weight: 475` — a custom mid-weight between regular (400) and medium (500), shipped as a variable font.

Note on Font Substitutes

If Haas Groot Disp and Haas Grotesk are unavailable, **Inter Display** (variable) is the closest open-source substitute for both — adjust line-height down by ~5% to match Haas's tighter cap-height. For the pricing sub-system, use Inter Display directly. On macOS / iOS, **system-ui** is sufficient; on Windows, the chain falls through to Segoe UI, which is a usable but slightly cooler substitute.

Layout

Spacing System

• **Base unit:** 4px (all spacing snaps to 4-multiples).
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding (vertical):** `{spacing.section}` (96px) is the universal vertical rhythm constant — every major editorial band on every page uses 96px top + 96px bottom internal padding.
• **Card internal padding:** `{spacing.xl}` (32px) for tabbed feature cards and pricing tier cards; `{spacing.xxl}` (48px) inside signature coral / forest / dark cards; `{spacing.lg}` (24px) for cream callouts and demo-grid cards.
• **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside denser logo strips and footer column gutters.

Grid & Container

• **Max content width:** ~1280px centered, with `{spacing.xxl}` (48px) horizontal breathing room.
• **Editorial body:** Single 8/12-column at large breakpoints, collapsing to single-column on mobile.
• **Demo-card grids:** 3 or 4 columns at desktop, 2 at tablet, 1 at mobile. Card sizes are deliberately uneven within the grid to dodge a uniform "spec sheet" feel.
• **Logo strip:** 6 monochrome partner logos in a single row at desktop; wraps to 3-up on mobile.

Whitespace Philosophy

Airtable uses whitespace as the dominant atmospheric tool. Hero sections sit in 96px+ of pure whitespace above and below the headline + sub-headline pair, with no decoration in that whitespace. The hero is intentionally calm — there is no gradient, no aurora, no atmospheric mesh behind the type. The system trusts whitespace alone to do the framing.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, footer |

| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav rails, comparison-table dividers, secondary buttons |

| Button rest | Soft drop with subtle blue-tinted glow at low alpha | Primary CTA buttons (the blue tint is a holdover from the link color and reads as a faint accent under the dark button) |

| Button focus | Outer 2px blue ring at higher alpha | Keyboard focus state on primary buttons |

| Card flat | No shadow; relies on color contrast against the surface band | Signature coral / forest / dark cards, cream callouts, demo-grid cards |

The elevation philosophy is **color-block first, shadow second**. Shadows are minimal; depth is delegated to the contrast between white canvas and signature surface cards. There is no soft-glow / atmospheric-shadow / heavy-elevation language anywhere in the marketing system.

Decorative Depth

• **Vertical rainbow stripes** appear on the articles hero only — multi-color vertical bands sitting on `{colors.surface-dark-elevated}`. This is a single-page treatment, not a system-wide signature.
• **Photography-as-depth** in the demo-card grid: every card carries a real product UI screenshot or mockup, contributing depth through legible artifact density rather than decorative effects.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 2px | Cookie-consent and legal CTA buttons — system-required surfaces |

| `{rounded.sm}` | 6px | Text inputs, small inline buttons |

| `{rounded.md}` | 10px | Secondary content cards, article cards, cream callouts |

| `{rounded.lg}` | 12px | Primary CTA buttons, signature surface cards, tabbed feature cards |

| `{rounded.pill}` | 9999px | Pricing-page CTA buttons (sub-system only) |

| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |

Photography Geometry

Product UI screenshots inside demo-card grids retain native aspect ratios (typically 4:3 or 16:10) and crop into `{rounded.md}` containers. Hero illustrations bleed full-width with no rounding. Article-card thumbnails use 16:9 with `{rounded.md}` corners. Avatars in testimonials use `{rounded.full}` (perfect circles). Pricing comparison table images stay rectangular with no rounding.

Components

> **No hover states documented.** Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the `components:` front matter.

**`top-nav`** — A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in `{typography.body-md}`; the right cluster carries a "Book Demo" outline link, "Sign up for free" `{component.button-primary}`, and "Log In" text link. The nav stays light on every page — Airtable does not invert the nav over dark sections.

Buttons

**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (near-black), text `{colors.on-primary}`, type `{typography.button}`, padding 16px × 24px, rounded `{rounded.lg}` (12px). This is the "Get started for free" / "Sign up for free" button visible on every hero. It reads as confident and final — not decorative — which is why the system uses it sparingly (one per viewport).

• Active state: `button-primary-active` darkens to `{colors.primary-active}` (#0d1218).

**`button-secondary`** — White outline button (e.g. "Book demo"). Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.lg}` (12px), 1px hairline outline. Sits next to `{component.button-primary}` as the "less-committed" choice.

**`button-secondary-on-dark`** — Same shape as `{component.button-secondary}` but used on signature coral / forest / dark surfaces. Background `{colors.canvas}`, text `{colors.ink}` — the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.

**`button-pricing-pill`** — The pricing-page CTA family. Background `{colors.canvas}`, text `{colors.pricing-ink}`, rounded `{rounded.pill}` (9999px), padding 12px × 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.

**`button-legal`** — Cookie-consent and legal-banner CTAs. Background `{colors.link}`, text `{colors.on-primary}`, type `{typography.legal}` (13.12px / 600), rounded `{rounded.xs}` (2px), padding 12px × 10px. The 2px corner radius and 600 weight signal "this is a required system surface," not a designed brand surface.

**`button-icon-circular`** — 40px × 40px circular button with `{colors.canvas}` background, hairline border, and `{colors.ink}` icon. Used for carousel controls, "share", and "back" affordances.

**`text-link`** — Inline body links in `{colors.link}` (#1b61c9, the actual link blue). No underline by default. Type inherits `{typography.body-md}`.

Cards & Containers

**`hero-band`** — The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient — just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding `{spacing.section}` (96px).

**`signature-coral-card`** — The large full-bleed coral card on the homepage ("Production apps in prototype speed"). Background `{colors.signature-coral}` (#aa2d00, a dark coral / oxide red), text `{colors.on-primary}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}`, supporting copy in `{typography.body-md}`, and `{component.button-secondary-on-dark}` as the CTA.

**`signature-forest-card`** — A deep green signature card (`{colors.signature-forest}` — #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.

**`hero-card-dark`** — The dark navy mid-page CTA card (e.g. "The path to 10× every person in your organization"). Background `{colors.surface-dark}` (#181d26), text `{colors.on-dark}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). The same color as `{colors.primary}` because the system uses ink as both type color and signature dark surface.

**`feature-card-tabbed`** — Light-cream cards (e.g. the "Coke / Pelosi / Conde Nast / Time Inc" tabbed feature card on the homepage). Background `{colors.surface-soft}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Left rail carries vertically-stacked tab labels in `{typography.title-md}`; right pane shows the active tab's content (illustration + body copy + small CTA).

**`cream-callout-card`** — Beige callout cards (`{colors.signature-cream}`). Rounded `{rounded.md}` (10px), internal padding `{spacing.lg}` (24px). Carry product UI fragments or stat callouts — softer than the dark/coral signature cards but still a deliberate brand surface.

**`demo-grid-card`** — Used in multi-card grids that punctuate every page. Background `{colors.canvas}` or one of the demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`), rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform "spec sheet" feel.

**`logo-strip`** — Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in `{colors.muted}`, surface is `{colors.canvas}`, vertical padding `{spacing.xl}` (32px). 6 logos at desktop, 3 at mobile.

**`article-card`** — The trending-stories grid on the articles page. Background `{colors.canvas}`, rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an `{typography.title-sm}` title, and a meta line. 3-up at desktop.

**`topic-filter-rail`** — The left rail on the articles page. 240px wide, `{colors.canvas}` background, `{typography.body-md}`, vertically grouped category headings ("Marketing", "Product", "Project management", "Operations") with sub-bullets. Active item carries a small numeric count badge.

Inputs & Forms

**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.sm}` (6px), padding 12px × 16px, height 44px. 1px hairline border in `{colors.hairline}`.

**`text-input-focus`** — Focus state. Border thickens or recolors to `{colors.info-border}`.

Pricing Sub-System

**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}`, text `{colors.pricing-ink}`, type `{typography.pricing-card-title}` for the plan name, rounded `{rounded.md}` (10px), internal padding `{spacing.xl}` (32px). Carries the plan name, a price block in `{typography.pricing-display}` (44.8px / 475), feature checklist, and a `{component.button-pricing-pill}` at the bottom.

**`pricing-tier-card-featured`** — The featured tier (typically "Team" or "Business"). Background shifts to `{colors.surface-soft}`. No accent border, no badge — the background tone shift is the only signal.

**`pricing-comparison-row`** — Each row of the long comparison table at the bottom of the pricing page. Labels in the left column; checkmarks or values across 4 plan columns. 12px vertical padding per row, hairline divider between rows.

Navigation Variants

**`footer`** — Light surface (`{colors.canvas}`), 6-column link list at desktop covering Platform / Solutions / Resources / Learn / Company sub-trees. Vertical padding `{spacing.section}` divided across upper link block and lower legal row. Type `{typography.body-md}`.

**`cta-band-light`** — The light gray "Start building with Airtable" CTA strip near the footer. Background `{colors.surface-strong}` (#e0e2e6), text `{colors.ink}`, rounded `{rounded.lg}` (12px), padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}` and a `{component.button-primary}`.

Signature Components

**Articles Vertical Rainbow Stripe Hero** — The articles-page hero treatment. Multi-color vertical bands at varying widths sitting on `{colors.surface-dark-elevated}`. The h1 + sub-head + CTA cluster sits center-left on top of the stripes. This is a single-page hero treatment, not a system-wide signature — do not promote it to a multi-page pattern.

Do's and Don'ts

Do

• Keep `{component.button-primary}` near-black. The brand's primary CTA is `{colors.primary}`, not the link blue. Mixing them up turns a confident hero into a confused one.
• Reserve `{component.button-primary}` for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
• Use `{component.button-secondary}` (white with hairline outline) as the natural pair with `{component.button-primary}`. The two together form Airtable's signature button row.
• Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.
• Use `{component.signature-coral-card}`, `{component.signature-forest-card}`, and `{component.hero-card-dark}` to break editorial monotony. These are the brand's voltage moments.
• Keep `{component.demo-grid-card}` heights uneven within a grid. Uniform heights feel like a spec sheet.
• Treat the pricing surface as its own dialect: keep `{typography.pricing-display}`, `{typography.pricing-card-title}`, and `{component.button-pricing-pill}` together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.
• Anchor every editorial band with `{spacing.section}` (96px) vertical padding.

Don't

• Don't make `{colors.link}` (#1b61c9) the primary button color. It is the link color. The primary button is `{colors.primary}` (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.
• Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airtable.
• Don't bold display-weight type. `{typography.display-xl}` and `{typography.display-lg}` are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template.
• Don't use `{rounded.pill}` outside the pricing surface. It's a sub-system signal, not a general radius option.
• Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog.
• Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.
• Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Single-column body; top nav collapses to hamburger; demo-grid drops to 1-up; signature cards stay full-bleed; logo strip wraps to 2 rows; footer collapses to single-column |

| Tablet | 768–1024px | 2-up demo-grid; top nav stays horizontal but tightens; cream-callout cards stack 2-up; pricing comparison table becomes horizontally scrollable |

| Desktop | 1024–1440px | 3-up demo-grid (and 4-up for tighter content); full top-nav with all menu items visible; pricing tier cards render 4-across |

| Wide | > 1440px | Same as Desktop with more outer breathing room; max content width caps at ~1280px and the page adds outer margin rather than scaling type up |

Touch Targets

• `{component.button-primary}` and siblings render at 48 × 48px minimum (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44.
• `{component.button-icon-circular}` is exactly 40 × 40px — slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.
• `{component.text-input}` height is 44px.

Collapsing Strategy

• Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.
• Card grids reduce columns rather than scaling cards down.
• The `{component.feature-card-tabbed}` re-stacks the tab rail above the content pane on mobile.
• The pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll.

Image Behavior

• Demo-card UI screenshots crop to fit their container rather than scaling up.
• Hero illustrations bleed full-width on mobile, losing horizontal margin.
• Signature card images (inside coral / forest / dark cards) compress to their card width without cropping.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.signature-coral-card}`).

2. When adding a new component, decide first which sub-system it belongs to: the main editorial system (Haas, `{rounded.lg}`/`{rounded.md}`) or the pricing sub-system (Inter Display, `{rounded.pill}`).

3. Variants of an existing component (`-active`, `-disabled`, `-focus`) live as separate entries in `components:` — never as nested state objects.

4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value. Hex codes appear at most once next to the reference.

5. Never document hover. The system documents Default and Active/Pressed states only.

6. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

7. When in doubt about emphasis: bigger type before bolder type, signature surface card before solid accent.

Known Gaps

• The exact hex values of pastel demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`) are inferred from screenshot pixel sampling. Some product launches may swap these surfaces seasonally.
• Hover behavior across all components is not documented (per global no-hover policy).
• Animation and transition timings are not in scope.
• Form validation states beyond `text-input-focus` are not extracted — error and success states for inputs would need a dedicated form page to confirm.
• The pricing comparison table's checkmark glyph and column-divider widths are described structurally but not formalized as tokens.
• The CSS variable `--theme_button-background-primary: #1b61c9` exists at `:root` but is not used as the primary CTA color anywhere on the marketing site. It maps to the link/info color role instead. Documented here so future extractions don't re-trip over the misleading variable name.

개요

Airtable의 마케팅 표면은 조용히 사설입니다. 기본 분위기는 흰색 캔버스, 어두운 잉크 유형, 넉넉한 공백, 검정색에 가까운 알약 CTA입니다. 섹션이 필요할 때까지는 관심을 끌기 위해 싸우는 것이 없습니다. 브랜드 전압은 그라데이션 워시나 액센트 벽에서 나오는 것이 아닙니다. 이는 두세 화면마다 긴 스크롤 설명 페이지를 강조하는 `{colors.signature-coral}`, `{colors.signature-forest}` 및 `{colors.surface-dark}`의 **풀 블리드 서명 카드**에서 나옵니다. 이러한 서명 밴드 사이에 있는 페이지는 헤드라인, 보조 카피, 작은 이미지 클러스터, 호흡 공간 등 인쇄 잡지처럼 읽혀집니다.

유형 음성은 적당한 무게(디스플레이용 400, 자막 및 버튼용 500)의 Haas Grotesk입니다. 디스플레이 헤드라인은 500보다 굵게 표시되지 않습니다. 무게가 아닌 크기와 색상 대비가 강조됩니다. 본문 사본은 전체적으로 14px/400으로 유지됩니다. 가격 책정 표면은 고유한 방언을 실행합니다. 특이한 중간 무게(475 / 575)의 **인터 디스플레이**와 다른 페이지에는 표시되지 않는 **알약 모양의 버튼**(`{rounded.pill}`) — "이 페이지는 상업적 정확성에 관한 것입니다."라는 신호를 보내는 의도적인 하위 시스템입니다.

**주요 특징:**

• 기본 CTA는 흰색 텍스트와 `{rounded.lg}`(12px) 모서리가 있는 `{colors.primary}`(검은색에 가까운 잉크)입니다. 자신감 있고 최종적인 것으로 읽히며 결코 장식적이지 않습니다.
• 보조 CTA는 `{colors.ink}` 텍스트와 가는 윤곽선이 있는 `{colors.canvas}` 버튼입니다. 이 두 개가 함께 Airtable의 시그니처 버튼 쌍을 형성합니다.
• 영웅은 흰색 캔버스입니다. 대기 그라데이션, 메쉬, 배경 번성 등이 없습니다. 브랜드의 강점은 깔끔한 여백에 자리잡은 활자와 버튼에서 나옵니다.
• 브랜드 전압은 **시그니처 표면 카드**에 있습니다. `{colors.signature-coral}`, `{colors.signature-forest}` 및 `{colors.surface-dark}`는 몇 화면마다 전체 제품 설명선을 표시합니다.
• 데모 카드 그리드는 `{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-cream}` 및 기타 따뜻한 파스텔 표면에 제품 UI 조각을 전달합니다.
• 섹션 리듬 : 화이트 캔버스 → 코랄 시그니처 카드 → 화이트 바디 → 크림 콜아웃 밴드 → 다크 네이비 CTA → 라이트 그레이 CTA 배너 → 바닥글. 캔버스는 모든 서명 표면 사이에서 재설정됩니다.
• 테두리 반경은 계층적입니다. 기본 CTA 및 대형 서명 카드의 경우 `{rounded.lg}`(12px), 콘텐츠 카드 및 데모 그리드의 경우 `{rounded.md}`(10px), 입력의 경우 `{rounded.sm}`(6px), 아이콘 버튼의 경우 `{rounded.full}`입니다. 가격 버튼은 `{rounded.pill}`으로 이동하여 별도의 방언으로 표시됩니다.
• 수직 리듬은 주요 밴드 사이의 `{spacing.section}`(96px)이며 모든 페이지에 공통적으로 적용됩니다.

색상

브랜드 및 액센트

• **Primary** (`{colors.primary}` — #181d26): 주요 브랜드 색상입니다. 기본 CTA 배경, h1/h2 표시 유형 및 `{comComponent.surface-dark}` 밴드에 사용됩니다. "파란색 다음 검정색"이 아니라 검정색이 마케팅 시스템 전체의 기본입니다.
• **기본 활성** (`{colors.primary-active}` — #0d1218): 기본 버튼을 누르는 상태입니다.

표면

• **캔버스** (`{colors.canvas}` — #ffffff): 기본 페이지 표면입니다. 모든 편집자의 바닥.
• **Surface Soft** (`{colors.surface-soft}` — #f8fafc): 탭으로 구성된 기능 카드 및 주요 가격 책정 계층입니다.
• **Surface Strong**(`{colors.surface-strong}` — #e0e2e6): 바닥글 근처에 밝은 회색의 'Airtable로 구축 시작' CTA 배너가 있습니다.
• **Surface Dark** (`{colors.surface-dark}` — #181d26): 페이지 중간에 사용되는 진한 남색 CTA 카드입니다(예: "조직의 모든 사람에게 10배로 가는 경로").
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1d1f25): 무지개 줄무늬 오버레이 뒤에 있는 기사 페이지 영웅 기반입니다.
• **헤어라인** (`{colors.hairline}` — #dddddd): 입력 윤곽선, 표 구분선, 보조 버튼 윤곽선에 대한 1px 테두리 톤입니다.

텍스트

• **잉크**(`{colors.ink}` — #181d26): 가장 강력한 텍스트 — h1/h2 디스플레이 유형 및 기본 버튼 텍스트 온 라이트. 유형 및 버튼 레이어에서 표현되는 역할이 동일하므로 `{colors.primary}`와 동일한 16진수입니다.
• **본문**(`{colors.body}` — #333840): 기본 실행 텍스트 색상입니다.
• **음소거** (`{colors.muted}` — #41454d): 바닥글 링크, 탐색경로, 캡션.
• **Border Strong** (`{colors.border-strong}` — #9297a0): 비활성화된 보조 버튼의 1px 윤곽선 색상입니다.
• **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): 기본 버튼과 어두운 표면의 텍스트 색상입니다.

서명 카드 표면

에어테이블의 브랜드 전압을 담고 있는 컬러들입니다. 이는 풀 블리드, 풀 카드 표면으로 나타나며 결코 작은 요소에 액센트로 표시되지 않습니다.

• **Coral** (`{colors.signature-coral}` — #aa2d00): 홈페이지에서 가장 큰 서명 카드("프로토타입 속도의 프로덕션 앱"). 화이트 타입의 풀블리드 다크 코랄.
• **Forest** (`{colors.signature-forest}` — #0a2e0e): 홈페이지 데모 그리드 클러스터에 사용되는 진한 녹색 서명 카드입니다.
• **크림** (`{colors.signature-cream}` — #f5e9d4): 크림 콜

概要

Airtable のマーケティング面は、静かに編集的なものになっています。基本的な雰囲気は、白いキャンバス、濃いインクの種類、たっぷりとした空白、そして黒に近い錠剤の CTA です。セクションが必要になるまで、注目を集めるものは何もありません。ブランドのボルテージは、グラデーションウォッシュやアクセントウォールから来るものではありません。これは、「{colors.signature-coral}」、「{colors.signature-forest}」、および「{colors.surface-dark}」の **フルブリード署名カード** から来ており、2 画面または 3 画面ごとに長いスクロールの説明ページが中断されます。これらの署名帯の間に、ページは印刷雑誌のように読めます。見出し、サポートコピー、小さな画像群、そして休憩スペースがあります。

タイプ音声は適度な重さの Haas Grotesk です (ディスプレイに 400、字幕とボタンに 500)。表示見出しが 500 を超える太字になることはありません。強調は重さではなく、サイズと色のコントラストによって行われます。ボディコピーは全体を通して 14px / 400 のままです。価格設定画面には独自の言語が使用されています。異常な中間重量 (475 / 575) の **Inter Display** と、他のページには表示されない **錠剤の形をしたボタン** (`{rounded.pill}`) です。これは、「このページは商業的な精度に関するものです」という信号を意図的に送信するサブシステムです。

**主な特徴:**

• プライマリ CTA は、白いテキストと `{rounded.lg}` (12 ピクセル) の角を持つ `{colors.primary}` (黒に近いインク) です。これは自信に満ちた最終的なものであり、決して装飾的なものではありません。
• セカンダリ CTA は、「{colors.ink}」のテキストとヘアラインの輪郭を持つ「{colors.canvas}」ボタンです。この 2 つは合わせて Airtable の特徴的なボタンのペアを形成します。
• 主人公は白いキャンバスです。大気のグラデーション、メッシュ、背景の華やかさはありません。ブランドの強さは、すっきりとした余白に配置されたタイプとボタンから生まれます。
• ブランドのボルテージは **シグネチャ サーフェス カード**に反映されています。「{colors.signature-coral}」、「{colors.signature-forest}」、および「{colors.surface-dark}」には、数画面ごとにフルブリードの製品コールアウトが表示されます。
• デモカード グリッドには、「{colors.signature-peach}」、「{colors.signature-mint}」、「{colors.signature-cream}」、およびその他の温かみのあるパステルの表面に製品 UI フラグメントが含まれています。
• セクションのリズム: 白いキャンバス → コーラルの署名カード → 白いボディ → クリーム色の吹き出しバンド → ダークネイビーの CTA → ライトグレーの CTA バナー → フッター。キャンバスは署名面ごとにリセットされます。
• 境界線の半径は階層的です: プライマリ CTA と大きな署名カードの場合は `{rounded.lg}` (12px)、コンテンツ カードとデモ グリッドの場合は `{rounded.md}` (10px)、入力の場合は `{rounded.sm}` (6px)、アイコン ボタンの場合は `{rounded.full}` です。価格設定ボタンは `{rounded.pill}` にジャンプして、それ自体を別の方言としてマークします。
• 垂直方向のリズムは、主要なバンド間では「{spacing.section}」 (96 ピクセル) であり、すべてのページに共通です。

色

ブランドとアクセント

• **Primary** (`{colors.primary}` — #181d26): 主要なブランド カラー。プライマリ CTA 背景、h1/h2 表示タイプ、および `{component.surface-dark}` バンドに使用されます。 「青、次に黒」ではありません。マーケティング システム全体では黒が主です。
• **プライマリ アクティブ** (`{colors.primary-active}` — #0d1218): プライマリ ボタンの押下状態。

表面

• **キャンバス** (`{colors.canvas}` — #ffffff): デフォルトのページ表面。すべての編集機関のフロア。
• **Surface Soft** (`{colors.surface-soft}` — #f8fafc): タブ付きの機能カードと注目の価格帯。
• **Surface Strong** (`{colors.surface-strong}` — #e0e2e6): フッターの近くにある明るい灰色の「Airtable で構築を開始」CTA バナー。
• **Surface Dark** (`{colors.surface-dark}` — #181d26): ダーク ネイビーの CTA カードはページの中央で使用されます (たとえば、「組織内のすべてのユーザーを 10 倍にするパス」)。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1d1f25): レインボー ストライプ オーバーレイの背後にある記事ページのヒーロー ベース。
• **ヘアライン** (`{colors.hairline}` — #dddddd): 入力アウトライン、テーブルの分割線、二次ボタンのアウトラインの 1 ピクセルの境界線のトーン。

テキスト

• **インク** (`{colors.ink}` — #181d26): 最強のテキスト — h1/h2 表示タイプと主ボタンのテキストオンライト。タイプ層とボタン層で表現される役割が同じであるため、`{colors.primary}` と同じ 16 進数です。
• **Body** (`{colors.body}` — #333840): デフォルトの実行テキストの色。
• **ミュート** (`{colors.muted}` — #41454d): フッター リンク、パンくずリスト、キャプション。
• **Border Strong** (`{colors.border-strong}` — #9297a0): 無効になっている二次ボタンの 1 ピクセルのアウトライン カラー。
• **オン プライマリ / オン ダーク** (`{colors.on-primary}` — #ffffff): プライマリ ボタンとダーク サーフェスのテキストの色。

署名カードの表面

これらは Airtable のブランド力を伝える色です。それらはフルブリード、フルカードの表面として表示され、決して小さな要素のアクセントとして表示されません。

• **コーラル** (`{colors.signature-coral}` — #aa2d00): ホームページ上の最大の署名カード (「プロトタイプの速度での運用アプリ」)。フルブリードダークコーラルのホワイトタイプ。
• **フォレスト** (`{colors.signature-forest}` — #0a2e0e): ホームページのデモグリッド クラスターで使用される深緑色の署名カード。
• **クリーム** (`{colors.signature-cream}` — #f5e9d4): クリームコール