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
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
Thrillerwordmark typeface · Adobe Fonts ↗
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 Dizzy — 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.
Character mark

Dizzy

Dizzy, the Outbreaks mascot — a stylized orange pathogen

Dizzy is the small orange pathogen riding at the end of the wordmark, and the mark the site falls back to anywhere the full lockup won't fit: browser tab, favicon, share thumbnails, loading states.

The name and the look are pulled from pulp murder-mystery covers — a single culprit rendered as one bold silhouette with a few too many limbs, guilty before you've read a word. It's a fitting reference: new diseases get profiled and named with almost exactly that same dramatic urgency, cast as the villain of the story before anyone has actually finished investigating them.

Use
Favicon, browser tab, loading states, small-format brand mark
Don't
Recolor it, give it a face, or use it standalone in place of the full wordmark in editorial contexts
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.

GroundInk 900#080b0apage field, map wells, negative space
GroundField 800#0e1512frosted panels, active nav, dark cards
GroundMap glass#13201dgreen-black overlays, globe atmosphere
GroundMarrow#2b1a18red-shadow interiors, sidebar warmth
NeutralBone 100#e9e5d9headlines, primary text, logo cream
NeutralVellum 300#b9b29dbody copy, captions, subdued evidence
NeutralSpecimen blue#8f9cbeaxes, labels, clinical annotations
NeutralAsh line#343831borders, dividers, inactive structure
SignalSignal red#e96a2facute outbreak, final spike, active alarm
SignalLive teal#2b8f96surveillance, source freshness, contained state
SignalWatch gold#edbb2eactive watch, historical risk, caution
SignalArchive violet#8a6fc9taxonomy, secondary clusters, old records
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.