Preview image. Unlock full-res
Polished Workflow, Vibrant Efficiency — like a perfectly organized, brightly lit command center.
The Airtable design system conveys an approachable enterprise workflow platform. Its light theme and ample spacing provide a sense of clarity, grounded by a distinctive dark blue (#181D26) for strong text elements and primary actions. Functional interactivity is highlighted by a bright blue (#1B61C9) while a palette of vivid, multi-colored accents introduces a playful, almost illustrative quality, suggesting flexibility and creativity within a structured environment. Rounded corners and subtle shadows soften the experience, making complex AI tools feel less intimidating. Prioritize Slate Ink (#181D26) for headlines and primary actions against light backgrounds for strong contrast. Use Ocean Accent (#1B61C9) exclusively for interactive elements like primary CTAs and active navigation links. Apply 12px border-radius consistently to all buttons and similar interactive elements for a softened feel. Maintain comfortable spacing with 16px for elementGap and 24-48px for cardPadding to ensure visual breathing room. Utilize Haas Groot Disp (or IBM Plex Sans fallback) at its 900 weight for eye-catching, high-impact headlines. Employ the full palette of vivid brand accents (Amethyst, Burnt Sienna, Forest Nudge, Sweet Pink, Sunburst) for illustrative elements, badges, or specific content blocks, not for core UI text or backgrounds. Elevate primary navigation and critical interactive buttons with subtle box shadows to indicate hierarchy and interactivity. Do not use Gray Mist (#E0E2E6) for primary text or backgrounds that require strong contrast. Avoid using the vivid brand accent colors for standard text or backgrounds; reserve them for highlighting and illustration. Do not introduce sharp corners on interactive components; maintain the established 12px or 16px radius for buttons and cards. Avoid excessive use of shadows; most elevation is achieved through color contrast and subtle background shades. Do not use letter-spacing on display-sized text; keep it normal for Haas Groot Disp at 48px. Do not condense spacing beyond 16px for element gaps; preserve the comfortable density.
