# Design from Reference: Hume AI Generating New Voice Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Hume AI - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad408c910b3adf9e48bf5_6acad195857335a2ffbd000b_cms-315e7cb0983f9858bb9008ac.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:** Minimal voice-generation workspace using monochrome surfaces, soft outlines and rounded controls. ### Page composition - **Capture:** 2880 × 2172 screenshot pixels; estimated 2× CSS scale. - **Structure:** Top account bar, left product navigation and a narrow centered Voice design card containing prompt controls above generated samples. ### Information hierarchy - **Priority:** Text sample and optional voice prompt establish input; Randomize/Generate samples precede three selectable audio rows and a dark Select sample action. ### Typography - **Family:** Rounded sans serif; exact family unverified. - **Estimated CSS sizes:** Page heading 24px, field/section labels 16px, body 14px and helper/counter text 12px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, outline #E5E5E5, selected navigation #EDEDED, black #000000, action charcoal #262626 and helper gray #A3A3A3. ### Components - **Elements:** Two textareas with counters and small generation tools, outlined pill actions, radio sample selectors, circular play controls and filled selection button. - **Estimated geometry:** Main card approximately 576px wide, 12px outer radius, 32px padding, 8px field radii and 56px sample rows. ### Visual rhythm - **Spacing:** Dense input helpers stay close to their fields; larger gaps distinguish generation and sample-selection stages. ### Responsive - **Suggested adaptation:** Collapse sidebar, use fluid card width and stack paired generation actions. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve the input/generate/compare/select sequence and compact playback affordances. Keep optional prompt guidance distinct from entered text. 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.