Skip to the collection
Trova
Browse Solarpunk / Dithered Low-Energy UICompare with another family →

Style sheet · 4 references

Solarpunk / Dithered Low-Energy UI

Atkinson dithered monochrome images, live solar host battery gauges, low-wattage CPU budgets, and warm terracotta plant palettes.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Solarpunk / Dithered Low-Energy UI (solarpunk-dithered-eco) */
/* Evidence base: 4 curated reference(s) · Primary contrast 16:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f5f2e8;
  --surface-elevated: #141413;
  --text-primary: #091a14;
  --accent-primary: #000000;
  --border-hairline: color-mix(in srgb, #091a14 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Courier New", system-ui, sans-serif;
  --font-body: "Courier", system-ui, sans-serif;
  --font-mono: "Courier New", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Solarpunk / Dithered Low-Energy UI — style sheet

> Atkinson dithered monochrome images, live solar host battery gauges, low-wattage CPU budgets, and warm terracotta plant palettes.

Derived from 4 curated reference(s) in the `solarpunk-dithered-eco` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Courier New — 2/4
- Courier — 1/4
- IBM Plex Mono — 1/4
- Inter — 1/4
- monospace — 1/4
- system-ui — 1/4
- Times New Roman — 1/4

## Color

- `#091a14` dark neutral — 2/4
- `#f5f2e8` light neutral — 2/4
- `#000000` dark neutral — 1/4
- `#141413` dark neutral — 1/4
- `#112a21` dark neutral — 1/4
- `#2d6a4f` muted — 1/4
- `#16a34a` chromatic — 1/4
- `#d97706` chromatic — 1/4
- `#ca8a04` chromatic — 1/4
- `#10b981` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#091a14` / `#f5f2e8` — 16:1
- `#000000` / `#f5f2e8` — 18.7:1
- `#141413` / `#f5f2e8` — 16.5:1
- `#112a21` / `#f5f2e8` — 13.6:1

## Moves

### component pattern

- Expose real-time server telemetry (solar irradiance, battery charge %, uptime weather forecast) in a persistent right-margin gauge rail using zero external web fonts or third-party scripts. — 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter
- Present page weight diagnostics as an A+ to F energy-efficiency rating badge alongside concrete physical equivalents (grams of CO2 per 10,000 views, kWh of renewable vs grid energy). — 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack
- Top status bar displays the live carbon intensity (`gCO2/kWh`) of the reader's local electricity grid and lets the user toggle between 'Low / Monochrome Text', 'Medium / Dithered Image', and 'High / Full Resolution' modes. — 193-branch-magazine-grid-intensity-aware-media-mode-fossil-vs-renewables-layout

### texture/material

- Convert all photographic assets to 4-color ordered or Floyd-Steinberg dithered PNGs with `mix-blend-mode: multiply` so the background tint dynamically reflects the Barcelona solar server's live battery percentage. — 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter

### grid/layout

- Zero-dependency static HTML architecture under 14KB per page: a fixed left-hand ASCII/monochrome tree index paired with a 60ch main logbook column and 1-bit pixel illustrations. — 191-hundred-rabbits-offline-first-1-bit-monochrome-tooling-permacomputing-log

### color

- Restrict the entire site palette to three tokens (`#ffffff` ground, `#000000` ink, `#72dec2` seafoam link highlight) so pages render identically on e-ink readers, low-power marine displays, and OLED screens. — 191-hundred-rabbits-offline-first-1-bit-monochrome-tooling-permacomputing-log

### typography

- Use the native OS `system-ui` font stack at dramatic display weights (`clamp(2.5rem, 5vw, 4.5rem)`) to achieve strong typographic hierarchy with `0KB` of font network transfer. — 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack

### copywriting

- Deferred image placeholders display an explicit size caption (`[Image: 142KB — click to load on high-carbon grid]`) so media loading becomes an intentional user choice. — 193-branch-magazine-grid-intensity-aware-media-mode-fossil-vs-renewables-layout

## References

- 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter — Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter (exemplar)
- 191-hundred-rabbits-offline-first-1-bit-monochrome-tooling-permacomputing-log — Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log
- 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack — Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack
- 193-branch-magazine-grid-intensity-aware-media-mode-fossil-vs-renewables-layout — Branch Magazine — Grid-Intensity Aware Media Mode (Fossil vs Renewables Layout)

Type

Color

Pairs that read

  • Steal this.#091a14 on #f5f2e8 · 16:1
  • Steal this.#000000 on #f5f2e8 · 18.7:1
  • Steal this.#141413 on #f5f2e8 · 16.5:1
  • Steal this.#112a21 on #f5f2e8 · 13.6:1

Moves

component pattern

texture/material

grid/layout

color

typography

copywriting

References