Viewer Template: Dossier
What
Intelligence report. You are reading a classified briefing that happens to have images.
When to Use
- Evidence-heavy analysis with data tables, entity lists, confidence ratings
- Structured intelligence pieces — think RAND Corporation, Goldman Sachs research notes
- Investigations where the STRUCTURE of the information is part of the argument
- When the reader needs to cross-reference, compare, and verify claims
- Content with named entities, timelines, risk assessments, causal chains
Design Philosophy
The dossier template inverts the image-text relationship. The image is evidence — contained in a frame, bordered, labeled. The text is the analyst's assessment — structured, classified, dense. The aesthetic is a classified briefing that landed on your desk: charcoal background, amber highlights for key data, crimson for warnings. Every element exists to organize intelligence, not to decorate.
Layout System
Image Treatment
- Contained in a frame — NOT full-bleed. 60% width, centered or left-aligned
- Subtle border: 1px solid rgba(212,168,67,0.3) — the evidence frame
- Box shadow:
0 4px 20px rgba(0,0,0,0.4) — lifted off the surface
- Label below image: exhibit number, source, date (mono font, 0.7rem, amber)
- No Ken Burns — evidence does not drift. Static, precise, documentarian.
Text Treatment
- Right column (40%), structured like a report
- Section headers in monospace caps:
ASSESSMENT, KEY FINDINGS, ENTITY PROFILE
- Bullet points with em-dash prefix, not round dots
- Data tables inline: bordered, alternating row colors
- Classification stamps: top-right corner, rotated 12deg, 40% opacity
- Confidence ratings per panel:
[HIGH] in green, [MEDIUM] in amber, [LOW] in crimson
- Entity sidebar: scrollable list of key players mentioned in this panel
Typography
- Headers: IBM Plex Mono, 0.8rem, letter-spacing 0.2em, text-transform uppercase, amber (#D4A843)
- Body: Crimson Pro, 1.0rem, line-height 1.75, #d4d4d4
- Data/tables: IBM Plex Mono, 0.8rem, #b0b0b0
- Classification stamps: IBM Plex Mono, 1.2rem, rgba(200,60,60,0.35)
- Confidence tags: IBM Plex Mono, 0.7rem, bold
Color Approach
- Background: dark charcoal (#141418) — not pure black, not blue-black
- Text: cool grey (#d4d4d4)
- Accent primary: amber (#D4A843) — headers, accent lines, key data
- Warning: crimson (#C0392B) — low confidence, risk indicators, warnings
- Success: muted green (#2ECC71 at 80% opacity) — high confidence markers
- Table rows: alternating #1a1a20 / #141418
- Border: rgba(212,168,67,0.2) for frames and dividers
Transitions
- Cut: 0.3s — no crossfade, no page-flip. Intelligence reports don't dissolve. They turn.
- Optional: slide-left (next dossier page sliding in from right)
Presentation Block
{
"layout": "narrator",
"show_speaker_badge": false,
"image_sizing": "contain",
"text_position": "side-right",
"transition": "cut",
"typewriter_speed": 15,
"viewer_style": "dossier",
"image_max_width": "60%"
}
Key CSS Patterns
/* Dossier background */
.dossier-viewport {
background: #141418;
min-height: 100vh;
display: grid;
grid-template-columns: 60% 40%;
gap: 0;
}
/* Evidence frame */
.evidence-frame {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.evidence-image {
max-width: 100%;
max-height: 75vh;
object-fit: contain;
border: 1px solid rgba(212, 168, 67, 0.3);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.evidence-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
color: #D4A843;
margin-top: 0.8rem;
letter-spacing: 0.1em;
}
/* Classification stamp */
.classification-stamp {
position: absolute;
top: 2rem;
right: 2rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 1.2rem;
color: rgba(200, 60, 60, 0.35);
transform: rotate(12deg);
text-transform: uppercase;
letter-spacing: 0.3em;
border: 2px solid rgba(200, 60, 60, 0.25);
padding: 0.3rem 1rem;
pointer-events: none;
z-index: 5;
}
/* Report section headers */
.section-header {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #D4A843;
margin: 1.5rem 0 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid rgba(212, 168, 67, 0.2);
}
/* Confidence ratings */
.confidence-high {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
font-weight: 700;
color: rgba(46, 204, 113, 0.8);
padding: 0.1rem 0.4rem;
border: 1px solid rgba(46, 204, 113, 0.3);
}
.confidence-medium {
color: #D4A843;
border-color: rgba(212, 168, 67, 0.3);
}
.confidence-low {
color: #C0392B;
border-color: rgba(192, 57, 43, 0.3);
}
/* Data table */
.intel-table {
width: 100%;
border-collapse: collapse;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: #b0b0b0;
margin: 1rem 0;
}
.intel-table th {
text-align: left;
padding: 0.4rem 0.6rem;
border-bottom: 1px solid rgba(212, 168, 67, 0.3);
color: #D4A843;
font-weight: 500;
}
.intel-table tr:nth-child(even) { background: #1a1a20; }
.intel-table tr:nth-child(odd) { background: #141418; }
.intel-table td { padding: 0.4rem 0.6rem; }
/* Entity sidebar */
.entity-sidebar {
margin-top: 1rem;
padding: 0.8rem;
border: 1px solid rgba(212, 168, 67, 0.15);
border-radius: 4px;
background: rgba(20, 20, 24, 0.8);
}
.entity-tag {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
margin: 0.15rem;
border: 1px solid rgba(212, 168, 67, 0.25);
border-radius: 2px;
color: #b0b0b0;
}
Common Mistakes
- Making images full-bleed — this is not a magazine. Evidence is framed, labeled, contained
- Skipping classification stamps — they create the intelligence aesthetic even if decorative
- Round bullet points — use em-dash (---) or arrow (>) prefixes. Round dots are too casual
- Forgetting confidence ratings — every assessment panel should declare its confidence level
- Making the entity sidebar too prominent — it is reference material, not the main event
- Colorful design — this template uses exactly 3 accent colors: amber, crimson, muted green. Nothing else.
- Ken Burns on evidence images — evidence does not drift. Static. Precise. Fixed.
Reference
Path to the HTML reference template: viewer-templates/dossier.html