Brand Art Direction System v2
Goal
Turn vague design requests into a clear brand art direction that guides layout, typography, color, imagery, motifs, density, and motion.
When to use
Use before implementing a new visual system, landing page, multipage site, product page, portfolio, premium business website, or redesign that needs a distinct look.
Workflow
- Read the product, audience, market, references, assets, and existing brand constraints.
- Define brand adjectives, but convert them into concrete UI decisions: type scale, layout density, color role, surface style, imagery, motifs, and motion behavior.
- Choose what the design should avoid, such as generic SaaS gradients, luxury clichés, excessive whitespace, or overused card patterns.
- Create a compact art-direction note that can guide implementation across sections and components.
- Apply the direction consistently while allowing section-level variation.
- If references conflict, explain the tradeoff and choose the direction that best serves the user goal.
Quality bar
- Compare implementation against the art-direction note.
- Check that colors, type, density, and motifs are applied consistently.
- Run available project validation after implementation changes.
Validation
- Brand direction is specific enough to guide code decisions.
- Visual motifs connect to the business or product instead of generic decoration.
- Design choices remain consistent across the page or site.
Final response
- Summarize art direction, concrete UI decisions, and where it was applied.
1---2name: brand-art-direction-system-v23description: Use this when defining visual direction for a brand, landing page, website, product UI, campaign, portfolio, ecommerce page, or redesign before implementation.4---56# Brand Art Direction System v278## Goal910Turn vague design requests into a clear brand art direction that guides layout, typography, color, imagery, motifs, density, and motion.1112## When to use1314Use before implementing a new visual system, landing page, multipage site, product page, portfolio, premium business website, or redesign that needs a distinct look.1516## Workflow17181. Read the product, audience, market, references, assets, and existing brand constraints.192. Define brand adjectives, but convert them into concrete UI decisions: type scale, layout density, color role, surface style, imagery, motifs, and motion behavior.203. Choose what the design should avoid, such as generic SaaS gradients, luxury clichés, excessive whitespace, or overused card patterns.214. Create a compact art-direction note that can guide implementation across sections and components.225. Apply the direction consistently while allowing section-level variation.236. If references conflict, explain the tradeoff and choose the direction that best serves the user goal.2425## Quality bar2627- Compare implementation against the art-direction note.28- Check that colors, type, density, and motifs are applied consistently.29- Run available project validation after implementation changes.3031## Validation3233- Brand direction is specific enough to guide code decisions.34- Visual motifs connect to the business or product instead of generic decoration.35- Design choices remain consistent across the page or site.3637## Final response3839- Summarize art direction, concrete UI decisions, and where it was applied.
YankielDBC2