Design tokens
The same values as the site's stylesheet, read from it at build time.
name: FRAME
url: https://propagandaarchive.org/
updated: 2026-09-29
standard_followed: https://llmbestpractices.com
fonts:
heading: Inter
body: Inter
mono: IBM Plex Mono
colors:
light:
paper: '#f7f5f0'
paper-2: '#efece4'
mount: '#d9d9d6'
ink: '#0b0b0b'
ink-2: '#4a4a4a'
muted: '#6f6f6f'
rule: '#dcdad4'
accent: '#c8102e'
logo-red: '#e30613'
accent-ink: '#ffffff'
gray-badge: '#4a4a4a'
dark:
paper: '#0b0b0b'
paper-2: '#161615'
mount: '#262625'
ink: '#f7f5f0'
ink-2: '#d9d9d6'
muted: '#9a9a98'
rule: '#2e2e2c'
accent: '#e14a5f'
logo-red: '#e30613'
accent-ink: '#0b0b0b'
gray-badge: '#9a9a98'
logo: https://propagandaarchive.org/static/frame-logo-ink.svg
logo_on_dark: https://propagandaarchive.org/static/frame-logo.svg
favicon: https://propagandaarchive.org/static/favicon.svg
og_image: https://propagandaarchive.org/static/generated/share-default.jpgLogo
The logo is the word FRAME inside four red corner brackets, with the full name, Forensic Research Archive of Manipulation and Exploitation, in spaced capitals beneath it and a short red rule under that. The lettering is Barlow Condensed ExtraBold (FRAME) and Barlow SemiBold (the full name), both under the SIL Open Font License 1.1, converted to outlines so no font file is needed. In the site header the brackets and FRAME are drawn as a vector and the full name beside them is ordinary text. Use the ink-text logo on light backgrounds and the white-text logo on dark ones; the brackets stay red (#e30613) on both. Do not recolour it.
Logo, ink text (SVG) · Logo, white text (SVG) · Bracket mark, ink (SVG) · Bracket mark, ivory (SVG)
Favicon
The favicon is red brackets around a white F on an ink tile, a 32 × 32 SVG declared in every page head as <link rel="icon" type="image/svg+xml">. PNG versions serve the Apple touch icon and the web manifest. favicon.svg · apple-touch-icon.png · icon-192.png · icon-512.png
Color palette
| Token | Light | Dark | Role |
|---|---|---|---|
paper | #f7f5f0 | #0b0b0b | Page background |
paper-2 | #efece4 | #161615 | Footer and quiet panels |
mount | #d9d9d6 | #262625 | Poster mounts and content-note panels |
ink | #0b0b0b | #f7f5f0 | Body text and headings |
ink-2 | #4a4a4a | #d9d9d6 | Secondary text |
muted | #6f6f6f | #9a9a98 | Captions and labels |
rule | #dcdad4 | #2e2e2c | Dividers and borders |
accent | #c8102e | #e14a5f | Evidence red: links, buttons and the content-note bar |
logo-red | #e30613 | #e30613 | Logo brackets and rule (the same red in both themes) |
accent-ink | #ffffff | #0b0b0b | Text on the accent colour |
gray-badge | #4a4a4a | #9a9a98 | Gray-source badge |
Typography
Headings and body text use Inter, with the system UI font as the fallback. Labels, tags and the wordmark's second line use IBM Plex Mono, falling back to the system monospace font. The site loads no web fonts, so each visitor sees Inter or IBM Plex Mono only if it is installed on their device.
| Role | Family | Fallback |
|---|---|---|
| Headings and body | Inter | -apple-system, Segoe UI, system-ui, Helvetica Neue, Arial |
| Labels and tags | IBM Plex Mono | ui-monospace, SFMono-Regular, Menlo, Consolas |
Media assets
The AI-generated images below are illustrations, not archive objects, and each is labelled as such. The site uses them as page heroes, as in-body section breaks that reuse a hero, as the link-share image and on technique cards, and nowhere else. The 28 technique-card images are named for their technique id: static/generated/technique-cards/<technique-id>.jpg. Archive images (posters, cartoons, documents) are not brand assets; each object page states its source and rights.
| File | Format | Size | Download |
|---|---|---|---|
| Logo, ink text (for light backgrounds) | SVG | vector | static/frame-logo-ink.svg |
| Logo, white text (for dark backgrounds) | SVG | vector | static/frame-logo.svg |
| Frame mark, ink | SVG | 32 × 32 viewBox | static/frame-mark.svg |
| Frame mark, ivory (for dark backgrounds) | SVG | 32 × 32 viewBox | static/frame-mark-ivory.svg |
| Favicon | SVG | 32 × 32 viewBox | static/favicon.svg |
| Apple touch icon | PNG | 180 × 180 | static/apple-touch-icon.png |
| App icon 192 | PNG | 192 × 192 | static/icon-192.png |
| App icon 512 | PNG | 512 × 512 | static/icon-512.png |
| Page hero: campaigns | JPEG | 2688 × 1152 | static/generated/hero-campaigns.jpg |
| Page hero: case-studies | JPEG | 2688 × 1152 | static/generated/hero-case-studies.jpg |
| Page hero: collection | JPEG | 2688 × 1152 | static/generated/hero-collection.jpg |
| Page hero: home | JPEG | 2688 × 1152 | static/generated/hero-home.jpg |
| Page hero: learn | JPEG | 2688 × 1152 | static/generated/hero-learn.jpg |
| Page hero: map | JPEG | 2688 × 1152 | static/generated/hero-map.jpg |
| Page hero: techniques | JPEG | 2688 × 1152 | static/generated/hero-techniques.jpg |
| Page hero: then-and-now | JPEG | 2688 × 1152 | static/generated/hero-then-and-now.jpg |
| Page hero: watch-briefs | JPEG | 2688 × 1152 | static/generated/hero-watch-briefs.jpg |
| Page hero: write | JPEG | 2688 × 1152 | static/generated/hero-write.jpg |
| Link-share image | JPEG | 1200 × 630 | static/generated/share-default.jpg |
This page follows the LLM-discoverability standard at https://llmbestpractices.com.