Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Airtable
ProductivityAirtable projects sophisticated accessibility through expansive white space and a distinctive custom typeface (Haas Groot) that feels both human and systematic. The design creates trust through restraint—using a monochromatic palette with strategic blue accents that feel more like gentle guidance than aggressive marketing.
Design Identity
Signature Color
Airtable Blue
#2D7FF9
Collaborative intelligence—a blue that suggests both human creativity and systematic precision
Visual Identity
Massive typographic hierarchy with generous line-height ratios (1.5x) and distinctive Haas Groot Display creating breathing room that makes complex workflows feel manageable
Component Style
Soft-cornered buttons with sophisticated layered shadows featuring colored glows (#2d7ff947), creating depth without harshness. Components feel substantial but approachable with subtle border treatments.
Spacing Philosophy
Cathedral-like vertical spacing creates a sense of calm mastery—large sections breathe with 80-120px gaps while maintaining intimate 16-24px component spacing for focus
Design Principles
- Line-height always 1.2-1.5x font size for readability
- Shadows use colored glows (#2d7ff947) rather than pure black
- Typography weight stays at 400—never bold, relying on size for hierarchy
- Blue accents appear sparingly as interactive hints, not branding
- Button shadows have 4-layer complexity for premium feel
Target Audience
Operations managers and project coordinators who need powerful tools but aren't technical specialists—people who value clarity over complexity
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| header | 20px | 400 | 25px | |
| body | 20px | 400 | 30px | |
| h1 | 40px | 400 | 48px | |
| h2 | 14px | 400 | 18.9px | |
| h3 | 24px | 400 | 32.4px | |
| p | 14px | 400 | 17.5px | |
| a | 14px | 400 | 17.5px | |
| button | 14px | 400 | 17.5px | |
| nav | 20px | 400 | 25px | |
| footer | 20px | 400 | 30px |
Color Palette
No colors extracted
