# OpusClip — Marketing Site Design Spec

> Source: opus.pro (live DOM, computed styles), 2026-07-29 (desktop 1512px). Webflow-built (`cdn.prod.website-files.com`), Geist Variable webfont.
> Coverage: public marketing homepage. Editor/app (the actual clip timeline) is behind sign-in, `needs-dashboard`. 2 stylesheets were cross-origin (sheetsBlocked 2) — hover/focus captured from same-origin Webflow sheets only.
> Reality check: hint said "timeline/editor-forward, Descript the only neighbour". The **timeline lives in the app, not this marketing page** — the homepage is a conventional-but-clean **pure-black** AI-product page (Geist, white pill CTAs, rounded video-demo cards, logo marquees). What is genuinely distinctive: a large **pill-shaped URL-drop input** as the primary hero action, and a colourful **Rive-animated brand system** (opus-purple `#6723ff` + candy blue + yellow) held almost entirely OFF the monochrome hero and reserved for illustration.

## 1. Visual Theme & Atmosphere

Confident, pure-black consumer-AI-tool marketing. The canvas is `#000000`; nearly everything on the hero is white Geist type and one white pill CTA, so the surface reads as high-contrast monochrome despite a large colourful token system underneath. Colour (opus purple, candy blue, playful yellow) is rationed to Rive-animated illustration, badges and demo canvases — never to the chrome. The recognisable hero move is a big rounded **pill input** ("Drop a video link") paired with a white "Get free clips" button, sitting above rounded video-clip demo cards that auto-scroll in marquees. Structure comes from low-alpha white hairlines, not shadows (there are none). Feels: dark, crisp, product-first, high-contrast.

## 2. Color Palette & Roles

### Canvas, surfaces & text (dark)
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page canvas |
| popover / new-gray | `#171718` | Cards, popovers, panels |
| web-panel | `#191919` | Raised panels |
| input-bg | `#2d2d2d` | Filled input / secondary pill |
| border-card | `#27272a` | Card borders / dark dividers |
| ink-blue | `#0e1015` | Deep blue-black section fill |
| smoke | `#fafafa` | Near-white fills, on-dark chips |
| placeholder | `#e2e3e7` | Input placeholder / focus ring |
| muted | `#a1a1ab` | Muted foreground text |
| hover-gray | `#e0e0e0` | White-button hover fill |
| white / white-50 | `#ffffff` / `rgba(255,255,255,.5)` | Primary text / muted nav text |

### Brand system (opus, mostly reserved for illustration)
| Token | Hex | Role / usage |
|---|---|---|
| opus-purple | `#6723ff` | Primary brand accent |
| sweet-purple | `#a259ff` | Lighter purple accent |
| candy-blue | `#72ffff` | Bright cyan illustration accent |
| light-blue | `#00d7ff` | Secondary cyan accent |
| primary-blue | `#4262ff` | Blue accent |
| dark-indigo | `#24235e` | `--dark` deep indigo |
| opus-dark-bg | `#1e0752` | Deep-purple illustration bg |
| playful-yellow | `#ffd02f` | Yellow accent |
| badge-yellow | `#facc15` | "New" badge |
| red | `#f24e1e` | Alert / accent red |

Rule: chrome is monochrome (black + white + grays); brand colour appears only in Rive illustration, badges and demo art. Rule: no shadows — separation is low-alpha white hairlines (`rgba(255,255,255,.25)`).

## 3. Typography Rules

- Single family: **Geist Variable** (`Geistvf`) everywhere (Times is a 2-hit fallback only).
- Preview specimen uses Geist from Google Fonts (the real deployed face).
- Body: 16px; product/legal body drops to 14px.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 60 / 63.6 | 600 | -1.8px |
| Sub-head (h3) | 24 / 26.88 | 600 | -0.7px |
| Eyebrow | 14–16 | 500–600 | uppercase, `#a1a1ab` |
| Body (p) | 14.08 / 18.1 | 400 | normal |
| Nav / UI | 14.08 / 18.1 | 500 | normal, `rgba(255,255,255,.5)` |
| Caption / label | 14 | 400–500 | normal |

Patterns: tight negative tracking on the 60px display (-1.8px); weight tops at 600; muted nav/body use half-alpha white rather than a separate gray token.

## 4. Component Stylings

### Buttons
- **Primary (hero, white pill)**: bg `#ffffff`, text `#000000`, radius ~`8px`–pill, 14–16px/500–600. Hover: bg darkens to `#e0e0e0` (`.a-ca_button:hover`).
- **Nav primary**: white `#ffffff` fill, black text, radius `8px`, h `38px`, pad `10px 16px`.
- **Secondary / "Upload files"**: dark pill on `#2d2d2d`-ish fill, white text, radius `8px`.
- **Ghost / nav link**: transparent, text `rgba(255,255,255,.5)`, radius `8px`, h `38px`.
- No disabled variant observed on marketing; anchors zero their outline on hover/active (`a:hover{outline:0}`).

### Inputs
- **Hero URL drop**: type `url`, h `68px`, bg `#2d2d2d`, radius `100px` (full pill), pad `12px 16px 12px 48px` (leading link icon), placeholder `#e2e3e7`. Focus: outline `#e2e3e7 3px` (`.a-ca_form_input:focus`).

### Cards / panels
- bg `#171718` / `#191919`, radius `16–20px`, 1px `rgba(255,255,255,.25)` or `#27272a` border, no shadow. Video-demo cards use rounded corners (~20px) over dark.

### Nav
- Transparent over black, `OpusClip` wordmark left (circular mark), dropdown links (14px/500 white-50), "Agent Opus" with a yellow "New" badge, right: "Sign in" ghost + white "Sign up - It's FREE" pill.

## 5. Layout Principles

- Centered hero: uppercase eyebrow → 60px display headline → 16px white-50 subhead → the pill URL input + white CTA + "or Upload files" → rounded video-demo cards below.
- Max content ~1200px; demo card rows extend wider and auto-scroll in marquees.
- Sections stack on black with generous vertical rhythm; logo/creator marquees separate bands.
- Edge-mask gradients (`linear-gradient(90deg, #000, transparent)`) fade marquee edges.

## 6. Depth & Elevation

- Radii: circles `50%`, `20px` (cards), `16px`, `10/10.08px`, `8px` (buttons), `6px`, full pill `100px/1000px` (inputs).
- **No box-shadows anywhere** — a fully flat dark surface. Elevation is implied by `#171718`/`#191919` surface steps over black and 1px low-alpha white borders.
- Borders: dominant `1px rgba(255,255,255,.25)` (40×), then `rgba(255,255,255,.1)`, `2px #ffffff` (focus/active), `1px #27272a`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.2s | ease | fades (88×) |
| background-color | 0.2s | ease | button/hover (59×) |
| color | 0.2s | ease | text hover (40×) |
| color, transform | 0.2s | ease | link hover (37×) |
| transform | 0.2s | ease | micro lifts |

- House transition: **0.2s ease** on opacity/background/color/transform. Signature easings `cubic-bezier(0.19,1,0.22,1)` (expo-out) and `cubic-bezier(0.25,0.46,0.45,0.94)`.
- Keyframes: `spin` (loader), `creators-marquee-desktop/mobile` (20s linear infinite), `growth-marquee-desktop/mobile` (40s linear infinite) — the auto-scrolling logo/creator bands.
- Libraries: **GSAP** and **Rive** both detected (Rive drives the colourful animated illustrations; 2 canvases + 4 `<video>` elements on the page).
- Does **not** honour reduced motion — 0 `prefers-reduced-motion` blocks.

## 8. Backgrounds, Effects & WebGL

- Flat black canvas; no WebGL/Three.js.
- 2 `<canvas>` (2d context — Rive-rendered illustration), 4 `<video>` elements (product demos, autoplaying).
- Gradients are edge masks only: `linear-gradient(90deg, #000, transparent)` and its 270deg twin, used to fade marquee ends.
- `backdrop-filter: blur(40px)` and `blur(20px)` on floating overlays. No grain/noise.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure `#000000` and the chrome monochrome (white + `#a1a1ab`/white-50 grays).
- Use Geist everywhere; 60px display at weight 600 with -1.8px tracking.
- Make the primary CTA a white pill (`#ffffff` / black text) that darkens to `#e0e0e0` on hover.
- Use a large `100px`-radius pill input (h 68px, bg `#2d2d2d`) as the hero's primary action.
- Reserve brand colour (opus-purple `#6723ff`, candy-blue, yellow) for Rive illustration and badges — never chrome.
- Separate surfaces with `#171718`/`#191919` steps and 1px `rgba(255,255,255,.25)` borders, not shadows.
- Use 0.2s ease micro-transitions and linear infinite marquees for social proof.

### Don't
- Don't add box-shadows — the dark surface is flat.
- Don't let brand colours into buttons or nav; keep CTAs white/black.
- Don't exceed weight 600 or use positive tracking on display type.
- Don't introduce a light theme — the marketing surface is dark-only.
- Don't rely on reduced-motion being honoured (it isn't); keep motion subtle.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 479px | small phone |
| max 767px / min 768px | phone ↔ tablet |
| max 991px / min 992px | tablet ↔ desktop |
| min 1280px | desktop |
| min 1440px | wide desktop |
| min 1920px | ultra-wide |

- Standard Webflow ladder (479/767/768/991/992 + 1280/1440/1920 custom). Marquees swap desktop/mobile keyframe variants.
- No `prefers-color-scheme` blocks (0) — dark by default, no toggle. No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Surface `#171718` · Text `#ffffff` · Muted `#a1a1ab` / white-50 · Accent (illustration only) `#6723ff`
- Font: Geist · Body: 14–16px · Radius: 8px control / 16–20px card / 100px pill input · Control height: 38px btn / 68px hero input
- Focus: outline `#e2e3e7 3px` · Hover fill: white → `#e0e0e0` · No shadows

<opus-clip-marketing_design_language>
Use the OpusClip marketing design language: pure-black `#000000` canvas, monochrome chrome — white text and `#a1a1ab`/`rgba(255,255,255,.5)` grays — with a colourful brand system (opus-purple `#6723ff`, sweet-purple `#a259ff`, candy-blue `#72ffff`, light-blue `#00d7ff`, playful-yellow `#ffd02f`) held OFF the chrome and reserved for Rive-animated illustration and badges. Single family Geist Variable: 60px display weight 600 at -1.8px tracking, 24px sub-heads, 14–16px body, muted nav in half-alpha white. Primary CTA is a white pill (`#ffffff` fill, black text) that darkens to `#e0e0e0` on hover; nav pills h38 radius 8px; the hero's primary action is a large 100px-radius pill input (h68, bg `#2d2d2d`, placeholder `#e2e3e7`, focus outline `#e2e3e7 3px`). Cards are `#171718`/`#191919` surface steps over black with 1px `rgba(255,255,255,.25)` borders and NO shadows — the dark surface is completely flat. Rounded video-demo cards (radius ~20px) auto-scroll in 20–40s linear marquees; house transition 0.2s ease on opacity/bg/color/transform with an expo `cubic-bezier(0.19,1,0.22,1)`; GSAP + Rive power the motion and it does not honour reduced motion. Feels: dark, crisp, product-first, high-contrast. Avoid: box-shadows, brand colour in buttons or nav, weight above 600 or positive tracking on display, and any light theme.
</opus-clip-marketing_design_language>