bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
210 lines
4.0 KiB
Markdown
210 lines
4.0 KiB
Markdown
# 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_
|