# Visual Direction: {{project_name}} > Brand Aesthetics & Design Guidelines **Created:** {{date}} **Author:** {{user_name}} **Related:** [Product Brief](./product-brief.md) | [Content & Language](./content-language.md) --- ## 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}}]({{this.url}})** - 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](../../../docs/models/design-nomenclature/color-terminology.md)* --- ## 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](../../../docs/models/design-nomenclature/typography-classification.md)* --- ## 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](../../../docs/models/design-nomenclature/layout-terminology.md)* --- ## Visual Effects ### Effect Usage {{effects_approach}} ### Specific Effects | Effect | Usage | Notes | |--------|-------|-------| {{#each effects}} | {{this.effect}} | {{this.usage}} | {{this.notes}} | {{/each}} *Reference: [Visual Effects](../../../docs/models/design-nomenclature/visual-effects.md)* --- ## 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/](./visual-references/) — Collected reference images - [Design Nomenclature](../../../docs/models/design-nomenclature/index.md) — Vocabulary reference --- _Generated by Whiteport Design Studio_