# CGD visual style — notes for figures destined for cgdev.org

> Reverse-engineered from the CGD site CSS (`themes/custom/cgdw3css/css/valencia.css`,
> `theme.css`) and from recent chart images in Kenny/Sandefur blog posts.
> No public brand guide is published, so treat this as a working approximation.

## Palette — primary

The CGD identity is **dark teal + warm amber**. Default to teal for the
primary data series. Add amber only when you need a second categorical color;
avoid introducing a third hue unless the chart genuinely requires one.

```
Primary teal      #006970   // workhorse data color — one-line charts, bars, points
Dark teal         #0B4C5B   // secondary accent / links / emphasized text
Bright teal       #2D99B5   // borders, highlights, a lighter series mate
Muted steel       #85A5AD   // dividers, underlines, de-emphasized series
Teal tints        #BFDEE0 / #E2EDEF / #ECF4F4 / #F2FBFB
                            // fills, backgrounds, soft positive shading

Amber / gold      #FFB52C   // contrast/highlight series, link underlines
Amber tints       #F4DAA6 / #FEE8BF
Navy text accent  #112A46   // deep text color / headline accent
```

## Palette — signaling

Use these sparingly and only when the number itself is a positive/negative or
warning. CGD reds are saturated; don't use them as decorative color.

```
Warning / cut red  #A51B00
Alert red          #E62600
Soft coral         #F9C9BF   // tinted negative (paired with #BFDEE0 for +/-)
Soft green         #C9E1BD   // tinted positive, used in site themes
```

## Palette — grays / neutrals

```
Axis labels, de-emphasized text   #3A3A3A
Gridlines, rules                  #EAEAEA / #EFEFEF / #BEBEBE
Muted data series                 #85A5AD   (steel)  or  #BEBEBE  (neutral)
Chart background                  #FFFFFF   (pure white — no tint)
Page background tint (if needed)  #FCFEFE  /  #F8F8F8
```

## Series assignment — defaults

- **Single-series chart:** `#006970` alone, 2 px line, no markers.
- **Highlighted vs history (e.g. FY2025 vs prior years):** highlight in
  `#006970` or `#A51B00`; background years in `#BEBEBE` or `#85A5AD` at
  reduced opacity (60–75%).
- **Two-category contrast:** `#006970` (primary) + `#FFB52C` (accent).
- **Three categories:** add `#2D99B5` as the third. Avoid more than 3.
- **Diverging +/-** (no formal palette published): `#006970` for positive,
  `#A51B00` for negative. Softer version: `#BFDEE0` vs `#F9C9BF`.
- **Sequential (e.g. map severity):** interpolate within the teal family
  (`#E2EDEF → #BFDEE0 → #2D99B5 → #006970 → #0B4C5B`) rather than using a
  rainbow or viridis ramp.

## Typography

- **Sans-serif (chart labels, UI, body):** **Sofia Pro** — Light, Regular,
  Medium, Semibold, Bold. The CGD site loads this as a custom webfont.
- **Serif (article headlines, body text):** **Bitter**.
- For web figures where Sofia Pro is not available, fall back to the system
  stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...`) —
  do not substitute Helvetica/Arial explicitly.

## Chart framing

- **Background:** white; no fill, no card border.
- **Gridlines:** minimal. Either a single faint horizontal rule at y=0 or
  light horizontal gridlines at major ticks (`#EAEAEA`). No vertical
  gridlines unless strictly necessary.
- **Axes:** thin, `#3A3A3A` labels. No chart border box — just the axes.
- **Ticks:** medium gray, unobtrusive.
- **Legend:** omit for single-series; for multi-series put it inline or above
  the plot, never in a boxed legend card.
- **Number formatting:** raw integers with trailing zeros (e.g. `25,000,000`
  rather than `25M`) is acceptable in Kenny's style; use whichever matches
  the surrounding editorial context.
- **X-axis time labels:** rotate 45° when long (quarterly labels etc.).

## Don'ts

- No rainbow or viridis ramps.
- No saturated primary RGB blues/reds/greens — stay in CGD's muted teal/amber
  family.
- No chart-junk: drop shadows, 3D effects, gradients, unnecessary markers.
- No boxed legends, no boxed frames around the plot area.
- Don't introduce red unless the value represents something negative (a cut,
  a warning, an overage).

## Reference palette strip (for HTML/CSS)

```css
:root {
  --cgd-teal:        #006970;
  --cgd-teal-dark:   #0B4C5B;
  --cgd-teal-bright: #2D99B5;
  --cgd-teal-steel:  #85A5AD;
  --cgd-teal-1:      #BFDEE0;
  --cgd-teal-2:      #E2EDEF;
  --cgd-teal-3:      #ECF4F4;
  --cgd-amber:       #FFB52C;
  --cgd-amber-1:     #F4DAA6;
  --cgd-amber-2:     #FEE8BF;
  --cgd-navy:        #112A46;
  --cgd-red:         #A51B00;
  --cgd-red-alert:   #E62600;
  --cgd-coral:       #F9C9BF;
  --cgd-green-soft:  #C9E1BD;
  --cgd-axis:        #3A3A3A;
  --cgd-grid:        #EAEAEA;
  --cgd-muted:       #BEBEBE;
}
```

## Sources consulted

- https://www.cgdev.org/ — site CSS
- https://www.cgdev.org/blog/new-estimates-usaid-cuts (Kenny & Sandefur)
- https://www.cgdev.org/blog/millions-lost-access-pepfar-supported-hiv-drugs-during-us-foreign-assistance-pause (Kenny)
- Live theme files: `themes/custom/cgdw3css/css/valencia.css`, `theme.css`.
