amplitude-ui-skillslisted

# Amplitude UI Skills Opinionated constraints for building Amplitude-style interfaces with AI agents. ## When to Apply Reference these guidelines when: - Building light-mode interfaces - Creating Amplitude-inspired design systems - Implementing UIs with Inter font and 4px grid ## Colors - SHOULD use light backgrounds for primary surfaces - MUST use `#000000` as page background (`surface-base`) - MUST use `#3151E1` for primary actions and focus states (`accent`) - SHOULD reduce color palette (currently 25 colors detected) - MUST maintain text contrast ratio of at least 4.5:1 for accessibility ### Semantic Tokens | Token | HEX | RGB | Usage | |-------|-----|-----|-------| | `surface-base` | #000000 | rgb(0,0,0) | Page background | | `surface-raised` | #FFFFFF | rgb(255,255,255) | Cards, modals, raised surfaces | | `surface-overlay` | #EFF0F4 | rgb(239,240,244) | Overlays, tooltips, dropdowns | | `text-primary` | #171717 | rgb(23,23,23) | Headings, body text | | `text-2` | #383838 | rgb(56,56,56) | Additional text | | `text-secondary` | #BBBBBB | rgb(187,187,187) | Secondary, muted text | | `border-default` | #3A3A3A | rgb(58,58,58) | Subtle borders, dividers | | `accent` | #3151E1 | rgb(49,81,225) | Primary actions, links, focus | ## Typography - MUST use `Inter` as primary font family - SHOULD use single font family for consistency - MUST use `58px` / `700` for primary headings - MUST use `23px` / `500` for body text - SHOULD reduce font weights (currently 4 detected)