Full Content
TITLE: NSG Limbic Visuals
# NSG Limbic Visuals
## Purpose
Define the visual story component for NSG websites - the problem/solution/outcome images that communicate instantly without reading. This document covers the walking session workflow, labeling conventions, and HTML integration.
---
## The Concept
People don't read. They scan. Limbic brain processes images before cortex engages with text.
**Visual story appears above the fold, always visible (not in accordion):**
- 2-5 problem images
- 2-4 solution images
- 1-2 outcome images
Each image has a title (h4) and 1-2 sentence caption. 5 seconds to understand the project.
**Accordion depth comes after** - for people who passed the limbic test and want details.
---
## Directory Structure
```
/var/www/html/sitename.nsgia.com/
└── static/
└── images/
└── story/
├── problem_01.png
├── problem_02.png
├── solution_01.png
├── solution_02.png
└── outcome_01.png
```
**Create directory before walking session:**
```bash
mkdir -p /var/www/html/sitename.nsgia.com/static/images/story
```
---
## Walking Session Workflow
### Before the Walk
1. Create the `/static/images/story/` directory
2. Know the project name and audience
3. Have this document open or memorized
### During the Walk
Discuss with AI:
- What are the 2-5 problems this project solves?
- What are the 2-4 solution elements?
- What does success look like (1-2 outcomes)?
For each image, define:
- Filename (using convention)
- Title (short, for h4)
- Caption (1-2 sentences)
- What the image shows (scene description for generator)
### End of Walk
AI produces the **Limbic Visuals Plan** in this exact format:
```
===========================================
LIMBIC VISUALS PLAN
===========================================
Project: [sitename].nsgia.com
Directory: /static/images/story/
Style: [cartoon / watercolor / photo-realistic / TBD]
PROBLEMS
--------
problem_01.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description for image generator]
problem_02.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description]
problem_03.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description]
SOLUTIONS
---------
solution_01.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description]
solution_02.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description]
OUTCOMES
--------
outcome_01.png
Title: [Short Title]
Caption: [One to two sentences.]
Shows: [Description]
===========================================
```
Save this to the memory system.
---
## Image Generation
Take the Limbic Visuals Plan to ChatGPT (or other image generator).
**Tell it:**
1. The style you want
2. The filename to use
3. The "Shows:" description
**Download and save directly to:**
```
/var/www/html/sitename.nsgia.com/static/images/story/problem_01.png
```
No renaming. No intermediate folders. Direct to final location.
---
## HTML Integration
### File Location
```
templates/
├── sitename.html ← Main page
└── sections/
├── _visual_story.html ← Limbic visuals (always visible)
├── _sec01_market.html ← Accordion sections below
└── ...
```
### Main Template Include
In `sitename.html`, after hero and before accordion sections:
```html
{% include 'sections/_visual_story.html' %}
<!-- Accordion sections follow -->
{% include 'sections/_sec01_market.html' %}
```
### Visual Story Partial Structure
```html
<!--
CHANGE LOG
File: templates/sections/_visual_story.html
Purpose: Limbic visuals - problem/solution/outcome
Parent: sitename.html
Images: /static/images/story/
-->
<!-- PROBLEMS -->
<section class="story-section" id="problems">
<h3>The Problems We Face</h3>
<div class="story-grid">
<div class="story-card">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/story/problem_01.png') }}"
alt="[Description]">
</div>
<h4>[Title from plan]</h4>
<p>[Caption from plan]</p>
</div>
<div class="story-card">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/story/problem_02.png') }}"
alt="[Description]">
</div>
<h4>[Title]</h4>
<p>[Caption]</p>
</div>
<!-- Repeat for each problem -->
</div>
</section>
<!-- SOLUTIONS -->
<section class="story-section" id="solutions">
<h3>Our Solution</h3>
<div class="story-grid">
<div class="story-card">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/story/solution_01.png') }}"
alt="[Description]">
</div>
<h4>[Title]</h4>
<p>[Caption]</p>
</div>
<!-- Repeat for each solution -->
</div>
</section>
<!-- OUTCOMES -->
<section class="story-section" id="outcomes">
<h3>What We Achieve</h3>
<div class="story-grid">
<div class="story-card">
<div class="feature-image">
<img src="{{ url_for('static', filename='images/story/outcome_01.png') }}"
alt="[Description]">
</div>
<h4>[Title]</h4>
<p>[Caption]</p>
</div>
<!-- Repeat for each outcome -->
</div>
</section>
```
**Note:** `feature-image` class enables click-to-expand from existing nsg_components.css.
---
## CSS
Add to site CSS or nsg_components.css:
```css
/*
===========================================================================
LIMBIC VISUALS - Story grid (problem/solution/outcome)
===========================================================================
*/
.story-section {
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
.story-section h3 {
color: var(--color-primary);
font-size: 1.8rem;
text-align: center;
margin-bottom: 2rem;
font-family: var(--font-heading);
}
.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.story-card {
background: var(--color-white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
}
.story-card .feature-image img {
width: 100%;
height: 200px;
object-fit: cover;
cursor: pointer;
}
.story-card h4 {
color: var(--color-primary);
font-size: 1.1rem;
margin: 1rem 1rem 0.5rem 1rem;
font-family: var(--font-heading);
}
.story-card p {
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.5;
margin: 0 1rem 1rem 1rem;
}
@media (max-width: 768px) {
.story-grid {
grid-template-columns: 1fr;
}
}
```
---
## Naming Convention
| Section | Filename Pattern | Examples |
|---------|------------------|----------|
| Problems | `problem_XX.png` | problem_01.png, problem_02.png |
| Solutions | `solution_XX.png` | solution_01.png, solution_02.png |
| Outcomes | `outcome_XX.png` | outcome_01.png, outcome_02.png |
**Always two digits** (01, 02, 03) for sort order.
---
## Checklist
### Before Walking Session
- [ ] Project name confirmed
- [ ] `/static/images/story/` directory created
- [ ] Audience identified
### Walking Session Produces
- [ ] Limbic Visuals Plan in exact format above
- [ ] 2-5 problems defined
- [ ] 2-4 solutions defined
- [ ] 1-2 outcomes defined
- [ ] Each has: filename, title, caption, shows
### Image Generation
- [ ] Plan taken to ChatGPT
- [ ] Style specified
- [ ] Images downloaded with correct filenames
- [ ] Saved directly to `/static/images/story/`
### HTML Build
- [ ] `_visual_story.html` partial created
- [ ] Titles and captions inserted from plan
- [ ] Image paths correct
- [ ] Alt text added
- [ ] Included in main template
- [ ] CSS added (story-section, story-grid, story-card)
- [ ] Click-to-expand works (feature-image class)
---
## Reference
**Example implementation:** https://grants.nsgia.com/rg
**Related documents:**
- NSG Website Workflow (overall site creation process)
- NSG Coding Standards (file structure, change logs)
- NSG_Standards (CSS variables, accordion system)
---
*Last Updated: 2025-01-02*