# Airtable

> # Airtable — Style Reference

## Prompt Content

```
# Airtable — Style Reference
> workshop ấm áp với các chương được mã hóa bằng màu sắc

**Theme:** light

Airtable hiện lên như một không gian làm việc ấm áp, mang phong cách editorial, thay vì một dashboard SaaS lạnh lẽo. Canvas là nền giấy da kem mềm mại (#faf5e8) — không bao giờ trắng tinh — mang lại cho toàn bộ trang web cảm giác như giấy, gần như in ấn. Typography đậm và không hề nao núng: một custom display face với font-weight gần 900 cho hero headline kết hợp với một sans-serif đa năng cho body và UI. Các button màu đen tuyền, không phải màu xanh thương hiệu như mong đợi, mang lại cho trang web một sự tự tin mang tính kiến trúc, gần như ấn phẩm in. Điểm nhấn đặc trưng là các feature card được mã hóa bằng màu sắc — mỗi use case có một màu bão hòa riêng (terracotta, xanh dương đậm, xanh rừng, đào, hồng) hoạt động như các dải phân cách chương trong một catalog trực quan. Hiệu ứng tổng thể là một cuốn sổ tay studio sáng tạo: ấm áp, có tổ chức, có cá tính và mang tính con người.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Parchment Cream | `#faf5e8` | `--color-parchment-cream` | Canvas trang — nền trắng ngà ấm áp định hình toàn bộ bầu không khí của site, thay thế nền trắng tinh tiêu chuẩn |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt sáng nhẹ hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính |
| Frost White | `#f8fafc` | `--color-frost-white` | Bề mặt sáng thay thế cho các phần tử lồng nhau, nền navigation tinh tế |
| Onyx | `#181d26` | `--color-onyx` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp nó thành màu CTA chính |
| Charcoal | `#333840` | `--color-charcoal` | Body text, secondary text, border accent — màu trung tính đậm đa năng |
| Graphite | `#525965` | `--color-graphite` | Muted text, sub-label, body copy ít nổi bật |
| Steel | `#9297a0` | `--color-steel` | Placeholder text, trạng thái disabled, label ít nhấn mạnh |
| Silver Border | `#e0e2e6` | `--color-silver-border` | Divider mảnh, card border, phân cách cấu trúc tinh tế |
| Midnight Indigo | `#040e20` | `--color-midnight-indigo` | Heading text đậm nhất, gần đen với thiên hướng lạnh để tạo trọng lượng editorial tối đa |
| Cobalt Blue | `#1b61c9` | `--color-cobalt-blue` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |
| Sapphire | `#254fad` | `--color-sapphire` | Accent tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |
| Terracotta | `#aa2d00` | `--color-terracotta` | Accent cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |
| Burnt Sienna | `#912e1f` | `--color-burnt-sienna` | Biến thể terracotta đậm cho nền card và text trên section ấm |
| Peach Glow | `#fcab79` | `--color-peach-glow` | Lớp phủ ấm mềm mại cho highlight panel, nền accent |
| Forest Ink | `#0a2e0e` | `--color-forest-ink` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |
| Moss | `#214224` | `--color-moss` | Green text phụ và border accent trên section chủ đề xanh lá |
| Petal Pink | `#fa91e0` | `--color-petal-pink` | Accent vui tươi cho tag, category chip, màu minh họa |
| Marigold | `#fcb42a` | `--color-marigold` | Accent ấm cho badge, tag chip, category highlight |
| Pale Sky | `#c7e5f2` | `--color-pale-sky` | Bề mặt sáng hỗ trợ cho nền tinh tế và phân cách section |

## Tokens — Typography

### Haas Groot Disp — Display headlines — custom serif/slab face dùng cho hero statement và section title lớn, dùng font-weight 900 để tạo trọng lượng editorial · `--font-haas-groot-disp`
- **Thay thế:** GT Sectra Display, Tiempos Headline, hoặc Roboto Slab 900
- **Weights:** 400, 900
- **Kích thước:** 20px, 48px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Vai trò:** Display headlines — custom serif/slab face dùng cho hero statement và section title lớn, dùng font-weight 900 để tạo trọng lượng editorial

### Haas — Body, nav, buttons, subheading, UI label — workhorse sans-serif với weight 400 cho body, 500 cho nhấn mạnh, 600 cho button và label; tracking dương nhẹ mở rộng ở kích thước lớn · `--font-haas`
- **Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk
- **Weights:** 400, 500, 600
- **Kích thước:** 14px, 16px, 18px, 20px, 24px, 32px, 40px
- **Line height:** 1.15, 1.20, 1.25, 1.30, 1.35, 1.50
- **Letter spacing:** 0.0050em ở 14px, 0.0060em ở 16px, 0.0070em ở 18px, 0.0100em ở 20px, 0.0110em ở 24px, 0.0200em ở 32px+
- **Vai trò:** Body, nav, buttons, subheading, UI label — workhorse sans-serif với weight 400 cho body, 500 cho nhấn mạnh, 600 cho button và label; tracking dương nhẹ mở rộng ở kích thước lớn

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.35 | 0.07px | `--text-caption` |
| body-sm | 16px | 1.3 | 0.096px | `--text-body-sm` |
| body | 18px | 1.35 | 0.126px | `--text-body` |
| subheading | 20px | 1.3 | 0.2px | `--text-subheading` |
| heading-sm | 24px | 1.25 | 0.264px | `--text-heading-sm` |
| heading | 32px | 1.2 | 0.64px | `--text-heading` |
| heading-lg | 40px | 1.15 | 0.8px | `--text-heading-lg` |
| display | 48px | 1.5 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 8px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 32px |
| cards | 16px |
| buttons | 12px |
| featureCards | 24px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) ...` | `--shadow-subtle` |
| lg | `rgba(15, 48, 106, 0.05) 0px 0px 20px 0px` | `--shadow-lg` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 16px

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi chính

Nền #181d26 (Onyx) đặc, chữ trắng, Haas 600 ở 16px, border-radius 12px, padding dọc 16px và ngang 24px. Nằm trên nền cream với shadow nhiều lớp xanh lam tinh tế tạo chiều sâu.

### Secondary Ghost Button
**Vai trò:** Hành động phụ hoặc CTA thay thế

Nền #ffffff trắng, border 1px #181d26, chữ đen, Haas 600 ở 16px, border-radius 12px, padding giống primary. Dùng cho hành động 'Book demo' đi kèm với primary CTA.

### Top Navigation Bar
**Vai trò:** Navigation chính của site

Nền #ffffff trắng với drop shadow xanh lam tinh tế (rgba(15,48,106,0.05) 0px 0px 20px). Logo trái (Airtable mark), nav link ở giữa với Haas 400 ở 16px kèm chevron dropdown, bên phải là ghost button 'Book Demo' và primary button 'Sign up for free' cùng text link 'Log in'.

### Hero Section
**Vai trò:** Value proposition màn hình đầu tiên

Canh giữa trên nền parchment cream, headline Haas Groot Disp 900 ở 48px màu #040e20, subtext Haas 400 ở 18px màu #333840, dual CTA (primary + ghost) canh giữa bên dưới, tiếp theo là container ảnh chụp màn hình sản phẩm màu #181d26 đậm với radius 16px hiển thị giao diện app.

### Logo Trust Bar
**Vai trò:** Bằng chứng xã hội và uy tín

Một hàng logo khách hàng đơn sắc muted trên nền parchment, phía trước là caption nhỏ 'Trusted by 500,000 leading teams' ở Haas 400.

### Tabbed Feature Section
**Vai trò:** Trình bày chuyên sâu khả năng sản phẩm

Bố cục hai cột: cột trái có danh sách tab được đánh số (01–04) ở Haas 500, tab active màu #181d26 weight 600, tab inactive màu muted #9297a0. Cột phải là khối màu bão hòa lớn (ví dụ #aa2d00 Terracotta) với card trắng bên trong chứa heading, body text và ghost button 'Learn more'.

### Color-Coded Feature Card
**Vai trò:** Trình diễn use case

Card lớn với radius 24px, nền màu bão hòa (Terracotta, Sapphire, Forest, Pale Sky), panel trắng bên trong hiển thị ảnh chụp màn hình app hoặc dữ liệu. Mỗi use case có màu sắc riêng — terracotta cho campaigns, sapphire cho opportunities, forest cho localization, pale sky cho danh sách người tham dự.

### Product Screenshot Frame
**Vai trò:** Container xem trước app tối

Container nền #181d26 với radius 16px, chứa ảnh chụp màn hình UI app đầy đủ với dark theme gốc, tạo độ tương phản với nền cream ấm.

### Prompt Input Bar
**Vai trò:** Tương tác AI prompt

Input pill trắng bo tròn trên bề mặt sản phẩm tối, chứa prompt text ở Haas 400, nút submit tròn tối ở cuối với icon mũi tên.

### Category Chip / Tag
**Vai trò:** Label hoặc chỉ báo filter

Hình pill, border-radius 32px, text nhỏ ở Haas 500, nền màu rực rỡ (Marigold, Petal Pink) với text tương phản — dùng cho status, category và filter label.

### Announcement Banner
**Vai trò:** Dải quảng cáo đầu trang

Thanh mỏng full-width ở đầu trang, nền sáng, text canh giữa ở Haas 400 với inline link màu Cobalt Blue (#1b61c9) và nút đóng dismiss bên phải.

## Do's and Don'ts

### Nên làm
- Dùng Parchment Cream (#faf5e8) làm canvas nền — không bao giờ dùng #ffffff tinh khiết cho nền toàn trang
- Luôn ghép mỗi primary CTA đặc với một ghost button viền là hành động phụ
- Dùng border-radius 12px cho tất cả button và 24px cho feature card lớn để tạo cảm giác bo tròn nhưng vẫn mang tính kiến trúc
- Gán cho mỗi section use case chính một màu sắc bão hòa riêng (terracotta, sapphire, forest, peach, pink)
- Dùng Haas Groot Disp 900 cho hero và section headline, chỉ dùng ở kích thước 40px+
- Áp dụng đơn vị cơ bản 8px nhất quán: 8, 16, 24, 32, 40, 64 cho padding, gap và nhịp điệu section
- Neo các phần tử tương tác bằng Onyx (#181d26) thay vì màu đặc trưng thương hiệu

### Không nên làm
- Không dùng #ffffff tinh khiết làm nền trang — luôn dùng Parchment Cream (#faf5e8) cho canvas
- Không dùng brand-blue hoặc màu chromatic cho CTA button — Onyx đen là quy ước
- Không áp dụng letter-spacing cho display headline ở Haas Groot Disp — custom face được thiết kế với tracking chặt
- Không dùng góc nhọn (0px radius) trên bất kỳ phần tử tương tác hoặc card nào — tối thiểu 12px
- Không trộn quá 2 text weight trong một đoạn body — chỉ dùng 400 hoặc 500
- Không đặt card trắng trực tiếp lên nền cream mà không có padding — luôn có padding trong 16-24px
- Không dùng màu feature card bão hòa cho text body hoặc UI element nhỏ — chúng chỉ dành cho bề mặt cấp section

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Parchment Canvas | `#faf5e8` | Nền ấm toàn trang tạo giọng điệu editorial |
| 1 | White Card | `#ffffff` | Bề mặt card chính nằm trên nền parchment |
| 2 | Frost White | `#f8fafc` | Bề mặt thay thế tinh tế cho phần tử lồng nhau |
| 3 | Pale Sky | `#c7e5f2` | Bề mặt pha màu để phân biệt section nhẹ nhàng |
| 4 | Onyx Frame | `#181d26` | Container ảnh chụp màn hình sản phẩm tối và nền CTA tối |

## Elevation

- **Primary CTA Button:** `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset`
- **Top Navigation:** `rgba(15, 48, 106, 0.05) 0px 0px 20px 0px`

## Imagery

Ảnh chụp màn hình sản phẩm chiếm ưu thế làm nội dung hình ảnh chính — khung UI app dark mode đầy đủ được nhúng trong trang cream sáng tạo độ tương phản mạnh. Ảnh chụp màn hình hiển thị data table, kanban board, calendar view và AI prompt input ở độ trung thực cao. Hình ảnh hỗ trợ bao gồm crop sản phẩm nhỏ nội tuyến (ảnh giày thể thao, ảnh chân dung) trong feature card. Không có lifestyle photography, không có minh họa trừu tượng. Logo bar dùng logo khách hàng đơn sắc muted. Ngôn ngữ hình ảnh là product-showcase: giao diện app CHÍNH LÀ hero, được đóng khung bởi typography editorial ấm áp.

## Layout

Cột nội dung canh giữa, max-width 1200px trên nền cream ấm. Hero là chồng text canh giữa phía trên ảnh chụp màn hình sản phẩm tối tràn xuống dưới mép nội dung. Các section chảy theo chiều dọc với gap 64px nhất quán, xen kẽ giữa section editorial thiên về text và section demo sản phẩm thiên về hình ảnh. Khu vực feature dùng mẫu 2 cột: bên trái có danh sách tab dọc được đánh số (01–04), bên phải có khối màu bão hòa lớn. Section cuối dùng grid 2 cột gồm các use-case card được mã hóa màu, mỗi card chiếm khoảng nửa chiều rộng. Navigation là top bar sạch với logo trái, link giữa và CTA phải. Kiến trúc thông tin dày đặc được tránh — các section có khoảng trắng rộng rãi, mỗi khối phục vụ một mục đích duy nhất.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #181d26 (Onyx)
- background: #faf5e8 (Parchment Cream)
- border: #e0e2e6 (Silver Border)
- accent: #1b61c9 (Cobalt Blue) cho link
- primary action: không có màu CTA riêng biệt
- section accents: #aa2d00 (Terracotta), #254fad (Sapphire), #0a2e0e (Forest), #fcab79 (Peach)

**Ví dụ Component Prompts**

Không quan sát thấy màu primary action riêng biệt; dùng các button trung tính đã trích xuất thay vì tự tạo màu CTA đặc.

2. Tạo một color-coded feature card: border-radius 24px, nền #aa2d00 (Terracotta), panel trắng #ffffff bên trong với padding 16px chứa heading 24px Haas weight 600 #181d26, body text 16px Haas weight 400 #333840 và ghost button (nền trắng, border 1px #181d26, radius 12px) có nhãn 'Learn more'.

4. Tạo một tabbed feature section: bố cục 2 cột. Cột trái có tab đánh số (01–04) ở Haas 500, tab active màu #181d26 weight 600 với thanh chỉ báo trái, tab inactive màu #9297a0 weight 400. Cột phải là khối #aa2d00 (Terracotta) lớn với card trắng bên trong chứa nội dung feature và ghost button 'Learn more'.

5. Tạo một announcement banner: dải full-width, nền #f8fafc, padding dọc 12px, text canh giữa ở Haas 400 14px #333840 với inline link màu #1b61c9 (Cobalt Blue) và nút dismiss '×' nhỏ ở phía xa bên phải.

## Similar Brands

- **Notion** — Cùng cách tiếp cận nền trung tính ấm, cùng khoảng trắng rộng rãi, cùng mẫu hero-can-giữa-với-ảnh-chụp-màn-hình, dù Notion thiên về đơn sắc hơn
- **Linear** — Typography editorial sạch sẽ tương tự và cách dùng màu gần đen tự tin cho primary action, nhưng Linear ưu tiên dark-mode và mang tính hình học hơn
- **Webflow** — Mẫu chung của các feature/use-case section được mã hóa màu với khối accent bão hòa, dù Webflow dùng tím làm neo thương hiệu đơn lẻ mạnh hơn
- **Figma** — Chiến lược hình ảnh product-screenshot-as-hero tương tự và hệ thống accent đa sắc thay vì một màu thương hiệu duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment-cream: #faf5e8;
  --color-pure-white: #ffffff;
  --color-frost-white: #f8fafc;
  --color-onyx: #181d26;
  --color-charcoal: #333840;
  --color-graphite: #525965;
  --color-steel: #9297a0;
  --color-silver-border: #e0e2e6;
  --color-midnight-indigo: #040e20;
  --color-cobalt-blue: #1b61c9;
  --color-sapphire: #254fad;
  --color-terracotta: #aa2d00;
  --color-burnt-sienna: #912e1f;
  --color-peach-glow: #fcab79;
  --color-forest-ink: #0a2e0e;
  --color-moss: #214224;
  --color-petal-pink: #fa91e0;
  --color-marigold: #fcb42a;
  --color-pale-sky: #c7e5f2;

  /* Typography — Font Families */
  --font-haas-groot-disp: 'Haas Groot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haas: 'Haas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.35;
  --tracking-caption: 0.07px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: 0.096px;
  --text-body: 18px;
  --leading-body: 1.35;
  --tracking-body: 0.126px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: 0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 0.264px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: 0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: 0.8px;
  --text-display: 48px;
  --leading-display: 1.5;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Named Radii */
  --radius-tags: 32px;
  --radius-cards: 16px;
  --radius-buttons: 12px;
  --radius-featurecards: 24px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset;
  --shadow-lg: rgba(15, 48, 106, 0.05) 0px 0px 20px 0px;

  /* Surfaces */
  --surface-parchment-canvas: #faf5e8;
  --surface-white-card: #ffffff;
  --surface-frost-white: #f8fafc;
  --surface-pale-sky: #c7e5f2;
  --surface-onyx-frame: #181d26;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment-cream: #faf5e8;
  --color-pure-white: #ffffff;
  --color-frost-white: #f8fafc;
  --color-onyx: #181d26;
  --color-charcoal: #333840;
  --color-graphite: #525965;
  --color-steel: #9297a0;
  --color-silver-border: #e0e2e6;
  --color-midnight-indigo: #040e20;
  --color-cobalt-blue: #1b61c9;
  --color-sapphire: #254fad;
  --color-terracotta: #aa2d00;
  --color-burnt-sienna: #912e1f;
  --color-peach-glow: #fcab79;
  --color-forest-ink: #0a2e0e;
  --color-moss: #214224;
  --color-petal-pink: #fa91e0;
  --color-marigold: #fcb42a;
  --color-pale-sky: #c7e5f2;

  /* Typography */
  --font-haas-groot-disp: 'Haas Groot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haas: 'Haas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.35;
  --tracking-caption: 0.07px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: 0.096px;
  --text-body: 18px;
  --leading-body: 1.35;
  --tracking-body: 0.126px;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: 0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: 0.264px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: 0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: 0.8px;
  --text-display: 48px;
  --leading-display: 1.5;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset;
  --shadow-lg: rgba(15, 48, 106, 0.05) 0px 0px 20px 0px;
}
```