Branding & Design System

This page shows the current design tokens defined in the centralized branding file.

All colors, fonts, and tokens are managed in one place: layouts/partials/head/branding.html

Typography

Display Font

Used for large hero headlines (homepage).

The Thread

Variable: --font-display

Heading Font

Used for section and article headings.

A Hierarchy of Meaning

Variable: --font-heading

Body Font (Serif)

Main reading font — chosen for long-form readability.

This is the body text. The Thread is a practical, cross-scale framework for understanding how meaning emerges from stabilized regularities. Stable patterns become the foundation for higher levels of organization and meaning — each conferring emergent interaction capabilities that enable the weave to continue upward.

Variable: --font-serif

Sans & Monospace

Sans-serif: Used for UI elements.

This is the sans-serif font stack.

Monospace: Used for code, labels, and technical text.

const meaning = stabilize(patterns);

Colors

Backgrounds

--bg
#f8f9f7
--bg-alt
#f1f3f0
--paper
#fdfdfb

Text Colors

--ink
--ink-mid
--ink-light
--ink-muted

Accent Colors

--accent
#145f58
--accent-2
--accent-soft

Borders & Rules

--rule
--rule-light

How to Edit Branding

  1. Open this file:

    layouts/partials/head/branding.html

  2. Modify the values inside the :root { ... } block.

  3. Changes will appear live when using npm run dev.

All pages (including the homepage and book chapters) automatically use these tokens.

This page is a live view of the design system defined in the centralized branding file.