# Research a distinct visual direction for ReelWright. Project…

[Open the live Fudge conversation](https://design.withfudge.com/share/0y9944kvfs/research_a_distinct_visual_direction_for_reelwright_project/)

Last updated: 2026-08-05

# ReelWright visual direction research

ReelWright should occupy the space between a film-editing instrument, a precision workshop, and a premium modern software product—not a conventional AI SaaS landing page. The strongest direction is a **warm technical editorial system**: paper-like surfaces, dark cinematic product media, restrained industrial annotation, and one controlled signal color.

The references below are used as directional studies, not templates to reproduce.

## Captured pages

[![Motion – The modern screen recorder for Windows](https://pin.fontofweb.com/6999?format=jpg)](https://design.withfudge.com/share/pin-6999)

[Motion – The modern screen recorder for Windows](https://design.withfudge.com/share/pin-6999)

[![Home - Sandwich](https://pin.fontofweb.com/679?format=jpg)](https://design.withfudge.com/share/pin-679)

[Home - Sandwich](https://design.withfudge.com/share/pin-679)

[![Kapwing: Make a Video About Anything](https://pin.fontofweb.com/7902?format=jpg)](https://design.withfudge.com/share/pin-7902)

[Kapwing: Make a Video About Anything](https://design.withfudge.com/share/pin-7902)

[![NewKino Studio](https://pin.fontofweb.com/3688?format=jpg)](https://design.withfudge.com/share/pin-3688)

[NewKino Studio](https://design.withfudge.com/share/pin-3688)

[![FLORA](https://pin.fontofweb.com/3226?format=jpg)](https://design.withfudge.com/share/pin-3226)

[FLORA](https://design.withfudge.com/share/pin-3226)

[![Pentagram — The world’s largest independent design consultancy](https://pin.fontofweb.com/8263?format=jpg)](https://design.withfudge.com/share/pin-8263)

[Pentagram — The world’s largest independent design consultancy](https://design.withfudge.com/share/pin-8263)

[![U.S. Graphics Company - Office](https://pin.fontofweb.com/5521?format=jpg)](https://design.withfudge.com/share/pin-5521)

[U.S. Graphics Company - Office](https://design.withfudge.com/share/pin-5521)

[![Autonomous Systems Dashboard Section | Neuform](https://pin.fontofweb.com/8819?format=jpg)](https://design.withfudge.com/share/pin-8819)

[Autonomous Systems Dashboard Section | Neuform](https://design.withfudge.com/share/pin-8819)

[![Q-Industrial — Surfaces](https://pin.fontofweb.com/479?format=jpg)](https://design.withfudge.com/share/pin-479)

[Q-Industrial — Surfaces](https://design.withfudge.com/share/pin-479)

[![Arago](https://pin.fontofweb.com/511?format=jpg)](https://design.withfudge.com/share/pin-511)

[Arago](https://design.withfudge.com/share/pin-511)

[![Fix Studio | Home](https://pin.fontofweb.com/357?format=jpg)](https://design.withfudge.com/share/pin-357)

[Fix Studio | Home](https://design.withfudge.com/share/pin-357)

[![Micro](https://pin.fontofweb.com/2187?format=jpg)](https://design.withfudge.com/share/pin-2187)

[Micro](https://design.withfudge.com/share/pin-2187)

Static captures support composition and styling. Scroll behavior, animation, pricing interaction, and mobile behavior should be treated as transfer lessons and tested against the live references before finalizing.

## 1. Reference shortlist

| Reference | Strongest pattern | What to borrow for ReelWright | What not to copy |
|---|---|---|---|
| **Motion** | Product-first hero with a clear utility proposition and concentrated interface imagery. | Make the product immediately legible: show the editing workflow, not an abstract promise. Keep the first screen quiet and decisive. | Generic “work faster with AI” language or overly soft productivity styling. |
| **Sandwich** | Production work is presented as authored narrative rather than a feature list. | Use finished short-form work as proof of craft. Introduce process, people, and output in a deliberate sequence. | Turning ReelWright into an agency portfolio or making the brand dependent on personality-led video. |
| **Kapwing** | Strong category clarity: the visitor quickly understands that the product creates and edits video. | State exactly what ReelWright produces, for whom, and why its precision matters. | Broad creator-tool positioning that makes the product feel interchangeable. |
| **NewKino Studio** | Cinematic pacing, large media, and atmosphere. | Use dark media chambers for product demos and finished reels. Let motion and image quality create desire. | Full-screen spectacle that hides the product and weakens conversion clarity. |
| **FLORA** | A creative tool can feel expressive without relying on conventional SaaS cards. | Give the wheel, reel, and five-spoke system a strong visual role in the opening composition. | Unexplained visual novelty, ambiguous controls, or an overly experimental hero. |
| **Pentagram** | A strong identity can carry a page with sparse layout, strong type, and high confidence. | Let “MADE • RIGHT” and the wheel mark function as a quality position, not decoration. | Excessive emptiness without proof, explanation, or a clear next action. |
| **U.S. Graphics Company** | Material, print, and process are made visible. | Show craft through frames, cuts, timelines, output specifications, and production details. Use tactile surfaces sparingly. | Making the website look like a print shop or heritage packaging company. |
| **Neuform** | Technical language is organized into diagrams, systems, and measured sections. | Use technical annotations to explain the ReelWright process: input → selection → cut → refinement → finished export. | Fake diagrams that do not explain a real product capability. |
| **Q-Industrial** | Surface, material, and product variation are given a controlled catalog structure. | Treat video output and workflow stages like a calibrated collection: formats, durations, ratios, and finish states. | A catalogue-like interface that makes the marketing page feel cold or transactional. |
| **Arago** | Geometry and spatial relationships create an engineered visual atmosphere. | Use construction lines, wheel geometry, alignment marks, and sectional diagrams as supporting language. | Blueprint decoration with no connection to the product’s real process. |
| **Fix Studio** | A craft-focused visual rhythm gives each artifact room to matter. | Give individual reels and product moments enough space to feel considered. | A gallery-first structure that buries the primary CTA. |
| **Micro** | A compact promise, restrained UI, and clear conversion path. | Keep navigation and CTA behavior simple. Use one primary conversion action per major section. | Flattening ReelWright into a generic minimalist SaaS page. |
| **Landing Services** | The page moves directly from promise to proof to action. | Build a strong marketing sequence: claim, product demonstration, process, finished results, pricing, CTA. | Over-optimizing for conversion until the craftsmanship concept disappears. |
| **Ocoya** | Feature breadth and product screenshots are easy to scan. | Borrow modular explanation for workflow capabilities and integrations. | Feature-grid overload, AI-first language, and generic purple/blue SaaS cues. |
| **Miracamp** | Video creation is made approachable through clear media and educational sequencing. | Explain the product without assuming professional editing vocabulary. Show the transformation from rough material to finished short. | Consumer-creator energy that makes ReelWright feel lightweight rather than precise. |

## 2. Shared patterns worth combining

### Hero composition

Use a **two-part hero**:

- Left: a concise claim about precision short-form production.
- Right or below: a large dark product/media chamber showing the ReelWright workflow.
- The wheel mark should appear as an engineered object: solid hub, five spokes, and a subtle play-button reading.
- Add a small metadata line such as `SHORT-FORM VIDEO / MADE • RIGHT`, but keep it functional rather than ornamental.
- The first CTA should be explicit: **Start creating**, **See the workflow**, or **Book a production review**.

Avoid a hero consisting only of a huge slogan, gradient background, and floating dashboard mockup.

### Typography

The reference set points toward:

- Strong grotesk headlines.
- Compact technical labels.
- Clear editorial spacing.
- Limited typographic ornament.

Recommended direction:

- **Primary type:** a contemporary grotesk in the Söhne, Suisse Intl, Neue Haas Grotesk, or ABC Diatype family of voices.
- **Technical accent:** IBM Plex Mono, Berkeley Mono, or a similar restrained mono.
- **Optional craft accent:** a serif only for occasional process notes or pull quotes—not for the main interface or primary headline.

Use the mono for:

- Frame counts.
- Aspect ratios.
- Duration.
- Export states.
- Section metadata.
- Small labels such as `01 / SELECT`, `02 / CUT`, `03 / FINISH`.

Do not use monospace for all body copy. That would quickly signal “developer tool” rather than “precision video craft.”

### Color hierarchy

The strongest system is not a black-and-red gaming palette. It is a **warm workshop palette with cinematic black media surfaces**.

## Colors

- `#f1eee7`
- `#161616`
- `#0e1110`
- `#d8d6d0`
- `#d34a2c`
- `#6d716d`

| Role | Proposed color | Use |
|---|---|---|
| Workshop canvas | `#F1EEE7` | Main page background and editorial sections |
| Ink | `#161616` | Headlines, primary body copy, navigation |
| Film black | `#0E1110` | Product demos, video panels, dark chapters |
| Steel | `#6D716D` | Secondary copy, metadata, inactive rules |
| Signal orange-red | `#D34A2C` | Primary CTA, active wheel spoke, key interaction states |
| Paper shadow / divider | `#D8D6D0` | Borders, quiet separators, disabled surfaces |

Use the signal color with discipline. It should identify action, progress, and selected states—not become a decorative gradient or a full-page background.

### Grid and page rhythm

Proposed system:

- Desktop max width: **1,280–1,360px**
- Desktop: **12 columns**
- Tablet: **8 columns**
- Mobile: **4 columns**
- Desktop outer gutter: **32–48px**
- Mobile outer gutter: **20px**
- Base spacing unit: **8px**
- Major section spacing: **96–160px**
- Product-media padding: **24–40px**
- Text measure: approximately **8–11 words per line for headlines**, **45–70 characters per line for body copy**

```fudge-values
{"title":"Proposed ReelWright design values","values":[{"category":"Grid","label":"Desktop columns","value":"12 columns"},{"category":"Grid","label":"Desktop max width","value":"1,280–1,360px"},{"category":"Grid","label":"Mobile columns","value":"4 columns"},{"category":"Spacing","label":"Base unit","value":"8px"},{"category":"Spacing","label":"Mobile page gutter","value":"20px"},{"category":"Spacing","label":"Desktop page gutter","value":"32–48px"},{"category":"Spacing","label":"Major section gap","value":"96–160px"},{"category":"Spacing","label":"Product media padding","value":"24–40px"},{"category":"Shape","label":"Default radius","value":"10–14px"},{"category":"Shape","label":"Large media radius","value":"16–20px"},{"category":"Border","label":"Standard divider","value":"1px"},{"category":"Type scale","label":"Hero display","value":"64–88px desktop; 42–54px mobile"},{"category":"Type scale","label":"Section heading","value":"36–52px desktop; 30–38px mobile"},{"category":"Type scale","label":"Body","value":"17–19px desktop; 16–18px mobile"}]}
```

## 3. Component rules

### Buttons

Use a compact, engineered button language:

- Primary button: signal orange-red fill, dark text or carefully checked light text.
- Secondary button: transparent or canvas-colored with a 1px ink border.
- Avoid pill-shaped buttons except for compact toggles.
- Use short verbs.
- Include an arrow, play symbol, or wheel cue only when it clarifies the action.
- Keep button height consistent across the site.
- The primary CTA should be visually unmistakable without being oversized.

Recommended hierarchy:

1. **Primary:** Start creating / See the workflow
2. **Secondary:** Watch the reel / Explore the process
3. **Tertiary:** Read documentation / Compare plans

### Cards and surfaces

Do not make every section a rounded card.

Use three surface types:

1. **Editorial canvas:** open layout with typography and rules.
2. **Workshop panel:** lightly contrasting paper or steel surface for process information.
3. **Film chamber:** dark panel for product screenshots and video.

Cards should represent a real grouping:

- A workflow stage.
- A plan.
- A product capability.
- A finished output.
- A customer result.

Avoid nested cards, equal-sized feature grids, and border-plus-shadow combinations without a clear elevation reason.

### Borders, radii, and shadows

- Default border: 1px solid steel or a low-contrast ink tint.
- Use borders more often than shadows.
- Default radius: 10–14px.
- Large product media: 16–20px.
- Avoid fully rounded rectangles as a universal treatment.
- Shadows should be short, soft, and reserved for floating controls or elevated product frames.
- Never use hard offset shadows unless the entire identity intentionally adopts a print/industrial poster language.

## 4. Product screenshot and video treatment

The product application performs the daily work, so the marketing site should sell the **quality of the workflow**, not pretend to be the application.

Recommended treatment:

- Show the interface inside a dark “film chamber” with a physical-frame or monitor-like containment.
- Use real product states: selecting clips, arranging a timeline, refining cuts, previewing captions, exporting.
- Include small technical metadata around the media:
  - `9:16`
  - `00:23`
  - `CUT 03`
  - `EXPORT READY`
- Use before/after comparisons sparingly.
- Show finished video at a large scale, but keep the interface visible enough to explain how the result was made.
- Prefer short, looped, muted demonstrations with captions and a visible play/pause control.
- Use a filmstrip or frame sequence as a supporting motif, not as a decorative background everywhere.
- Avoid glossy device mockups, floating browser windows, and generic dashboard screenshots detached from a real use case.

Strong sequence:

1. Raw source material.
2. Selection or editing action.
3. Precision adjustment.
4. Finished vertical output.
5. Clear CTA to create or evaluate the workflow.

## 5. Scroll and motion principles

The site should feel **deliberately paced**, not over-animated.

Recommended:

- Let sections advance like chapters in a production process.
- Use subtle sticky navigation or chapter markers.
- Use wheel rotation only when it communicates progress or process.
- Use frame-by-frame transitions for product demonstrations.
- Keep reveals short and directional: slide, crop, wipe, or frame advance.
- Allow the user to pause video and motion.
- Use motion to establish cause and effect: input becomes selected, selected material becomes edited, edited material becomes finished.
- Keep one primary motion idea per section.

Avoid:

- Identical fade-up animation on every element.
- Scroll-jacking.
- Constant parallax.
- Decorative spinning wheels with no relationship to content.
- Autoplay video with sound.
- A full-screen loading animation before useful content appears.

## 6. Pricing presentation

Pricing should feel like a production decision, not a generic SaaS pricing wall.

Recommended:

- Present two or three plans maximum.
- Explain the unit of value in ReelWright’s language: projects, exports, seats, output volume, or production capacity.
- Highlight one recommended plan with a calm signal-color treatment.
- Put the monthly/annual choice near the price and make the state obvious.
- Include a compact comparison table below the primary plan cards.
- Make the path for professional or team buyers visible without making enterprise the default.
- Use real output examples near pricing so the visitor understands what they are buying.
- Keep the CTA consistent with the rest of the site.

Avoid:

- Seven-tier pricing grids.
- Vague “AI credits.”
- Fake urgency.
- A dark pricing section that makes legal or billing details difficult to read.
- Hiding essential usage limitations behind tooltips.

## 7. Mobile rules

- Preserve the wheel mark and wordmark at small sizes; remove secondary construction detail when necessary.
- Collapse the desktop 12-column layout into one dominant content lane.
- Keep one primary CTA visible near the top.
- Do not place critical product screenshots in tiny side-by-side columns.
- Convert horizontal process diagrams into vertical steps.
- Use full-width media with restrained cropping.
- Keep captions and technical labels large enough to read without zooming.
- Replace hover-dependent explanations with tap or disclosure behavior.
- Allow horizontal scrolling only for intentional media strips or comparison tables.
- Keep video controls visible and touch-friendly.
- Avoid sticky elements that consume most of the viewport.
- Test the hero at narrow widths before adding decorative wheel geometry.

## 8. Accessibility requirements

- Meet WCAG 2.2 AA for text, controls, focus states, and non-text UI.
- Test every proposed text/background pair; do not assume the orange-red signal color is suitable for small text.
- Never use orange, red, or wheel position as the only indicator of state.
- Provide visible keyboard focus with sufficient distinction from hover.
- Keep interactive targets at least approximately 44px on touch devices.
- Caption every meaningful product video.
- Provide transcripts or text summaries for process demonstrations.
- Keep all video muted by default and provide pause, play, and replay controls.
- Respect `prefers-reduced-motion`.
- Do not hide primary copy behind animation.
- Use real headings, landmarks, lists, buttons, and links.
- Make pricing toggles, accordions, video controls, and navigation usable by keyboard and screen reader.
- Preserve readable text over video with a solid or sufficiently controlled backdrop.
- Ensure error, loading, empty, and success states communicate through text and structure—not color alone.

## 9. Recommended visual direction

## Direction A — **The Working Wheel**

This is the recommended direction.

### Core idea

A modern production workshop where every cut, frame, and export is treated as a calibrated part.

### Visual language

- Warm paper canvas.
- Dark film chambers.
- Signal orange-red for action.
- Strong grotesk typography.
- Restrained mono metadata.
- Five-spoke wheel as a recurring structural device.
- Thin technical rules and alignment marks.
- Product screenshots treated like engineered objects.
- “MADE • RIGHT” as a quality signature.

### Suggested page sequence

1. **Hero:** ReelWright promise plus real product/media chamber.
2. **The wheel:** five-spoke explanation of the workflow.
3. **From source to short:** process demonstration.
4. **Precision controls:** selected product capabilities.
5. **Finished work:** reels, outputs, and formats.
6. **Proof:** customer or production examples.
7. **Pricing:** clear plan recommendation.
8. **Final CTA:** a confident invitation to make the next cut.

### Why it fits

It combines the material confidence of Q-Industrial and U.S. Graphics Company, the technical structure of Neuform and Arago, the product clarity of Motion and Micro, and the cinematic ambition of NewKino without inheriting any one site’s identity.

## 10. Alternate visual directions

### Direction B — **The Blackroom**

A darker, more cinematic system.

- Near-black canvas.
- Warm white type.
- Muted silver controls.
- Signal red-orange as a rare accent.
- Full-bleed video and product demonstrations.
- More emphasis on finished reels than diagrams.

**Best for:** a premium, film-industry-facing brand.

**Risk:** can become an agency portfolio, luxury trailer site, or gaming-adjacent experience. Conversion information must remain exceptionally clear.

### Direction C — **The Production Blueprint**

A cooler, more technical system.

- Pale blue-gray or bone paper.
- Ink, steel, and measured red/cobalt accents.
- Diagrams, grids, frame coordinates, and production notes.
- More visible process logic.
- Strong use of labeled stages and technical specifications.

**Best for:** positioning ReelWright as a precision production instrument.

**Risk:** can feel like industrial software or an engineering consultancy if the finished video work is not given enough emotional weight.

## 11. Patterns ReelWright should avoid

| Pattern | Why it weakens the brand | Better alternative |
|---|---|---|
| Purple-blue AI SaaS gradients | Makes the product interchangeable with generic automation tools. | Warm paper, film black, steel, and one signal color. |
| Glassmorphism and floating translucent panels | Suggests trend-driven styling rather than craft or precision. | Solid surfaces, quiet borders, and material contrast. |
| Repeated icon-heading-copy cards | Produces template-marketplace structure. | Organize content around real production stages and outputs. |
| Monospace everywhere | Overstates technicality and reduces warmth. | Use mono only for measured metadata. |
| Giant vague hero statement | Makes the product’s actual value unclear. | Pair a concise promise with a visible workflow or result. |
| Decorative wheel diagrams | Turns the central brand idea into ornament. | Make the five spokes explain five real product or process principles. |
| Excessive dark mode | Can feel cinematic but obscure product clarity and pricing. | Alternate warm editorial sections with dark media chambers. |
| Device mockups with no context | Shows software without showing why it matters. | Show a real editing state and the finished vertical result. |
| Dense feature matrices | Looks like conventional SaaS procurement software. | Use a small number of high-value capabilities tied to workflow stages. |
| Constant scroll animation | Feels like an agency portfolio and delays comprehension. | Use motion only for process, causality, and product demonstration. |
| Over-rounded cards and pill controls | Makes the brand feel soft and consumer-template-oriented. | Use moderate radii and compact, squared-off controls. |
| Faux industrial annotations | Signals “technical” without adding meaning. | Only annotate real dimensions, steps, formats, or states. |

## 12. Proposed documentation structure

### `01_DESIGN_DIRECTION.md`

```text
# ReelWright Design Direction

## Brand Premise
## Visitor and Conversion Context
## The Working Wheel
## What ReelWright Should Feel Like
## What ReelWright Must Avoid
## Visual Principles
## Hero Composition
## Page Narrative
## Wheel, Reel, Hub, and Five-Spoke Motifs
## Reference Synthesis
## Approved Direction
## Alternate Directions
## Out-of-Scope Patterns
```

This document should define the visual argument and page-level behavior, not component tokens.

### `02_DESIGN_SYSTEM.md`

```text
# ReelWright Design System

## Color Roles
## Typography
## Type Scale
## Grid
## Spacing
## Layout Containers
## Buttons
## Links
## Cards and Panels
## Borders and Dividers
## Radii
## Shadows
## Icons and Symbols
##

---

# Product-workflow research for ReelWright

The strongest pattern is **result-first, mechanism-second**: show the finished vertical short immediately, then reveal the workflow that produced it. Premium creative tools do not expose the entire interface at once. They isolate one meaningful action, keep enough UI context to establish credibility, and use motion to connect input to output.

For ReelWright, the product demo should feel like a **calibrated production line**:

> raw material → selected material → refined cut → formatted short → finished export

Not:

> giant dashboard screenshot → vague AI claim → decorative animation

## Captured pages

[![Kapwing: Make a Video About Anything](https://pin.fontofweb.com/7902?format=jpg)](https://design.withfudge.com/share/pin-7902)

[Kapwing: Make a Video About Anything](https://design.withfudge.com/share/pin-7902)

[![Motion – The modern screen recorder for Windows](https://pin.fontofweb.com/5820?format=jpg)](https://design.withfudge.com/share/pin-5820)

[Motion – The modern screen recorder for Windows](https://design.withfudge.com/share/pin-5820)

[![Affinity | Professional Creative Software, Free for Everyone](https://pin.fontofweb.com/4235?format=jpg)](https://design.withfudge.com/share/pin-4235)

[Affinity | Professional Creative Software, Free for Everyone](https://design.withfudge.com/share/pin-4235)

[![Figma: The Collaborative Interface Design Tool](https://pin.fontofweb.com/4091?format=jpg)](https://design.withfudge.com/share/pin-4091)

[Figma: The Collaborative Interface Design Tool](https://design.withfudge.com/share/pin-4091)

[![Visual Electric - Generate AI Images & Videos](https://pin.fontofweb.com/2717?format=jpg)](https://design.withfudge.com/share/pin-2717)

[Visual Electric - Generate AI Images & Videos](https://design.withfudge.com/share/pin-2717)

[![Use Cases - AI Video Editing for Every Creator | Mosaic](https://pin.fontofweb.com/4850?format=jpg)](https://design.withfudge.com/share/pin-4850)

[Use Cases - AI Video Editing for Every Creator | Mosaic](https://design.withfudge.com/share/pin-4850)

[![Invideo AI - Create videos without limits](https://pin.fontofweb.com/6193?format=jpg)](https://design.withfudge.com/share/pin-6193)

[Invideo AI - Create videos without limits](https://design.withfudge.com/share/pin-6193)

[![BlitzReels – Film. Click. Cash in. | BlitzReels](https://pin.fontofweb.com/5266?format=jpg)](https://design.withfudge.com/share/pin-5266)

[BlitzReels – Film. Click. Cash in. | BlitzReels](https://design.withfudge.com/share/pin-5266)

[![Miracamp Creative School | Video Editing | Content Creation](https://pin.fontofweb.com/4720?format=jpg)](https://design.withfudge.com/share/pin-4720)

[Miracamp Creative School | Video Editing | Content Creation](https://design.withfudge.com/share/pin-4720)

[![Framer: Build beautiful websites without code](https://pin.fontofweb.com/4493?format=jpg)](https://design.withfudge.com/share/pin-4493)

[Framer: Build beautiful websites without code](https://design.withfudge.com/share/pin-4493)

## 1. Ten strong references

### 1. Kapwing — product workflow made legible

**Pattern:** Show the product as an accessible transformation tool rather than as a dense professional editor.

The useful lesson is to connect the visitor’s intent to a visible result quickly. The interface should support the story, not become the story.

**For ReelWright:**

- Lead with a finished vertical video.
- Follow with a compact view of the source material and editing action.
- Explain one workflow outcome at a time: select, refine, caption, format, export.
- Keep the UI visible enough to prove that the result comes from a real tool.

**Do not copy:** Broad “make anything” positioning. ReelWright should communicate precision and a defined production workflow.

### 2. Motion — focused product proof

**Pattern:** A clear product promise is paired with a concentrated view of the application rather than an enormous interface collage.

**For ReelWright:**

- Use a single product chamber with one active task.
- Highlight the current state with a signal color or cursor movement.
- Show the relationship between action and result.
- Avoid displaying every toolbar, menu, and setting simultaneously.

The lesson is especially relevant for the hero: a small number of highly legible actions communicates more confidence than a full application screenshot.

### 3. Affinity — professional tool credibility

**Pattern:** Creative software feels premium when the interface is shown as a serious instrument and the output receives equal visual importance.

**For ReelWright:**

- Show enough of the timeline, preview, and controls to establish professional depth.
- Use crisp crops and high-resolution UI.
- Give the finished frame or finished short more visual weight than the toolbar.
- Let the product look capable without making the visitor study the entire application.

Affinity is a useful model for the **software credibility layer**: ReelWright should not look like a simple content generator.

### 4. Figma — isolate the meaningful interaction

**Pattern:** Complex software is presented through a focused action: manipulating an object, changing a layout, collaborating, or moving from structure to finished design.

**For ReelWright:**

- Focus each demonstration on one interaction.
- Use a visible selection state, playhead, crop boundary, caption box, or export setting.
- Let the surrounding UI recede into the background.
- Use the pointer and state change as the narrative device.

The lesson: the demo should show **what the user does**, not merely what the interface contains.

### 5. Visual Electric — AI without an AI costume

**Pattern:** AI-assisted creation is represented through visual output and direct manipulation rather than a generic chat box, glowing gradient, or abstract “intelligence” claim.

**For ReelWright:**

- Show the material changing.
- Make assistance visible through selection, suggestion, refinement, or organization.
- Keep the language grounded in production work: `select`, `trim`, `format`, `caption`, `finish`.
- Avoid making the AI layer the visual identity.

This is the right model for ReelWright’s AI story: the intelligence should be felt as **better judgment inside a production workflow**, not marketed as a separate futuristic surface.

### 6. Mosaic — use-case-led editing proof

**Pattern:** Editing capability is framed around practical scenarios rather than a feature inventory.

**For ReelWright:**

- Demonstrate a real use case such as turning a long interview into a vertical short.
- Show the source context before showing the mechanics.
- Tie each tool action to an output benefit:
  - identify the useful moment,
  - tighten the cut,
  - apply the right format,
  - produce a publishable short.

This supports a conversion-focused product page because the visitor can recognize the job they need done.

### 7. InVideo AI — useful counterexample

**Pattern:** Broad AI-video positioning can make the product feel fast and accessible, but it can also reduce the perceived specificity of the workflow.

**What ReelWright should learn:**

- Make the result easy to understand.
- Keep the path from input to output short.
- Use plain language.

**What ReelWright should avoid:**

- “Create unlimited videos” as the primary proof.
- Generic prompt-to-video sequences.
- Large collections of feature claims without a visible editorial decision.
- A product demo that makes skilled production look like a single automated click.

ReelWright needs to show **judgment and refinement**, not only generation.

### 8. BlitzReels — output-led short-form positioning

**Pattern:** The finished short is treated as the conversion object.

**For ReelWright:**

- Show the final vertical frame early.
- Use a full-screen or near-full-screen preview for emotional impact.
- Follow it with a precise breakdown of how it was made.
- Make the output feel ready for publication, not like an unfinished editor state.

The risk is that a strong output-led site can become a content marketplace or performance-marketing page. ReelWright needs the product workflow to remain visible.

### 9. Miracamp — explain without intimidating

**Pattern:** Video editing is made approachable through clear sequencing, recognizable media, and an educational rhythm.

**For ReelWright:**

- Avoid assuming that every visitor understands editing terminology.
- Use labels such as `Select the moment`, `Tighten the story`, and `Export the short`.
- Pair professional terminology with plain-language explanation.
- Let the product feel capable without feeling forbidding.

This is especially important if ReelWright sells to creators, marketers, and production teams rather than only career editors.

### 10. Framer — direct manipulation and finished output

**Pattern:** The product is demonstrated through interaction with the work itself, then connected to a polished final result.

**For ReelWright:**

- Use direct manipulation as the central proof.
- Show the playhead, crop, caption, or format boundary responding to an action.
- Transition from interface state to finished published-looking media.
- Keep the demo visually clean enough to understand without pausing.

The transferable principle is **manipulation → consequence**. A visitor should see that a specific production action creates a specific improvement.

## 2. What premium product demonstrations have in common

### They show the result early

The finished output establishes desire and gives the rest of the demo a purpose.

For ReelWright, show:

- a finished vertical short,
- a recognizable caption treatment,
- an intentional cut,
- a clean export state.

Then explain how it was produced.

### They show only enough UI

A useful product frame usually contains:

- the active preview,
- the relevant timeline or media strip,
- one or two controls connected to the action,
- enough surrounding chrome to establish that this is a real application.

It does not need:

- every toolbar,
- every panel,
- every menu,
- every account or navigation detail.

A good rule for ReelWright: **the output should dominate, the active control should clarify, and the rest of the interface should establish credibility without competing for attention.**

### They make state changes explicit

The visitor should be able to identify:

- what changed,
- why it changed,
- what the result is,
- what the next step is.

Use changes such as:

- selected clips becoming highlighted,
- the playhead moving to the chosen moment,
- an edit point tightening,
- captions appearing within the safe area,
- the canvas changing from landscape to vertical,
- an export badge changing from processing to ready.

### They balance proof and explanation

A product demo should not require a voiceover to be understandable.

Pair each motion segment with:

- a short heading,
- one sentence of explanation,
- a visible product state,
- optional metadata.

For example:

> **Find the moment**  
> ReelWright identifies the strongest usable sections before you make the cut.

Then show the media strip and selected moments.

## 3. Recommended ReelWright demo sequence

## Sequence: **The Cut That Holds**

The recommended structure is a six-stage sequence that follows the actual production logic.

### Stage 1 — Raw footage enters

**Visual:**

- A small collection of source clips enters the ReelWright workspace.
- Show recognizable footage thumbnails or a short contact sheet.
- Include source metadata such as duration, format, or number of clips.
- Keep the footage itself visually rich; this is the emotional entry point.

**Label:**

`01 / SOURCE`

**Narrative purpose:**

Establish that ReelWright begins with real production material, not a text prompt in an empty interface.

### Stage 2 — Clip selection

**Visual:**

- The media strip or transcript becomes active.
- Strong moments receive a clear selection state.
- Less relevant material recedes but remains visible.
- Show a playhead, waveform, transcript phrase, or frame selection.

**Label:**

`02 / SELECT`

**Narrative purpose:**

Show editorial judgment. This is where ReelWright becomes more than a generic video generator.

### Stage 3 — Timeline and cut refinement

**Visual:**

- The selected clips move into a compact timeline.
- The playhead advances.
- An edit point tightens.
- One unnecessary pause or dead section disappears.
- The preview updates immediately.

**Label:**

`03 / CUT`

**Narrative purpose:**

Prove precision. The viewer should see that the product improves rhythm and structure, not only that it assembles clips.

### Stage 4 — Caption and format adjustment

**Visual:**

- The composition shifts to a 9:16 frame.
- Captions appear inside safe margins.
- A caption line wraps or repositions.
- The subject remains clear after the crop.
- Show a short format selector or output specification.

**Label:**

`04 / FRAME`

**Narrative purpose:**

Demonstrate that ReelWright understands the demands of short-form publishing: framing, readable captions, and platform-ready composition.

### Stage 5 — Finished vertical short

**Visual:**

- The UI recedes.
- The finished short occupies most of the chamber.
- Play the strongest moment.
- Keep a small, quiet annotation such as `9:16 / 00:23 / FINISHED`.

**Label:**

`05 / FINISH`

**Narrative purpose:**

Deliver the emotional payoff. The visitor should want the result before reading the technical explanation.

### Stage 6 — Export-ready state

**Visual:**

- Return briefly to the product interface.
- Show the export destination, format, duration, and ready state.
- Use a restrained orange-red status indicator.
- End with the final short still visible or immediately adjacent.

**Label:**

`06 / READY`

**Narrative purpose:**

Close the gap between “this looks good” and “I can use this.” The export state makes the product feel operational and credible.

## 4. Desktop version

Desktop can support a richer staged composition.

### Recommended layout

- Left side: stage label, short explanation, and technical metadata.
- Right side: large product-media chamber.
- On selected stages, use a split view:
  - preview above or to the right,
  - timeline or source material below or to the left.
- Use a fixed media frame so the visitor’s eye does not constantly reorient.
- Let the active control enlarge slightly or receive an orange-red rule.
- Keep the rest of the UI dark and quiet.

### Suggested desktop rhythm

1. Finished output preview appears first.
2. Scroll or controlled progress reveals the raw source.
3. Source clips become selected.
4. Selected clips enter the timeline.
5. Timeline edit changes the preview.
6. Caption and format treatment appear.
7. UI recedes into final output.
8. Export-ready state closes the sequence.

The transitions should feel like **inspection and assembly**, not a cinematic trailer.

### Desktop UI visibility

Recommended hierarchy inside the chamber:

- 55–65%: preview or finished media.
- 20–30%: timeline, source strip, or active control.
- 10–20%: metadata, navigation, and secondary UI.

The preview should not be so small that the visitor cannot judge the finished short.

## 5. Mobile version

Mobile should not attempt to reproduce the entire desktop editor.

### Recommended mobile structure

Use a vertical sequence of six compact chapters:

1. **Raw footage**
   - Full-width source strip or stacked clip thumbnails.
2. **Clip selection**
   - One active clip enlarged, with selected-state treatment.
3. **Cut refinement**
   - A simplified timeline with only the relevant edit point.
4. **Format and captions**
   - Large 9:16 preview with safe-area guides.
5. **Finished short**
   - Full-width vertical video.
6. **Export ready**
   - A compact export summary beneath the finished result.

### Mobile behavior

- Keep the active media large.
- Hide nonessential editor chrome.
- Use one active interaction per viewport.
- Replace simultaneous panels with sequential reveals.
- Do not rely on hover, cursor movement, or tiny timeline handles.
- Use visible labels rather than expecting the user to infer meaning from animation.
- Keep the finished short playable without requiring a desktop-style scrubber.
- Use a sticky or repeated CTA only after the product value has been demonstrated.

### Mobile product proof

The mobile sequence should show less interface but not less credibility. Retain:

- a recognizable ReelWright product frame,
- the active operation,
- the output specification,
- the finished result,
- the export state.

## 6. Video versus static screenshots

### Use video when the value is temporal

Video is superior for:

- timeline editing,
- trimming,
- caption timing,
- format changes,
- transitions,
- output playback,
- before-and-after rhythm.

A static screenshot cannot adequately show that an edit improves pacing or that captions remain synchronized.

### Use static screenshots when the value is structural

Static images are better for:

- interface layout,
- export settings,
- plan comparison,
- media organization,
- tool architecture,
- detailed controls,
- accessibility and instructional annotation.

### Recommended combination

Use a short motion demonstration for each major workflow stage, then provide a static fallback frame with labels.

For ReelWright:

- Hero: short muted video or controlled frame sequence.
- Workflow section: motion-led.
- Feature explanation: static annotated screenshot plus optional replay.
- Pricing and product comparison: static.
- Final proof: finished video with manual controls.

## 7. Autoplay, captions, and controls

### Autoplay

Use autoplay only for:

- muted,
- short,
- looping,
- nonessential demonstrations.

Recommended constraints:

- Start only when the media enters the viewport.
- Pause when it leaves the viewport.
- Provide a visible pause/play control.
- Do not autoplay multiple demos simultaneously.
- Do not use autoplay as the only way to understand the workflow.
- Respect reduced-motion preferences.

The hero can use a restrained looping preview, but the first meaningful product explanation should remain understandable as a still frame.

### Captions

Captions are required for:

- spoken product demonstrations,
- customer or creator footage,
- voiceover,
- screen recordings with explanatory narration.

Captions should not be limited to promotional subtitles. They should also explain:

- what changed,
- which state is active,
- what the user is seeing,
- what the output represents.

### Controls

Every meaningful video should offer:

- play/pause,
- replay,
- mute/unmute where audio exists,
- visible progress or stage indication,
- keyboard operation,
- accessible name and focus state.

Avoid custom controls that look elegant but disappear until the user guesses where to interact.

## 8. Accessibility requirements

### Perceivable

- Provide captions for spoken audio.
- Provide a transcript or text summary for workflow demonstrations.
- Provide a poster frame or static fallback for every video.
- Keep important labels outside the moving footage when possible.
- Do not encode the entire explanation only through color, cursor movement, or animation.

### Operable

- All playback controls must be keyboard accessible.
- Provide visible focus states.
- Allow users to pause motion.
- Do not trap keyboard focus inside a media chamber.
- Make timeline and stage navigation usable without pointer precision.
- Ensure touch controls are large enough for mobile use.

### Understandable

- Label each workflow stage.
- Use consistent stage names across desktop and mobile.
- Explain the difference between raw material, selected material, edited material, and final output.
- Do not make the viewer infer whether a change is automatic, suggested, or manually approved.

### Robust

- Use semantic headings and button labels.
- Provide accessible names for product screenshots and videos.
- Ensure the fallback still image preserves the key message.
- Test captions, controls, and stage announcements with screen readers.

## 9. Motion limits

ReelWright’s product demonstrations should feel precise, not theatrical.

Recommended limits:

- One primary motion event per stage.
- Keep transition durations generally short and consistent.
- Avoid repeated entrance animations for every label and control.
- Do not scroll-jack the page.
- Do not force the visitor to wait for a full cinematic sequence before accessing the CTA.
- Do not use continuous wheel rotation as decoration.
- Do not animate the entire interface when only one control has changed.
- Use easing that feels mechanical and controlled rather than elastic or playful.
- Let the finished short play for long enough to judge the result.
- Provide immediate replay and pause.

The motion should communicate:

- selection,
- alignment,
- cutting,
- framing,
- completion.

It should not communicate:

- novelty,
- artificial intelligence,
- speed for its own sake,
- decorative cinematic atmosphere.

## 10. Common failure patterns

### 1. Dashboard wallpaper

A full application screenshot is placed behind a headline, but no single workflow is legible.

**Fix:** Crop to the active operation and make the result dominant.

### 2. Prompt-to-output shortcut

The demo shows a prompt, a loading animation, and a finished video with no editorial decisions in between.

**Fix:** Show selection, refinement, captioning, and format judgment.

### 3. Product UI too small

The interface is visible in theory but impossible to read on desktop or mobile.

**Fix:** Use staged close-ups and provide static annotated frames.

### 4. Finished output arrives too late

The visitor sees several abstract workflow steps before understanding what ReelWright produces.

**Fix:** Show the finished short first, then deconstruct it.

### 5. Cinematic trailer instead of product proof

Large footage, dramatic music, and transitions create atmosphere but do not establish software credibility.

**Fix:** Alternate emotional output footage with precise interface states.

### 6. Excessive interface exposure

Every panel, toolbar, and setting is shown to prove professionalism.

**Fix:** Prove depth through one meaningful interaction and one credible export state.

### 7. Silent motion with no explanation

The interface moves, but the visitor cannot tell whether the action is automatic, suggested, or manual.

**Fix:** Add concise stage labels and a text explanation for every state change.

### 8. Decorative timeline

A timeline appears because timelines look professional, but it does not show a real editing decision.

**Fix:** Use the timeline only to show a genuine cut, timing change, or selected sequence.

### 9. Mobile desktop shrinkage

The entire desktop editor is compressed into a narrow column.

**Fix:** Recompose the demo as a vertical sequence with one active operation per screen.

### 10. AI branding overwhelms production language

The interface uses glowing gradients, magic labels, and abstract “intelligence” signals.

**Fix:** Show AI through useful editorial outcomes: stronger selections, tighter cuts, readable captions, and format-ready output.

## Final recommendation

ReelWright should use a **six-stage, result-first product demonstration** with the finished vertical short visible at the beginning and end.

The strongest formula is:

> **Finished short → raw material → selected moments → refined cut → captioned 9:16 frame → export-ready result**

Keep the interface visible enough to establish professional software credibility, but never let the UI become the main visual subject. The central proof should be that ReelWright makes a better short through a sequence of precise production decisions.

---

# Premium pricing-page research for ReelWright

The strongest model for ReelWright is a **three-tier production-capacity system**, not a conventional seat-based SaaS grid and not a vague credit wallet.

The page should answer one question immediately:

> **How many finished shorts can your team reliably produce each month?**

Jitter’s mobile pricing card is a useful example of direct unit communication: it states the price per editor, billing period, audience, and concrete capabilities in one compact panel. Raycast’s comparison capture shows the value of separating monthly and annual prices into explicit rows. By contrast, the InVideo and Lovart captures show how quickly pricing becomes difficult when credits, model-specific quotas, minutes, seats, storage, and exports all compete for attention.

## Captured pages

[![Pricing · Jitter](https://pin.fontofweb.com/3280?format=jpg)](https://design.withfudge.com/share/pin-3280)

[Pricing · Jitter](https://design.withfudge.com/share/pin-3280)

[![Raycast Pricing: Free Forever or Pro with AI for $8/month](https://pin.fontofweb.com/4918?format=jpg)](https://design.withfudge.com/share/pin-4918)

[Raycast Pricing: Free Forever or Pro with AI for $8/month](https://design.withfudge.com/share/pin-4918)

[![Invideo AI - Create videos without limits](https://pin.fontofweb.com/6196?format=jpg)](https://design.withfudge.com/share/pin-6196)

[Invideo AI - Create videos without limits](https://design.withfudge.com/share/pin-6196)

[![Lovart AI Pricing Plans 2026 | Free & Pro AI Design Agent](https://pin.fontofweb.com/6162?format=jpg)](https://design.withfudge.com/share/pin-6162)

[Lovart AI Pricing Plans 2026 | Free & Pro AI Design Agent](https://design.withfudge.com/share/pin-6162)

[![Plans & Pricing | Figma](https://pin.fontofweb.com/426?format=jpg)](https://design.withfudge.com/share/pin-426)

[Plans & Pricing | Figma](https://design.withfudge.com/share/pin-426)

[![Motion – Pricing](https://pin.fontofweb.com/5817?format=jpg)](https://design.withfudge.com/share/pin-5817)

[Motion – Pricing](https://design.withfudge.com/share/pin-5817)

[![FLORA - Pricing](https://pin.fontofweb.com/2068?format=jpg)](https://design.withfudge.com/share/pin-2068)

[FLORA - Pricing](https://design.withfudge.com/share/pin-2068)

[![Pricing — Cap](https://pin.fontofweb.com/6479?format=jpg)](https://design.withfudge.com/share/pin-6479)

[Pricing — Cap](https://design.withfudge.com/share/pin-6479)

[![Pricing | Sanity](https://pin.fontofweb.com/610?format=jpg)](https://design.withfudge.com/share/pin-610)

[Pricing | Sanity](https://design.withfudge.com/share/pin-610)

[![Pricing - Braintrust](https://pin.fontofweb.com/211?format=jpg)](https://design.withfudge.com/share/pin-211)

[Pricing - Braintrust](https://design.withfudge.com/share/pin-211)

## 1. Ten strong references

| Reference | What it does well | What creates trust | What creates confusion |
|---|---|---|---|
| **Jitter** | Uses a compact plan card with the price, billing unit, audience, CTA, and concrete capabilities in one view. | “Per editor / month,” explicit billing period, and tangible export features. | A long feature list can still make it difficult to distinguish the plan’s central value from secondary inclusions. |
| **Raycast** | Separates monthly and annual subscriptions into visible comparison rows instead of hiding the change behind a toggle alone. | The annual discount is explicit, and the price unit is repeated per plan. | A wide comparison table can become difficult to scan, especially when several plans use different billing bases. |
| **InVideo** | Makes plan breadth and output allowances visible through video minutes, credits, storage, users, and exports. | Concrete quantities are more trustworthy than “unlimited creation” alone. | Several units compete: credits, video minutes, stock assets, ads, clones, users, storage, and exports. |
| **Lovart** | Offers a highly detailed plan comparison organized by image and video capability. | Model-level quantities make the underlying cost structure visible. | The visitor must understand individual model rates before knowing what a plan means in everyday work. This is the wrong complexity level for ReelWright’s main pricing view. |
| **Figma** | Packages a sophisticated creative tool around recognizable team and collaboration needs. | Familiar workflow concepts—editors, teams, collaboration, and product access—are easier to understand than internal processing units. | Seat and role distinctions can become complex when individual contributors, viewers, and organizations are priced differently. |
| **Motion** | Keeps the pricing proposition close to the product’s central workflow rather than turning the page into a procurement document. | The relationship between product capability and plan is comparatively direct. | Premium software pricing can still feel opaque if the limits are explained below the first decision point. |
| **FLORA** | Demonstrates that a creative tool can maintain a distinctive brand while presenting plan choices. | A strong product identity makes the pricing page feel like part of the product, not a detached billing template. | Expressive visual treatment can make plan differences less immediately scannable. |
| **Cap** | Connects pricing to a focused media workflow and a clear product category. | The visitor can understand what kind of work the product supports before comparing plans. | Production tools need to explain storage, processing, exports, and collaboration without overloading the initial cards. |
| **Sanity** | Shows how professional software can move from self-serve plans toward larger organizational requirements. | Usage definitions, operational limits, and enterprise pathways are more credible when presented as part of the same system. | A technical pricing model can feel abstract to buyers who think in finished work rather than infrastructure. |
| **Braintrust** | Provides a professional buyer path for a technical product without pretending every customer has the same needs. | Clear separation between self-serve adoption and organizational conversation. | A technical model may be legible to procurement or engineering teams but not to creative producers. |

## 2. What ReelWright should learn from the comparison captures

### Jitter: directness is valuable

The supplied Jitter capture shows a compact mobile card with:

- a visible plan name,
- a large price,
- `per editor / month`,
- a billing-period note,
- a short audience description,
- a clear CTA,
- a practical feature list.

That is a strong foundation for ReelWright. The equivalent should not merely say “Professional.” It should state who the plan serves and what production capacity it unlocks.

For example:

> **Studio**  
> For small production teams publishing a regular stream of shorts.  
> Includes shared workspaces, brand presets, review states, and a defined monthly short capacity.

### Raycast: billing transparency builds confidence

The supplied Raycast capture shows monthly and annual subscription rows with the annual discount presented directly in the table.

ReelWright should preserve three pieces of information simultaneously:

1. Current billing choice.
2. Monthly equivalent.
3. Actual billing frequency or total.

Avoid a toggle that changes `$X / month` into an annual commitment without making the commitment visible.

### InVideo: concrete quantities help, but too many units hurt

The supplied InVideo capture exposes several quantities across plans, including:

- credits,
- video minutes,
- stock assets,
- users,
- storage,
- generative video,
- exports.

The useful lesson is that buyers trust specific limits. The caution is that a visitor should not need to calculate the value of six unrelated units before choosing a plan.

ReelWright should expose one primary unit and keep secondary capacity beneath it.

### Lovart: detailed tables belong below the decision

The supplied Lovart capture shows a large comparison matrix with multiple tiers and model-specific image and video quantities.

This is useful as a **secondary technical appendix**, particularly if ReelWright has materially different processing classes. It should not be the primary decision surface.

For ReelWright:

- First show capacity in finished shorts.
- Then explain source footage, variants, export quality, and processing limits.
- Only then expose technical usage detail if advanced buyers need it.

## 3. Recommended ReelWright pricing structure

Use three plans with a clear progression:

### 1. Solo

For an individual creator, editor, or marketer producing short-form work independently.

Include:

- one primary seat,
- personal projects,
- a defined monthly finished-short capacity,
- standard captioning and formatting,
- standard export options,
- one or a small number of brand presets.

Recommended positioning:

> **For making a consistent stream of shorts on your own.**

### 2. Studio — recommended

For small teams, creative departments, and recurring production workflows.

Include:

- multiple seats,
- shared projects,
- review and approval states,
- shared brand presets,
- higher monthly finished-short capacity,
- more output variants,
- priority processing,
- stronger collaboration and asset organization.

Recommended positioning:

> **For teams turning source footage into finished shorts every week.**

This should be the visually emphasized plan, but the emphasis should be calm and purposeful—not a loud “BEST VALUE” sticker.

### 3. Production

For agencies, publishers, and professional production organizations.

Include:

- custom monthly capacity,
- larger teams,
- multiple workspaces or brands,
- advanced permissions,
- onboarding,
- support,
- procurement and security requirements,
- a professional agreement around volume and service.

Recommended positioning:

> **For production teams with recurring volume, multiple brands, or operational requirements.**

Do not force Production buyers into a self-serve checkout if their actual decision depends on volume, support, permissions, or workflow integration.

## 4. Best unit of value

The primary unit should be a **finished short**, not a credit.

A ReelWright unit should be defined clearly, for example:

> **One finished short** = one approved vertical edit created from a bounded amount of source footage, including clip selection, cut refinement, caption treatment, format adjustment, and standard export.

The final commercial definition should specify:

- maximum source-footage allowance,
- maximum finished duration,
- number of included revisions,
- whether alternate aspect ratios count as variants,
- whether re-exports count again,
- whether captions and formatting are included,
- what happens when the source exceeds the included allowance.

### Recommended hierarchy of units

| Priority | Unit | Recommendation |
|---|---|---|
| Primary | Finished short | Use in plan names, headlines, and decision cards. |
| Secondary | Source footage | Explain the input allowance behind each short. |
| Secondary | Variants | Explain alternate formats, languages, or versions. |
| Secondary | Seats | Use for collaboration and team capacity. |
| Tertiary | Processing minutes | Show only where necessary to explain cost or limits. |
| Avoid as primary | Credits | Do not expose as the main customer-facing unit. |

### Why not charge primarily by export?

Charging for every export can feel punitive because producers often need to render multiple times during refinement. A better model is to include a finished short with a reasonable number of revisions and distinguish between:

- revisions to the same short,
- additional variants,
- entirely new shorts.

### Why not charge primarily by source minutes?

Source minutes describe the platform’s workload, but not the customer’s desired outcome. A producer is more likely to think:

> “I need 20 finished shorts this month”

than:

> “I need 480 source minutes.”

Source minutes should explain the plan, not define the emotional value of the plan.

## 5. Recommended pricing-page sequence

### Section 1 — State the value unit

Headline:

> **Choose the production capacity that fits your month.**

Supporting copy:

> Every plan is measured in finished shorts, with source footage, variants, collaboration, and export limits shown clearly.

### Section 2 — Monthly / annual control

Use a two-state control:

- Monthly
- Annual — save X%

Always show:

- monthly equivalent,
- annual billing commitment,
- discount,
- whether unused capacity rolls over.

Do not make annual billing appear cheaper while hiding that the full year is charged immediately.

### Section 3 — Three plan cards

Each card should contain:

- plan name,
- intended customer,
- price,
- primary unit,
- short capacity statement,
- two or three key differentiators,
- CTA,
- billing note.

Do not put every feature in the cards.

### Section 4 — “What counts as a short?”

Use a simple input-to-output explanation:

> Source footage → selected moments → refined cut → captions and format → approved vertical short

This is critical. It prevents the plan unit from feeling like an arbitrary quota.

### Section 5 — Example production scenarios

Connect price to real output:

- **One-person publishing:** recurring individual shorts from a personal footage library.
- **Weekly content team:** multiple people reviewing and approving a steady stream of outputs.
- **Production operation:** multiple brands, recurring batches, and custom volume.

The examples should show the work, not merely repeat feature names.

### Section 6 — Detailed comparison

Group the table by production stages:

1. Create
2. Refine
3. Format
4. Review
5. Deliver
6. Operate

This is more meaningful for ReelWright than a long list of isolated checkmarks.

### Section 7 — Professional path

Place the Production path after the self-serve plans, with language such as:

> **Need a production agreement?**  
> Plan recurring volume, multiple brands, permissions, and support with our team.

Avoid forcing enterprise language into the top of the page.

## 6. Recommended CTA language

Avoid generic “Get started” on every card.

| Plan | Recommended CTA |
|---|---|
| Solo | **Start a project** |
| Studio | **Start producing** |
| Production | **Plan your workflow** |
| Secondary | **Compare capabilities** |
| Secondary | **See what counts as a short** |

The primary Studio CTA should communicate ongoing production rather than a vague account creation step.

If there is a free trial:

> **Make your first short**

This is stronger than “Start free” because it points toward the actual product outcome.

## 7. How to emphasize the recommended plan

Use structural emphasis rather than decorative noise:

- slightly stronger border,
- a restrained orange-red rule,
- a clear `Recommended for most teams` label,
- one additional line explaining why it is recommended,
- consistent CTA placement.

Do not rely on:

- oversized badges,
- neon backgrounds,
- dramatic shadows,
- a plan card that is physically much larger than the others,
- a “best value” label without a reason.

The visitor should understand why Studio is recommended:

> It is the first plan that supports a recurring shared production workflow.

## 8. Usage-based pricing communication

If ReelWright has variable processing costs, show them in a separate “capacity details” section.

Use plain language:

- **Finished shorts included**
- **Source footage included**
- **Additional variant**
- **Additional seat**
- **Additional processing capacity**

Avoid:

- “AI credits”
- “tokens”
- “boosts”
- “generation units”
- model-by-model pricing in the primary cards

If overages exist, give a concrete rule:

> When you reach your included monthly capacity, you can add another production pack or move to the next plan. Your existing projects remain available.

Do not let users discover overage behavior only at checkout.

## 9. Mobile pricing behavior

The supplied Jitter capture demonstrates why mobile pricing cards need to be self-contained: the visitor sees the price, billing unit, audience, CTA, and core benefits without needing to compare a wide desktop table.

Recommended mobile structure:

1. Monthly / annual control at the top.
2. Short explanation of the pricing unit.
3. One stacked plan card at a time.
4. Recommended Studio card immediately after Solo.
5. Expandable details for secondary capabilities.
6. A comparison accordion grouped by workflow stage.
7. Production contact path at the end.

### Mobile rules

- Keep the price and billing unit adjacent.
- Keep the audience description visible.
- Keep the primary CTA within the first card viewport.
- Do not require horizontal scrolling for the essential plan decision.
- Do not hide the monthly/annual state after the visitor scrolls.
- Keep the recommended plan label visible when its card is expanded.
- Use expandable sections for detailed limits, but never hide the primary capacity.
- Make comparison rows readable without relying on tiny checkmarks.
- Repeat the selected billing state in each card if the cards are far apart.
- Make long feature names wrap naturally rather than clipping them.

## 10. Trust signals

Pricing feels credible when it answers operational questions before the buyer asks them.

Include:

- clear billing period,
- explicit annual commitment,
- defined production unit,
- source-footage allowance,
- revision and variant rules,
- export quality,
- seat definitions,
- rollover policy,
- overage behavior,
- cancellation terms,
- data and project retention,
- professional support path.

The strongest trust signal is not a badge. It is a precise explanation of what happens during real production.

## 11. Accessibility requirements

- Use real headings and table headers for the comparison table.
- Ensure the monthly/annual control exposes its current state to assistive technology.
- Do not communicate the recommended plan through color alone.
- Do not use checkmarks as the only explanation of a capability.
- Preserve readable text size inside pricing cards.
- Ensure all CTAs have distinct, meaningful accessible names.
- Make expandable limits keyboard accessible.
- Keep focus states visible.
- Ensure pricing, discounts, and billing notes remain readable on both paper and dark surfaces.
- Do not place small gray legal text on a dark cinematic background without checking the exact pair.
- Keep plan comparison usable at zoomed text sizes.
- Avoid hover-only explanations for billing units or limits.
- Announce changes when the monthly/annual toggle updates displayed prices.
- Make the detailed table navigable on mobile without requiring precise horizontal swiping.

## 12. Patterns to avoid

### Generic five-tier grid

Five or more near-identical cards make the page feel like infrastructure SaaS.

**Use instead:** three meaningful production modes.

### Vague AI credits

Credits make the visitor calculate the relationship between payment and output.

**Use instead:** finished shorts as the primary unit, with transparent processing detail below.

### “Unlimited” without boundaries

Unlimited files, exports, or generations can be misleading if source duration, quality, speed, or collaboration remains restricted.

**Use instead:** define what is unlimited and what is still bounded.

### Feature-list competition

A card containing twenty checkmarks does not explain who should choose it.

**Use instead:** lead with audience, capacity, and workflow outcome.

### Annual discount hidden inside a switch

A toggle that changes the price but hides the billing commitment reduces trust.

**Use instead:** show annual savings, monthly equivalent, and billing frequency together.

### Charging every revision as a new product

This makes the platform feel hostile to professional refinement.

**Use instead:** distinguish revisions, variants, and new finished shorts.

### Model-specific pricing in the first view

This is appropriate for an advanced technical appendix, not the opening decision.

**Use instead:** group technical costs under the production outcome they support.

### Over-emphasized “best value” badges

A badge without an explanation feels like a sales trick.

**Use instead:** explain why Studio is the right capacity for a recurring team workflow.

### Pricing before product proof

A visitor may not yet understand the value of a finished short.

**Use instead:** place pricing after a concise workflow demonstration or finished-output section.

### Desktop comparison table squeezed onto mobile

Tiny columns and clipped labels make pricing feel unreliable.

**Use instead:** stacked cards plus grouped comparison accordions.

## Final recommendation

ReelWright should present:

1. **Solo**
2. **Studio — recommended**
3. **Production**

The central unit should be:

> **finished shorts per month**

Each plan should then clarify the supporting limits:

- source footage,
- revisions,
- variants,
- seats,
- export quality,
- collaboration,
- support.

The page should visually feel like a production capacity guide rather than a subscription catalogue. The key trust move is to show exactly how a real batch of source footage becomes finished, export-ready shorts—and how each plan supports that workflow.

---

# ReelWright typography research

## Recommendation first

The strongest open-source direction is:

> **Space Grotesk for headlines and section titles**  
> **Inter for body text and interface UI**  
> **IBM Plex Mono for technical metadata**  
> **Source Serif 4 used rarely for editorial notes**

This combination gives ReelWright:

- more character than an all-Inter system,
- better body readability than an all-display grotesk system,
- credible software typography,
- an engineered mono voice without making the entire site feel like a developer tool,
- clear commercial web licensing through the SIL Open Font License.

For the leanest implementation, use:

> **Geist Variable + IBM Plex Mono**

That reduces the number of font families while retaining a contemporary software voice.

---

# 1. Five primary grotesk options

| Font | Best role | Strengths | Risks | License |
|---|---|---|---|---|
| **Space Grotesk** | Headlines, section titles, selected UI | Distinctive technical geometry, strong display character, variable font, good numerals and punctuation, open-source web use | Can feel slightly “tech product” if used for every text role; needs careful tracking at large sizes | SIL Open Font License 1.1 |
| **Geist** | Headline, body, UI, or complete sans system | Clean, contemporary, highly legible, variable font, strong software credibility, efficient as a single-family system | Association with modern developer and productivity products can make it feel familiar; needs ReelWright-specific color and composition | SIL Open Font License 1.1 |
| **Inter** | Body, UI, tables, controls | Excellent screen rendering, broad weight range, variable font, strong numerals, mature browser support, reliable at small sizes | Too familiar to carry ReelWright’s entire identity; can feel like default SaaS typography when used alone | SIL Open Font License 1.1 |
| **Instrument Sans** | Headlines and body | Contemporary, restrained, cleaner and less ubiquitous than Inter, useful variable behavior, good editorial neutrality | Less industrial in tone; should be tested carefully in dense metadata and longer text | SIL Open Font License 1.1 |
| **IBM Plex Sans** | Body, UI, technical editorial layouts | Strong engineered character, excellent punctuation and numerals, broad family, clear professional tone, good language coverage | Can feel institutional or enterprise-oriented if used for very large headlines; slightly less cinematic than Space Grotesk | SIL Open Font License 1.1 |

## Space Grotesk

The best choice when ReelWright needs visible personality without becoming decorative.

Use it for:

- hero headlines,
- section headings,
- process-stage labels,
- selected large numeric values.

Avoid using it for every paragraph. Its geometric details become more noticeable in long reading passages and dense product UI.

**Voice:** engineered, contemporary, slightly experimental, confident.

## Geist

The best single-family option.

Use it when:

- performance and simplicity matter,
- the product needs to feel unmistakably like serious software,
- the design system should avoid managing multiple sans families.

Geist can carry headlines, body copy, buttons, navigation, and product metadata with minimal visual friction. Its main weakness is distinctiveness: composition, color, imagery, and the wheel system must supply the brand character.

**Voice:** modern software, precise, quiet, capable.

## Inter

The most reliable utility choice.

Use it for:

- body text,
- navigation,
- pricing tables,
- product UI,
- labels below approximately 20px.

Inter is especially strong for ReelWright’s conversion sections because it keeps prices, plan descriptions, limitations, and controls readable.

It should not be the only font unless the visual identity is intentionally very minimal.

**Voice:** neutral, efficient, highly usable.

## Instrument Sans

A strong alternative if ReelWright needs a softer contemporary grotesk with less obvious developer-tool association.

Use it for:

- display headlines,
- editorial introductions,
- product storytelling,
- large callouts.

It works best when the brand needs premium restraint rather than overt industrial character.

**Voice:** refined, contemporary, editorial, less technical.

## IBM Plex Sans

The strongest option for an explicitly engineered voice.

Use it for:

- technical explanations,
- product architecture,
- workflow descriptions,
- specifications,
- enterprise or professional-production material.

IBM Plex Sans is especially compatible with the “technical drawing” and “precision instrument” side of ReelWright. It should be balanced with strong video, warm surfaces, and expressive scale so the brand does not become institutional.

**Voice:** engineered, credible, systematic, professional.

---

# 2. Five mono options

| Font | Best role | Strengths | Risks | License |
|---|---|---|---|---|
| **IBM Plex Mono** | Primary metadata mono | Highly legible, professional, strong punctuation, excellent numerals, broad language coverage, good technical credibility | Can feel enterprise or developer-oriented if used too broadly | SIL Open Font License 1.1 |
| **Geist Mono** | Software and product metadata | Harmonizes naturally with Geist, clean shapes, contemporary UI character, variable-family ecosystem | Can make ReelWright feel like a developer platform if used for headlines or long copy | SIL Open Font License 1.1 |
| **JetBrains Mono** | Technical data and code-like annotations | Excellent differentiation of characters, clear numerals, strong punctuation, readable at small sizes | Strongly associated with coding; too much of it will undermine the craft and cinematic direction | SIL Open Font License 1.1 |
| **DM Mono** | Compact labels and editorial metadata | Friendly, clean, relatively soft mono personality, useful for small labels | Less authoritative for dense production specifications; narrower family feel | SIL Open Font License 1.1 |
| **Space Mono** | Distinctive campaign or process labels | Strong display personality, visually memorable numerals, compatible with Space Grotesk | Can feel playful or retro; less suitable for dense UI and long metadata strings | SIL Open Font License 1.1 |

## IBM Plex Mono

Best overall for ReelWright.

It communicates precision without being aggressively programmer-coded. It has strong numerals and punctuation for values such as:

- `9:16`
- `00:23`
- `CUT 03`
- `24 FPS`
- `EXPORT READY`
- `01 / SELECT`

Use it at modest sizes with sufficient line height. It should label the system, not dominate the page.

## Geist Mono

Best if Geist is the primary sans family.

The shared visual logic makes it efficient for a coherent software identity. The risk is cumulative: Geist Sans plus Geist Mono can move ReelWright toward a familiar developer-product aesthetic unless the warm canvas and cinematic footage provide contrast.

## JetBrains Mono

Best for highly technical product screens, not general brand metadata.

Its distinction between similar glyphs is excellent, but its coding association is strong. Reserve it for:

- export specifications,
- timeline markers,
- technical diagrams,
- code-like production settings.

## DM Mono

Best for a warmer, less severe version of the technical language.

It is useful when the metadata should feel designed and approachable rather than industrial. It is less suitable if ReelWright wants maximum professional-production authority.

## Space Mono

Best used as a limited campaign accent.

It can pair well with Space Grotesk for a strongly authored direction, but it should not become the default metadata face across pricing, navigation, and the product explanation. That combination can become too stylized and retro-technical.

---

# 3. Three optional serif accents

| Font | Best role | Strengths | Risks | License |
|---|---|---|---|---|
| **Source Serif 4** | Editorial notes, pull quotes, process commentary | Excellent readability, broad language coverage, variable font, mature web behavior, restrained character | More conventional; needs limited use to feel intentional | SIL Open Font License 1.1 |
| **Fraunces** | Occasional expressive craft statement | Distinctive, warm, variable, gives the “crafted” idea more personality | Can become nostalgic, artisanal, or lifestyle-oriented very quickly | SIL Open Font License 1.1 |
| **Instrument Serif** | Short display accent or campaign line | Elegant, compact, contemporary, strong contrast with a grotesk | Not appropriate for body copy; can feel fashion/editorial if overused | SIL Open Font License 1.1 |

## Recommendation

Use **Source Serif 4** if the serif is primarily editorial.

Use **Fraunces** only if ReelWright needs more visible warmth and craft personality.

Use **Instrument Serif** for very short phrases such as:

- `Made for the final cut.`
- `The moment, refined.`
- `Work worth finishing.`

Do not use a serif in the product UI, pricing table, primary navigation, or technical metadata.

---

# 4. Licensing summary

## Open-source options

The recommended families above are distributed under the **SIL Open Font License 1.1**, which generally permits:

- commercial website use,
- embedding in web products,
- modification,
- redistribution under the license conditions.

The font license should remain with the project, and the font files should not be sold as a standalone product. Confirm the license for the exact release and file package before launch.

This applies to the recommended families:

- Space Grotesk
- Geist
- Inter
- Instrument Sans
- IBM Plex Sans
- IBM Plex Mono
- Geist Mono
- JetBrains Mono
- DM Mono
- Space Mono
- Source Serif 4
- Fraunces
- Instrument Serif

## Commercial alternatives

These families are not open-source defaults:

- Söhne
- Suisse Intl
- Neue Haas Grotesk
- ABC Diatype
- Berkeley Mono

They can be commercially safe when ReelWright purchases the correct license for:

- web embedding,
- number of domains,
- page views or traffic tiers,
- number of weights,
- app or product embedding,
- marketing and product surfaces,
- client or agency usage.

Do not assume that a desktop license includes webfont rights. The font foundry’s current license should be treated as authoritative.

## Licensing recommendation

For the first ReelWright release:

> Use OFL families for the marketing site and product UI unless a specific commercial typeface is essential to the identity.

This avoids unnecessary licensing complexity while the brand language is still being validated.

---

# 5. Recommended pairings

## Pairing A — best overall balance

**Space Grotesk + Inter + IBM Plex Mono**

- Space Grotesk: hero and section headings.
- Inter: body, navigation, pricing, UI.
- IBM Plex Mono: metadata and production specifications.

**Why it works:** distinctive display character, dependable reading text, and technical credibility without making the entire site monospace.

## Pairing B — leanest premium software system

**Geist + IBM Plex Mono**

- Geist: all sans roles.
- IBM Plex Mono: metadata.

**Why it works:** fewer files, strong consistency, excellent software credibility.

**Risk:** the visual identity may feel too close to contemporary developer or productivity software without ReelWright’s warm paper surfaces, wheel geometry, and cinematic media.

## Pairing C — more engineered

**IBM Plex Sans + IBM Plex Mono**

**Why it works:** maximum family cohesion and a clear precision-engineering voice.

**Risk:** can feel institutional, technical, or enterprise-heavy. Use warmer imagery and stronger headline scale to restore emotion.

## Pairing D — more editorial and premium

**Instrument Sans + IBM Plex Mono + Source Serif 4**

- Instrument Sans: headlines and body.
- IBM Plex Mono: metadata.
- Source Serif 4: rare editorial notes.

**Why it works:** less obviously SaaS, more refined, and compatible with the craftsmanship concept.

**Risk:** it may lose some professional editing-software authority unless product demonstrations are especially clear.

## Pairing E — most expressive technical direction

**Space Grotesk + Space Mono**

**Why it works:** highly coherent and visually distinctive.

**Risk:** can become retro-futurist or playful. Use only if the rest of the design remains restrained.

---

# 6. Best overall ReelWright stack

## Recommended brand stack

### Display and section headings

**Space Grotesk Variable**

Suggested weights:

- Hero: 600–700
- Section headings: 600
- Short labels: 500–600

Use slightly tight tracking for large headings, but do not compress body or pricing text.

### Body and UI

**Inter Variable**

Suggested weights:

- Body: 400–450
- Emphasis: 500
- Buttons and navigation: 500–600
- Pricing values: 600–700
- Table headings: 600

### Metadata

**IBM Plex Mono**

Suggested weights:

- General metadata: 400
- Active state or export status: 500
- Small technical headings: 500

### Editorial accent

**Source Serif 4**

Use only for:

- short process statements,
- selected pull quotes,
- occasional brand commentary,
- a final campaign line.

This should appear infrequently enough that visitors recognize it as a deliberate editorial interruption.

---

# 7. Fallback stack

## Sans fallback

> `Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif`

If Inter is unavailable, the system remains readable and reasonably stable.

## Display fallback

> `Space Grotesk, Inter, ui-sans-serif, system-ui, sans-serif`

If Space Grotesk fails, Inter preserves the hierarchy even though some personality is lost.

## Mono fallback

> `IBM Plex Mono, "SFMono-Regular", Consolas, "Liberation Mono", monospace`

This protects the technical labels across macOS, Windows, and Linux environments.

## Serif fallback

> `Source Serif 4, Georgia, "Times New Roman", serif`

Use the serif fallback only for short text. Long fallback changes can noticeably affect line wrapping.

---

# 8. Suggested weight usage

| Role | Recommended weight | Notes |
|---|---:|---|
| Hero headline | 600–700 | Use weight to establish confidence; avoid ultra-heavy display treatment. |
| Section heading | 600 | Keep the hierarchy strong without making every section shout. |
| Body text | 400–450 | Use generous line height and avoid light weights on the warm canvas. |
| Strong body emphasis | 500–600 | Reserve for short phrases or product outcomes. |
| Navigation | 500 | Clear and compact. |
| Primary button | 600 | Should feel decisive without becoming aggressive. |
| Pricing value | 600–700 | Strong numerals with clear currency and billing period. |
| Metadata mono | 400 | Use 500 only for active states or status labels. |
| Technical annotation | 500 | Keep annotations short and high contrast. |
| Serif accent | 400–500 | Avoid bold serif treatment; it will push the brand toward luxury editorial styling. |

Avoid using:

- 300-weight body copy on paper or dark media,
- 700-weight mono for general metadata,
- multiple neighboring weights without a clear hierarchy,
- italic serif as a default craft signal,
- all-caps body copy.

---

# 9. Reasons to reject weaker options

## All-Inter

Inter is excellent but too familiar to define the brand by itself. It would make ReelWright feel like a polished but interchangeable SaaS product.

**Use it for body and UI, not necessarily for every headline.**

## All-Geist

Geist is strong, but a complete Geist system can resemble contemporary developer tools and productivity products.

**Use it as the lean system, not as an automatic identity choice.**

## Space Grotesk for body text

Its display character is useful, but its geometry can become distracting in long paragraphs, pricing notes, and dense UI.

**Use it for display roles.**

## IBM Plex Sans for every role

The family has excellent engineering credibility but can feel like enterprise infrastructure or industrial documentation.

**Use it when technical authority is more important than cinematic warmth.**

## Manrope

Manrope is a competent open-source option with good screen behavior, but its rounded geometry can make ReelWright feel softer and more consumer-oriented.

It is less suitable if the brand needs strong precision, film-production authority, and mechanical confidence.

## Plus Jakarta Sans

Plus Jakarta Sans is polished and flexible, but it tends toward a friendly contemporary SaaS tone. It may weaken the old-world craftsmanship and technical-instrument qualities.

## JetBrains Mono everywhere

It is highly readable and technically precise, but its developer association is too strong for general ReelWright metadata.

## Space Mono everywhere

The pairing can become retro and playful, especially beside a wheel or film-reel motif. It should remain a limited accent.

## Fraunces as the primary serif

Fraunces can communicate craft, but it can also shift the brand toward food, fashion, artisan goods, or nostalgia.

Use it only if the final identity needs more warmth than precision.

## Commercial grotesks without a web license

Söhne, Suisse Intl, Neue Haas Grotesk, ABC Diatype, and Berkeley Mono may be excellent stylistically, but they are not safe to deploy based on a desktop license or a font file found online.

---

# 10. Performance concerns

## Limit the number of families

The strongest production setup should load no more than:

- one primary sans,
- one supporting sans if necessary,
- one mono,
- one optional serif only on pages that use it.

The recommended Space Grotesk / Inter / IBM Plex Mono system is visually strong but heavier than Geist / IBM Plex Mono.

## Variable fonts

Variable fonts are valuable because one file can cover multiple weights and sometimes widths or optical sizes. However:

- a variable file can be larger than a single static weight,
- unused axes should not be loaded,
- broad language coverage can increase file size,
- a full variable file may be unnecessary if only two weights are used.

Use a variable font when the site genuinely needs several weights or fluid typography. Otherwise, a small set of subsetted static WOFF2 files may perform better.

## Subsetting

Subset by language and character range where possible. ReelWright should test:

- Latin punctuation,
- curly quotes,
- apostrophes,
- en and em dashes,
- bullets,
- degree symbols,
- slashes,
- percentages,
- currency symbols,
- time separators,
- aspect-ratio notation,
- accented names and customer content.

A technically small font that lacks useful punctuation will create fallback jumps in pricing and production metadata.

## Mobile rendering

Prioritize fonts with:

- clear `1`, `I`, and `l` distinctions,
- readable `0` and `O`,
- strong `4`, `6`, and `9`,
- stable punctuation at small sizes,
- sensible spacing in all-caps labels,
- usable numerals for timecodes and dimensions.

Test these strings at actual mobile sizes:

- `9:16 / 00:23`
- `24 FPS`
- `CUT 03`
- `EXPORT READY`
- `€49 / month`
- `MADE • RIGHT`
- `01 / SELECT`

## Font loading

- Preload only the primary face used above the fold.
- Do not preload every weight.
- Avoid loading the optional serif until it is needed.
- Keep the fallback metrics reasonably close to the chosen font to reduce layout shift.
- Test the site with font loading disabled.
- Ensure the page remains legible and hierarchically useful before webfonts arrive.

## Final decision

Lock the following direction first:

> **Space Grotesk display + Inter body/UI + IBM Plex Mono metadata**

Keep these provisional until real ReelWright copy and product screens are tested:

- whether Geist should replace Space Grotesk,
- whether the serif is needed at all,
- whether IBM Plex Mono feels too technical,
- whether one sans family is sufficient,
- whether a paid typeface provides enough identity value to justify licensing.

The typography should support the wheel, production workflow, and finished video. It should not become a second concept competing with them.