An unofficial, original Airtable-inspired product system built around structured data, apps, agents, and team momentum, responsive proof surfaces, and 24 research-selected elements.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An AI workflow and data-storytelling system shaped by Airtable's current enterprise homepage: a clear build-with-AI promise, tabbed capability proof, connected data surfaces, and scalable governance signals.
Structured data made approachable: crisp blue actions, white grid surfaces, dark themeTypography
ATSeasonSans
Observed Airtable display, navigation, controls, and product UI family
ATSeasonSans, Haas Groot Disp, Haas, -apple-system, system-ui, Segoe UI, Roboto, sans-serifFallback: Haas Groot Disp, -apple-system, Segoe UI, Arial, sans-serif
Haas Groot Disp
Observed Airtable body fallback and long-form content family
Haas Groot Disp, Haas, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serifFallback: -apple-system, system-ui, Segoe UI, Arial, sans-serif
Palette
Canvas
#f6f7fbCool data page field
Ink
#16213bPrimary headings, labels, and table text
Blue action
#3159efBuild, add field, automation, and focus action
Coral signal
#ef6a4bAI insight, warning, and secondary emphasis
Surface
#ffffffGrid, interface, and reporting surface
Raised grid
#edf0f8Selected row, header, and secondary panel
Divider
#d8deeaTable gridlines and card boundaries
Dark canvas
#0d1120Explicit dark mode page field
Dark surface
#151b2fExplicit dark mode grid and panel
Success
#238b68Synced record, automation, and completed step
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Utility | 14px | 650 | 18px | 0.01em |
| Body | 16px | 400 | 1.5 | 0 |
| Lead | 20px | 400 | 1.45 | 0 |
| Card title | 28px | 500 | 1.1 | -0.03em |
| Section title | 48px | 500 | 1.15 | -0.025em |
| Hero display | 64px | 550 | 1 | -0.02em |
Spacing & shape
Iconography
Pair field and automation glyphs with text, expose table relationships semantically, and keep status chips legible without relying on hue.
System metrics
Radius
Spacing
Motion
Elevation
Grid panel
0 22px 70px rgba(22,33,59,.11)Lift an interface or reporting specimen
Field menu
0 16px 38px rgba(22,33,59,.14)Keep column and automation choices above the grid
Surfaces & shape
Page
#f6f7fb / #0d1120Light and dark canvas
Grid
#ffffff / #151b2fRecords, interfaces, and reports
Raised
#edf0f8 / #202943Headers, selected rows, and AI context
Guidelines
Imagery
Use original records, field chips, workflow nodes, reports, and abstract data geometry. Do not reuse Airtable logos, customer marks, proprietary screenshots, or production video frames.
Layout
Start with a clear AI workflow hero, then use a proof rail, four capability tabs, case-study cards, and a compact grid/automation stage. Collapse tables to stacked rows while preserving labels below 900px.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
24 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.