A pure-black consumer-AI-video marketing page whose discipline is the story: the canvas is #000000 and nearly everything on the hero is white Geist type and one white pill CTA, so the surface reads as strict high-contrast monochrome even though a large colourful token system sits underneath it. The brand palette — opus-purple #6723ff, sweet-purple #a259ff, candy-blue #72ffff, light-blue #00d7ff and a playful yellow #ffd02f — is rationed almost entirely to Rive-animated illustration, badges and demo art, and never once fills a button or nav item, which stay white-on-black or half-alpha-white ghost. The signature hero move is a large 100px-radius pill INPUT (“Drop a video link”, h68, bg #2d2d2d, placeholder #e2e3e7) as the primary action, paired with a white “Get free clips” button that darkens to #e0e0e0 on hover, above rounded video-clip demo cards that auto-scroll in 20–40s linear marquees. Type is a single Geist Variable family: a 60px display at weight 600 and -1.8px tracking, 24px sub-heads, 14–16px body, with muted nav and body set in rgba(255,255,255,.5) rather than a separate gray. Depth is refused — there are NO box-shadows anywhere; separation comes purely from #171718 and #191919 surface steps over black and a dominant 1px rgba(255,255,255,.25) hairline, with radii running 8px controls, 16–20px cards and full 100px pills. Motion is a 0.2s ease house transition on opacity, background, colour and transform with an expo cubic-bezier(0.19,1,0.22,1), driven by GSAP and Rive, and it deliberately does not honour reduced motion. The captured timeline/editor lives in the app behind sign-in; the marketing surface itself is a clean dark product page, not an editor.
⚠ needs-dashboard
Browse OpusClip in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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)).
Geistvf) everywhere (Times is a 2-hit fallback only).| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.