editorial-minimal-ui

name	editorial-minimal-ui
description	Design expressive, motion-led product interfaces for web and native apps. Use when the user wants a vivid, polished, native-feeling UI with one memorable interactive object, clear touch-first controls, intentional color, layered depth, and smooth state transitions—not a generic SaaS dashboard or a cold editorial layout.

Editorial Minimal UI

Create product interfaces that feel alive, specific, and immediately usable. Here, minimal means one strong interaction idea per screen—not pale surfaces, sparse copy, or the absence of color.

This skill is for expressive app UI: a music player where sound has a physical surface, a weather app where conditions shape the scene, a data product where the key metric becomes an object you can read and touch. It is not a fixed template and must not copy a named designer’s exact layouts, assets, icons, or product screens.

The core move: choose one product object

Before designing or coding, identify:

1. The moment: what does the user need to understand or do now?
2. The object: which product-native visual object makes that moment tangible? Examples: a playback field, a weather orb, a route ribbon, an allocation dial, a timer ring.
3. The state: what changes when the user acts—value, position, mode, progress, or focus?
4. The platform: iOS / Android / web app / marketing page, and its input model.

The object must carry information or interaction. Do not add 3D, gradients, blur, cards, or animation merely to make a screen look expensive.

Screen recipe

Build each primary screen from four layers:

1. A confident field — a committed base color or dark/light environment that sets a mood.
2. One expressive object — large enough to be remembered; tied to a real product state.
3. A compact control cluster — touchable, native-feeling controls with clear labels and hierarchy.
4. Quiet supporting data — only the secondary information needed for the next decision.

Cards are allowed when they represent a distinct function, state, or depth plane. Vary their size and role; never fill a page with identical icon-title-description cards. Use rounded shapes, color, depth, or translucency only when they make grouping, touch, or state easier to understand.

Visual system

• Choose a color strategy before choosing colors: restrained, committed, full palette, or drenched. For expressive product work, a committed base color or full palette is often stronger than an apologetic neutral.
• Use color semantically: current mode, progress, selected state, risk, energy, or priority. Never make color the only carrier of information.
• Build depth through overlap, scale, occlusion, tonal layers, and shadows with a clear light source. Do not stack decorative glass panels.
• Treat data as an instrument: a ring, orbit, dial, ribbon, map, waveform, or another readable product object—not a tiny chart inside a default card.
• Prefer a strong sans and a purposeful display weight. Use a second family only when it creates a real contrast in voice or reading role.
• Make controls feel native: practical touch targets, obvious pressed/selected states, and platform-appropriate navigation. Do not wrap a desktop landing page in a phone frame and call it an app.

Composition

• Make the primary action obvious within one glance. The screen should answer “what is this?” and “what can I do?” before decorative detail appears.
• Let the expressive object dominate one region, then anchor the action near the thumb or pointer path.
• Use asymmetry and crop to create energy, but preserve reliable alignment for controls and data.
• On mobile, design the thumb zone and interruption states first. On desktop, use pointer position and viewport space to expand—not duplicate—the interaction.
• Keep copy specific and short. Real labels, values, and meaningful empty states are part of the visual quality.

Motion

Motion is state communication, not presentation polish.

• Give the primary object one coherent behavior: respond to a drag, breathe with playback, rotate with selection, settle after an action, or transition between modes.
• Use transform, opacity, blur, mask, and shadow only when they clarify depth or change. Favor responsive easing; avoid elastic or bouncy motion by default.
• Keep functional controls usable while motion runs. Respect prefers-reduced-motion: preserve the final state, labels, and feedback without requiring animation.
• Do not apply the same reveal animation to every element. One orchestrated transition is stronger than a page full of entrances.

Quality floor

• Functional text and controls meet accessible contrast; labels, focus states, and touch targets remain practical.
• The primary object has a stated data/interaction role and a source/license status if it uses media.
• Mobile, tablet, and desktop have deliberate compositions, not scaled copies.
• Implement real states: loading, selected, empty, disabled, error, and reduced motion when relevant.
• Do not claim an interaction was implemented if only a static mockup exists.

Review and handoff

Use references/design-direction-card.md for design or implementation. Use references/review-checklist.md for review.

Deliver:

1. A one-sentence product moment and visual-object thesis.
2. Color, type, depth, and control decisions.
3. The object’s state model and motion behavior.
4. Mobile and desktop behavior, including reduced-motion fallback.
5. A concise self-review using the 30-point Expressive Product Score.