Style Guide

§ 175 — The Archive

Documentary / Warm Archival Style — paragraph175.net

Color Palette

Warm documentary palette — aged paper, sepia ink, editorial gold. Evokes archival photographs and primary documents.

Primary Brand Colors
Sepia Gold
#8b6914
--sepia
Sepia Light
#c4a35a
--sepia2
Sepia Pale
#e8d5a0
--sepia3
Border Gold
#d4b87a
--border
Warm Black
#1c1208
--warm-dark
Warm Mid
#2e2010
--warm-mid
Backgrounds — Aged Paper Tones
Paper / BG
#f4edd8
--paper
Paper 2 / Cards
#ede0c4
--paper2
Paper 3 / Dark
#e2d0aa
--paper3
Warm Body Text
#3d2e18
--warm-body
Muted
#8a7455
--muted

Typography

Display — Playfair Display

Playfair Display

'Playfair Display', serif
Body — Source Serif 4

Source Serif 4

'Source Serif 4', serif
Sans — Josefin Sans

JOSEFIN SANS

'Josefin Sans', sans-serif
Type Scale
Masthead / 3.5remParagraph 175
H2 / 1.8remHistorical Timeline
Body / 1remThis archive collects primary sources, survivor testimonies, and documentary photographs.
Eyebrow / 0.6remGermany 1871 — 1994 · A Documentary Record
Mono meta / 0.68remUniversity Press · Peer Reviewed · 1938 Court Records

Spacing Scale

--space-1 · 0.25rem · 4px
--space-4 · 1rem · 16px
--space-8 · 2rem · 32px
--space-12 · 3rem · 48px
--space-16 · 4rem · 64px

Buttons

No border-radius · Josefin Sans · Uppercase · 3px tracking · Primary: --sepia bg on dark; --paper bg on light

Masthead / Hero

Germany 1871 — 1994 · A Documentary Record
Paragraph 175
The Archive of Persecution and Survival

Masthead: --warm-mid bg · Playfair Display title · Josefin eyebrow (8px tracking) · Hairline gradient rules · 2px solid sepia bottom border

Sidebar Stat Cards
1871
First enacted
100K+
Convicted
1994
Repealed

Cards & Content Blocks

Testimony Cards
1923 — 2005 · Mulhouse, Alsace
Pierre Seel
Arrested 1941 · Schirmeck
"I had been arrested, tortured, deported simply because I loved men."
1913 — 2011 · Ettersberg
Rudolf Brazda
Natzweiler-Struthof · Survivor
Active state: left border --sepia. Quote block border also updates.

Testimony cards: --paper bg · 1px gap on --border · Left border --sepia on hover · Courier date · Playfair italic name · Source Serif quote

Research Card
Academic Paper
The Enforcement of § 175 Under National Socialism
Journal of Holocaust Studies · Vol. 12 · Peer Reviewed

Statistical analysis of conviction rates and camp deportations 1933–1945. Hover: left border --sepia.

Stats & Data Callouts

1871

First enacted

100K+

Men convicted 1933–45

15,000

Sent to camps

1994

Year repealed

Stat blocks: --paper2 bg · 3px top border --sepia · Playfair Display number · Source Serif 4 italic label · No border-radius

Forms & Inputs

Input: --paper bg · 1px border --border · Focus: --sepia border · No border-radius · Label: Josefin 0.62rem, 3px tracking

Alerts & Banners

Archive Note: The following account is drawn from primary sources wherever possible.
Research Context: Dates and names verified against surviving court records.
DOCUMENTARY RECORD · PRIMARY SOURCES · SURVIVOR TESTIMONIES · IN MEMORIAM

Alerts: warm paper bgs · Sepia left borders · Josefin label · Source Serif body · Ticker: --sepia bg, Courier 0.65rem

CSS Custom Property Tokens

:root {
  /* ── Brand Colors ── */
  --sepia:      #8b6914;   /* Primary editorial gold */
  --sepia2:     #c4a35a;   /* Lighter sepia — display text on dark */
  --sepia3:     #e8d5a0;   /* Pale sepia — large type on dark */
  --border:     #d4b87a;   /* All borders and dividers */
  --warm-dark:  #1c1208;   /* Nav / footer / darkest elements */
  --warm-mid:   #2e2010;   /* Masthead background */
  --warm-body:  #3d2e18;   /* Primary body text */
  --paper:      #f4edd8;   /* Page background */
  --paper2:     #ede0c4;   /* Card / sidebar backgrounds */
  --paper3:     #e2d0aa;   /* Dividers / darker accents */
  --muted:      #8a7455;   /* Secondary text, captions */

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-sans:    'Josefin Sans', Arial, sans-serif;
  --font-mono:    'Courier New', monospace;

  /* ── Google Fonts ── */
  /* family=Playfair+Display:ital,wght@0,400;0,700;1,400
     &family=Source+Serif+4:ital,wght@0,300;0,400;1,400
     &family=Josefin+Sans:wght@300;400;600 */

  /* ── Spacing (4px base) ── */
  --space-1: 0.25rem; --space-2: 0.5rem;
  --space-4: 1rem;    --space-6: 1.5rem;
  --space-8: 2rem;    --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;

  /* ── Radius ── */
  --radius: 0px;   /* No border-radius — editorial flatness */

  /* ── Special: Hairline Rules ── */
  /* background: linear-gradient(90deg, transparent, var(--sepia), transparent); */
  /* height: 1px; max-width: 400px; margin: 0 auto; */

  /* ── Pattern Overlay ── */
  /* Diamond cross-hatch via SVG data URI at 4% opacity on --warm-mid backgrounds */
}