airtable-ui-skillslisted

# Airtable UI Skills Opinionated constraints for building Airtable-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building light-mode interfaces - Creating Airtable-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - SHOULD use light backgrounds for primary surfaces - MUST use `#FDF5EA` as page background (`surface-base`) - SHOULD limit color palette to 8 distinct colors - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #FDF5EA | rgb(253,245,234) | Page background | | `surface-raised` | #13151D | rgb(19,21,29) | Cards, modals, raised surfaces | | `text-primary` | #B5B8BC | rgb(181,184,188) | Headings, body text | | `text-2` | #666159 | rgb(102,97,89) | Additional text | | `text-tertiary` | #6B2B66 | rgb(107,43,102) | Additional text | | `border-default` | #2F2C2F | rgb(47,44,47) | Subtle borders, dividers | | `warning` | #FDF5EA | rgb(253,245,234) | Warning states, cautions | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `145px` / `700` for primary headings - MUST use `24px` / `400` for body text - MUST limit font weights to: medium, regular, bold - MUST use `text-balance` for headings and `text-pretty` for body text - SHOULD use `tabular-nums` for numeric data - NEVER modify letter-spacing unless explicitly req