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입니다. 섹션이 필요할 때까지는 관심을 끌기 위해 싸우는 것이 없습니다. 브랜드 전압은 그라데이션 워시나 액센트 벽에서 나오는 것이 아닙니다. 이는 ``, `` 및 ``의 **풀 블리드 서명 카드**에서 제공되며 두세 화면마다 긴 스크롤 설명 페이지를 강조합니다. 이러한 서명 밴드 사이에 있는 페이지는 헤드라인, 보조 카피, 작은 이미지 클러스터, 호흡 공간 등 인쇄 잡지처럼 읽혀집니다.

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

**주요 특성:**

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

색상

브랜드 및 액센트

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

표면

• **캔버스** (`` — #ffffff): 기본 페이지 표면입니다. 모든 편집자의 바닥.
• **Surface Soft**(`` — #f8fafc): 탭 기능 카드 및 주요 가격 책정 계층.
• **표면이 강력함**(`` — #e0e2e6): 바닥글 근처에 밝은 회색의 'Airtable로 만들기 시작' CTA 배너가 있습니다.
• **어두운 표면** (`` — #181d26): 페이지 중간에 사용되는 짙은 남색 CTA 카드(예: "10× 조직의 모든 사람에 대한 경로").
• **Surface Dark Elevated** (`` — #1d1f25): 무지개 줄무늬 오버레이 뒤에 있는 기사 페이지 히어로 기반입니다.
• **가는 선** (`` — #dddddd): 입력 윤곽선, 표 구분선, 보조 버튼 윤곽선에 대한 1px 테두리 톤입니다.

텍스트

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

서명 카드 표면

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

• **산호** (`` — #aa2d00): 홈페이지에서 가장 큰 서명 카드("프로토타입 속도의 프로덕션 앱"). 화이트 타입의 풀블리드 짙은 산호초입니다.
• **숲** (`` — #0a2e0e): 홈페이지 데모 그리드 클러스터에 사용되는 진한 녹색 서명 카드입니다.
• **크림** (`` — #f5e9d4): 크림색 콜아웃 밴드("조직의 10× 모든 사람으로 가는 경로") — 어두운 글자와 제품 UI 조각이 들어 있는 부드러운 베이지색 표면입니다.
• **복숭아** (`` — #fcab79), **민트** (`` — #a8d8c4), **옐로우** (`` — #f4d35e), **머스타드** (_`` — #d9a441): 멀티 카드 그리드 섹션 내부에 작은 제품 UI 조각을 전달하는 데모 카드 표면입니다.

의미

• **링크** (`` — #1b61c9): 인라인 본문 링크 및 앵커 텍스트. ``(#1a3866)을 누르면 더 어두워집니다. _`--theme_button-background-primary` CSS 변수 이름에도 불구하고 이 색상은 기본 버튼 색상이 **아님** 링크 색상입니다.
• **정보**(`` — #254fad) 및 **정보 테두리**(`` — #458fff): 인라인 정보 배지 및 집중 입력 개요
• **성공**(`` — #006400) 및 **성공 테두리**(`` — #39bf45): 확인 상태.

타이포그래피

글꼴군

시스템은 **Haas / Haas Groot Disp**(Airtable의 라이센스 디스플레이 + 텍스트 유형)를 실행합니다. Haas Groot Disp는 디스플레이 크기(h1/h2)를 다룹니다. Haas Grotesk는 24px 이하의 모든 것을 다룹니다. 대체 스택이 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`.

이동합니다.

가격 책정 화면은 중간 무게(475/575)에서 별도의 **인터 디스플레이** 스택을 실행합니다. 이는 상업적 정확성을 알리는 의도적인 하위 시스템입니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 48px | 500 | 1.1 | 0 | 기사 페이지 h2 — 2차 편집 헤드라인 |

| _`` | 40px | 400 | 1.2 | 0 | 홈페이지 h1 히어로 |

| _`` | 32px | 400 | 1.2 | 0 | 플랫폼 페이지 h2 — 기능 섹션 헤드라인 |

| _`` | 24px | 400 | 1.35 | 0.12px | 섹션 제목 |

| _`` | 20픽셀 | 400 | 1.5 | 0 | 탭 기능 카드의 하위 섹션 제목 |

| _`` | 18px | 500 | 1.4 | 0 | 기사 카드 제목 |

| _`` | 16px | 500 | 1.4 | 0 | 데모 카드 제목, 목록 라벨 |

| _`` | 16px | 500 | 1.4 | 0 | 표준 CTA 버튼 라벨 |

| _`` | 14px | 400 | 1.25 | 0 | 본문 문구, 바닥글 링크, 상단 탐색 항목 |

| _`` | 14px | 500 | 1.35 | 0.16px | 가벼운 캡션 및 메타 텍스트 |

| _`` | 13.12px | 600 | 1.2 | 0 | 쿠키/법적 CTA 버튼 |

| _`` | 44.8px | 475 | 1.1 | 0 | 가격 페이지 h1 |

| _`` | 28px | 475 | 1.2 | 0 | 가격 페이지 섹션 헤드 |

| _`` | 20픽셀 | 475 | 1.3 | 0 | 가격 등급 카드 요금제 이름 |

원칙

Haas 시스템은 디스플레이 크기에 가중치 400을 선호합니다. 40px h1은 굵게 **않습니다**. 시각적 강조는 크기, 색상 대비 및 시그니처 표면 카드에 위임됩니다. 시스템이 가중치를 원하는 경우 편집 본문에서는 600이나 700이 아닌 500(부제, 버튼, 기사 제목)으로 피벗됩니다. 유일하게 굵은 글씨(600)는 ``에 있습니다. 이는 굵은 글씨가 마케팅이 아닌 서비스 약관 표시용으로 예약되어 있다는 표시입니다.

가격 책정 페이지 하위 시스템은 `font-weight: 475`(가변 글꼴로 제공되는 일반(400)과 중간(500) 사이의 사용자 정의 중간 두께)의 Inter Display를 사용합니다.

글꼴 대체에 대한 참고사항

Haas Groot Disp와 Haas Grotesk를 사용할 수 없는 경우 **Inter Display**(변수)는 둘 다에 가장 가까운 오픈 소스 대체입니다. Haas의 더 엄격한 캡 높이와 일치하도록 라인 높이를 ~5%까지 낮추십시오. 가격 책정 하위 시스템의 경우 Inter Display를 직접 사용하세요. macOS/iOS에서는 **system-ui**이면 충분합니다. Windows에서는 체인이 Segoe UI로 전달되는데, 이는 사용 가능하지만 약간 더 멋진 대체품입니다.

레이아웃

간격 시스템

• **기본 단위:** 4px(모든 간격은 4배수로 맞춰집니다.)
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩(세로):** ``(96px)은 보편적인 수직 리듬 상수입니다. 모든 페이지의 모든 주요 편집 밴드는 96px 상단 + 96px 하단 내부 패딩을 사용합니다.
• **카드 내부 패딩:** 탭 기능 카드 및 가격 등급 카드의 경우 ``(32px); ``(48px) 시그니처 코랄/포레스트/다크 카드 내부; ``(24px) 크림색 콜아웃 및 데모 그리드 카드용.
• **여백:** 3-up 그리드의 카드 사이에 ``(24px); ``(16px) 더 조밀한 로고 스트립 및 바닥글 열 여백 내부.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 중앙 ~1280px, ``(48px) 가로 호흡 공간 포함.
• **편집 본문:** 대규모 중단점의 단일 8/12열, 모바일에서는 단일 열로 축소됩니다.
• **데모 카드 그리드:** 데스크톱의 경우 3~4개 열, 태블릿의 경우 2개, 모바일의 경우 1개. 균일한 "사양 시트" 느낌을 피하기 위해 카드 크기는 그리드 내에서 의도적으로 균일하지 않습니다.
• **로고 스트립:** 데스크톱의 단일 행에 6개의 단색 파트너 로고; 모바일에서는 3-up으로 마무리됩니다.

공백 철학

Airtable은 공백을 주요 대기 도구로 사용합니다. 주요 섹션은 헤드라인 + 하위 헤드라인 쌍 위와 아래의 96px 이상의 순수 공백에 위치하며 해당 공백에는 장식이 없습니다. 영웅은 의도적으로 차분합니다. 문자 뒤에 그라데이션, 오로라, 대기 메시가 없습니다. 시스템은 프레이밍을 수행하기 위해 공백만을 신뢰합니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문 섹션, 상단 탐색, 바닥글 |

| 부드러운 헤어라인 | 1px `` 테두리 | 입력, 하위 탐색 레일, 비교표 구분선, 보조 버튼 |

| 버튼 나머지 | 낮은 알파에서 은은한 푸른 빛을 내는 부드러운 드롭 | 기본 CTA 버튼(파란색 색조는 링크 색상의 잔재이며 어두운 버튼 아래에 희미한 악센트로 읽혀짐) |

| 버튼 포커스 | 더 높은 알파의 외부 2px 파란색 링 | 기본 버튼의 키보드 포커스 상태 |

| 카드 플랫 | 그림자가 없습니다. 표면 밴드에 대한 색상 대비에 의존 | 시그니처 산호/숲/다크 카드, 크림 콜아웃, 데모 그리드 카드 |

입면 철학은 **색상 블록이 먼저이고 그림자가 두 번째**입니다. 그림자는 최소화됩니다. 흰색 캔버스와 시그니처 표면 카드의 대비에 깊이가 위임됩니다. 마케팅 시스템 어디에도 부드러운 빛/대기적인 그림자/높은 고도의 언어는 없습니다.

장식적 깊이

• **수직 무지개 줄무늬**는 기사 영웅에만 나타납니다. ``에 있는 여러 색상의 수직 줄무늬입니다. 이는 시스템 전체 서명이 아닌 단일 페이지 처리입니다.
• **데모 카드 그리드의 깊이 있는 사진**: 모든 카드에는 실제 제품 UI 스크린샷 또는 모형이 포함되어 장식 효과보다는 읽을 수 있는 아티팩트 밀도를 통해 깊이를 제공합니다.

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 2픽셀 | 쿠키 동의 및 법적 CTA 버튼 — 시스템 필수 표면 |

| _`` | 6픽셀 | 텍스트 입력, 작은 인라인 버튼 |

| _`` | 10픽셀 | 보조 콘텐츠 카드, 기사 카드, 크림 콜아웃 |

| _`` | 12px | 기본 CTA 버튼, 서명 표면 카드, 탭 기능 카드 |

| _`` | 9999px | 가격 페이지 CTA 버튼(하위 시스템에만 해당) |

| _`` | 9999px / 50% | 원형 아이콘 버튼, 아바타 표면 |

사진 기하학

데모 카드 그리드 내부의 제품 UI 스크린샷은 기본 가로 세로 비율(일반적으로 4:3 또는 16:10)을 유지하고 `` 컨테이너로 잘립니다. 영웅 그림은 반올림 없이 전폭으로 번집니다. 기사 카드 축소판은 `` 모서리와 함께 16:9를 사용합니다. 회원평가의 아바타는 ``(완벽한 원)을 사용합니다. 가격 비교표 이미지는 반올림 없이 직사각형으로 유지됩니다.

구성요소

> **호버 상태가 문서화되지 않았습니다.** 전역 호버 없음 정책(6단계)에 따라 아래의 모든 구성 요소 사양은 기본 및 활성/누름 상태만 문서화합니다. 변형은 `components:` 머리말에 별도의 항목으로 존재합니다.

_**`top-nav`** — 모든 페이지 상단에 고정된 64px 높이의 흰색 막대입니다. Airtable 워드마크는 왼쪽에 있습니다. 기본 가로 메뉴(플랫폼, 솔루션, 리소스, 기업, 가격)는 ``의 왼쪽 중앙에 있습니다. 오른쪽 클러스터에는 "데모 예약" 개요 링크, "무료로 가입" `` 및 "로그인" 텍스트 링크가 있습니다. 탐색은 모든 페이지에서 밝게 유지됩니다. Airtable은 어두운 섹션에서 탐색을 반전시키지 않습니다.

버튼

**`button-primary`** — 서명 기본 CTA입니다. 배경 ``(검은색에 가까움), 텍스트 ``, 유형 ``, 패딩 16px × 24px, 반올림 ``(12px). 모든 히어로에게 보이는 "무료로 시작하기" / "무료로 가입" 버튼입니다. 이는 장식적이지 않고 자신감 있고 최종적인 것으로 읽혀지므로 시스템에서 이 항목을 드물게 사용합니다(뷰포트당 하나씩).

• 활성 상태: `button-primary-active`가 ``(#0d1218)로 어두워집니다.

**`button-secondary`** — 흰색 윤곽선 버튼(예: '데모 예약'). 배경 ``, 텍스트 ``, 유형 ``, 둥근 ``(12px), 1px 가는선 윤곽선. "덜 커밋된" 선택으로 `` 옆에 위치합니다.

_**`button-secondary-on-dark`** — ``과 같은 모양이지만 시그니처 산호/숲/어두운 표면에 사용됩니다. 배경 ``, 텍스트 `` - 시스템이 마케팅 사이트에서 반투명 온-어두운 스타일로 전환되지 않기 때문에 흰색 버튼은 어두운 표면에서도 흰색으로 유지됩니다.

**`button-pricing-pill`** — 가격 페이지 CTA 계열입니다. 배경 ``, 텍스트 ``, 반올림 ``(9999px), 패딩 12px × 24px. 마케팅 시스템에서 알약 모양이 나타나는 유일한 장소입니다. 가격 책정 하위 시스템 신호의 일부로 처리하세요.

**`button-legal`** — 쿠키 동의 및 법적 배너 CTA. 배경 ``, 텍스트 ``, 유형 ``(13.12px/600), 반올림 ``(2px), 패딩 12px × 10px. 2px 모서리 반경 및 600 무게 신호는 설계된 브랜드 표면이 아닌 "필수 시스템 표면입니다."

_**`button-icon-circular`** — `` 배경, 가는 테두리 및 `` 아이콘이 있는 40px × 40px 원형 버튼. 캐러셀 컨트롤, '공유' 및 '뒤로' 어포던스에 사용됩니다.

_**`text-link`** — ``(#1b61c9, 실제 링크는 파란색)의 인라인 본문 링크입니다. 기본적으로 밑줄이 없습니다. 유형은 ``.

을 상속합니다.

카드 및 용기

**`hero-band`** — 전체 페이지 너비의 흰색 캔버스 히어로입니다. 표면 카드 없음, 테두리 없음, 그림자 없음, 대기 그라데이션 없음 - 96px 공백에 헤드라인, 하위 헤드라인, 기본 + 보조 버튼 쌍만 있습니다. 수직 패딩 `` (96px).

**`signature-coral-card`** — 홈페이지의 대형 풀 블리드 산호 카드("프로토타입 속도의 프로덕션 앱"). 배경 ``(#aa2d00, 짙은 산호/산화물 빨간색), 텍스트 ``, 둥근 ``(12px), 내부 패딩 ``(48px). ``에 h2를 전달하고 ``에 지원 사본을 전달하며 ``을 CTA로 전달합니다.

**`signature-forest-card`** — 홈페이지에서 산호 카드의 데모 그리드 형제로 사용되는 진한 녹색 서명 카드(`` — #0a2e0e).

_**`hero-card-dark`** — 짙은 남색 중간 페이지 CTA 카드(예: "조직의 모든 사람에게 10배를 향한 경로"). 배경 ``(#181d26), 텍스트 ``, 반올림 ``(12px), 내부 패딩 ``(48px). 시스템이 잉크를 활자 색상과 시그니처 어두운 표면으로 사용하기 때문에 ``과 동일한 색상입니다.

_**`feature-card-tabbed`** — 밝은 크림색 카드(예: 홈페이지의 'Coke / Pelosi / Conde Nast / Time Inc' 탭 기능 카드) 배경 ``, 둥근 ``(12px), 내부 패딩 ``(32px). 왼쪽 레일은 ``에 세로로 쌓인 탭 레이블을 전달합니다. 오른쪽 창에는 활성 탭의 콘텐츠(그림 + 본문 문구 + 작은 CTA)가 표시됩니다.

**`cream-callout-card`** — 베이지색 콜아웃 카드(``). 반올림된 ``(10px), 내부 패딩 ``(24px). 제품 UI 조각 또는 통계 설명선을 휴대하세요. 어두운/산호색 서명 카드보다 부드럽지만 여전히 고의적인 브랜드 표면입니다.

**`demo-grid-card`** — 모든 페이지를 구분하는 다중 카드 그리드에 사용됩니다. 배경 `` 또는 데모 그리드 표면(``, ``, ``, ``) 중 하나, 둥근 ``(10px), 내부 패딩 ``(16px). 각 카드는 제품 UI 조각을 구성합니다. 카드 높이는 균일한 "사양 시트" 느낌을 피하기 위해 의도적으로 다양합니다.

**`logo-strip`** — 가로 흑백 파트너 로고 행(HBO, Netflix, Amazon, Time, Conde Nast). 로고 렌더링은 ``, 표면은 ``, 수직 패딩 ``(32px)입니다. 데스크톱 로고 6개, 모바일 로고 3개

_**`article-card`** — 기사 페이지의 인기 뉴스 그리드입니다. 배경 ``, 둥근 ``(10px), 내부 패딩 ``(16px). 각 카드에는 다채로운 그림의 썸네일(16:9), 작은 대문자 카테고리 태그, `` 제목 및 메타 라인이 포함되어 있습니다. 데스크탑에서의 3-up.

_**`topic-filter-rail`** — 기사 페이지의 왼쪽 레일입니다. 너비 240px, `` 배경, ``, 하위 글머리 기호가 있는 수직으로 그룹화된 카테고리 제목("마케팅", "제품", "프로젝트 관리", "운영"). 활성 항목에는 작은 숫자 개수 배지가 있습니다.

입력 및 양식

**`text-input`** — 표준 텍스트 입력. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``(6px), 패딩 12px × 16px, 높이 44px. ``.

의 1px 가는선 테두리

**`text-input-focus`** — 포커스 상태. 테두리가 ``.

로 두꺼워지거나 다시 칠해집니다.

가격 하위 시스템

**`pricing-tier-card`** — 표준 등급 카드. 배경 ``, 텍스트 ``, 계획 이름으로 ``을 입력하고 반올림된 ``(10px), 내부 패딩 ``(32px). 계획 이름, ``(44.8px / 475)의 가격 블록, 기능 체크리스트 및 하단의 ``을 포함합니다.

**`pricing-tier-card-featured`** — 추천 계층(일반적으로 "팀" 또는 "비즈니스")입니다. 배경이 ``로 이동합니다. 악센트 테두리도 없고 배지도 없습니다. 배경 톤 변화가 유일한 신호입니다.

**`pricing-comparison-row`** — 가격 페이지 하단에 있는 긴 비교표의 각 행입니다. 왼쪽 열의 라벨. 4개 계획 열의 체크 표시 또는 값. 행당 12px 수직 패딩, 행 사이의 가는 구분선.

탐색 변형

**`footer`** — 밝은 표면(``), 플랫폼/솔루션/리소스/학습/회사 하위 트리를 포함하는 데스크탑의 6열 링크 목록입니다. 수직 패딩 ``은 상위 링크 블록과 하위 법적 행에 걸쳐 나누어집니다. ``.

을 입력하세요.

_**`cta-band-light`** — 바닥글 근처에 밝은 회색의 '에어테이블로 만들기 시작' CTA 스트립이 있습니다. 배경 ``(#e0e2e6), 텍스트 ``, 반올림 ``(12px), 패딩 ``(48px). `` 및 ``에서 h2를 전달합니다.

서명 구성요소

**기사 세로 무지개 줄무늬 영웅** — 기사 페이지 영웅 처리입니다. ``에 다양한 너비의 다중 색상 수직 띠가 있습니다. h1 + 하위 헤드 + CTA 클러스터는 줄무늬 상단 왼쪽 중앙에 위치합니다. 이는 시스템 전체 서명이 아닌 단일 페이지 영웅 처리입니다. 다중 페이지 패턴으로 승격시키지 마십시오.

해야 할 일과 하지 말아야 할 일

하라

• ``을 검정색에 가깝게 유지하세요. 브랜드의 기본 CTA는 링크 파란색이 아닌 ``입니다. 그것들을 섞으면 자신감 있는 영웅이 혼란스러운 영웅으로 변합니다.
• 뷰포트당 하나의 기본 작업에 대해 ``을 예약합니다. 이 시스템은 브랜드 액션 레이어의 희소성을 고려하여 설계되었습니다.
• ``(가는 선 윤곽선이 있는 흰색)을 ``과의 자연스러운 쌍으로 사용합니다. 두 개가 함께 Airtable의 시그니처 버튼 행을 형성합니다.
• 공백을 영웅의 분위기로 믿으세요. 히어로 밴드는 의도적으로 차분합니다. 그라데이션도, 메시도, 분위기 있는 배경도 없습니다. 이에 반대하면 오프 브랜드로 간주됩니다.
• 편집상의 단조로움을 없애려면 ``, `` 및 ``을 사용하세요. 브랜드의 전압 순간입니다.
• 그리드 내에서 `` 높이를 고르지 않게 유지하세요. 균일한 높이는 사양서처럼 느껴집니다.
• 가격 책정 화면을 자체 방언으로 처리합니다. ``, `` 및 ``을 함께 유지합니다. Haas Grotesk 버튼 유형과 혼합하면 하위 시스템의 음성이 끊어집니다.
• 모든 편집 밴드를 ``(96px) 수직 패딩으로 고정합니다.

하지 마세요

• ``(#1b61c9)을 기본 버튼 색상으로 만들지 마세요. 링크 색상입니다. 기본 버튼은 ``(#181d26, 검정색에 가까움)입니다. link-blue를 브랜드 액션으로 취급하는 것은 Airtable의 CSS 변수를 읽을 때 가장 흔히 저지르는 실수입니다.
• 영웅에게 그라데이션 배경을 추가하지 마세요. 에어테이블의 영웅은 백인, 마침표입니다. 메시, 오로라, 스포트라이트 그라데이션은 모두 Airtable이 아닌 "또 다른 SaaS 템플릿"으로 읽혀집니다.
• 표시 가중치 유형을 굵게 표시하지 마세요. `` 및 ``은 의도적으로 가중치가 400/500입니다. 마케팅 페이지 템플릿으로 700회 읽기가 가능합니다.
• 가격 책정 표면 외부에서 ``을 사용하지 마세요. 일반 반경 옵션이 아닌 하위 시스템 신호입니다.
• 두 개의 연속 밴드에서 동일한 표면 모드를 반복하지 마십시오. 편집 속도는 흰색 → 서명 카드 → 흰색 → 크림 → 어두운 → 흰색 등의 리듬에 따라 다릅니다. 흰색 두 개가 연속으로 타이포그래피 블로그로 읽혀요.
• 시스템이 이미 인코딩한 것 이상으로 마우스 오버 상태 스타일을 추가하지 마세요. 시스템 문서에는 기본 및 활성/누름만 해당됩니다.
• 문서화된 서명 카드 팔레트 외에 추가 강조 색상을 도입하지 마세요. 시스템의 전압은 이미 산호, 숲, 다크 네이비, 크림, 복숭아, 민트, 노랑, 머스타드를 사용하고 있습니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 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 |

| 태블릿 | 768~1024px | 2업 데모 그리드; 상단 탐색은 수평을 유지하지만 더 조여집니다. 크림색 설명선 카드는 2개로 쌓입니다. 가격 비교표가 가로로 스크롤 가능해졌습니다 |

| 데스크탑 | 1024~1440px | 3-up 데모 그리드(더 긴밀한 콘텐츠의 경우 4-up) 모든 메뉴 항목이 표시되는 전체 상단 탐색 기능 가격 등급 카드는 4면 렌더링 |

| 와이드 | > 1440px | 외부 호흡 공간이 더 많은 데스크탑과 동일합니다. 최대 콘텐츠 너비는 ~1280px로 제한되고 페이지는 유형을 확대하는 대신 외부 여백을 추가합니다 |

터치 대상

• `` 및 형제는 최소 48 × 48px(16px 수직 패딩 + 16px 줄 높이)로 렌더링됩니다. — WCAG AAA의 44 × 44보다 편안하게 높습니다.
• ``는 정확히 40 × 40픽셀입니다. WCAG에서 권장하는 44픽셀보다 약간 낮지만, 가운데 아이콘과 점 반경이 시각적으로 보완됩니다.
• `` 높이는 44픽셀입니다.

축소 전략

• 상단 탐색 메뉴가 < 768px; the menu opens as a full-screen sheet rather than a dropdown.
의 햄버거로 접힙니다.
• 카드 그리드는 카드를 축소하는 대신 열을 줄입니다.
• ``은 모바일의 콘텐츠 창 위에 탭 레일을 다시 쌓습니다.
• 가격 비교표는 < 1024px; the four plan headers stay visible while body rows scroll.
에서 가로 스크롤이 가능한 스와이프로 전환됩니다.

이미지 동작

• 데모 카드 UI 스크린샷은 확대하는 대신 컨테이너에 맞게 잘립니다.
• 히어로 일러스트레이션은 모바일에서 전체 너비로 번져서 가로 여백이 사라집니다.
• 시그니처 카드 이미지(산호/숲/어두운 카드 내부)는 잘리지 않고 카드 너비로 압축됩니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키를 직접 참조합니다(``, ``).

2. 새 구성 요소를 추가할 때 먼저 해당 구성 요소가 속하는 하위 시스템을 결정하십시오: 기본 편집 시스템(Haas, ``/``) 또는 가격 책정 하위 시스템(Inter Display, ``)

3. 기존 구성 요소의 변형(`-active`, `-disabled`, `-focus`)은 `components:`의 별도 항목으로 존재하며 결코 중첩된 상태 개체로 존재하지 않습니다.

4. 산문에서 색상, 반경, 타이포그래피 역할 또는 간격 값을 언급하는 모든 곳에 ``을(를) 사용하세요. 16진수 코드는 참조 옆에 최대 한 번 나타납니다.

5. 문서에 마우스를 올리지 마세요. 시스템 문서에는 기본 및 활성/누름 상태만 기록됩니다.

6. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행 — `broken-ref`, `contrast-ratio` 및 `orphaned-tokens` 경고 플래그는 자동으로 문제를 표시합니다.

7. 강조가 의심스러울 때: 굵은 글씨보다 큰 글씨, 단단한 악센트 앞에 서명 표면 카드.

알려진 격차

• 파스텔 데모 그리드 표면(``, ``, ``, ``)의 정확한 16진수 값은 스크린샷 픽셀 샘플링에서 추론됩니다. 일부 제품 출시 시 계절에 따라 표면이 교체될 수 있습니다.
• 모든 구성 요소에 걸친 마우스 오버 동작은 문서화되지 않았습니다(전역 마우스 오버 금지 정책에 따라).
• 애니메이션 및 전환 타이밍은 범위에 포함되지 않습니다.
• __CODEBCK_906___ 이외의 양식 유효성 검사 상태는 추출되지 않습니다. 입력에 대한 오류 및 성공 상태를 확인하려면 전용 양식 페이지가 필요합니다.
• 가격 비교표의 체크 표시 문자 및 열 구분선 너비는 구조적으로 설명되지만 토큰으로 공식화되지는 않습니다.
• CSS 변수 `--theme_button-background-primary: `은 `:root`에 있지만 마케팅 사이트 어디에서도 기본 CTA 색상으로 사용되지 않습니다. 대신 링크/정보 색상 역할에 매핑됩니다. 향후 추출 시 오해의 소지가 있는 변수 이름을 다시 사용하지 않도록 여기에 문서화했습니다.

概要

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

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

**主な特徴:**

• プライマリ CTA は `` (黒に近いインク) に白いテキストと `` (12 ピクセル) のコーナーです。これは自信に満ちた最終的なものであり、決して装飾的なものではありません。
• セカンダリ CTA は、__CODEBCK_667___ テキストとヘアラインのアウトラインを含む `` ボタンです。 2 つを合わせて Airtable の特徴的なボタンのペアを形成します。
• 主人公は白いキャンバスです。大気のグラデーション、メッシュ、背景の華やかさはありません。ブランドの強さは、きれいな空白に配置されたタイプとボタンによって決まります。
• ブランドのボルテージは **署名表面カード**にあります: ``、__CODEBCK_669___、__CODEBCK_670___ には、数画面ごとにフルブリードの製品コールアウトが表示されます。
• デモカード グリッドには、__CODEBCK_671___、__CODEBCK_672___、__CODEBCK_673___、およびその他の温かみのあるパステル調の表面に製品 UI フラグメントが含まれています。
• _セクションのリズム: 白いキャンバス → コーラルの署名カード → 白いボディ → クリーム色の吹き出しバンド → ダークネイビーの CTA → ライトグレーの CTA バナー → フッター。キャンバスは署名面ごとにリセットされます。
• 境界線の半径は階層的です: プライマリ CTA と大きな署名カードの場合は `` (12 ピクセル)、コンテンツ カードとデモ グリッドの場合は `` (10 ピクセル)、入力の場合は `` (6 ピクセル)、アイコン ボタンの場合は `` です。価格設定ボタンは__CODEBCK_678___にジャンプして、それ自体を別の方言としてマークします。
• 主要なバンド間では垂直方向のリズムが__CODEBCK_679___ (96ピクセル) — すべてのページで共通です。

色

ブランドとアクセント_

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

サーフェス

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

テキスト

• **インク** (`` — #181d26): 最も強力なテキスト — h1/h2 表示タイプと主ボタンのテキストオンライト。 `` と同じ 16 進数。これは、タイプ層とボタン層で表現される役割が同じであるためです。
• **Body** (`` — #333840): デフォルトのランニングテキストの色。
• **ミュート** (`` — #41454d): フッター リンク、パンくずリスト、キャプション。
• **強い枠線** (`` — #9297a0): 無効になっている二次ボタンの 1 ピクセルのアウトライン カラー。
• **オン プライマリ / オン ダーク** (`` — #ffffff): プライマリ ボタンとダーク サーフェスのテキストの色。

署名カードの表面

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

• **コーラル** (`` — #aa2d00): ホームページ上の最大の署名カード (「プロトタイプの速度での運用アプリ」)。ホワイトタイプのフルブリードダークコーラル。
• **フォレスト** (`` — #0a2e0e): ホームページのデモグリッド クラスターで使用される深緑色の署名カード。
• **クリーム** (`` — #f5e9d4): クリーム色のコールアウト バンド (「組織内のすべての人が 10 倍になるまでの道」) — ダーク タイプと製品 UI フラグメントを保持する柔らかいベージュ色の表面。
• **ピーチ** (`` — #fcab79)、**ミント** (`` — #a8d8c4)、**イエロー** (`` — #f4d35e)、**マスタード** (`` — #d9a441): マルチカード グリッド セクション内に小さな製品 UI フラグメントを保持するデモカードの表面。

セマンティック

• **リンク** (`` — #1b61c9): インライン本文リンクとアンカー テキスト。 `` (#1a3866) まで押すと暗くなります。 `--theme_button-background-primary` CSS 変数名にもかかわらず、この色は主ボタンの色**ではありません**。リンクの色です。
• **情報** (`` — #254fad) および **情報境界線** (`` — #458fff): インライン情報バッジと集中入力アウトライン。
• **成功** (`` — #006400) および **成功境界** (`` — #39bf45): 確認状態。

タイポグラフィ

フォント ファミリー

_システムは **Haas / Haas Groot Disp** (Airtable のライセンスを受けたディスプレイ + テキスト タイプ) を実行します。 Haas Groot Disp はディスプレイ サイズ (h1 / h2) をカバーします。 Haas Grotesk は 24 ピクセル以下のすべてをカバーします。フォールバック スタックは `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`.

を歩きます

価格設定面では、中程度のウェイト (475 / 575) で別個の **Inter Display** スタックが実行されます。これは、商用精度を示す意図的なサブシステムです。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 48ピクセル | 500 | 1.1 | 0 |記事ページ h2 — 第 2 層の編集見出し |

| `` | 40ピクセル | 400 | 1.2 | 0 |ホームページ h1 ヒーロー |

| `` | 32ピクセル | 400 | 1.2 | 0 |プラットフォーム ページ h2 — 機能セクションの見出し |

| `` | 24ピクセル | 400 | 1.35 | 0.12ピクセル |セクションのタイトル |

| `` | 20ピクセル | 400 | 1.5 | 0 |タブ付き機能カードのサブセクション タイトル |

| `` | 18ピクセル | 500 | 1.4 | 0 |記事カードのタイトル |

| `` | 16ピクセル | 500 | 1.4 | 0 |デモカードのタイトル、リストのラベル |

| `` | 16ピクセル | 500 | 1.4 | 0 |標準 CTA ボタン ラベル |

| `` | 14ピクセル | 400 | 1.25 | 0 |本文コピー、フッター リンク、トップナビゲーション項目 |

| `` | 14ピクセル | 500 | 1.35 | 0.16ピクセル |ライトキャプションとメタテキスト |

| `` | 13.12ピクセル | 600 | 1.2 | 0 | Cookie/法的 CTA ボタン |

| `` | 44.8ピクセル | 475 | 1.1 | 0 |価格ページ h1 |

| `` | 28ピクセル | 475 | 1.2 | 0 |価格設定ページのセクションの見出し |

| `` | 20ピクセル | 475 | 1.3 | 0 |価格帯カード プラン名 |

原則

Haas システムでは、表示サイズのウェイト 400 が優先されます。40 ピクセルの h1 は **太字ではありません**。視覚的な強調は、サイズ、色のコントラスト、署名表面のカードに委ねられています。システムが重みを必要とする場合は、編集本文で 600 や 700 ではなく、500 (サブタイトル、ボタン、記事タイトル) にピボットします。唯一の真の太字 (600) は `` にあります。これは、太字がマーケティングではなく、利用規約の表面のために予約されていることを示しています。

価格設定ページのサブシステムは、__CODEBCK_725___ の Inter Display を使用します。これは、標準 (400) と中程度 (500) の間のカスタム中間の太さで、可変フォントとして出荷されます。

フォントの代替に関する注意

_Haas Groot Disp と Haas Grotesk が利用できない場合は、**Inter Display** (変数) が両方に最も近いオープンソースの代替品になります。Haas のより厳しいキャップハイトに合わせて、行の高さを最大 5% 低く調整します。価格設定サブシステムについては、Inter Display を直接使用します。 macOS / iOS では、**system-ui** で十分です。 Windows では、チェーンは Segoe UI に移行します。これは、便利ですが、少しクールな代替品です。

レイアウト

間隔システム_

• **基本単位:** 4 ピクセル (すべての間隔は 4 の倍数にスナップ)。
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング (垂直):** `` (96 ピクセル) は、ユニバーサル垂直リズム定数です。すべてのページのすべての主要な編集バンドは、上部 96 ピクセル + 下部 96 ピクセルの内部パディングを使用します。
• **カードの内部パディング:** タブ付き機能カードおよび価格帯カードの場合は `` (32 ピクセル)。 `` (48px) シグネチャー コーラル / フォレスト / ダーク カード内; `` (24 ピクセル) クリーム色のコールアウトとデモグリッド カード用。
• _**余白:** `` (24 ピクセル) 3 アップ グリッドのカード間。 `` (16 ピクセル) が高密度のロゴ ストリップとフッター列の余白内にあります。

グリッドとコンテナ

• **コンテンツの最大幅:** 中央に ~1280 ピクセル、__CODEBCK_740___ (48 ピクセル) の水平方向のスペースがあります。
• **編集本文:** 大きなブレークポイントでは単一の 8/12 列、モバイルでは単一列に折りたたまれます。
• **デモカード グリッド:** デスクトップでは 3 列または 4 列、タブレットでは 2 列、モバイルでは 1 列。均一な「スペックシート」感を避けるために、カードのサイズはグリッド内で意図的に不均一になっています。
• **ロゴ ストリップ:** デスクトップで 6 つのモノクロ パートナー ロゴを 1 行に並べます。モバイルでは 3 アップにラップされます。

ホワイトスペースの哲学

_Airtable は、主要な雰囲気ツールとして空白を使用します。ヒーロー セクションは、見出しと小見出しのペアの上下の 96 ピクセル以上の純粋な空白に配置され、その空白には装飾がありません。主人公は意図的に冷静です。活字の背後にはグラデーションもオーロラも大気メッシュもありません。システムは空白のみを信頼してフレーミングを実行します。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |本文セクション、トップナビゲーション、フッター |

|柔らかいヘアライン | 1px `` 境界線 |入力、サブナビゲーション レール、比較テーブルのディバイダー、二次ボタン |

|ボタンレスト |低アルファで微妙に青みがかった輝きを持つソフト ドロップ |プライマリ CTA ボタン (青い色合いはリンクの色を引き継いでおり、暗いボタンの下にかすかなアクセントとして読み取られます) |

|ボタンフォーカス |高アルファの外側の 2px の青いリング |主ボタンのキーボード フォーカス状態 |

|カードフラット | 写真影はありません。表面バンドに対する色のコントラストに依存します。シグネチャー コーラル / フォレスト / ダーク カード、クリーム色のコールアウト、デモグリッド カード |

_立面図の哲学は、**カラーブロックが第一、影が二番目**です。影は最小限です。奥行きは、白いキャンバスと署名表面のカードの間のコントラストに委ねられています。マーケティング システムのどこにも、柔らかな光、大気の影、高度の高い表現はありません。

装飾の深さ

• **縦のレインボー ストライプ** は記事の主人公のみに表示されます。_`` にあるマルチカラーの縦の帯です。 これは単一ページの処理であり、システム全体の署名ではありません。
• **デモカード グリッドの深さとしての写真**: すべてのカードには実際の製品 UI スクリーンショットまたはモックアップが含まれており、装飾効果ではなく、読みやすいアーティファクトの密度によって奥行きをもたらします。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 2ピクセル | Cookie 同意および合法的な CTA ボタン — システムに必要なサーフェス |

| `` | 6ピクセル |テキスト入力、小さなインライン ボタン |

| `` | 10ピクセル |セカンダリ コンテンツ カード、記事カード、クリーム コールアウト |

| `` | 12ピクセル |プライマリ CTA ボタン、署名表面カード、タブ付き機能カード |

| `` | 9999ピクセル |価格設定ページの CTA ボタン (サブシステムのみ) |

| `` | 9999ピクセル / 50% |円形のアイコン ボタン、アバター サーフェス |

写真の幾何学

デモカード グリッド内の製品 UI スクリーンショットは、ネイティブのアスペクト比 (通常は 4:3 または 16:10) を保持し、__CODEBCK_749___ コンテナに切り取られます。ヒーローのイラストは四捨五入せずに全幅に裁ち落としされます。記事カードのサムネイルは 16:9、__CODEBCK_750___ コーナーを使用します。紹介文のアバターは__CODEBCK_751___ (正円) を使用します。価格比較表の画像は、角丸なしの長方形のままです。

コンポーネント

> **ホバー状態は文書化されていません。** グローバルなホバーなしポリシー (ステップ 6) に従って、以下のすべてのコンポーネント仕様には、デフォルト状態とアクティブ/押下状態のみが文書化されています。バリアントは、__CODEBCK_752___ 前付の個別のエントリとして存在します。

**`top-nav`** — 各ページの上部に固定された高さ 64 ピクセルの白いバー。 Airtable のワードマークは左側にあります。主要な水平メニュー (プラットフォーム、ソリューション、リソース、エンタープライズ、価格設定) は `` の中央左にあります。右側のクラスターには、「ブックデモ」アウトラインリンク、「無料サインアップ」__CODEBCK_755___、および「ログイン」テキストリンクがあります。ナビゲーションはどのページでも明るいままです — Airtable は暗いセクションではナビゲーションを反転しません。

ボタン

_**`button-primary`** — 署名のプライマリ CTA。背景 `` (黒に近い)、テキスト ``、タイプ ``、パディング 16px × 24px、丸め `` (12px)。これは、すべてのヒーローに表示される「無料で始める」/「無料でサインアップ」ボタンです。これは、装飾的なものではなく、自信と最終的なものとして読み取れます。そのため、システムはこれを控えめに使用します (ビューポートごとに 1 つ)。

• アクティブ状態: `button-primary-active` は__CODEBCK_762___ (#0d1218) に暗くなります。

**`button-secondary`** — 白い輪郭のボタン (例: 「デモを予約する」)。背景__CODEBCK_764___、テキスト__CODEBCK_765___、タイプ__CODEBCK_766___、丸みを帯びた__CODEBCK_767___ (12ピクセル)、1ピクセルのヘアラインアウトライン。 「あまりコミットされていない」選択肢として `` の隣にあります。

_**`button-secondary-on-dark`** — `` と同じ形状ですが、特徴的なサンゴ/森林/暗い表面に使用されます。背景 ``、テキスト `` — マーケティング サイトではシステムが半透明の暗部スタイルに反転しないため、白いボタンは暗い表面でも白のままです。

**`button-pricing-pill`** — 価格設定ページの CTA ファミリー。背景__CODEBCK_774___、テキスト__CODEBCK_775___、角丸__CODEBCK_776___ (9999px)、パディング12px × 24px。マーケティング システムで錠剤の形が現れるのは唯一の場所です。 これを価格設定サブシステム シグナリングの一部として扱います。

_**`button-legal`** — Cookie 同意および法的バナー CTA。背景__CODEBCK_778___、テキスト__CODEBCK_779___、タイプ__CODEBCK_780___ (13.12px / 600)、丸め__CODEBCK_781___ (2px)、パディング12px × 10px。 2 ピクセルのコーナー半径と 600 のウェイトは、「これは必要なシステム サーフェスであり、デザインされたブランド サーフェスではない」ことを示しています。

**`button-icon-circular`** — `` 背景、ヘアライン枠、__CODEBCK_784___ アイコンが付いた 40 ピクセル × 40 ピクセルの円形ボタン。カルーセル コントロール、「共有」、および「戻る」アフォーダンスに使用されます。

**`text-link`** — `` のインライン本文リンク (#1b61c9、実際のリンクは青色)。デフォルトでは下線はありません。型は__CODEBCK_787___.

を継承します。

カードとコンテナ

_**`hero-band`** — ページ全幅の白いキャンバスのヒーロー。表面カード、境界線、影、雰囲気のグラデーションはなく、見出し、小見出し、および主ボタンと副ボタンのペアが 96 ピクセルの空白に収まっているだけです。垂直パディング `` (96px).

**`signature-coral-card`** — ホームページ上の大きなフルブリードのコーラル カード (「プロトタイプの速度での運用アプリ」)。背景__CODEBCK_791___ (#aa2d00、ダークコーラル/オキサイドレッド)、テキスト__CODEBCK_792___、丸みを帯びた__CODEBCK_793___ (12ピクセル)、内部パディング__CODEBCK_794___ (48ピクセル)。 `` で h2 を運び、__CODEBCK_796___ でのコピー、および CTA として `` をサポートします。

**`signature-forest-card`** — ホームページ上のコーラル カードのデモ グリッドの兄弟として使用される深緑色の署名カード (`` — #0a2e0e)。

**`hero-card-dark`** — ダークネイビーのページ中央の CTA カード (例: 「組織内のすべてのユーザーを 10 倍にするパス」)。背景__CODEBCK_801___ (#181d26)、テキスト__CODEBCK_802___、丸め__CODEBCK_803___ (12ピクセル)、内部パディング__CODEBCK_804___ (48ピクセル)。システムはタイプの色と署名の暗い表面の両方としてインクを使用するため、`` と同じ色です。

_**`feature-card-tabbed`** — ライトクリーム色のカード (例: ホームページの「Coke / Pelosi / Conde Nast / Time Inc」タブ付きフィーチャー カード)。背景__CODEBCK_807___、角丸__CODEBCK_808___ (12ピクセル)、内部パディング__CODEBCK_809___ (32ピクセル)。左側のレールには、__CODEBCK_810___ のタブ ラベルが垂直方向に積み重ねられています。右側のペインには、アクティブなタブのコンテンツ (イラスト + 本文 + 小さな CTA) が表示されます。

**`cream-callout-card`** — ベージュの吹き出しカード (``)。丸みを帯びた `` (10 ピクセル)、内部パディング `` (24 ピクセル)。製品 UI フラグメントやステータス コールアウトを表示します。ダーク/コーラルのシグネチャ カードよりもソフトですが、意図的にブランドの表面を表現します。

_**`demo-grid-card`** — すべてのページを区切るマルチカード グリッドで使用されます。背景 `` またはデモ グリッド サーフェスの 1 つ (``、__CODEBCK_818___、__CODEBCK_819___、__CODEBCK_820___)、丸みを帯びた `` (10 ピクセル)、内部パディング `` (16 ピクセル)。各カードは製品 UI フラグメントを構成します。カードの高さは、均一な「スペックシート」感を避けるために意図的に異なります。

**`logo-strip`** — 水平方向のモノクロのパートナー ロゴ行 (HBO、Netflix、Amazon、Time、Conde Nast)。ロゴは__CODEBCK_824___、表面は__CODEBCK_825___、垂直パディング__CODEBCK_826___ (32ピクセル)でレンダリングされます。デスクトップに 6 つのロゴ、モバイルに 3 つのロゴ。

**`article-card`** — 記事ページのトレンド ストーリー グリッド。背景__CODEBCK_828___、角丸__CODEBCK_829___ (10ピクセル)、内部パディング__CODEBCK_830___ (16ピクセル)。 各カードには、カラフルなイラスト付きサムネイル (16:9)、小さな大文字のカテゴリ タグ、__CODEBCK_831___ タ​​イトル、およびメタ行が含まれています。デスクトップで 3 アップ。

_**`topic-filter-rail`** — 記事ページの左側のレール。幅 240 ピクセル、__CODEBCK_833___ 背景、__CODEBCK_834___、縦にグループ化されたカテゴリ見出し (「マーケティング」、「製品」、「プロジェクト管理」、「運用」) とサブ箇条書き。アクティブなアイテムには小さな数値カウントのバッジが付いています。

入力とフォーム

_**`text-input`** — 標準のテキスト入力。背景__CODEBCK_836___、テキスト__CODEBCK_837___、タイプ__CODEBCK_838___、丸め__CODEBCK_839___ (6px)、パディング12px × 16px、高さ44px。 ``.

の 1 ピクセルのヘアライン境界線

**`text-input-focus`** — フォーカス状態。境界線を太くするか、__CODEBCK_842___.

に色を変更します

価格サブシステム

_**`pricing-tier-card`** — 標準層カード。背景__CODEBCK_844___、テキスト__CODEBCK_845___、プラン名として__CODEBCK_846___、四捨五入__CODEBCK_847___ (10ピクセル)、内部パディング__CODEBCK_848___ (32ピクセル)。プラン名、__CODEBCK_849___ (44.8px / 475) の価格ブロック、機能チェックリスト、下部に `` が表示されます。

**`pricing-tier-card-featured`** — 注目の層 (通常は「チーム」または「ビジネス」)。背景が__CODEBCK_852___に移行します。アクセントの境界線やバッジはありません。背景のトーンの変化が唯一の信号です。

_**`pricing-comparison-row`** — 価格ページの下部にある長い比較表の各行。左側の列のラベル。 4 つの計画列にわたるチェックマークまたは値。行ごとに 12 ピクセルの垂直パディング、行間のヘアライン区切り。

ナビゲーションのバリエーション

**`footer`** — ライト サーフェス (``)、プラットフォーム / ソリューション / リソース / 学習 / 会社のサブツリーをカバーするデスクトップの 6 列のリンク リスト。垂直パディング `` は、上部のリンク ブロックと下部の正当な行にわたって分割されます。 ``.

と入力します

**`cta-band-light`** — フッター近くのライトグレーの「Airtable で構築を開始」CTA ストリップ。背景__CODEBCK_859___ (#e0e2e6)、テキスト__CODEBCK_860___、丸め__CODEBCK_861___ (12ピクセル)、パディング__CODEBCK_862___ (48ピクセル)。 `` および `` に h2 を運びます。

署名コンポーネント

**記事の垂直レインボー ストライプ ヒーロー** — 記事ページのヒーローの扱い。 `` にあるさまざまな幅のマルチカラーの垂直バンド。 h1 + サブヘッド + CTA クラスターは、ストライプの上部中央左に位置します。これは単一ページのヒーロー処理であり、システム全体の署名ではありません。複数ページのパターンに昇格しないでください。

推奨事項と禁止事項

実行

• __CODEBCK_866___ をほぼ黒に保ちます。ブランドの主要 CTA は__CODEBCK_867___ であり、青いリンクではありません。これらを混同すると、自信に満ちたヒーローが混乱したヒーローに変わってしまいます。
• __CODEBCK_868___ は、ビューポートごとに 1 つのプライマリ アクション用に予約してください。このシステムは、ブランド アクション層での希少性を考慮して設計されています。
• _`` (ヘアラインの輪郭のある白) を `` との自然なペアとして使用します。 2 つを合わせて Airtable の特徴的なボタン列を形成します。
• 空白をヒーローの雰囲気として信頼してください。ヒーロー バンドは意図的に穏やかです。グラデーションやメッシュ、雰囲気のある背景はありません。これに反すると、オフブランドとみなされます。
• _``、__CODEBCK_872___、__CODEBCK_873___ を使用して、編集の単調さを打破します。 これらはブランドのボルテージを高める瞬間です。
• __CODEBCK_874___ グリッド内の高さを不均一に保ちます。均一な高さは仕様書のように感じられます。
• 価格設定面を独自の言語として扱います。__CODEBCK_875___、__CODEBCK_876___、__CODEBCK_877___ をまとめて保持します。これらを Haas Grotesk ボタン タイプと組み合わせると、サブシステムの音声が壊れます。
• __CODEBCK_878___ (96 ピクセル) の垂直パディングを使用してすべての編集バンドを固定します。

しないでください

• _`` (#1b61c9) をボタンの主色にしないでください。リンクの色です。主ボタンは `` (#181d26、黒に近い) です。 link-blue をブランド アクションとして扱うことは、Airtable の CSS 変数を読み取るときに最もよくある間違いです。
• ヒーローにグラデーションの背景を追加しないでください。 Airtable のヒーローは白、終点です。メッシュ、オーロラ、スポットライト グラデーションはすべて、Airtable ではなく、「別の SaaS テンプレート」として読み取られます。
• 表示ウェイトのタイプを太字にしないでください。 `` と `` は意図的にウェイト 400 / 500 になっており、マーケティング ページ テンプレートとして 700 回の読み取りになります。
• 価格設定範囲外では `` を使用しないでください。これはサブシステム信号であり、一般的な半径オプションではありません。
• _連続する 2 つのバンドで同じサーフェス モードを繰り返さないでください。編集のペースは、白→署名カード→白→クリーム→ダーク→白というリズムに依存します。連続した 2 つの白は、タイポグラフィー ブログとして読み取れます。
• システムが既にエンコードしているものを超えてホバー状態のスタイルを追加しないでください。システムはデフォルトとアクティブ/押下のみを文書化します。
• 文書化された署名カード パレットを超える追加のアクセント カラーを導入しないでください。 システムの電圧では、すでにコーラル、フォレスト、ダークネイビー、クリーム、ピーチ、ミント、イエロー、マスタードが使用されています。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|モバイル | < 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 |

|タブレット | 768–1024ピクセル | 2アップデモグリッド。上部のナビゲーションは水平のままですが、締め付けられます。クリーム色の吹き出しカードは 2 枚重ねられます。価格比較表が水平方向にスクロール可能になりました |

|デスクトップ | 1024–1440ピクセル | 3 アップのデモグリッド (より緊密なコンテンツの場合は 4 アップ)。すべてのメニュー項目が表示された完全なトップナビゲーション。価格帯カードは 4 面でレンダリングされます |

|ワイド | > 1440ピクセル |デスクトップと同じですが、外側の呼吸スペースが増えています。コンテンツの最大幅は最大 1280 ピクセルに制限され、ページはタイプを拡大するのではなく外側のマージンを追加します |

タッチターゲット

• `` とその兄弟は、最小 48 × 48 ピクセル (垂直パディング 16 ピクセル + 行の高さ 16 ピクセル) でレンダリングします。WCAG AAA の 44 × 44 を余裕で上回ります。
• `` は正確に 40 × 40 ピクセルです。WCAG が推奨する 44 ピクセルよりわずかに下回りますが、アイコンが中央に配置され、ドットの半径が視覚的に補正されます。
• `` 高さは 44 ピクセルです。

戦略の崩壊

• __HTMLTAG_610___ で上部のナビゲーションが折りたたまれてハンバーガーになります
• カード グリッドは、カードを縮小するのではなく、列を削減します。
• _`` は、モバイルのコンテンツ ペインの上にタブ レールを再スタックします。
• 価格比較表は、__HTMLTAG_616___ で水平スクロール可能なスワイプに変換されます

画像の動作

• デモカード UI のスクリーンショットは、拡大するのではなく、コンテナに合わせてトリミングされます。
• モバイルではヒーローのイラストが全幅にはみ出し、水平方向の余白が失われます。
• 署名カードの画像 (コーラル/フォレスト/ダークカードの内側) は、切り取られることなくカードの幅に圧縮されます。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キーを直接参照します (``、__CODEBCK_889___)。

2.新しいコンポーネントを追加するときは、まずそれがどのサブシステムに属するかを決定します。メイン編集システム (Haas、__CODEBCK_890___/``) または価格設定サブシステム (Inter Display、__CODEBCK_892___) です。

3.既存のコンポーネントのバリアント (`-active`、__CODEBCK_894___、__CODEBCK_895___) は、__CODEBCK_896___ 内の個別のエントリとして存在します。ネストされた状態オブジェクトとしては存在しません。

4.散文で色、半径、タイポグラフィの役割、または間隔の値について言及している場合は、どこでも `` を使用します。 16 進数コードは、参照の隣に最大 1 回表示されます。

5.決してホバーを文書化しないでください。システムは、デフォルト状態とアクティブ/押された状態のみを文書化します。

6.編集後に `npx @google/design.md lint DESIGN.md` を実行します — `broken-ref`、__CODEBCK_900___、__CODEBCK_901___ の警告は問題に自動的にフラグを立てます。

7。強調について疑問がある場合: 太字の前に大きな文字、ソリッド アクセントの前に署名の表面カード。

既知のギャップ

• パステル デモ グリッド サーフェスの正確な 16 進値 (``、__CODEBCK_903___、__CODEBCK_904___、__CODEBCK_905___) は、スクリーンショットのピクセル サンプリングから推測されます。 一部の製品の発売では、季節ごとにこれらの表面が入れ替わる場合があります。
• すべてのコンポーネントにわたるホバー動作は文書化されていません (グローバル非ホバー ポリシーに従って)。
• アニメーションと遷移のタイミングは対象外です。
• _`text-input-focus` を超えるフォーム検証状態は抽出されません。入力のエラー状態と成功状態を確認するには、専用のフォーム ページが必要です。
• 価格比較表のチェックマークのグリフと列区切りの幅は構造的に記述されていますが、トークンとして形式化されていません。
• CSS 変数 `--theme_button-background-primary: ` は `:root` に存在しますが、マーケティング サイトのどこにもプライマリ CTA カラーとして使用されていません。代わりに、リンク/情報の色の役割にマップされます。今後の抽出で誤解を招く変数名を再度使用しないように、ここに文書化されています。

Industry Context

In the landscape of modern digital products, Airtable's design system stands out for its distinctive visual identity. Compared to peers, Airtable invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Airtable's design system stands out for its distinctive visual identity. Compared to peers, Airtable invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Airtable's design system stands out for its distinctive visual identity. Compared to peers, Airtable invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Related Design Systems

Explore similar design languages from the same category:

• Framer Design System
• Figma Design System
• Clickhouse Design System
• Zapier Design System