A humanist design system for the reading mind.

Live Site · MIT License · Changelog · Contributing

Nous is a CSS design system built for long-form reading — essays, academic papers, bilingual texts, annotation-rich documents. Its palette is drawn from the Aegean: limestone, terracotta, olive, wine-dark sea. Its typography pairs five carefully chosen serif and monospace families across Latin, Greek, and CJK scripts. The system ships as six plain CSS files with no build step and no JavaScript dependencies.

Browse the live design book →

Reference the tokens and any layer you need directly from jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/islgl/nous@main/design/styles/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/islgl/nous@main/design/styles/book.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/islgl/nous@main/design/styles/markdown.css">

Google Fonts must be loaded separately — CDN does not bundle them.

git clone https://github.com/islgl/nous.git

Open index.html in a browser. No build step required.

Copy design/styles/tokens.css into your project. It defines every color, font, spacing, and motion value as CSS custom properties. Build your own components on top:

.my-card {
  background: var(--nous-paper-2);
  color: var(--nous-ink);
  font-family: var(--ff-serif);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--nous-rule);
}

Dark mode, responsive type, and reduced-motion all inherit automatically — no extra work needed.

Copy DESIGN.md into your AI session context. It contains the full design specification — palette, type stack, spacing scale, HTML patterns, and do/don't rules — so generated code follows the Nous style automatically.

Six CSS files, loaded in this order. No preprocessor, no bundler.

tokens.css      Variables only — colors, type, space, motion
    ↓
book.css        Page layout: .page, .eyebrow, .prose, .meander, .dropcap
    ↓
markdown.css    Long-form elements: headings, lists, blockquotes, code, tables
    ↓
patterns.css    Interaction patterns: footnote popover, TOC rail, reader controls
    ↓
editors.css     Editor chrome for Obsidian, Typora, Blog mockups (optional)
    ↓
site.css        Multi-page navigation, chapter chrome, footer, print

Every file depends only on tokens.css. The single :root lives there — no redeclaration elsewhere.

Ten chapters covering the full system, from philosophy to accessibility audit.

Three real documents using the system — test fixtures and showcases.

Full palette with 13 semantic tokens, plus syntax highlighting and dark-mode counterparts. See Light & Stone for the complete contrast audit.

Type scale uses clamp() with vi units for smooth interpolation from 375px to 1280px — 10 steps from --fs-xs (11px) to --fs-5xl (144px).

• Reading-first. Built for the long read, not the dashboard.
• Humanist. Drawn from a place — limestone, sea, olive, terracotta — not from a palette generator.
• Editorial. Footnotes, citations, margin notes, and a TOC rail are first-class.
• Restrained. Ten colors, five faces, no icon set. When in doubt, remove.
• Classical. Meander rules, Greek motto, old-style figures, real italics.

• Modern browsers with clamp(), vi unit, and color-mix() support get the full experience.
• Every color-mix() declaration has an rgba() fallback for older browsers.
• prefers-reduced-motion honoured at the token layer — all durations fall to 0ms.
• prefers-color-scheme auto-detected on first visit; manual toggle persisted to localStorage.
• Print styles strip interactive chrome and surface footnotes inline.

The logo/ directory contains the canonical brand assets — 7 SVG variants, PNG exports, favicons, and a webmanifest template. See logo/README.md for construction specs and usage guidelines.

See CONTRIBUTING.md.

MIT

The book is a room. The reader is the guest. Nous is the quiet it depends on.