From 35cc380b4916197f503ba52eb3d4f1de3654307d Mon Sep 17 00:00:00 2001 From: fbarez Date: Fri, 6 Nov 2026 16:53:44 +0000 Subject: [PATCH] New palette and typography (colours and fonts only) - Fonts: Fragment Mono for headings (h1-h6, letter-spacing -0.05em) and code; Work Sans (400/500/600) for body and UI text. Replaces Newsreader and IBM Plex. - Colours: primary #0c0c0c for text, links, buttons and UI; background #f4f4f4; neutral greys derived from them. Dark mode swaps primary and background. - Accents #FF0000 and #0000FF are used only in diagrams and data: the homepage superposition sketch, the patching scatter, heatmap and bar colours, and the citation-tier highlights. UI states (hover, active, focus) use the primary colour. - No layout, spacing or component changes. --- src/components/demos/PatchingDemo.tsx | 2 +- src/components/demos/viz.tsx | 2 +- src/layouts/Base.astro | 4 +- src/pages/index.astro | 4 +- src/styles/global.css | 63 ++++++++++++++------------- 5 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/components/demos/PatchingDemo.tsx b/src/components/demos/PatchingDemo.tsx index 0dbdfbe5a4..0fe8109ad0 100644 --- a/src/components/demos/PatchingDemo.tsx +++ b/src/components/demos/PatchingDemo.tsx @@ -73,7 +73,7 @@ export default function PatchingDemo({ data }: { data: Data }) { - {pts.map((p) => {`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`})} + {pts.map((p) => {`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`})} activation patching attribution patching diff --git a/src/components/demos/viz.tsx b/src/components/demos/viz.tsx index 14c46e1641..0bce31f1db 100644 --- a/src/components/demos/viz.tsx +++ b/src/components/demos/viz.tsx @@ -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 ( diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 57ae80faf0..0cbb14edea 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -37,10 +37,10 @@ const robotsNoindex = Astro.props.noindex || (Astro.props.manuscript && isDraft - + - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 2ede532175..cdafa34eff 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -92,8 +92,8 @@ const jsonld = { - {feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && ))} - {feats.map(([x, y], i) => + {feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && ))} + {feats.map(([x, y], i) => f{i + 1})}
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. Train it yourself.
diff --git a/src/styles/global.css b/src/styles/global.css index e7b685ecbb..c0dbace9be 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,22 +1,33 @@ /* 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); @@ -24,10 +35,10 @@ --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; @@ -35,20 +46,12 @@ } @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; } @@ -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; }