Design or audit UI for Qt/QML, Qt projects, web, or embedded MPU or MCU targets. Use when creating screens, layouts, navigation, or auditing UX.

Qt UI Design Before producing UI output, confirm you know: target platform, screen geometry, design system, content priority, viewing distance, locale, and input methods. Run the seven items below as a check against the conversation and the project state; ask only the items that are genuinely missing. When the user cannot answer an item, choose a sensible Qt default and name it in your response so the user can correct it. Small edits to an existing design — for example "move the OK button to the right" , "change this label" , "make this red" — do not trigger the checklist. Apply section 1 silently and verify section 2 (contrast, hit target) where relevant. 0. Context check (before designing) Use the seven items below to decide what is already known and what to ask. If the conversation or repository has already answered an item, do not re ask. 1. Target platform — Desktop, web browser, mobile, or specific hardware (MCU, Raspberry Pi, other embedded board)? If a specific board: ask whether a board specific skill exists for it and load it if so. 2. Screen shape — Rectangle (default), Square, or Circle? 3. Resolution and DPI — Do you know the screen resolution and DPI? (Approximate is fine.) 4. Design system — Check whether the project already uses a design system or Qt Quick Controls style. If so, follow it and reuse its tokens. If not, recommend a Qt Quick Controls style: Basic, Fusion, Imagine, Material, Universal, iOS, or FluentWinUI3 (the iOS and FluentWinUI3 styles require Qt 6.7 or later). Where the project follows a third party design language (Material Design 3, Apple Human Interface Guidelines, Fluent 2), map its tokens to the corresponding Qt Quick Controls style rather than introducing a parallel token vocabulary. 5. Content priority — What information is most important (primary), secondary, and tertiary on this screen? 6. Viewing distance — How far will users be from the screen? (e.g. handheld ~30 cm, desk ~60 cm, panel ~1.5 m, wall ~3 m) 7. Locale and input — What is the primary locale/language? Is RTL (Arabic, Hebrew, Farsi, Urdu) support required? What input methods must be supported (touch, keyboard, mouse/pointer, hardware buttons, voice)? If the target is an embedded or MCU device, also read section 4 in full before any design decisions — it overrides several desktop defaults. If the user is requesting an audit of an existing design , skip to section 5 (Audit). 1. Design principles to apply (all targets) Apply these while designing. Do not ask about each one — use them to inform decisions silently. Content and layout: Golden Ratio + Rule of Thirds: Place primary elements at visual intersections. Progressive Disclosure: Show only what is needed at the current step. Inverted Pyramid: Critical information first, elaboration after. Modularity: Divide complex flows into smaller, self contained screens. Ockham's Razor: When two designs are equivalent, choose the simpler one. Performance Load: Fewer steps = higher task completion. Five Hat Racks: Organise by category, time, location, alphabet, or continuum. Perception and interaction: Jakob's Law: Match patterns users already know. Affordance: Controls should look like what they do. Hick's Law: More choices = slower decisions. Limit options per screen. Miller's Law: Working memory holds ~7 items. Chunk accordingly. Recognition Over Recall: Show options; don't require memorisation. Proximity + Similarity: Group related elements visually. Uniform Connectedness: Shared border or color = same group. von Restorff Effect: One visually distinct element draws attention — use sparingly. Peak End Rule: Users remember the peak moment and the ending. Design completion states (e.g. installer finish screens) to feel rewarding, not abrupt. Doherty Threshold: System feedback within 400 ms, or show a progress indicator. Aesthetic Usability Effect: Polished design is perceived as more usable. Wayfinding: Users must always know where they are, where they've been, where they can go. Reading patterns (use to guide information placement): F shaped: Text heavy content — top bar, shorter secondary bar, left edge scan. Z shaped: Sparse content — top left → top right → diagonal → bottom right. Layer cake: Users scan headings and skip body text. Spotted: Users jump to landmarks — links, capitals, list items. Buttons and CTAs: Limit CTA buttons per group. OK + Cancel = one group; additional actions must be visually secondary. Use Proximity and Similarity to distinguish primary, secondary, and tertiary controls. Error prevention: Design affordances that guide correct use. Allow undo wherever technically possible. Confirm before destructive or irreversible actions. Add alarms or prompts for danger states. Responsiveness (desktop/web only — embedded: see section 4): Design to your primary target's resolution first — desktop with chrome, embedded fixed resolution, or a window resize range typical for the application. Stack, collapse, or hide secondary content for narrower widths. Minimum layout width: 240 px. Stack or collapse elements below this. Hide secondary features behind menus or dropdowns when space is tight. 1.1 Motion and animation (desktop/web — embedded: see section 4) Motion communicates state, relationship, and causality. Every animation must be functional, not decorative. Enter animations: Use deceleration easing (fast start, slow end). Elements should appear to arrive, not just pop. Exit animations: Use acceleration easing (slow start, fast end). Elements should appear to leave, not vanish. Direct manipulation feedback: Respond within 100 ms. Operations taking 1 s must show a progress indicator; 10 s must show estimated time. Duration budgets: Small elements (icons, badges): 100–150 ms. Medium elements (cards, panels): 200–300 ms. Full screen transitions: 300–400 ms. Never exceed 500 ms for any UI animation — slower feels broken. Limit simultaneous animations to one or two elements. Animating the whole screen at once disorients. Animate only transform and opacity in QML/CSS — these are GPU composited. Animating geometry (width, height, anchors) triggers layout recalculation and causes jank. Honour user preference for reduced motion. On the web, gate non essential animation behind the prefers reduced motion CSS media query. Qt 6.x has no built in equivalent: expose a project level setting (for example a singleton property bound to QSettings or to a runtime accessibility option) and gate animations on it. When the user opts out, replace animation with instant transitions — do not simply slow them down. Spatial consistency: Elements that move between screens should animate in the direction that matches their destination (forward = slide left, back = slide right for LTR layouts). 1.2 Typography scale (desktop/web) For embedded typography, see section 4.4. This subsection governs desktop and web targets only. Use a modular scale to derive all type sizes. A modular scale is a sequence of numbers related by a fixed ratio — every size is mathematically proportional to every other, producing a scale that feels harmonious rather than arbitrary. The ratios are listed below; see also https://www.modularscale.com/ for an interactive generator. How to build the scale 1. Choose a base — the size at which your body text looks best at the target viewing distance. For desktop at ~60 cm, 16 px is a reliable starting point. The base is your ms(0) . 2. Choose a ratio — multiply the base by this ratio to get the next step up, divide to get the next step down. Pick based on the character of the product: Ratio Name Factor Character 8:9 Major second 1.125 Compact, dense — good for data heavy UIs, installer flows 5:6 Minor third 1.200 Moderate — good for general desktop apps 4:5 Major third 1.250 Open, comfortable — good for marketing, onboarding 3:4 Perfect fourth 1.333 Strong contrast — good for dashboards, bold hierarchy 1:1.618 Golden section 1.618 High contrast — use sparingly; large gaps between steps 3. Map scale steps to roles — assign a step number to each typographic role. Never add roles not on the scale; if a size is needed, pick the nearest step. Worked example (base 16 px, Perfect Fourth 1.333) ms() Value (px, rounded) Role ms(3) 37.9 → 38 px Display / hero text ms(2) 28.4 → 28 px Page title / H1 ms(1) 21.3 → 21 px Section heading / H2 ms(0) 16 px Body — base ms( 1) 12.0 → 12 px Caption / label / metadata Use a maximum of three to four of these steps per screen . More than four active sizes creates visual noise. Rules that apply to all modular scales Body (ms(0)) minimum is 16 px at desktop viewing distance (~60 cm). Never use ms( 1) or smaller for primary reading content. Line height: 1.4–1.6× for body. 1.1–1.2× for headings (they need less leading). Line length: 45–75 characters per line for comfortable reading. Use max width on text containers — do not let prose span the full viewport. Weight pairs: Use Regular (400) for body and captions; Medium (500) for headings. Never use Bold (700) inside body text. System font first. Use the OS/platform system font by default (Segoe UI Variable on Windows, SF Pro on macOS, Roboto on Android/Linux). Only introduce a custom font when there is a brand requirement and a Figma token exists for it. Verify at Large system font size. Do not hardcode pixel values that ignore the OS font scale. In Qt, prefer font.pointSize (which respects the platform DPI scale) over font.pixelSize for body text, or derive sizes from a singleton driven by Screen.pixelDensity . On the web, use relative units ( rem ). Qt/QML implementation In QML, define the scale as a singleton (e.g. TypeScale.qml ) so sizes are referenced by role name, not hardcoded values: Reference via TypeScale.h1 in components. Recalculate the whole singleton when the base or ratio changes — never patch individual values. Register the singleton in your QML module so it can be imported. In a qmldir file: In CMake with qt add qml module : 1.3 Multi input and keyboard navigation (desktop/web) Every desktop and web interface must support multiple input methods. Do not design for pointer alone. Full keyboard navigability is required. Tab order must follow the visual reading order (top left to bottom right for LTR). Always render a visible focus indicator — in QML, drive it from activeFocus (for example a Rectangle border or scale bound to activeFocus ) or use the style specific focus visuals on Control . On the web, do not remove the focus ring without a styled replacement. No keyboard traps. Users navigating by keyboard must always be able to exit any modal, popover, or overlay using Escape or a keyboard accessible close control. Every interactive element must be reachable by pointer, keyboard, and — where Qt's accessibility APIs expose it — screen reader. This is a requirement, not a recommendation. Hover states are an enhancement, not the primary disclosure mechanism. Any information shown on hover must also be accessible without a pointer (e.g. a visible label, a dedicated info button, or keyboard triggered tooltip). Touch and pointer coexist. On touch devices that also support a stylus or pointer, do not remove touch targets when a pointer is detected. 1.4 Semantic colour Colour should communicate meaning consistently across the entire interface. Avoid arbitrary colour choices. Use role based tokens, not raw hex values. Token names should describe the role a colour plays (interactive, surface, on surface, error, outline), not its appearance (blue, dark blue, grey 2). The role vocabulary above mirrors Material Design

qt-ui-design