Momento/.agent/skills/wds-1-project-brief/templates/visual-direction.template.md

Visual Direction: {{project_name}}

Brand Aesthetics & Design Guidelines

Created: {{date}} Author: {{user_name}} Related: Product Brief | Content & Language

---

Existing Brand Assets

Current Assets

{{existing_assets_summary}}

Asset	Status	Location
{{#each existing_assets}}
{{this.asset}}	{{this.status}}	{{this.location}}
{{/each}}

Brand Constraints

{{#each brand_constraints}}

• {{this}} {{/each}}

---

Visual References

Inspiration Sites

{{#each reference_sites}} {{this.name}}

• What we like: {{this.what_we_like}}
• Relevance: {{this.relevance}}

{{/each}}

Visual Mood

{{mood_description}}

Keywords: {{mood_keywords}}

---

Design Style

UI Style

Primary Style: {{ui_style}}

{{ui_style_description}}

Characteristics: {{#each ui_style_characteristics}}

• {{this}} {{/each}}

Design Aesthetic

Aesthetic: {{design_aesthetic}}

{{aesthetic_description}}

---

Color Direction

Color Strategy

{{color_strategy}}

Palette Direction

Role	Direction	Notes
Primary	{{color_primary}}	{{color_primary_notes}}
Secondary	{{color_secondary}}	{{color_secondary_notes}}
Accent	{{color_accent}}	{{color_accent_notes}}
Background	{{color_background}}	{{color_background_notes}}
Text	{{color_text}}	{{color_text_notes}}

Color Scheme Type

Type: {{color_scheme_type}}

Reference: Color Terminology

---

Typography Direction

Type Approach

{{typography_approach}}

Font Direction

Role	Style	Examples	Rationale
Headlines	{{headline_style}}	{{headline_examples}}	{{headline_rationale}}
Body	{{body_style}}	{{body_examples}}	{{body_rationale}}
UI	{{ui_font_style}}	{{ui_font_examples}}	{{ui_font_rationale}}

Reference: Typography Classification

---

Layout Direction

Layout Approach

{{layout_approach}}

Key Layout Elements

Element	Approach	Notes
Hero Section	{{hero_approach}}	{{hero_notes}}
Content Layout	{{content_layout}}	{{content_notes}}
Navigation	{{nav_approach}}	{{nav_notes}}
Cards/Modules	{{card_approach}}	{{card_notes}}

Reference: Layout Terminology

---

Visual Effects

Effect Usage

{{effects_approach}}

Specific Effects

Effect	Usage	Notes
{{#each effects}}
{{this.effect}}	{{this.usage}}	{{this.notes}}
{{/each}}

Reference: Visual Effects

---

Photography & Imagery

Photography Style

{{photography_style}}

Image Sources

Type	Source	Notes
{{#each image_sources}}
{{this.type}}	{{this.source}}	{{this.notes}}
{{/each}}

Image Guidelines

{{#each image_guidelines}}

• {{this}} {{/each}}

---

Design Constraints

From Platform Requirements and brand needs

{{#each design_constraints}}

• {{this}} {{/each}}

---

Summary: Visual DNA

Style:        {{summary_style}}
Colors:       {{summary_colors}}
Typography:   {{summary_typography}}
Mood:         {{summary_mood}}
Key Element:  {{summary_key_element}}

---

Next Steps

• Phase 2: Trigger Mapping — Connect visuals to user psychology
• Phase 4: UX Design — Apply visual direction to designs
• Phase 5: Design System — Build design tokens from direction

---

Reference Files

• visual-references/ — Collected reference images
• Design Nomenclature — Vocabulary reference

---

Generated by Whiteport Design Studio