ui-designlisted

# UI Design — Comprehensive Design Intelligence The complete design skill. 230+ font pairings, 48 themes (with exact hex palettes), 65 real design systems, 23 design languages, 30 UX laws, 14 color systems, Swiss grid, Gestalt principles, and Pencil.dev .pen file workflow. **Inherits**: `ui-ux-pro-max` (99 UX rules, 10 categories) + `impeccable-frontend-design` (anti-AI-slop philosophy) + `ui-design-pipeline` (INSPIRE→DEFINE→ILLUSTRATE→IMPLEMENT) ## Design Philosophy (from design expert feedback) > "Designing is meant to be creative, not fixed." 1. **Functionality first** — Make it work before making it pretty 2. **Layout second** — Structure the content, establish hierarchy 3. **UI polish last** — Apply great styling, spacing, effects 4. **Anti-generic** — The #1 enemy is generic design. Every project should feel unique. 5. **Creative spacing** — Spacing should breathe and have rhythm, not be rigid everywhere 6. **Swiss-flexible grid** — Swiss grid for structure, but allow intentional offsets 7. **Grid for components** — Grid systems organize components and text, not "grid UI everywhere" ### Pipeline ``` pencil.dev → framer → code ``` Design in pencil.dev (.pen files), prototype in Framer, implement in code. UX elements like loaders must be ensured at every stage. --- ## Quick Decision: What to Read | Need | Jump To | |------|---------| | Choose fonts | §1 Font Pairings | | Choose colors | §4 Color Systems | | Choose a visual style | §3 Design Languages | | Refere