# videocompressor.online — Content-fit Matrix

Date: 2026-06-03
Owner: moying
Visual direction: Industrial privacy-first video workstation — dark graphite, mint signal, amber action, compressed control density.

## Global design system

- Vibe: fast privacy-first video workstation, not SaaS template.
- Typography: JetBrains Mono for display/labels; IBM Plex Sans for body.
- Colors: Background #0B0E0D, Surface #131A18, Surface raised #18221F, Text #EAF2EE, Muted #8DA39A, Primary #7CFFB2, CTA #FFB84D, Danger #FF6B6B.
- Layout: split hero; left value copy 45%, right compact compressor panel 55%; tool panel height must not exceed left copy block by >1.15x.
- Corner system: square outer shells, rounded internal controls, pill presets; no uniform radius.
- Icons: geometric SVG / Material-style glyphs only; no emoji; no platform logos.
- Product value: real compressor UI states, preset chips, progress/result cards, browser limits, target-miss honesty.
- Red lines: no upload-first wording, no official platform implication, no unlimited/lossless/no quality loss/all formats claims.

## Route / section matrix

| Route | Section | Source | Display placement | Homepage? | If downsampled, destination | Layout container | Visual risk / mitigation |
|---|---|---|---|---|---|---|---|
| / | Hero + inline tool | PRD §7.1 + copy §1 Hero | Above fold, split | Yes | n/a | 12-col split, compact workstation panel | Tool can become too tall; keep 4 preset chips in one/two rows and collapse diagnostics below fold |
| / | Trust strip | copy §1 Trust + compliance §10 | Under hero | Yes | n/a | thin segmented strip | Avoid legal wall; 4 short proof points only |
| / | Presets | copy §1 Preset cards | Visible after trust strip | Yes | links to P0 pages | asymmetric bento 2+3 | Avoid platform-logo risk; text-only badges |
| / | Short answer block | SEO §5.2 | Near top after presets | Yes | n/a | citation card with Last updated | Must not look like SEO dump; 60-word max |
| / | How it works | copy §1 | Visible mid-page | Yes | n/a | 3-step horizontal rail | Avoid generic 3-card SaaS by using timeline/processing stages |
| / | Browser limits | copy §1 + PRD §6 | Visible mid-page | Yes | privacy page deep detail | warning/spec card | Must be honest but not dominant |
| / | Use cases | copy §1 | Visible lower page | Yes | platform pages | offset cards | No logo usage; platform names only as text |
| / | FAQ | copy §4 + SEO FAQ seeds | Visible/collapsible lower page | Yes | n/a | accordion | Keep schema copy intact |
| /mp4-compressor | Hero/tool preset | copy §3 MP4 + SEO §5.2 | Above fold | No | route page | split with MP4/H.264 spec card | Avoid promising all codecs |
| /mp4-compressor | Best settings | SEO §7 AEO | Visible | No | n/a | table/card hybrid | Use MP4/H.264/AAC first wording |
| /compress-video-for-discord | Hero/tool preset | copy §3 Discord | Above fold | No | route page | split with 10MB target dial | Must say target not guarantee; no official claim |
| /compress-video-for-discord | Use-case cards + disclaimer | copy §3 + SEO disclaimer | Visible | No | n/a | bento cards + fine-print note | No Discord logo/colors as brand system |
| /compress-video-for-whatsapp | Hero/tool preset | copy §3 WhatsApp | Above fold | No | route page | split with 16MB dial | No Meta/WhatsApp endorsement; limits vary |
| /compress-video-for-instagram | Hero/tool preset | copy §3 Instagram | Above fold | No | route page | split with 1080p/720p quality board | No fake universal MB limit |
| /privacy-video-compressor | No-upload explainer | copy §3 privacy + compliance §2 | Above fold | No | route page | editorial spec sheet | Must distinguish no-upload by default from zero data collection |
| all P0 | FAQ/schema blocks | copy §4 + SEO §6 | Lower page | Partial | each route | route-specific accordion | Preserve visible FAQ; no hidden-only schema |
| tool states | empty / selected / unsupported / ready / processing / success / target missed / failed / mobile warning | copy §2 + PRD §7.2 | State screens | Hero embeds empty/ready only | implementation state variants | compact modal/panel states | Avoid generic error; each failure gives action |
| /pricing/support CTA | Free v0 + waitlist | pricing §2 | Footer/result CTA only | Light | future pricing route if built | low-emphasis strip | No checkout, no paid promise, no fake SaaS table |
| /privacy / /terms | legal copy | compliance §4–5 | Route pages in same design system | Footer links | legal routes | document pages | Contact email/operator details need launch confirmation |

## Tool-state mapping

| State | Visual treatment | Required copy preserved | Primary action |
|---|---|---|---|
| empty | Dropzone + preset chips + privacy seal | Drop a video to compress; no filename/media tracking | Choose Video |
| selected | Input facts row + controls | smaller targets may reduce visible quality | Start Compression |
| unsupported | red/amber codec card | MP4/H.264-first | Choose Another Video |
| ready | target confirmation card | keep tab open | Compress Video |
| processing | stage progress rail | Preparing / Encoding / Packaging / Checking | Cancel Compression |
| success | before/after meter + download | original stayed on device | Download MP4 |
| target missed | amber result card | output smaller but not under target | Retry with Smaller Settings |
| failed | recovery checklist | browser could not finish | Try Safer Settings |
| mobile warning | compact warning banner | phones may be slower | Continue Anyway |

## Design acceptance notes for frontend

1. Header must be the first major structure; footer must close the page.
2. Homepage hero compressor panel must be compact; no full backend/editor console in hero.
3. All platform pages must open with the correct preset selected or visibly highlighted.
4. No fake Sign In, Buy, Checkout, or unlimited Pro CTA in v0.
5. Legal/no-affiliation notes are subordinate but visible on platform pages and footer.
6. QA must verify 390px mobile: no horizontal overflow, file picker and preset controls remain above/near fold.