Internal reference

Design Library

Every token, atom and composed section on morenou.se, rendered live from the same global.css and site.ts the pages use. If it drifts here, it has drifted everywhere.

Colour tokens

--page#ffffffPage background

--ink#2a2926Headings, logo, strong marks

--text#1a1916Body copy

--muted#5f5c55Subtitles, meta, secondary

--soft#938f85Labels, captions, TOC

--rulergba(26,25,22,.12)Hairline rules and borders

--accent#4f6f63Accent: internal links, quote bar

--footer#2d2d2dFooter background

link ext#055aa5External links (PhilPapers etc.)

Type scale

Page titleAnthropic Serif Display, 500, 33.6–56px desktop / 42–50px mobile

Academic Essays & Research Papers

Page subtitleAnthropic Sans, 400 italic, 16.8–18px desktop / 18px mobile

Product design and UX architecture, writing and research.

Section labelAnthropic Sans, 500, 13px desktop / 14px mobile

Design Frameworks & Competencies

Subsection titleAnthropic Serif Display, 500, 22px desktop / 24px mobile

UX Architecture & Systems Design

BodyAnthropic Sans, 400, 17px desktop / 18px mobile

Traditional UX is great for individual features, but it breaks down in complex systems.

Kicker / labelSans Text, 500, 11 to 14px, uppercase, ls 0.08em

AI Safety

Font families and weights

Anthropic Serif Display (Editorial Serif)

400 Regular · Aa Bb Cc 0123

500 Medium · Aa Bb Cc 0123

600 Semibold · Aa Bb Cc 0123

400 Italic · Aa Bb Cc 0123

Anthropic Sans (Body and Interface)

400 Regular · Aa Bb Cc 0123

500 Medium · Aa Bb Cc 0123

600 Semibold · Aa Bb Cc 0123

Historical reference scale · Anthropic brand

External reference only, not the active site scale. The current site uses Anthropic Serif Display for editorial titles and long-form reading, and Anthropic Sans for ordinary body and interface text. The production values are recorded in the Current typography map below.

Display 142px → 72px · Serif

Display 1

Display 236px → 64px · Serif

Display 2

H134px → 52px · Serif

H230px → 44px · Serif

H328px → 36px · Serif

H423px → 32px · Serif

H520px → 25px · Serif

H616px → 19px · Serif

Body large 122px → 24px · Sans

Body large 1

Body large 220px → 23px · Sans

Body large 2

Body 119px → 20px · Sans

Body 1

Body 217px → 17px · Sans

Body 2

Body 315px → 15px · Sans

Body 3

Caption12px → 12px · Sans

Caption

Micro10px → 10px · Sans

Micro

Colour reversal (dark → light):background #141413 → #ffffff · primary text #faf9f5 → #1a1918 (our --text) · muted #b0aea5 → #5e5d59 (our --muted) · accent clay #d97757. Our palette is already the reversed brand neutral ramp.

Atoms

Internal link

Read the case: The geography of usability debt →

Accent colour, same tab, trailing →

External link

Published on PhilPapers ↗

Blue, new tab, trailing ↗

Kicker + meta label

AI SafetyJun 26, 2026

Reading timeUppercase, 0.08em tracking

Pullquote

You cannot persuade a lock.

Audio pill (play)

Listen

27:45

Nav item statesActive: medium italic underline

Interactive demo cards (blog widgets)

Controls

Reusable controls for list pages (blog, papers): category tags, quick filters, and pagination. The filter and pagination below are live, click them.

Tag / badge

Category tag: round pill with a per-subject line icon. Classes: .tag + icon SVG; variants .tag--accent, .tag--solid.

Per subject

AI SafetyPhilosophy of SciencePhilosophy of TechnologyPhilosophy of AICyberneticsSystems

The icon set (line, inherits colour)

Philosophy of Science

AI Safety

Systems

UX Architecture

UX Basics

Economics

Philosophy of AI

Philosophy of Physics

Philosophy of Mind

Philosophy of Language

Philosophy of Economics

Philosophy of Technology

Epistemology

Phenomenology

Cybersecurity

Large Language Models

History of Science

Political Philosophy

Ancient Philosophy

Cybernetics

Metaphysics

Continental Philosophy

Philosophy of Mathematics

Philosophy of Cognitive Science

Ethics

Variants — .tag, .tag--accent, .tag--solid

OutlineAccentSolidClickable →

Quick filter

Clickable filters that narrow the list below. Not a nav, a real filter. Classes: .filter-bar, .filter-tab, active is .is-active.

Pagination

For long lists. Prev / pages / next, active page highlighted. Class: .pagination.

Composed sections

Page hero

About

Product design and UX architecture across automotive, fintech, cloud communications, cybersecurity and real estate.

Section grid + text blocks

Design Frameworks & Competencies

UX Architecture & Systems Design

Traditional UX is great for designing individual features, but it breaks down in complex systems. I treat UX architecture as a systems discipline.

Design Ops & Leadership

Over a decade of leading design, building teams, and setting up design ops from scratch.

Work case cards (with and without image)

Scania

Staff Product Designer · Automotive · 1 year

Working in Scania's Global Patterns team, I built the frameworks for interpreting analogue and hydraulic mechanisms as digital ones, so the translation stayed coherent and made sense to the driver. The frameworks had to hold across the team building the cab and survive real driving conditions.

Sinch

Principal Product Designer · Cloud communications · 3 months

Brought in during a run of acquisitions, I built the shared design process the suddenly-larger team was missing: a defined path from intake to delivery, and a handoff contract that freed design and engineering from coordinating by meeting. The standing sync calls were gone by the third week.

Paper rows (internal + external CTA)

Confessions of a Lock

Ordinary Language, Poetic Jailbreaks, and the Non-Closure of Language-Model Safety

PhilPapers ↗

Three Walls

A Formal Limit on the Computational Paradigm, Its World Models, and Their Deployment

PhilPapers ↗

The Conditions of the Invisible Hand

A Cybernetic-Philosophical Diagnosis of the Two Dominant Economic Architectures (Book)

PhilPapers ↗

Blog teasers

AI SafetyJul 5, 2026

Confessions of a Lock

How poetry slips past AI safeguards, and what that reveals about language.

Philosophy of ScienceJun 14, 2026

Drawing Lions Without Lions

How a thousand years of artists drew animals that came out wrong in exactly the same way, what that tells you about the difference between an error and a way of seeing, and why you cannot catch yourself doing it.

Philosophy of TechnologyJun 4, 2026

Becoming Human

The big brain did not come first and then invent the tools and the words. The tools and the words came too, and they are still making us.

Current typography map

Production typography by page and role. Desktop and mobile values are separate so an approved change can be traced to one selector without cascading into blog articles or /reading.

Surface	Element / role	Font	Desktop	Mobile	Example	Selector
Homepage	Destination title	Anthropic Serif Display 500	67.2–112px fluid	65–74px fluid	About / Work / Writings	`.hl-title`
Homepage	Description	Anthropic Sans 400	17px	18px	the person, the practice and the path	`.hl-desc`
Shared hero	Page title	Anthropic Serif Display 500	33.6–56px fluid	42–50px fluid	About / Work / Writings / Get in touch	`.page-hero h1`
Shared hero	Subtitle	Anthropic Sans 400	18px / 1.34	18px / 1.42	Essays, papers and design notes.	`.page-hero p`
About	Section label	Anthropic Sans 500	13px	14px	Design Frameworks & Competencies	`.about-page .section-grid h2`
About	Subsection title	Anthropic Serif Display 500	22px	24px	UX Architecture & Systems Design	`.about-page .text-block h3`
About	Body	Anthropic Sans 400	17px	18px	Traditional UX is great for designing individual features…	`.about-page .text-block p`
Work	Case title	Anthropic Serif Display 500	28–35.2px fluid	32px	Scania	`.work-page .case-card h3`
Work	Metadata	Anthropic Sans 500	12px	13px	Staff Product Designer · Automotive · 1 year	`.work-page .case-card .meta`
Work	External link	Anthropic Sans 500	16px	18px	scania.com ↗	`.work-page .case-link`
Work	Body	Anthropic Sans 400	17px	18px	Working in Scania’s Global Patterns team…	`.work-page .case-card p`
Blog	Page title	Anthropic Serif Display 500	50px	44.85px	Writings	`.blog-page .page-hero h1`
Blog	Intro	Anthropic Sans 400	18px	18px	Essays, papers and design notes.	`.blog-page .page-hero p`
Blog	Date and subject	Anthropic Sans 600	14px	12.675px	Jul 5, 2026 · AI Safety	`.blog-mobile-meta`
Blog	Article title	Anthropic Serif Display 500	21px	27px	Confessions of a Lock	`.blog-row-copy h2`
Blog	Excerpt	Anthropic Sans 400	15px	16px	How poetry slips past AI safeguards…	`.blog-excerpt`
Blog	Action	Anthropic Sans 500	15px	17px	Read more →	`.blog-read`
Papers	Page title	Anthropic Serif Display 500	50px	38px	Academic Essays & Research Papers	`.papers-page .page-hero h1`
Papers	Intro	Anthropic Sans 400	18px	18px	I write and publish academic papers…	`.papers-page .page-hero p`
Papers	Index number	Anthropic Sans Display 400	20px	Hidden	01	`.paper-index > span`
Papers	Paper title	Anthropic Serif Display 500	18px	23px	Confessions of a Lock	`.paper-copy h2`
Papers	Paper subtitle	Anthropic Sans 400	14px	16px	Ordinary Language, Poetic Jailbreaks…	`.paper-subtitle`
Papers	Actions	Anthropic Sans 500	15px	14px	PDF ↗ / PhilPapers ↗	`.paper-links a`
Contact	Label	Anthropic Sans 400	11.52px	12.48px	EMAIL	`.crow-label`
Contact	Value	Anthropic Serif Display 400	20.8–27.2px fluid	24.8px	moreno@morenou.se	`.crow-value`
Contact	External arrow	Anthropic Sans	0.58em (≈12–16px)	≈14.4px	↗	`.crow-ext`
Mobile menu	Navigation link	Anthropic Serif Display 500	Not shown	54–70.4px fluid	About / Work / Blog / Papers / Contact	`.mobile-nav a`

Global chrome

The header and footer wrap every page (rendered once, top and bottom of this document). Primary nav: About, Work, Blog, Papers, Contact.