Dembrandt

Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.

中文简介正在准备中。当前显示原文说明。

Top bar, sidebar rail, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell, a collapsible sidebar, or navigation between apps behind one login.

中文简介正在准备中。当前显示原文说明。

Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.

中文简介正在准备中。当前显示原文说明。

Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.

中文简介正在准备中。当前显示原文说明。

Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.

中文简介正在准备中。当前显示原文说明。

Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.

中文简介正在准备中。当前显示原文说明。

Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand, auditing a design system or fixing visual inconsistency.

中文简介正在准备中。当前显示原文说明。

Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.

中文简介正在准备中。当前显示原文说明。

Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.

中文简介正在准备中。当前显示原文说明。

Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.

中文简介正在准备中。当前显示原文说明。

Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.

中文简介正在准备中。当前显示原文说明。

Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.

中文简介正在准备中。当前显示原文说明。

Show a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two representations at once.

中文简介正在准备中。当前显示原文说明。

Settings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when designing settings panels, solver configuration or constraint editors.

中文简介正在准备中。当前显示原文说明。

Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.

中文简介正在准备中。当前显示原文说明。

Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.

中文简介正在准备中。当前显示原文说明。

Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.

中文简介正在准备中。当前显示原文说明。

A marketing site and its product may differ in density and scale but share one token layer. Use when the two drift apart, share components or need a single token owner.

中文简介正在准备中。当前显示原文说明。

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

中文简介正在准备中。当前显示原文说明。

Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.

中文简介正在准备中。当前显示原文说明。

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

中文简介正在准备中。当前显示原文说明。

Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.

中文简介正在准备中。当前显示原文说明。

Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.

中文简介正在准备中。当前显示原文说明。

Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.

中文简介正在准备中。当前显示原文说明。