Appendix

Outbreaks style guide

A working reference for the editorial system: museum field desk, natural-history archive, epidemiology dashboard, and public-health signal room.

low light field evidence live signal historical gravity
System specimen LIVE · 90 DAYS
ITURI / DRC VECTOR EDGE
452deaths
30.9%case fatality
36health zones
01Documentary, not decorative
02Data first, atmosphere second
03Every glow implies signal
04No sterile dashboards
Brand mark

Outbreaks logo usage

Primary lockup
Outbreaks logo

Use the full lockup whenever the viewer needs to know where they are: site nav, title frames, appendix pages, and share images.

2048×617source PNG · transparent background
28pxminimum nav height
1 bugminimum clear space around mark
Dark field Outbreaks logo on dark background
Navigation button
Outbreaks logo in nav button
Use
  • Place on ink, dark map fields, or frosted black panels.
  • Keep the orange bug intact with the wordmark.
  • Let the logo act as navigation when it appears in the header.
Avoid
  • Do not put it in a yellow National Geographic-style frame.
  • Do not blur, tint, stretch, crop, or separate the bug from the name.
  • Do not place it on busy photography without a dark plate behind it.
Color

Field palette

Operating ratio

Mostly ink. A little signal. Never a rainbow.

The palette should feel like a dark archive lit by field instruments: black-green atmosphere, warm paper, blue-gray annotations, and small, exact flashes of outbreak color.

Ink 900#080b0apage field, map wells, negative space
Field 800#0e1512frosted panels, active nav, dark cards
Bone 100#e9e5d9headlines, primary text, logo cream
Vellum 300#b9b29dbody copy, captions, subdued evidence
Specimen blue#8997b8axes, labels, clinical annotations
Signal red#e4572eacute outbreak, final spike, active alarm
Live teal#33a58asurveillance, source freshness, contained state
Watch gold#e3b23cactive watch, historical risk, caution
Archive violet#7565bdtaxonomy, secondary clusters, old records
Marrow#2b1a18red-shadow interiors, sidebar warmth
Map glass#13201dgreen-black overlays, globe atmosphere
Ash line#343831borders, dividers, inactive structure
70%ink / field
18%bone / vellum
8%red / teal / gold
4%violet / blue-gray
Map fieldInk + glass + teal pinpointsKeep geography dark; let only current locations glow.
Historical plateInk + marrow + gold ruleUse warmth for age, provenance, and archival gravity.
Alert stateBone text + red lineRed should be a knife mark, not a wash over the interface.
Clinical readoutSpecimen blue + vellumUse blue-gray to cool down dense labels and chart scaffolds.
Typography

Archive voice

Display serif

Virulent diseases of the last 2,000 years

Fraunces for titles, editorial statements, and historical language.
Interface sans

Current outbreak intelligence and surveillance signals.

Archivo for dense reading, captions, body text, and operational UI.
Monospace labels

LIVE WHO DON · 90 DAYS · CONFIRMED CASES

Space Mono for labels, source lines, timestamps, keys, and modes.
Serif numerals

2,289  30.9%  1,274

Libre Baskerville for numeric moments that need weight and dignity.
Hero H1 Fraunces 52-124 Line-height .84-.96 · weight 300-400 · tight tracking only on large editorial headlines.
Section H2 Fraunces 30-54 Use sentence case. Keep section heads short and let the following panel carry detail.
Panel title Fraunces 24-32 Used in cards, selected states, live feed titles, modal headings, and map callouts.
Body Archivo 13-16 Line-height 1.5-1.65. Use bone-dim for support copy and bone for primary claims.
Labels Space Mono 8-11 Uppercase, .12-.22em tracking. Use for source, mode, timeframe, axis, and state labels.
Numbers Libre Baskerville Use for hero stats, outbreaks, deaths, percentages, and emphasized years. Avoid condensed sans numerals.
Emphasis Italic sparingly Reserve italics for editorial contrast, disease names in prose, and historical phrasing.
Casing Sentence + mono caps Titles use sentence case. Operational labels use uppercase mono. Do not title-case every UI element.
Interface

Controls and panels

Button stack
Height
38-48px
Radius
6-10px
Sound
subtle synthesized tick
Selected system

Mosquito systems

Translucent field surface, fine border, restrained blur, no nested cards.

Surface
rgba ink + top light
Border
10-18% bone
Outbreaks

The logo is the navigation control. The sidebar drops from it like an instrument drawer.

Open
hamburger morphs to X
Position
same rail as sidebar
Data surfaces

Maps, charts, and cards

Maps carry dark geography, quiet labels, and active points with modest glow.

2,289

Charts reveal by motion: counts rise, lines draw, and labels arrive after the signal.

Live feed

Ebola disease caused by Bundibugyo virus

Cards should feel like archival drawers: compact, bordered, information-dense, and sourced.

WHO DON · Democratic Republic of the Congo & Uganda
Rules

Keep the system honest

  1. Use red only for urgent signal, active outbreaks, or the final point in a trend.
  2. Use mono labels to explain source, timeframe, and mode, not to decorate.
  3. Prefer tight rows, thin borders, and restrained glow over large cards.
  4. Let maps and charts carry the drama. Text should clarify, not compete.
  5. Motion should reveal data: rise, draw, count, slide, or pulse.