Create a comprehensive design token system using CSS custom properties. Define tokens for: colors (primary, secondary, accent, neutral scales from 50–950, semantic tokens for success/warning/error/info), typography (font families, size scale using rem, weight, line height, letter spacing), spacing (4px base unit scale: 0.25rem to 6rem), border radius (sm, md, lg, xl, full), shadows (sm, md, lg, xl with both light and dark theme versions), transitions (duration and easing functions), and breakpoints. Include a dark theme override that remaps color tokens. Document each token with its use case.
#45UI/UX
Component Style Guide Page
Build a living style guide page that showcases all UI components in your design system. Include sections for: typography (headings h1-h6, body text, captions, code), colors (swatches with hex values and token names), buttons (all variants, sizes, states), form elements (inputs, textareas, selects, checkboxes, radios, toggles — each with default, focus, error, and disabled states), cards (basic, media, interactive), badges and tags, alert/notification banners, loading states (spinners, skeletons, progress bars), and spacing/layout examples. Each component should have a live example and the markup shown below it.
#46UI/UX
Responsive Navigation System
Build a responsive navigation system that adapts across breakpoints. Desktop (>1024px): horizontal nav bar with logo, menu links, search input, and user dropdown. Tablet (768-1024px): logo and hamburger menu, search moves into the slide-out menu. Mobile (<768px): sticky bottom tab bar with 5 icon+label items for primary navigation, hamburger for secondary. Include smooth transitions between states, keyboard navigation support, focus trapping in mobile menu, and current page highlighting. The mobile bottom bar should hide on scroll down and reappear on scroll up.
#47UI/UX
Skeleton Loading System
Create a skeleton loading component system that provides placeholder UI while content loads. Build skeleton variants for: text lines (varying widths to simulate paragraphs), avatar (circle), image (rectangle with aspect ratio), card (composed skeleton with image, title lines, and description lines), table row (cells with varying widths), and list item (avatar + text lines). Add a shimmer animation that sweeps across all skeleton elements. The skeletons should match the exact dimensions of the real components they replace to prevent layout shift (CLS). Include a wrapper component that toggles between skeleton and real content based on a loading prop.
#48UI/UX
Toast Notification System
Build a toast notification system that can be triggered from anywhere in the application. Support 4 types: success (green), error (red), warning (amber), and info (blue). Each toast should have an icon, message text, optional action button, and auto-dismiss timer (configurable, default 5 seconds). Toasts stack vertically in the bottom-right corner with smooth enter/exit animations (slide in from right, fade out up). Include keyboard accessibility: toasts pause auto-dismiss on hover or focus, and can be dismissed with Escape. Limit to 5 visible toasts, queue extras. Provide a simple API: toast.success("Saved!"), toast.error("Failed", { action: { label: "Retry", onClick: fn } }).
#49UI/UX
Accessibility Audit Checklist
Review the following code and perform a thorough accessibility audit: [paste code]. Check for: proper heading hierarchy (h1-h6 in order, no skips), alt text on all images (meaningful, not "image of..."), form labels associated with inputs (for/id or wrapping), ARIA roles and properties (correct usage, not redundant with semantic HTML), keyboard navigation (all interactive elements reachable, logical tab order, visible focus indicators), color contrast (check text/background combinations against WCAG 2.1 AA standards: 4.5:1 for normal text, 3:1 for large text), touch target sizes (minimum 44x44px), and screen reader testing notes. Provide specific fixes for each issue found.
#50UI/UX
Empty State & Error Page Designs
Design a set of 5 empty state and error page layouts using pure CSS illustrations (no images). Create: "No results found" (magnifying glass with empty page), "Inbox zero" (open envelope with checkmark), "404 Not Found" (broken link chain), "Connection error" (disconnected plug), and "Under construction" (traffic cone with stripes). Each layout should include the illustration, a clear heading, a descriptive subtitle, and a primary action button. Use CSS shapes, gradients, and pseudo-elements for the illustrations. Keep the style minimal and consistent with a dark theme.