# Trovafile — Design Context

> Generated by Trova, a curated design-reference vault: real work,
> each with the moves worth stealing and why they work.
> This file outranks your defaults: when your instinct and this brief
> disagree, the brief wins.

> Free sample: the canonical reference of the 5 largest families. A subscription exports any family, kind of work or search, or a brief written for your own site · 5 references · 10 steal-notes.

> Every steal-note below was written by a human (10 by this vault's curator). None by a model.

## Build from the references

Apply: pick ONE family as the primary direction; honor the relevant steal-notes;
commit to its character rather than automatically making it quieter.

1. Establish the actual audience, task, content, and constraints. Preserve working behavior and factual copy. Never invent proof: no testimonials, quotes, customer names, usage figures, or popularity labels the brief does not supply. A gallery, a checkout, and a reading surface need different compositions even in the same family.
2. Inspect the chosen references visually when accessible. Notes are recorded evidence; a URL alone is not proof you have seen a page. If images are unavailable, say so and work from the notes without inventing visual observations.
3. Choose one anchor reference in that family for the overall composition and type hierarchy. For a new design, consider two structurally different compositions within that direction and choose the stronger one for this task. Name its native form and defining spatial relationship: an editorial spread, a printed specification, an instrument, or another form actually justified by the notes. Look first for that form in the brief's own domain: an object its users already handle (a boarding pass, a lab notebook, a score sheet). A form drawn from the content cannot be reused by a competitor; a finish lifted from a reference (dark ground, gold serif, glass) can. The references then decide how the form is executed: type roles, spacing, palette, rhythm. Let that form organize the whole surface. A generic centered heading above a themed card does not become the reference merely by copying its colors, corners, or shadows. For a refinement, preserve the existing structure unless the user authorizes replacement.
4. Before coding, write a compact decision sheet: reference + exact note, target element, concrete implementation decision, and how you will verify it. Resolve conflicting notes explicitly. Apply moves that serve this content; do not force every note into one page. A note records what worked for its source's job (a camera, a synth, a manuscript). For each one, write the problem it solved there and the same problem in this brief; carry the reason across and re-derive the measurement for this content. If the brief does not have that problem, drop the note. No move may push the brief's working content (prices, totals, figures, actions) below comfortable reading size, or leave a desktop region empty that the content needs.
5. Derive typography roles, spacing, and a complete palette from the anchor. Supporting references may supply named compatible moves, never a second overall art direction. Keep font pairings and palette relationships intact. If the exact fonts are unavailable, preserve their roles and contrast (for example grotesque interface against a literary serif), rather than replacing both with the same generic sans. Frequency across unrelated references is not a design system. Label new values as implementation decisions, not captured facts.
6. Compose the first viewport and one representative content section with real content. Make one defining move unmistakable: the move supported by the chosen notes. Carry that decision through the full surface, including responsive layouts and interaction states.
7. Render and inspect at phone, intermediate, and desktop widths. Compare the result to the decision sheet and references: hierarchy, type proportions, content density, palette roles, and the defining move. Measure text contrast on the actual backgrounds, especially selected rows and colored buttons: 4.5:1 body text, 3:1 large text. Do not assume white text works on a bright accent. Verify keyboard activation, current-state labels, reduced motion, and task completion. Check fixed elements against scrolled content so they never cover controls or text.
8. Identify the largest visible mismatch, fix it, and inspect again. Do not call the design finished from a build passing or an imagined screenshot. Report what was visually verified and what remains unverified.

This workflow is generation guidance. The attributed notes below remain the curator's evidence; implementation choices must not be written back as human-authored steal-notes.

## Aesthetic direction

### Dark Premium (1 reference)

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

Evidence: landing page · sections: hero.

### Editorial (1 reference)

Magazine DNA: serif display at outrageous sizes, multi-column measure, pull quotes, drop caps, rules. Reading as the hero interaction.

Evidence: editorial.

### Functional Product UI (1 reference)

Task-focused interfaces with neutral surfaces, explicit labels, grouped controls, persistent context and restrained state colors. Use for configuration, booking, analytics and export flows; judge the interface rather than the content shown inside it.

Evidence: product UI flow · sections: dashboard.

### Playful / Toy-like (1 reference)

Saturated color, chunky rounded forms, springy motion, jokes in the copy. Interfaces that feel like objects you want to poke.

Evidence: full website.

### Swiss / International (1 reference)

Objective grids, Akzidenz/Helvetica descendants, red-black-white restraint. Hierarchy carried entirely by scale, weight, and placement — never decoration.

Evidence: poster.

## Reference directions — keep these separate

Choose the family that fits the brief before selecting its anchor. Listing order is not a recommendation across families.

**Swiss / International (swiss)**

- Reference #1: Museum für Gestaltung poster archive
  Editorial review: source pending; classification pending; 0 note(s) approved. Unreviewed fallback; verify the source before applying these notes. Authorship and image permissions are separate.
  Reviewed moves: none; authorship alone does not establish review

Evidence gaps in this selection: typography, grid/layout, color, motion/interaction. These topics have no currently approved notes here. With the Trova MCP connected, find_references with this family may return more; otherwise treat these as your own decisions and say so.

**Editorial (editorial)**

- Reference #2: The Paris Review
  Editorial review: source pending; classification pending; 0 note(s) approved. Unreviewed fallback; verify the source before applying these notes. Authorship and image permissions are separate.
  Reviewed moves: none; authorship alone does not establish review

Evidence gaps in this selection: typography, grid/layout, color, motion/interaction. These topics have no currently approved notes here. With the Trova MCP connected, find_references with this family may return more; otherwise treat these as your own decisions and say so.

**Dark Premium (dark-premium)**

- Reference #3: Linear
  Editorial review: source pending; classification pending; 0 note(s) approved. Unreviewed fallback; verify the source before applying these notes. Authorship and image permissions are separate.
  Reviewed moves: none; authorship alone does not establish review

Evidence gaps in this selection: typography, grid/layout, color, motion/interaction. These topics have no currently approved notes here. With the Trova MCP connected, find_references with this family may return more; otherwise treat these as your own decisions and say so.

**Playful / Toy-like (playful)**

- Reference #4: Poolsuite FM
  Editorial review: source pending; classification pending; 0 note(s) approved. Unreviewed fallback; verify the source before applying these notes. Authorship and image permissions are separate.
  Reviewed moves: none; authorship alone does not establish review

Evidence gaps in this selection: typography, grid/layout, color, motion/interaction. These topics have no currently approved notes here. With the Trova MCP connected, find_references with this family may return more; otherwise treat these as your own decisions and say so.

**Functional Product UI (functional-product-ui)**

- Reference #5: Linear — Triage Inbox & Split Inspector
  Editorial review: source pending; classification pending; 0 note(s) approved. Unreviewed fallback; verify the source before applying these notes. Authorship and image permissions are separate.
  Reviewed moves: none; authorship alone does not establish review

Evidence gaps in this selection: typography, grid/layout, color, motion/interaction. These topics have no currently approved notes here. With the Trova MCP connected, find_references with this family may return more; otherwise treat these as your own decisions and say so.

## References

### 1. Museum für Gestaltung poster archive ★ canonical

- **Family:** Swiss / International
- **Medium:** poster
- **URL:** https://www.eguide.ch/
- **Fonts:** Akzidenz-Grotesk
- **Can't load freely, use:** Akzidenz-Grotesk (licensed) → Archivo
- **Palette:** #ece8df #141414 #d43a2f
- **Text on its own palette (AA, computed):** #141414 on #ece8df 15.1:1 · #ece8df on #141414 15.1:1
- **On Trova:** https://trova.design/vault/9-museum-f-r-gestaltung-poster-archive

**Steal:**

- _grid/layout_ — Müller-Brockmann concert posters: type set on a strict grid, then ONE element breaks it diagonally. The violation only works because the grid is absolute.

### 2. The Paris Review ★ canonical

- **Family:** Editorial
- **Medium:** editorial
- **URL:** https://www.theparisreview.org/
- **Fonts:** Tiempos Text, Founders Grotesk
- **Can't load freely, use:** Tiempos Text (licensed) → Newsreader; Founders Grotesk (licensed) → Hanken Grotesk
- **Palette:** #f9f6ef #1f1d1a #8f1f1f
- **Text on its own palette (AA, computed):** #1f1d1a on #f9f6ef 15.6:1 · #f9f6ef on #1f1d1a 15.6:1 · #f9f6ef on #8f1f1f 8.2:1
- **On Trova:** https://trova.design/vault/13-the-paris-review

**Steal:**

- _typography_ — Tiempos at 20px/1.7 with a 65ch measure — reading comfort as the entire design thesis.
- _component pattern_ — Interview headers set as playbill credits (INTERVIEWED BY…, ISSUE NO…) — structure borrowed from print tradition.

### 3. Linear ★ canonical

- **Family:** Dark Premium
- **Medium:** landing page
- **Section:** hero
- **URL:** https://linear.app/
- **Fonts:** Inter Display, Berkeley Mono
- **Can't load freely, use:** Berkeley Mono (licensed) → JetBrains Mono
- **Palette:** #08090a #f7f8f8 #5e6ad2 #26283b
- **Text on its own palette (AA, computed):** #f7f8f8 on #08090a 18.7:1 · #08090a on #f7f8f8 18.7:1 · #f7f8f8 on #26283b 13.6:1
- **On Trova:** https://trova.design/vault/16-linear

**Steal:**

- _color_ — Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint.
- _motion/interaction_ — Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.
- _grid/layout_ — Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.

### 4. Poolsuite FM ★ canonical

- **Family:** Playful / Toy-like
- **Medium:** full website
- **URL:** https://poolsuite.net/
- **Fonts:** Chicago, Garamond
- **Can't load freely, use:** Chicago (macOS only) → ChicagoFLF (free clone, self-host); Garamond (licensed) → EB Garamond
- **Palette:** #fdf3e3 #1f1f1f #ff8a3d #67c7c2 #f6d34e
- **Text on its own palette (AA, computed):** #1f1f1f on #fdf3e3 15.0:1 · #fdf3e3 on #1f1f1f 15.0:1 · #1f1f1f on #ff8a3d 7.0:1 · #1f1f1f on #67c7c2 8.3:1 · #1f1f1f on #f6d34e 11.3:1
- **On Trova:** https://trova.design/vault/19-poolsuite-fm

**Steal:**

- _texture/material_ — Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture.
- _motion/interaction_ — Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand.

### 5. Linear — Triage Inbox & Split Inspector ★ canonical

- **Family:** Functional Product UI
- **Medium:** product UI flow
- **Section:** dashboard
- **URL:** https://linear.app/features/triage
- **Fonts:** Inter, Berkeley Mono
- **Can't load freely, use:** Berkeley Mono (licensed) → JetBrains Mono
- **Palette:** #090a0c #141519 #f4f5f8 #5e6ad2 #8a8f98
- **Text on its own palette (AA, computed):** #f4f5f8 on #090a0c 18.2:1 · #f4f5f8 on #141519 16.7:1 · #090a0c on #f4f5f8 18.2:1 · #090a0c on #8a8f98 6.1:1
- **On Trova:** https://trova.design/vault/113-linear-triage-inbox-split-inspector

**Steal:**

- _grid/layout_ — Two-pane master-detail split (320px queue list on the left, fluid issue document on the right) separated by a 1px solid rgba(255,255,255,0.07) hairline with zero outer card margins.
- _component pattern_ — Triage action bar pins four single-keystroke verbs (Accept [1], Duplicate [2], Snooze [H], Decline [⌫]) directly above the issue description so the cursor never travels to a corner.

## The steals, by move

### typography

- Tiempos at 20px/1.7 with a 65ch measure — reading comfort as the entire design thesis. _(#2 The Paris Review)_

### grid/layout

- Müller-Brockmann concert posters: type set on a strict grid, then ONE element breaks it diagonally. The violation only works because the grid is absolute. _(#1 Museum für Gestaltung poster archive)_
- Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode. _(#3 Linear)_
- Two-pane master-detail split (320px queue list on the left, fluid issue document on the right) separated by a 1px solid rgba(255,255,255,0.07) hairline with zero outer card margins. _(#5 Linear — Triage Inbox & Split Inspector)_

### color

- Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint. _(#3 Linear)_

### motion/interaction

- Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch. _(#3 Linear)_
- Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand. _(#4 Poolsuite FM)_

### texture/material

- Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture. _(#4 Poolsuite FM)_

### component pattern

- Interview headers set as playbill credits (INTERVIEWED BY…, ISSUE NO…) — structure borrowed from print tradition. _(#2 The Paris Review)_
- Triage action bar pins four single-keystroke verbs (Accept [1], Duplicate [2], Snooze [H], Decline [⌫]) directly above the issue description so the cursor never travels to a corner. _(#5 Linear — Triage Inbox & Split Inspector)_

## Craft baseline (non-negotiable, beneath everything above)

- **Type:** choose a hierarchy appropriate to the task and chosen family.
  Preserve deliberate font pairings; verify the real fonts load and that
  the actual content fits. A dashboard does not need a poster-sized title.
- **Spacing:** derive a consistent scale from the composition. Use density
  and whitespace intentionally; do not add space by reflex.
- **Color:** preserve the chosen reference's palette relationships, whether
  restrained or saturated. Assign surface, text, and accent roles explicitly.
  Verify WCAG AA contrast (4.5:1 body, 3:1 large type).
- **Hierarchy:** establish a clear focal point and reading order. On task
  surfaces, make the next action clear without overpowering the content.
- **Motion:** match the reference's character and the user's task. Resolve
  timing, easing, and interruption; preserve legibility and responsiveness.
  Honor `prefers-reduced-motion` with an equally usable static composition.
- **States:** focus rings, hover, empty, loading, and error states are
  designed, not defaulted. Keyboard navigation works everywhere.
- **Responsiveness:** the layout is composed at every width, not merely
  unbroken. Test the awkward middle (~800px), not just phone/desktop.

## Never do this (the slop list)

These are unconsidered defaults to question, not bans on a deliberate
choice supported by the selected family, the task, or the user's brief.

- Default-font body text (Inter/system) with a purple-to-blue gradient
  hero and centered gradient text.
- Three-column feature grid with emoji or generic line icons.
- Uniform `rounded-xl` cards with identical shadows on everything.
- Placeholder marketing copy ("Empower your workflow") — write words
  a human would say, in the register the family calls for.
- Carousel/slider for content that could be a list.
- Dark mode as an afterthought inversion that breaks contrast.

## Before you ship, verify

1. Could a stranger name the aesthetic family from a screenshot?
2. Is each selected move visibly applied to its intended element, with
   a specific reference and note you can trace it to?
3. Are the typefaces from (or equivalent in spirit to) the observed
   tokens, not defaults?
4. Do palette roles and relationships follow the chosen direction,
   without pooling colors from unrelated references?
5. Does it pass AA contrast and keyboard navigation?
6. Would this screenshot look out of place in a gallery of AI-generated
   sites? (It should.)

---

Generated from a Trova vault · vault a8107a26-3c75-4a53-996e-4618de6503ec · taxonomy v1.0.0