Dembrandt

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

View modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or reviewing any repeated component.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.