ui-design

12 ready-to-use color palettes with exact hex and HSL values in a 50-900 shade scale. Covers primary, neutral, and supporting colors (cyan, blue, purple, teal, red, green, pink, indigo, warm grey, cool grey, blue grey). Apply whenever picking colors, defining CSS custom properties or Tailwind theme colors, choosing background/text/border colors, setting up a design system color scale, or needing semantic colors for error/warning/success states.

Reference patterns with CSS values for: buttons, form inputs, badges, breadcrumbs, pagination, horizontal/vertical/mobile navigation, tables, cards, modals, alerts, pricing pages, hero sections, feature grids, testimonials, footers, activity feeds, checkout pages, dropdowns, and empty states. Apply whenever implementing, styling, or reviewing a specific UI component — provides concrete sizing, padding, shadow, and layout values rather than abstract principles.

Curated typeface catalog with weights, licensing, and CSS snippets for sans-serif fonts (Inter, Roboto, Open Sans, Proxima Nova, Graphik, Futura, Lato, IBM Plex Sans) and serif fonts (Merriweather, EB Garamond, Crimson Pro, Alegreya). Includes font pairing tables and the system font stack. Apply whenever choosing a font-family, setting up CSS font stacks, pairing headline and body typefaces, or deciding between free and commercial fonts for a project.

Rules for visual hierarchy, whitespace, spacing scales, layout, depth (shadows, elevation), and polish. Apply whenever writing or reviewing CSS/HTML styles, deciding on padding/margin/gap values, choosing shadow levels, structuring page layouts, handling responsive design, or improving the overall look and feel of a UI. NOT for picking specific colors (use ui-design:color-palettes), fonts (use ui-design:font-recommendations), building specific components (use ui-design:component-gallery), or accessibility/WCAG compliance (use ui-design:wcag-2.2).

WCAG 2.2 accessibility guidelines with actionable implementation rules for web developers. Covers contrast ratios, keyboard navigation, focus management, ARIA, screen readers, alt text, touch targets, form validation, color blindness, reduced motion, semantic HTML, and landmarks. Apply whenever writing HTML/CSS/JS, building forms, handling focus, choosing colors for accessibility, implementing interactive components, or reviewing code for a11y compliance. Includes all Level A + AA criteria and new 2.2 additions (focus not obscured, dragging alternatives, target size minimum, redundant entry, accessible authentication, consistent help).