# Design from Reference: Abyssale Product Video Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Abyssale - **Category:** Product Video - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcb6e8313d4c6c0cc77e4_6acbc90cd69dbc5db100adfc_cms-139be73d3314135ea0c46c2c.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** A paused embedded product video fills the entire capture, using a darkened collage of promotional designs behind an oversized white brand mark. - **Mood:** Angled panels, travel photography and navy/yellow graphics create a dynamic marketing composition, softened by blur and a dark overlay. ### Page composition - **Capture:** The source measures 1440 × 818 image pixels. It shows a near-16:9 video player; surrounding website layout is not visible. - **Background:** A tightly packed collage runs beyond every edge, with rectangular design panels arranged on a diagonal rather than a conventional page grid. - **Center:** A very large white Abyssale symbol and wordmark span the central area. A compact dark play control overlaps the middle. - **Player chrome:** A circular channel icon and title sit at the upper left, Copy link at the upper right and YouTube branding at the lower right. ### Information hierarchy - **Brand dominance:** The central white wordmark is the clearest and largest element, contrasting with the dimmed collage. - **Playback action:** The white triangular play icon provides the principal interaction. - **Secondary context:** The video title identifies the content in the top corner. Individual background designs remain illustrative rather than functioning as page controls. ### Typography - **Brand mark:** The central wordmark uses a large rounded geometric sans-serif style; exact font identity is unverified. - **Player text:** The title is small white sans serif, approximately 18 px in the source. Copy-link text is smaller. - **Collage type:** Embedded designs mix bold display headlines, compact body text and small action labels, with varying rotations and scales. ### Colors & surfaces - **Measured highlights:** ICC-aware sRGB sampling yields #FFFFFF in the central logo and player icons. - **Measured dark tones:** Collage/overlay samples include navy #282157 and blue-grays #3D4255 and #414659. - **Measured muted tones:** #A8A9BB appears in softened light design areas. - **Photographic accents:** Teal sea imagery, warm yellow blocks and pale design panels remain visible beneath the dark treatment. ### Components - **Video poster:** A full-bleed image acts as the player surface, with no visible surrounding card or page padding. - **Play control:** A small dark rounded rectangle, approximately 70 × 50 image px, contains a centered white triangle. - **Channel/title group:** A white circular icon and short title align horizontally near the top-left edge. - **Utility overlays:** Copy-link and YouTube branding occupy opposite right corners; no timeline or transport bar is visible in this paused state. ### Visual rhythm - **Diagonal movement:** Rotated panel edges and repeated rectangular designs create a sweeping rhythm across the frame. - **Central anchor:** The horizontal white logo stabilizes the busy background and establishes a clear focal point. - **Edge placement:** Small player controls stay near the corners, leaving the center available for the brand and play action. ### Responsive - **Evidence boundary:** Only the static player poster is shown; responsive behavior is a recommendation. - **Aspect ratio:** Preserve the video's aspect ratio in a fluid embed and scale the poster with the player. - **Control access:** Retain sufficiently large playback and utility targets on small screens. - **Cropping:** Avoid cropping away the central logo or play control if using the image as a responsive preview. ### Adaptation guidance - **Poster strategy:** Use a branded central mark over a product-output collage to communicate variety before playback. - **Contrast control:** Apply a consistent dark overlay so the brand and play affordance remain readable over mixed imagery. - **Accessible video:** Provide a descriptive player title, keyboard-operable playback and captions for the actual video. - **State boundaries:** The capture verifies only the paused poster. Video motion, audio, duration and subsequent scenes are not visible. - **Measurement use:** Treat source pixels as image measurements, not verified CSS dimensions of an embedding page. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.