Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a header toolbar or footer.
UI density — how much information and how many features appear at once — should match the primary platform and user type.
Orchestrates a multi-dimensional UI/UX task through the full dembrandt design pipeline (brand → tokens → layout → components → UX polish → accessibility/performance gate), loading…
Build accessible, user-friendly forms with validation. Covers react-hook-form, Zod schemas, error handling UX, multi-step forms, input patterns, and form accessibility.
The most important actions and content in a UI should be visually prominent — through size, colour, weight, and position.
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt.
Audit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising page load, fixing layout shift, reducing input delay,…
Sticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the bottom on mobile.
Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and…
Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made. Extracts live design tokens, normalizes them into a semantic system, applies UX…
Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders…
Scroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a time and always keep the user in control.
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task.
Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product…
Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others.
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading.
UI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scrollable, drawers feel pullable.
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface.
Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness.
Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying toggle, a subtle reveal.
Mobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down. Sections can be hidden, repositioned, or made sticky on mobile.
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements.
Manage user expectations during wait times with appropriate loading states — from simple spinners to complex skeleton screens and staggered animations.
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters — enterprise tools,…
UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification.
Keep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean exactly one thing.
UI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and elements belong together.
UI should make it immediately clear where the user is, what context they are operating in, and what their actions will affect.
UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability.
When something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and notification patterns each have a specific role.
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and…