solarized-ui

A calm place to write

Example article

This page shows the site scaffolding and long-form prose components together: a reading column, a masthead with navigation, an article, a list of posts, and a footer.

Paragraphs stay within the 68-character measure, and links such as the table example keep their underline. Inline code like pnpm add @dougborg/solarized-ui sits on the raised surface.

Structure

Headings inside prose use the sans family, so section labels in monospace remain distinct.

Lists

  • Unordered lists keep native markers.
    • One nested level is enough for most writing.
  • Ordered lists keep their numbering.
  1. Write in plain Markdown.
  2. Build with any static site generator.

Color should help you find your place, never carry meaning on its own.

Code

Blocks wrap instead of scrolling. Highlighting uses weight and style, because no Solarized accent is readable enough as small text on the light code surface.1

// Load the stylesheet once; fonts resolve beside it.
import "@dougborg/solarized-ui";

export const accents = ["blue", "cyan", "green"] as const;

Tables and figures

Type scale
RoleSizeFamily
Body16pxIBM Plex Sans
Section22pxJetBrains Mono
Small14pxIBM Plex Sans
Four Solarized accent squares on a dark tile
Figures take a short caption below the image.

That is the whole vocabulary for long-form pages.

  1. Several accents reach 4.5:1 on the dark code surface, but none do on the light one. Back to text

More posts