Overview

Aesthetic direction

Confirm the starting point#

Inspect the project for a brand, product style, design system, theme, tokens, components, and local fonts. Inspect active references and the latest ready source.

If a system exists, preserve it unless the user requests a redesign. Use design-system-inspection instead of inventing a new system.

If no system exists and the brief is clear, choose a direction yourself. If the missing direction can change the main result, use one combined discovery round.

Connect the direction to the brief#

Choose three useful qualities for the intended experience. Connect every choice to the audience, subject, and main action. Add one signature idea that gives the work a clear identity. Do not add decoration that has no product purpose.

Commit on these axes:

  • Typography: Select one or two local or browser-safe font families with clear roles.
  • Color: Select a warm, cool, or neutral tone with clear surface, text, action, and state roles.
  • Density: Select compact, normal, or spacious spacing for the product use.
  • Shape: Select a consistent radius, border, and elevation approach.
  • Components: Select clear primary and secondary control styles.
  • Imagery: Use licensed local assets or honest placeholders.
  • Motion: Use quiet, expressive, or no motion based on the task.

Do not assume paid fonts, remote fonts, remote images, or public icon packages. Do not choose a familiar AI house style without a reason from the brief. Warm editorial styling, bright gradients, large rounded cards, and glass effects are valid only when the context supports them.

Define the system in source#

Create a small set of CSS custom properties or use the current project's token format. Define only values that the requested interface needs. Do not create a separate token document or framework for a small prototype. Use the selected values consistently instead of adding unrelated inline values.

Build the complete requested surface with this direction. Review the result with generic-design-review and hierarchy-rhythm-review when the change is broad.

Updated

Was this page helpful?