# Design Library

Canonical URL: https://morenou.se/library/
Type: Design system reference

Internal reference

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](https://morenou.se/#colour)

[Type](https://morenou.se/#type)

[Atoms](https://morenou.se/#atoms)

[Controls](https://morenou.se/#controls)

[Sections](https://morenou.se/#sections)

[Type map](https://morenou.se/#bundles)

[Chrome](https://morenou.se/#chrome)

01

## Colour tokens

--page

#ffffff

Page background

--ink

#2a2926

Headings, logo, strong marks

--text

#1a1916

Body copy

--muted

#5f5c55

Subtitles, meta, secondary

--soft

#938f85

Labels, captions, TOC

--rule

rgba(26,25,22,.12)

Hairline rules and borders

--accent

#4f6f63

Accent: internal links, quote bar

--footer

#2d2d2d

Footer background

link ext

#055aa5

External links (PhilPapers etc.)

02

## Type scale

Page title

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

Academic Essays & Research Papers

Page subtitle

Anthropic Sans, 400 italic, 16.8–18px desktop / 18px mobile

Product design and UX architecture, writing and research.

Section label

Anthropic Sans, 500, 13px desktop / 14px mobile

Design Frameworks & Competencies

Subsection title

Anthropic Serif Display, 500, 22px desktop / 24px mobile

UX Architecture & Systems Design

Body

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

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

Kicker / label

Sans 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 1

42px → 72px · Serif

Display 1

Display 2

36px → 64px · Serif

Display 2

H1

34px → 52px · Serif

H1

H2

30px → 44px · Serif

H2

H3

28px → 36px · Serif

H3

H4

23px → 32px · Serif

H4

H5

20px → 25px · Serif

H5

H6

16px → 19px · Serif

H6

Body large 1

22px → 24px · Sans

Body large 1

Body large 2

20px → 23px · Sans

Body large 2

Body 1

19px → 20px · Sans

Body 1

Body 2

17px → 17px · Sans

Body 2

Body 3

15px → 15px · Sans

Body 3

Caption

12px → 12px · Sans

Caption

Micro

10px → 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.

03

## Atoms

Internal link

Read the case: [The geography of usability debt →](https://morenou.se/#)

Accent colour, same tab, trailing →

External link

Published on [PhilPapers ↗](https://morenou.se/#)

Blue, new tab, trailing ↗

Kicker + meta label

AI Safety

Jun 26, 2026

Reading time

Uppercase, 0.08em tracking

Pullquote

> You cannot persuade a lock.

Audio pill (play)

▶

Listen

27:45

Nav item states

[About](https://morenou.se/#)

[Work](https://morenou.se/#)

[Blog](https://morenou.se/#)

Active: medium italic underline

Interactive demo cards (blog widgets)

OptionGenre labToggleable state, hover + .on lift the border to accent

SelectedRoute surfaceThe .on state: accent border, tinted fill

04

## 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 Safety

Philosophy of Science

Philosophy of Technology

Philosophy of AI

Cybernetics

Systems

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`

Outline

Accent

Solid

[Clickable →](https://morenou.se/#controls)

Quick filter

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

All

AI Safety

Philosophy of Science

Philosophy of Technology

Philosophy of AI

Cybernetics

Systems

Jul 5, 2026

Confessions of a Lock

AI Safety

[PhilPapers ↗](https://philpeople.org/profiles/moreno-nourizadeh/publications)

Jun 14, 2026

Drawing Lions Without Lions

Philosophy of Science

[Read the article →](https://morenou.se/#controls)

Jun 4, 2026

Becoming Human

Philosophy of Technology

[Read the article →](https://morenou.se/#controls)

May 1, 2026

Why Language Models Work

Philosophy of AI

[Read the article →](https://morenou.se/#controls)

Dec 24, 2025

The Submarine and the Sea

Cybernetics

[Read the article →](https://morenou.se/#controls)

Nov 23, 2025

The Architecture of Not-Yet

Systems

[Read the article →](https://morenou.se/#controls)

Pagination

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

←

1

2

3

…

7

→

05

## 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 digital truck cluster interface](https://morenou.se/assets/work/scania-cluster.webp)

### 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 logo in neon on a wood-panelled office wall](https://morenou.se/assets/work/sinch-case.jpg)

### 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 ↗](https://philpapers.org/rec/NOUCOA)

## Three Walls

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

[PhilPapers ↗](https://philpapers.org/rec/NOUTWA)

## The Conditions of the Invisible Hand

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

[PhilPapers ↗](https://philpapers.org/rec/NOUTCO-4)

Blog teasers

AI Safety

Jul 5, 2026

### Confessions of a Lock

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

Philosophy of Science

Jun 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 Technology

Jun 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.

06

## 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`.

SurfaceElement / roleFontDesktopMobileExampleSelector**Homepage**Destination titleAnthropic Serif Display 50067.2–112px fluid65–74px fluidAbout / Work / Writings`.hl-title`**Homepage**DescriptionAnthropic Sans 40017px18pxthe person, the practice and the path`.hl-desc`**Shared hero**Page titleAnthropic Serif Display 50033.6–56px fluid42–50px fluidAbout / Work / Writings / Get in touch`.page-hero h1`**Shared hero**SubtitleAnthropic Sans 40018px / 1.3418px / 1.42Essays, papers and design notes.`.page-hero p`**About**Section labelAnthropic Sans 50013px14pxDesign Frameworks & Competencies`.about-page .section-grid h2`**About**Subsection titleAnthropic Serif Display 50022px24pxUX Architecture & Systems Design`.about-page .text-block h3`**About**BodyAnthropic Sans 40017px18pxTraditional UX is great for designing individual features…`.about-page .text-block p`**Work**Case titleAnthropic Serif Display 50028–35.2px fluid32pxScania`.work-page .case-card h3`**Work**MetadataAnthropic Sans 50012px13pxStaff Product Designer · Automotive · 1 year`.work-page .case-card .meta`**Work**External linkAnthropic Sans 50016px18pxscania.com ↗`.work-page .case-link`**Work**BodyAnthropic Sans 40017px18pxWorking in Scania’s Global Patterns team…`.work-page .case-card p`**Blog**Page titleAnthropic Serif Display 50050px44.85pxWritings`.blog-page .page-hero h1`**Blog**IntroAnthropic Sans 40018px18pxEssays, papers and design notes.`.blog-page .page-hero p`**Blog**Date and subjectAnthropic Sans 60014px12.675pxJul 5, 2026 · AI Safety`.blog-mobile-meta`**Blog**Article titleAnthropic Serif Display 50021px27pxConfessions of a Lock`.blog-row-copy h2`**Blog**ExcerptAnthropic Sans 40015px16pxHow poetry slips past AI safeguards…`.blog-excerpt`**Blog**ActionAnthropic Sans 50015px17pxRead more →`.blog-read`**Papers**Page titleAnthropic Serif Display 50050px38pxAcademic Essays & Research Papers`.papers-page .page-hero h1`**Papers**IntroAnthropic Sans 40018px18pxI write and publish academic papers…`.papers-page .page-hero p`**Papers**Index numberAnthropic Sans Display 40020pxHidden01`.paper-index > span`**Papers**Paper titleAnthropic Serif Display 50018px23pxConfessions of a Lock`.paper-copy h2`**Papers**Paper subtitleAnthropic Sans 40014px16pxOrdinary Language, Poetic Jailbreaks…`.paper-subtitle`**Papers**ActionsAnthropic Sans 50015px14pxPDF ↗ / PhilPapers ↗`.paper-links a`**Contact**LabelAnthropic Sans 40011.52px12.48pxEMAIL`.crow-label`**Contact**ValueAnthropic Serif Display 40020.8–27.2px fluid24.8pxmoreno@morenou.se`.crow-value`**Contact**External arrowAnthropic Sans0.58em (≈12–16px)≈14.4px↗`.crow-ext`**Mobile menu**Navigation linkAnthropic Serif Display 500Not shown54–70.4px fluidAbout / Work / Blog / Papers / Contact`.mobile-nav a`

07

## Global chrome

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