Skip to content

New palette and typography (colours and fonts only) #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fbarez merged 1 commit into from
Nov 6, 2026
Merged

New palette and typography (colours and fonts only) #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/demos/PatchingDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function PatchingDemo({ data }: { data: Data }) {
<svg viewBox={`0 0 ${S + pad * 2} ${S + pad * 2}`} role="img" aria-label={`Scatter of activation versus attribution patching across 144 heads, Pearson r = ${data.pearson_activation_vs_attribution.toFixed(3)}`}>
<line x1={sx(-ext)} y1={sy(-ext)} x2={sx(ext)} y2={sy(ext)} stroke="var(--rule)" strokeDasharray="4 3" />
<line x1={sx(0)} x2={sx(0)} y1={pad} y2={pad + S} stroke="var(--rule)" /><line y1={sy(0)} y2={sy(0)} x1={pad} x2={pad + S} stroke="var(--rule)" />
{pts.map((p) => <circle key={`${p.l}-${p.h}`} cx={sx(p.x)} cy={sy(p.y)} r="2.6" fill="var(--accent)" opacity=".65"><title>{`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`}</title></circle>)}
{pts.map((p) => <circle key={`${p.l}-${p.h}`} cx={sx(p.x)} cy={sy(p.y)} r="2.6" fill="var(--accent-red)" opacity=".65"><title>{`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`}</title></circle>)}
<text x={pad + S / 2} y={S + pad * 2 - 6} fontSize="10" textAnchor="middle">activation patching</text>
<text x={10} y={pad + S / 2} fontSize="10" textAnchor="middle" transform={`rotate(-90 10 ${pad + S / 2})`}>attribution patching</text>
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/components/demos/viz.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function Legend({ min, max, label }: { min: string; max: string; label: s
);
}

export function Bars({ values, labels, max, title, color = 'var(--accent)', threshold }: { values: number[]; labels: string[]; max: number; title: string; color?: string; threshold?: number }) {
export function Bars({ values, labels, max, title, color = 'var(--accent-blue)', threshold }: { values: number[]; labels: string[]; max: number; title: string; color?: string; threshold?: number }) {
const w = 260, rowH = 18, left = 34;
return (
<svg viewBox={`0 0 ${w + left + 40} ${values.length * rowH + 6}`} role="img" aria-label={title} style={{ width: '100%', maxWidth: 420 }}>
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ const robotsNoindex = Astro.props.noindex || (Astro.props.manuscript && isDraft
<meta property="og:url" content={canonical} />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#f8f6f1" />
<meta name="theme-color" content="#f4f4f4" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<script is:inline>
try { const t = localStorage.getItem('theme'); if (t) document.documentElement.dataset.theme = t; } catch (e) {}
</script>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ const jsonld = {
<circle cx="0" cy="0" r="1" fill="none" stroke="var(--ink-3)" stroke-width=".006" stroke-dasharray=".03 .03" />
<line x1="-1.35" y1="0" x2="1.35" y2="0" stroke="var(--hair)" stroke-width=".006" />
<line x1="0" y1="-1.35" x2="0" y2="1.35" stroke="var(--hair)" stroke-width=".006" />
{feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && <line x1={x} y1={-y} x2={x2} y2={-y2} stroke="var(--accent)" stroke-width=".004" opacity=".35" />))}
{feats.map(([x, y], i) => <g><line x1="0" y1="0" x2={x} y2={-y} stroke="var(--accent)" stroke-width=".012" /><circle cx={x} cy={-y} r=".022" fill="var(--accent)" />
{feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && <line x1={x} y1={-y} x2={x2} y2={-y2} stroke="var(--accent-red)" stroke-width=".004" opacity=".35" />))}
{feats.map(([x, y], i) => <g><line x1="0" y1="0" x2={x} y2={-y} stroke="var(--accent-red)" stroke-width=".012" /><circle cx={x} cy={-y} r=".022" fill="var(--accent-red)" />
<text x={x * 1.17} y={-y * 1.17 + .035} font-size=".1" text-anchor="middle" fill="var(--ink-2)" font-family="var(--serif)" font-style="italic">f{i + 1}</text></g>)}
</svg>
<figcaption id="sketch-cap">Five features, two dimensions. When features are rarely active together, a network can store more of them than it has dimensions, at the cost of interference. <a href={url('demos/superposition/')}>Train it yourself</a>.</figcaption>
Expand Down
63 changes: 33 additions & 30 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,57 @@
/* Interpretability for AI Safety — handbook styles.
Editorial, print-like: paper, ink, hairline rules, one accent.
Tokens first; dark mode only redefines tokens. */
/* Brand palette and type (6 Nov 2026):
primary #0c0c0c for text, links, buttons and UI; background #f4f4f4;
red #FF0000 and blue #0000FF for diagrams, data and highlights only, never UI.
Headers: Fragment Mono, letter-spacing -0.05em. Body and UI: Work Sans.
Dark mode swaps primary and background; the accents stay. */
:root {
--paper: #f8f6f1;
--paper-2: #f0ede5;
--ink: #16140f;
--ink-2: #47433b;
--ink-3: #7d776b;
--hair: #d9d4c7;
--hair-strong: #16140f;
--accent: #a8401b; /* oxide red: links on hover, active states, data highlights */
--link: #16140f;
--grid: #e7e2d6;
--focus: #a8401b;
--tier-established: #9a5a2c; --tier-emerging: #5c7a2b; --tier-flagged: #b3261e;
--note-bg: #f3efe3; --note-ink: #5e4a13; --note-rule: #c8a84a;
--measured: #1f5f52; --illustrative: #6a4f99;
--pos: #2f5fa7; --neg: #b8452a; --zero: #efece4;
--font-headers: 'Fragment Mono', ui-monospace, Menlo, monospace;
--font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--primary: #0c0c0c;
--accent-red: #FF0000;
--accent-blue: #0000FF;

--paper: #f4f4f4;
--paper-2: #eaeaea;
--ink: var(--primary);
--ink-2: #3d3d3d;
--ink-3: #6e6e6e;
--hair: #d4d4d4;
--hair-strong: var(--primary);
--accent: var(--primary); /* UI emphasis (hover, active, focus) uses the primary colour */
--link: var(--primary);
--grid: #e4e4e4;
--focus: var(--primary);
--tier-established: var(--accent-blue); --tier-emerging: var(--accent-red); --tier-flagged: var(--accent-red);
--note-bg: var(--paper-2); --note-ink: var(--ink); --note-rule: var(--ink-3);
--measured: var(--ink); --illustrative: var(--ink-2);
--pos: var(--accent-blue); --neg: var(--accent-red); --zero: #e6e6e6;

/* legacy aliases used by components */
--bg: var(--paper); --surface: var(--paper); --surface-2: var(--paper-2); --rule: var(--hair);
--gold: var(--ink-3); --navy: var(--ink); --accent-ink: var(--paper); --code-bg: var(--paper-2);
--draft-bg: var(--note-bg); --draft-ink: var(--note-ink); --draft-rule: var(--note-rule);
--pillar-1: var(--ink); --pillar-2: var(--ink); --pillar-3: var(--ink); --pillar-4: var(--ink);

--display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
--display: var(--font-headers);
--serif: var(--font-body);
--sans: var(--font-body);
--mono: var(--font-headers);
--radius: 0px;
--measure: 42rem;
--gutter: 12rem;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #141310; --paper-2: #1c1a16; --ink: #ebe7dd; --ink-2: #bdb7aa; --ink-3: #8a8477; --hair: #34312a; --hair-strong: #ebe7dd;
--accent: #e0835c; --link: #ebe7dd; --grid: #23211c; --focus: #e0835c;
--tier-established: #d89a6e; --tier-emerging: #a6c26d; --tier-flagged: #f08a80;
--note-bg: #26220f; --note-ink: #e6cf8a; --note-rule: #6d5b25; --measured: #7cc9b4; --illustrative: #b9a2e6;
--pos: #7aa3e6; --neg: #e88a6e; --zero: #24221d;
--primary: #f4f4f4; --paper: #0c0c0c; --paper-2: #1a1a1a; --ink-2: #c6c6c6; --ink-3: #8f8f8f; --hair: #2f2f2f; --grid: #1c1c1c; --zero: #1f1f1f;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--paper: #141310; --paper-2: #1c1a16; --ink: #ebe7dd; --ink-2: #bdb7aa; --ink-3: #8a8477; --hair: #34312a; --hair-strong: #ebe7dd;
--accent: #e0835c; --link: #ebe7dd; --grid: #23211c; --focus: #e0835c;
--tier-established: #d89a6e; --tier-emerging: #a6c26d; --tier-flagged: #f08a80;
--note-bg: #26220f; --note-ink: #e6cf8a; --note-rule: #6d5b25; --measured: #7cc9b4; --illustrative: #b9a2e6;
--pos: #7aa3e6; --neg: #e88a6e; --zero: #24221d;
--primary: #f4f4f4; --paper: #0c0c0c; --paper-2: #1a1a1a; --ink-2: #c6c6c6; --ink-3: #8f8f8f; --hair: #2f2f2f; --grid: #1c1c1c; --zero: #1f1f1f;
color-scheme: dark;
}

Expand All @@ -61,7 +64,7 @@ a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headers); font-weight: 400; line-height: 1.15; letter-spacing: -0.05em; color: var(--ink); }
h1 { font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 1.75rem; margin: 2.5rem 0 .8rem; }
h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
Expand Down
Loading