Public vault · the index · compare
Compare families & landscape
Put any two of the 40 populated aesthetic families side by side to inspect their typefaces, open-source font stand-ins, measured WCAG contrast pairs, and move-by-move steal-notes — then synthesize a working DESIGN.md brief or CSS :root sheet, or benchmark how Trova compares to peer platforms.
Aesthetic Differential Workbench
Select two families to compare side by side
Curated Synthesis Presets
01 · Structural & Chromatic Anatomy
Solarpunk / Dithered Low-Energy UI vs. Dark Premium
Solarpunk / Dithered Low-Energy UI
Atkinson dithered monochrome images, live solar host battery gauges, low-wattage CPU budgets, and warm terracotta plant palettes.
Observed Typefaces (7)
- Courier New2/4
- Courier1/4
- IBM Plex Mono1/4
- Inter1/4
- monospace1/4
- system-ui1/4
Captured Palette Chromatography
- #091a14
dark neutral - #f5f2e8
light neutral - #000000
dark neutral - #141413
dark neutral - #112a21
dark neutral
Verified WCAG Readable Pairs
- Steal this.#091a14 on #f5f2e8 · 16:1
- Steal this.#000000 on #f5f2e8 · 18.7:1
Anchor References
- #190 Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter★ canonical
- #191 Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log
- #192 Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack
- #193 Branch Magazine — Grid-Intensity Aware Media Mode (Fossil vs Renewables Layout)
Dark Premium
Near-black fields, hairline gradients, one metallic or electric accent, understated serif. Whispers expensive; the restraint is the flex.
Observed Typefaces (10)
- Inter2/8
- Berkeley Mono1/8
- Domaine1/8
- GT Walsheim1/8
- Inter Display1/8
- Inter Variable1/8
Free Loadable Stand-Ins
- Berkeley Mono (licensed) → JetBrains Mono
- Söhne (licensed) → Inter
Captured Palette Chromatography
- #08090a
dark neutral - #f7f8f8
light neutral - #e5e5e5
light neutral - #201819
dark neutral - #26283b
dark neutral
Verified WCAG Readable Pairs
- Steal this.#08090a on #f7f8f8 · 18.7:1
- Steal this.#08090a on #e5e5e5 · 15.8:1
02 · Mechanism Comparison by Move Type
Move-by-move steal-note matrix
How Solarpunk / Dithered Low-Energy UI and Dark Premium solve the same 7 structural design dimensions differently. Every observation is cited to a specific captured specimen in the vault.
Solarpunk / Dithered Low-Energy UI
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 · Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack
Dark Premium
Tiempos Headline / Söhne pairing: old-money serif for claims, neutral grotesque for evidence. Finance gravitas without cliché.
18-endex · Endex
The upper-left brand lockup uses serif type, while each book retains its own cover typography. Keep the interface restrained when the collection already contains many visual voices.
109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft
Solarpunk / Dithered Low-Energy UI
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 · Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log
Dark Premium
Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.
16-linear · Linear
The captured catalogue centers a vertical stack of book spines on a dark field, with generous space around the stack. The physical objects become the organizing structure rather than sitting inside a conventional product-card grid.
109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft
Solarpunk / Dithered Low-Energy UI
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 · Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log
Dark Premium
Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint.
16-linear · Linear
Most of the visible color belongs to the book spines against the dark background. Let the objects supply variety while the surrounding interface stays quiet; this observation does not establish keyboard or motion behavior.
109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft
Solarpunk / Dithered Low-Energy UI
No recorded motion/interaction notes in this slice.
Dark Premium
Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.
16-linear · Linear
Solarpunk / Dithered Low-Energy UI
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 · 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 · Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack
Dark Premium
Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning.
17-raycast · Raycast
There is no global monthly/yearly switch: a "Billed yearly" toggle appears only in the Basic and Business columns, while the same row reads "Free for everyone" under Free and "Annual billing only" under Enterprise. Steal the per-plan billing row, which places a toggle only where it changes a price and uses the slot to state terms everywhere else.
81-linear-pricing · Linear — pricing · model draft
Solarpunk / Dithered Low-Energy UI
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 · Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter
Dark Premium
Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity.
17-raycast · Raycast
The right half holds a single 3D cube of near-black facets in mixed finishes (matte, perforated, speckled), lit from above, with one pale light band sweeping diagonally across the lower third of the black ground. Steal one monochrome rendered object as the hero image, giving depth without adding a color.
78-resend-homepage-hero · Resend — homepage hero · model draft
Solarpunk / Dithered Low-Energy UI
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 · Branch Magazine — Grid-Intensity Aware Media Mode (Fossil vs Renewables Layout)
Dark Premium
Six words on the entire first viewport. Institutional confidence = information withheld.
18-endex · Endex
03 · Executable Output · DESIGN.md, Agent Harness Rules & CSS Tokens
Synthesize a working system brief, `.cursorrules` / `CLAUDE.md`, or CSS tokens
Moodboards stall when it is time to open an editor. Export a cited DESIGN.md brief combining Solarpunk / Dithered Low-Energy UI (80% primary architecture) with Dark Premium (20% counterpoint), drop a ready-made .cursorrules / CLAUDE.md harness file into your repository, or copy Tailwind v4 @theme and CSS :root tokens mapped to open-source stand-in fonts.
Display: Courier New · Body: Courier
Solarpunk / Dithered Low-Energy UI Architecture with Dark Premium Counterpoint
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.
20% Counterpoint Telemetry (JetBrains Mono)
- --surface-ground
- #f5f2e8
- --text-primary
- #091a14
- --accent-primary
- #000000
- --accent-counter
- #08090a
# DESIGN.md — Solarpunk / Dithered Low-Energy UI × Dark Premium Synthesis > **80% Primary Architecture:** Solarpunk / Dithered Low-Energy UI (`solarpunk-dithered-eco`, 4 refs) > **20% Counterpoint / Accent:** Dark Premium (`dark-premium`, 8 refs) ## 1. Visual Direction & Thesis - **Primary Foundation (Solarpunk / Dithered Low-Energy UI):** Atkinson dithered monochrome images, live solar host battery gauges, low-wattage CPU budgets, and warm terracotta plant palettes. - **Secondary Counterpoint (Dark Premium):** Borrow selective tension from Dark Premium — Near-black fields, hairline gradients, one metallic or electric accent, understated serif. Whispers expensive; the restraint is the flex. ## 2. Typography & Loadable Stand-Ins - **Primary Display & Body (Solarpunk / Dithered Low-Energy UI):** Courier New (2/4), Courier (1/4), IBM Plex Mono (1/4), Inter (1/4) - **Counterpoint / Accent Face (Dark Premium):** Inter (2/8), Berkeley Mono (1/8), Domaine (1/8) - **Free Loadable Stand-Ins:** - Berkeley Mono (licensed) → JetBrains Mono - Söhne (licensed) → Inter ## 3. Chromatic Polarity & Verified Contrast - **Primary Surface Pair (Solarpunk / Dithered Low-Energy UI):** `#091a14` on `#f5f2e8` (16:1 WCAG contrast) - **Counterpoint Signal Color (Dark Premium):** `#08090a` (reserve for active state, focus ring, or single focal callout) ## 4. Structural Moves to Steal - **[Primary · 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 Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter)_ - **[Primary · 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 Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter)_ - **[Primary · 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 Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log)_ - **[Primary · 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 Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log)_ - **[Counterpoint · grid/layout]** Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode. _(16-linear Linear)_ - **[Counterpoint · component pattern]** Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning. _(17-raycast Raycast)_ - **[Counterpoint · color]** Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint. _(16-linear Linear)_ ## 5. Cited Reference Anchors - **Primary (Solarpunk / Dithered Low-Energy UI):** 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter Low-Tech Magazine — Solar-Powered Floyd-Steinberg Dithered Print & Battery Meter ★ canonical - **Primary (Solarpunk / Dithered Low-Energy UI):** 191-hundred-rabbits-offline-first-1-bit-monochrome-tooling-permacomputing-log Hundred Rabbits — Offline-First 1-Bit Monochrome Tooling & Permacomputing Log - **Primary (Solarpunk / Dithered Low-Energy UI):** 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack - **Counterpoint (Dark Premium):** 16-linear Linear ★ canonical - **Counterpoint (Dark Premium):** 109-stripe-press-a-catalogue-composed-from-book-spines Stripe Press — a catalogue composed from book spines
Automate in CI & Your Repo · Full-Depth CLI + Headless Chromium Audit
Get a full-corpus key (27 families · 500 calls/day) →The browser workbench above synthesizes a starter preview from the top notes in each move. With a Trova access key, drop the complete 4-reference Solarpunk / Dithered Low-Energy UI Trovafileinto your repository and run a real headless Chromium DOM & WCAG contrast audit against your local dev server:
npx trova init --family solarpunk-dithered-eco --token $TROVA_TOKEN npx trova audit http://localhost:3000 --family solarpunk-dithered-eco
04 · Pre-Flight Verification · UI Code & Anti-Slop Auditor
Audit JSX / Tailwind / CSS against Solarpunk / Dithered Low-Energy UI
Paste any React, HTML, Tailwind, or CSS component snippet below (or load a sample) to verify its geometry, chromatic tokens, type scale, tabular numerals, and hit targets against Solarpunk / Dithered Low-Energy UI. Copy the generated refactor prompt at the bottom to hand directly to Claude Code or Cursor.
Diagnostic Findings (6)
- ✗ Violation · Structural GeometryRef #190 ↗
Detected oversized border-radius (`rounded-xl`/`2xl`/`3xl` or >=12px radius) that softens structural grid cells into generic SaaS bubbles.
→ Replace rounded card wrappers with `rounded-none` (`0px`) and exposed `1px solid` hairline borders aligned to Solarpunk / Dithered Low-Energy UI.
- ✗ Violation · Surface ElevationRef #190 ↗
Detected heavy drop-shadow (`shadow-lg`/`xl`/`2xl` or blurred `box-shadow`) simulating floating cards instead of tonal surface steps.
→ Remove drop shadows (`shadow-none`) and separate elevation through `--surface-ground` vs. `--surface-elevated` plus `1px` borders.
- ✗ Violation · Chromatic PolarityRef #191 ↗
Detected generic AI-slop indigo/purple/pink gradient classes unrelated to the family's captured chromatography.
→ Strip synthetic gradients and bind surfaces to Solarpunk / Dithered Low-Energy UI verified tokens (`#091a14` on `#f5f2e8` (16:1)).
- ✗ Violation · Typographic HierarchyRef #192 ↗
Detected sub-13px micro-copy (`text-xs` or `10px–12px`), which degrades legibility and breaks archival hierarchy.
→ Raise small metadata to `text-[0.8125rem]` (13px) and differentiate with `font-mono uppercase tracking-[0.12em]`.
- △ Warning · Numeric DisciplineRef #192 ↗
Detected numeric figures, prices, or metrics without `tabular-nums` (`font-variant-numeric: tabular-nums`).
→ Add `tabular-nums` (or `.tnum`) so numerals align vertically across rows and live updates.
- △ Warning · Interactive ErgonomicsRef #190 ↗
Interactive element (`<button>`, `<a>`, `<select>`) lacks an explicit >=44px (`min-h-11`) touch/click target.
→ Add `min-h-11 inline-flex items-center` to interactive controls.
Ready-to-Paste Agent Refactor Prompt (Solarpunk / Dithered Low-Energy UI × Dark Premium)
Refactor the following UI component to strictly adhere to the Trova Solarpunk / Dithered Low-Energy UI × Dark Premium design system (Score: 0/100 · AI Slop Detected).
### Required Aesthetic Corrections
1. [Structural Geometry] Detected oversized border-radius (`rounded-xl`/`2xl`/`3xl` or >=12px radius) that softens structural grid cells into generic SaaS bubbles.
→ Fix: Replace rounded card wrappers with `rounded-none` (`0px`) and exposed `1px solid` hairline borders aligned to Solarpunk / Dithered Low-Energy UI. (Trova ref: 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter)
2. [Surface Elevation] Detected heavy drop-shadow (`shadow-lg`/`xl`/`2xl` or blurred `box-shadow`) simulating floating cards instead of tonal surface steps.
→ Fix: Remove drop shadows (`shadow-none`) and separate elevation through `--surface-ground` vs. `--surface-elevated` plus `1px` borders. (Trova ref: 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter)
3. [Chromatic Polarity] Detected generic AI-slop indigo/purple/pink gradient classes unrelated to the family's captured chromatography.
→ Fix: Strip synthetic gradients and bind surfaces to Solarpunk / Dithered Low-Energy UI verified tokens (`#091a14` on `#f5f2e8` (16:1)). (Trova ref: 191-hundred-rabbits-offline-first-1-bit-monochrome-tooling-permacomputing-log)
4. [Typographic Hierarchy] Detected sub-13px micro-copy (`text-xs` or `10px–12px`), which degrades legibility and breaks archival hierarchy.
→ Fix: Raise small metadata to `text-[0.8125rem]` (13px) and differentiate with `font-mono uppercase tracking-[0.12em]`. (Trova ref: 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack)
5. [Numeric Discipline] Detected numeric figures, prices, or metrics without `tabular-nums` (`font-variant-numeric: tabular-nums`).
→ Fix: Add `tabular-nums` (or `.tnum`) so numerals align vertically across rows and live updates. (Trova ref: 192-website-carbon-calculator-gram-per-pageview-co2-budget-system-font-stack)
6. [Interactive Ergonomics] Interactive element (`<button>`, `<a>`, `<select>`) lacks an explicit >=44px (`min-h-11`) touch/click target.
→ Fix: Add `min-h-11 inline-flex items-center` to interactive controls. (Trova ref: 190-low-tech-magazine-solar-powered-floyd-steinberg-dithered-print-battery-meter)
### Target CSS Custom Properties
/* 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;
}
### Component Code to Refactor
```tsx
<div className="rounded-3xl shadow-2xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-6">
<span className="text-[10px] uppercase text-white/70">Pro Plan</span>
<h3 className="text-2xl font-bold text-white">$49/mo</h3>
<p className="text-xs text-white/80">99.98% uptime across 12,450 nodes</p>
<button className="rounded-full bg-white px-3 py-1 text-xs text-indigo-600">
Upgrade Now
</button>
</div>
```05 · Category Benchmark · Design Reference Landscape
How Trova compares to other design reference platforms
Visual galleries (Godly, SiteInspire, Refero), product screen trees (Mobbin, Page Flows), typographic archives (Fonts In Use), and associative graphs (Are.na) each solve one slice of research. Trova is built around the missing link between seeing a reference and shipping an interface: named, testable steal-notes (447 notes across 201 references and 12 multi-step flows), verified open-source font stand-ins, measured WCAG contrast pairs, and a 6-tool MCP server for AI coding agents.
| Platform | Unit of Curation | Why-It-Works Notes | Multi-Step Flows | Type & Contrast Verification | Agent MCP & Plain-Text Export |
|---|---|---|---|---|---|
| TrovaAnnotated Design Library & Agent MCP | Named steal-note (201 references, 447 concrete mechanism notes across 40 populated families in a 1,000-family taxonomy) | Mandatory: every reference carries 1–3 typed steal-notes (typography, grid/layout, color, motion, component pattern, texture, copywriting) | 12 step-ordered public product flows (Stripe, Linear, Raycast, Vercel, Cal.com, Plausible, Excalidraw, Squoosh, Stripe Press, iOS Dynamic Island, PostHog OS, SSENSE) | Observed typefaces + free Google Font stand-ins (`fontStandIns`) + live WCAG contrast pairs (`readablePalettePairs`) | Native 6-tool MCP server (`trova-mcp` stdio + `/api/mcp` HTTP) with surface-ranked briefsExport: `Trovafile.md`, per-family `DESIGN.md` sheets, dual-family synthesis briefs, `.cursorrules` / `CLAUDE.md`, Tailwind v4 `@theme`, and CSS `:root` tokens |
| MobbinMobile & Web Product Screen Archive | Authenticated mobile & web app screenshot trees | None — tags and screen categories without explanatory prose | Deep authenticated onboarding, checkout & settings trees | Visual inspection only; no extracted contrast pairs or font fallback mapping | None (Figma plugin & web search only)Export: None (image/Figma copy only) |
| Godly.websiteMotion-First Web Design Gallery | Short looping viewport video capture of marketing sites | None — visual browsing and tag pills only | Single marketing page scroll captures only | Lists font names and framework tags; no contrast or open-source stand-ins | NoneExport: None |
| SiteInspireEditorial Web Design Directory | Desktop landing page screenshot indexed by style/subject | None — taxonomy tags without mechanism notes | Single-screen index only | Subject/style tags only; no font or hex extraction | NoneExport: None |
| Refero.designWeb Page & UI Component Search | Full-page web screenshots and isolated UI section crops | None — visual search and bookmarking | Page collections by product, minimal step annotation | Color filter search; no computed WCAG readable pairs | NoneExport: None |
| Fonts In UseArchival Typographic Specimen Index | Print, identity, and web artifacts indexed by typeface family | Contributor commentary on historical & typographic context | Not applicable (static artifacts & specimens) | Gold-standard typeface identification; no web CSS tokens or color contrast pairs | NoneExport: None |
| Page FlowsRecorded User Flow Video Library | Screen-recorded walkthrough videos with step markers | Timestamped step labels without typographic/CSS analysis | High (video recordings of SaaS onboarding, upgrade, and churn flows) | None | NoneExport: None |
| Are.na / CosmosAssociative Cultural Research Graph | User-curated blocks connected across open-ended channels | Optional user block descriptions; unstructured | None | None | Public REST API (Are.na); no design-brief MCPExport: Channel JSON/Markdown export |
| Curated.designCraft-Focused Web Inspiration Catalog | Full-bleed landing page captures with category pills | None — visual bookmarking only | Single-page marketing captures only | Category tags only; no font or WCAG extraction | NoneExport: None |
| Lapa Ninja / Land-bookFull-Height SaaS Landing Page Directory | Full-height vertical desktop landing page screenshots | None | Single landing page only | Coarse color filter buckets only | NoneExport: None |