@dougborg/solarized-ui / interface foundations

Calm surfaces.
Clear hierarchy.

A Solarized foundation for personal sites and internal tools. Readable prose, a little terminal character, and color that helps you find your place.

Color & surfaces

Paper for the page, a quiet raised surface for groups, and the eight unmodified Solarized accents. Text uses Solarized neutrals for contrast; swatches, glyphs, rules, and markers use the exact accents. Try the theme glyph in the lower corner.

Typography & rhythm

Readable by default

IBM Plex Sans carries prose and data. JetBrains Mono Nerd Font adds character to section headings, controls, and code such as pnpm check.

Keep proper nouns capitalized. Use lowercase section labels, a 68-character reading measure, and one supporting-detail level.

A small shared scale

Body / leading
16px / 1.55
Small / section / title
14px / 22px / 28px
Spacing
4, 8, 12, 16, 24, 32, 44, 48px
Corners / touch targets
4px / at least 44px

Content hierarchy

Example organization

2024–Present

Lead with the organization or project, then context, then accomplishments.

  • State the outcome first. Keep the headline useful on its own.
  • Group related facts. Use a definition list for label/value pairs and ordered lists when sequence matters.

Internal service examples

Illustrative states, not live service data. Status always includes a text label; hue stays consistent across themes.

Build runner

Ready

Available for the next job.

Queue
0 pending jobs
Runtime
linux / arm64

Backup service

Maintenance

Scheduled work is in progress.

Failure example: last backup did not finish.

Site patterns

Shared pieces for personal sites. Each takes its color from the nearest data-accent and still reads correctly without color.

Identity and band

Your Name

The band's six hard stops follow the résumé's accent order. Use .accent-band as a standalone rule:

Timeline

  1. Newest entry

    4 min read

    Each item owns the rail below its marker.

  2. Older entry

    2 min read

    Dates stay in text; the color only helps you keep your place.

  1. Example organization

    2024–Present

    Larger markers hold initials or a logo.

  2. Another company

    2019–2024

    The marker is decorative; the heading names the item.

Cards and tints

Tints come from each accent's own hue with lighter or darker lightness, so they never add a new color. Any surface can take one:

A .surface[data-tint] in magenta.

Chips and pager

  • TypeScript
  • Home infrastructure
  • Pulumi

Quiet patterns

For dashboards and status pages: panels with a faint edge and a soft shadow in light themes, rows with dividers, and states that always name themselves. Mark a row with data-state or data-accent to give it that color's tint and a leading edge. The example status page uses nothing else.

Some services are degraded

A callout pairs an icon badge with a headline; add role="status" when it updates live.

Services

  • Build runnerAvailable for the next job
    Idle
  • Backup serviceScheduled work is in progress
    Paused
  • Nightly importThe last run did not finish
    Failed
  • Search indexRebuilt 12,480 documents
    Rebuilding

A tinted callout

Add .callout--tinted when the state should fill the panel.

Marked rows by state

  • Build runnerAvailable for the next job
    Idle
  • Backup serviceScheduled work is in progress
    Paused
  • Nightly importThe last run did not finish
    Failed
  • Search indexRebuilt 12,480 documents
    Rebuilding

Marked rows by accent

  1. A post about the houseEach row takes its accent's tint and edge.

    Sep 18, 2026

  2. A post about the networkText switches to card ink on every tint.

    Aug 14, 2026

  3. A post about the edgeColour never carries meaning on its own.

    Nov 2, 2025

Pills

OnlineDegradedOutageDraft

Use the foundation

Install the package, then serve its stylesheet, local fonts with their licenses, and the optional theme script. No framework or runtime is required.

pnpm add @dougborg/solarized-ui
<link rel="stylesheet" href="assets/solarized-ui.css">
<section class="content-section" data-accent="violet">
  <h2 class="section-title">Projects</h2>
  <article class="surface">Your content</article>
</section>
  1. Copy dist/ into your site with its font licenses.
  2. Add your layout and semantic content.
  3. Check themes, keyboard access, and narrow screens.

View the source