# Design from Reference: Duna Blog Feed Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Duna - **Category:** Blog Feed - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3afc2028efdec71b0be_6acad161c910b3adf9e359de_cms-8eaf0d2b47fb834b92304888.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:** Restrained editorial news page with warm neutrals, rounded photography and painterly landscape imagery. ### Page composition - **Canvas:** 2940 × 5572 screenshot px; CSS estimates assume approximately 2× capture. - **Structure:** Minimal navigation; split featured story with workflow illustration; six cards in a three-column grid; Read more list with two compact rows; large illustrated landscape footer with five link columns. - **Width:** Estimated CSS content approximately 1120 px; broad side margins and 44–48 px column gaps. ### Information hierarchy - **Priority:** Featured headline dominates the upper section; image-led cards carry secondary stories, with category and read/watch time in small muted metadata. - **Footer:** Teal sky and landscape create a strong visual close without a separate promotional CTA. ### Typography - **Family:** Modern sans serif with compact proportions; exact font unverified. - **Scale:** Estimated CSS feature title 44–48 px, Read more heading 36 px, card titles 18–20 px and metadata 12 px. ### Colors & surfaces - **Sampled palette:** White #FFFFFF; warm neutral #EDECE7; near-white #F7F7F5/#EFEEE9; footer teal #46838C. - **Imagery:** Natural portrait tones and painterly green/gold landscapes; dark brown-black navigation action contrasts with the neutral top. ### Components - **Feature:** Rounded pale illustration panel contains a vertical search/details/representatives flow; text sits alongside. - **Story cards:** Square-ish rounded images, nearly borderless containers, title beneath and compact category/duration line. - **Read more:** Small square thumbnail, title and date row separated by faint rules; footer links overlay the upper sky while legal details sit near the bottom. ### Visual rhythm - **Spacing:** Estimated CSS image corners 12–16 px; approximately 64–100 px between major sections. Repeated card image dimensions unify varied artwork. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Stack the feature, reduce grids to two then one column, and keep footer text on a sufficiently plain sky region. Preserve legible metadata. ### Adaptation guidance - **Preserve:** Warm editorial restraint, generous margins, rounded images and landscape-led footer. - **Replace:** Use supplied articles, approved portraits and original landscape art; do not reproduce reference funding claims. 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.