---
version: alpha
name: Gwern — Ruled scholarly navigation
colors:
  canvas: '#FFFFFF'
  primary: '#000000'
  body-ink: '#000000'
typography:
  heading:
    fontFamily: '"Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville",
      "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira'
    fontSize: 20px
    fontWeight: 400
  body:
    fontFamily: '"Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville",
      "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira'
    fontSize: 20px
    fontWeight: 400
---

## Overview
A compact small-cap navigation bar using dotted rectangular cells beside a distinctive black monogram. Isolated component selected with `#navbar`; the screenshot contains its measured bounds, not the entire page. Inspected 2026-10-05.

## Colors
Use a white page and black text with gray iconography and fine dotted rules. Topic links remain understated; typographic hierarchy supplies emphasis. Tokens are sampled computed colors; descriptive accent colors are visual observations, not measured hex values.

## Typography
Measured heading/label sample: "Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville", "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira, 20px, weight 400, leading normal. Supporting sample: "Source Serif 4", "Apple Garamond", Baskerville, "Libre Baskerville", "Droid Serif", "Times New Roman", Times, serif, "Noto Emoji", Quivira, 20px, leading normal. These are local computed samples, not a universal type scale. Artwork and child spans may differ from their parent styles.

## Layout
Desktop lays the labeled links across one row; mobile reflows the visible items into a two-row grid. The measured crop is the navigation element; the separately positioned desktop monogram can extend beyond its bounds. Desktop screenshot: 896 × 42px at a 1440px viewport. Mobile evidence: 359 × 76px at a 390px viewport. Breakpoint thresholds are not inferred from two observations.

## Elevation & Depth
A flat print-like surface: separators and type weight define groups instead of shadows or filled cards.

## Shapes
Rectangular dotted navigation cells, small star-like list markers and fine horizontal rules. The monogram and ornaments are artwork, not ordinary text.

## Components
Text links in ruled cells; use typographic rhythm and clear focus treatment rather than filled buttons. Preserve link order at the chosen width.

## Do’s and Don’ts
Preserve the reference-specific hierarchy, wrapping and spacing described above. Use original copy and assets when adapting. Keep links keyboard-accessible with visible focus. Do not infer animations, hover states or hidden menus from this static capture. No full accessibility audit was performed.