airbnb-ui-skillslisted
Install: claude install-skill goharabbas321/zeoel-framework
# Airbnb UI Skills
Opinionated constraints for building Airbnb-style interfaces with AI agents.
## When to Apply
Reference these guidelines when:
- Building light-mode interfaces
- Creating Airbnb-inspired design systems
- Implementing UIs with Inter font and 4px grid
## Colors
- SHOULD use light backgrounds for primary surfaces
- MUST use `#FEFEFE` as page background (`surface-base`)
- SHOULD reduce color palette (currently 13 colors detected)
- MUST maintain text contrast ratio of at least 4.5:1 for accessibility
### Semantic Tokens
| Token | HEX | RGB | Usage |
|-------|-----|-----|-------|
| `surface-base` | #FEFEFE | rgb(254,254,254) | Page background |
| `surface-raised` | #EEEBE4 | rgb(238,235,228) | Cards, modals, raised surfaces |
| `surface-overlay` | #D5D3D1 | rgb(213,211,209) | Overlays, tooltips, dropdowns |
| `text-primary` | #8F8F8F | rgb(143,143,143) | Headings, body text |
| `text-2` | #5C5955 | rgb(92,89,85) | Additional text |
| `text-secondary` | #686868 | rgb(104,104,104) | Secondary, muted text |
| `border-default` | #E6DECC | rgb(230,222,204) | Subtle borders, dividers |
| `destructive` | #E25275 | rgb(226,82,117) | Error states, delete actions |
| `warning` | #E6DECC | rgb(230,222,204) | Warning states, cautions |
## Typography
- MUST use `Inter` as primary font family
- SHOULD use single font family for consistency
- MUST use `19px` / `500` for primary headings
- MUST use `15px` / `400` for body text
- MUST limit font weights to: light, regul