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

Primary Architecture (80% Foundation)

Counterpoint / Comparison Family (20% Tension)

Curated Synthesis Presets

01 · Structural & Chromatic Anatomy

Frutiger Aero / Glossy Horizons (2004–13) vs. Dark Premium

Primary Architecture (80%)3 curated references

Frutiger Aero / Glossy Horizons (2004–13)

Lush green grass hills against brilliant blue skies, glossy transparent glass water bubbles, lens flares, and tropical fish.

Observed Typefaces (6)

Captured Palette Chromatography

#f0f9ff
light neutral
#38bdf8
chromatic
#0f172a
dark neutral
#1e293b
dark neutral
#0b3c5d
dark neutral

Verified WCAG Readable Pairs

Steal this.#0f172a on #f0f9ff · 16.7:1
Steal this.#1e293b on #f0f9ff · 13.7:1

Anchor References

Counterpoint Family (20%)8 curated references

Dark Premium

Near-black fields, hairline gradients, one metallic or electric accent, understated serif. Whispers expensive; the restraint is the flex.

Observed Typefaces (10)

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

Anchor References

02 · Mechanism Comparison by Move Type

Move-by-move steal-note matrix

How Frutiger Aero / Glossy Horizons (2004–13) and Dark Premium solve the same 7 structural design dimensions differently. Every observation is cited to a specific captured specimen in the vault.

typography0 vs. 3 notes

Frutiger Aero / Glossy Horizons (2004–13)

No recorded typography notes in this slice.

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

grid/layout1 vs. 5 notes

Frutiger Aero / Glossy Horizons (2004–13)

Organize application launchers into a fixed 4×3 television-safe matrix of rounded-rect TV screen bezels framed by a recessed brushed-white bottom control dock.
185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid · Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid

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

color1 vs. 4 notes

Frutiger Aero / Glossy Horizons (2004–13)

Pair high-chroma sky blues (`#1d84b5`) and chlorophyll greens (`#65c18c`) with crisp white humanist sans-serif labels backed by a subtle `0 1px 2px rgba(0,0,0,0.45)` text shadow.
184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui · Frutiger Aero Archive — Specular Glass Orbs, Aurora Ribbons & Dewdrop UI

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

motion/interaction1 vs. 1 notes

Frutiger Aero / Glossy Horizons (2004–13)

Hovering any channel slot triggers a soft `#38bdf8` cyan outer glow ring and scales the slot by `1.04x` without shifting adjacent cells.
185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid · Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid

Dark Premium

Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.
16-linear · Linear

component pattern1 vs. 5 notes

Frutiger Aero / Glossy Horizons (2004–13)

Window control buttons (`min`, `max`, `close`) sit flush with the top border edge as contiguous glass segments that illuminate with radial red or cyan backlights on hover.
186-aero-glass-window-study-gaussian-frosted-titlebars-specular-diagonal · Aero Glass Window Study — Gaussian Frosted Titlebars & Specular Diagonal

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

texture/material2 vs. 3 notes

Frutiger Aero / Glossy Horizons (2004–13)

Create the signature 2007 gloss button by layering a hard 50% top-half white linear gradient (`rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 50%, transparent 51%`) over a saturated cyan-to-emerald base with an inner `1px` specular ring.
184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui · Frutiger Aero Archive — Specular Glass Orbs, Aurora Ribbons & Dewdrop UI
Superimpose diagonal 45-degree translucent light streaks across a `backdrop-filter: blur(18px) saturate(160%)` window frame bordered by a `1px solid rgba(255,255,255,0.45)` outer bevel and a `1px solid rgba(0,0,0,0.6)` outer shadow.
186-aero-glass-window-study-gaussian-frosted-titlebars-specular-diagonal · Aero Glass Window Study — Gaussian Frosted Titlebars & Specular Diagonal

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

copywriting0 vs. 1 notes

Frutiger Aero / Glossy Horizons (2004–13)

No recorded copywriting notes in this slice.

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 Frutiger Aero / Glossy Horizons (2004–13) (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.

Live Token Stage · 80% Frutiger Aero / Glossy Horizons (2004–13) × 20% Dark Premium16.7:1 WCAG Contrast · Paper Ground

Display: Segoe UI · Body: Consolas

Frutiger Aero / Glossy Horizons (2004–13) Architecture with Dark Premium Counterpoint

Create the signature 2007 gloss button by layering a hard 50% top-half white linear gradient (`rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 50%, transparent 51%`) over a saturated cyan-to-emerald base with an inner `1px` specular ring.

Primary Action (#38bdf8)Counterpoint (#08090a)

20% Counterpoint Telemetry (JetBrains Mono)

--surface-ground: #f0f9ff
--text-primary: #0f172a
--accent-primary: #38bdf8
--accent-counter: #08090a

# DESIGN.md — Frutiger Aero / Glossy Horizons (2004–13) × Dark Premium Synthesis

> **80% Primary Architecture:** Frutiger Aero / Glossy Horizons (2004–13) (`frutiger-aero-gloss`, 3 refs)
> **20% Counterpoint / Accent:** Dark Premium (`dark-premium`, 8 refs)

## 1. Visual Direction & Thesis
- **Primary Foundation (Frutiger Aero / Glossy Horizons (2004–13)):** Lush green grass hills against brilliant blue skies, glossy transparent glass water bubbles, lens flares, and tropical fish.
- **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 (Frutiger Aero / Glossy Horizons (2004–13)):** Segoe UI (2/3), Consolas (1/3), Frutiger (1/3), Helvetica Neue (1/3)
- **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 (Frutiger Aero / Glossy Horizons (2004–13)):** `#0f172a` on `#f0f9ff` (16.7: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 · texture/material]** Create the signature 2007 gloss button by layering a hard 50% top-half white linear gradient (`rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 50%, transparent 51%`) over a saturated cyan-to-emerald base with an inner `1px` specular ring. _(184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui Frutiger Aero Archive — Specular Glass Orbs, Aurora Ribbons & Dewdrop UI)_
- **[Primary · color]** Pair high-chroma sky blues (`#1d84b5`) and chlorophyll greens (`#65c18c`) with crisp white humanist sans-serif labels backed by a subtle `0 1px 2px rgba(0,0,0,0.45)` text shadow. _(184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui Frutiger Aero Archive — Specular Glass Orbs, Aurora Ribbons & Dewdrop UI)_
- **[Primary · grid/layout]** Organize application launchers into a fixed 4×3 television-safe matrix of rounded-rect TV screen bezels framed by a recessed brushed-white bottom control dock. _(185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid)_
- **[Primary · motion/interaction]** Hovering any channel slot triggers a soft `#38bdf8` cyan outer glow ring and scales the slot by `1.04x` without shifting adjacent cells. _(185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid)_
- **[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 (Frutiger Aero / Glossy Horizons (2004–13)):** 184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui Frutiger Aero Archive — Specular Glass Orbs, Aurora Ribbons & Dewdrop UI ★ canonical
- **Primary (Frutiger Aero / Glossy Horizons (2004–13)):** 185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid
- **Primary (Frutiger Aero / Glossy Horizons (2004–13)):** 186-aero-glass-window-study-gaussian-frosted-titlebars-specular-diagonal Aero Glass Window Study — Gaussian Frosted Titlebars & Specular Diagonal
- **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 3-reference Frutiger Aero / Glossy Horizons (2004–13) Trovafileinto your repository and run a real headless Chromium DOM & WCAG contrast audit against your local dev server:

npx trova init --family frutiger-aero-gloss --token $TROVA_TOKEN
npx trova audit http://localhost:3000 --family frutiger-aero-gloss

04 · Pre-Flight Verification · UI Code & Anti-Slop Auditor

Audit JSX / Tailwind / CSS against Frutiger Aero / Glossy Horizons (2004–13)

Taste Alignment Score0/100 · AI Slop Detected

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 Frutiger Aero / Glossy Horizons (2004–13). Copy the generated refactor prompt at the bottom to hand directly to Claude Code or Cursor.

Component Snippet (JSX / HTML / Tailwind / CSS)

Diagnostic Findings (6)

✗ Violation · Structural GeometryRef #185 ↗
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 Frutiger Aero / Glossy Horizons (2004–13).
✗ Violation · Surface ElevationRef #185 ↗
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 #184 ↗
Detected generic AI-slop indigo/purple/pink gradient classes unrelated to the family's captured chromatography.
→ Strip synthetic gradients and bind surfaces to Frutiger Aero / Glossy Horizons (2004–13) verified tokens (`#0f172a` on `#f0f9ff` (16.7:1)).
✗ Violation · Typographic HierarchyRef #184 ↗
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 #184 ↗
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 #185 ↗
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 (Frutiger Aero / Glossy Horizons (2004–13) × Dark Premium)

Refactor the following UI component to strictly adhere to the Trova Frutiger Aero / Glossy Horizons (2004–13) × 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 Frutiger Aero / Glossy Horizons (2004–13). (Trova ref: 185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid)
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: 185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid)
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 Frutiger Aero / Glossy Horizons (2004–13) verified tokens (`#0f172a` on `#f0f9ff` (16.7:1)). (Trova ref: 184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui)
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: 184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui)
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: 184-frutiger-aero-archive-specular-glass-orbs-aurora-ribbons-dewdrop-ui)
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: 185-wii-channel-matrix-study-translucent-aqua-bezels-ambient-slot-grid)

### Target CSS Custom Properties
/* Synthesized from Trova family: Frutiger Aero / Glossy Horizons (2004–13) (frutiger-aero-gloss) */
/* Evidence base: 3 curated reference(s) · Primary contrast 16.7:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f0f9ff;
  --surface-elevated: #1e293b;
  --text-primary: #0f172a;
  --accent-primary: #38bdf8;
  --border-hairline: color-mix(in srgb, #0f172a 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Consolas", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", 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