# Airtable — DESIGN.md

Base navigation sits above table and view controls.

## Agent task
Use these observed references to build an original interface.

## Font
ATSeasonSans, Haas, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; Haas, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

## Marketing — Light and accent surfaces

### Observed palette
- color: `rgb(37, 79, 173)`
- color: `rgb(51, 56, 64)`
- color: `rgb(24, 29, 38)`
- color: `rgb(0, 0, 0)`
- color: `rgb(68, 68, 68)`
- background: `rgb(255, 255, 255)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Try it now | 14px / 18.2px | 650 | Not recorded |
| Control | 14px / 17.5px | 400 | Not recorded |
| Airtable home or view your bases | 20px / 25px | 400 | Not recorded |
| Platform | 14px / 18.2px | 550 | Not recorded |
| Airtable PlatformUnlock the power of a next-g | 20px / 26px | 650 | Not recorded |

### Layout & hierarchy
- Base navigation sits above table and view controls.
- A view sidebar sits beside a dense data grid.
- Toolbar popovers expose filtering, grouping and density.

### Components & behavior
- Grid fields use typed column headers.
- View controls use compact icon buttons.
- Searchable field lists power sort and visibility controls.

## Product — Light data grid; measurements unavailable

### Observed palette
Not captured.

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|


### Layout & hierarchy
- Product screens captured; DOM measurements unavailable.

### Components & behavior
- Product geometry and styles unavailable; no hotspots were inferred.

## Implementation recommendations
- Preserve the observed hierarchy and spacing roles.
- Use original content and branding.
- Do not infer missing onboarding or paid workflows.

## Interaction inventory
- Blank base: New base with default fields and three empty records. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.
- Filter records: Empty filter configuration for the new base. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.
- Sort records: Field selection for sorting the grid. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.
- Field visibility: Control which fields appear in the grid. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.
- Group records: Choose a field to group records. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.
- Row density: Available grid row heights. Cropped 56 CSS px from left to exclude the personal avatar rail. Same source capture appears in the walkthrough.

## Avoid
Do not treat exploratory branches as a completed signup journey.

## Reference pages
- https://www.airtable.com/
- https://airtable.com/pricing
- https://www.airtable.com/platform/automations

## Capture scope
Existing account resumed through Google; a newly created blank base and view controls. Original signup not observed.

## Format inspiration
Existing Screenrove design guide structure.