Preview image. Unlock full-res
Clean workbench, energetic highlight. The interface feels like a well-organized array of digital tools on a bright surface, with a single, clear visual thread guiding user action.
Dub presents a precise, pragmatic aesthetic, reminiscent of a clean workbench for digital tools. Its foundation is a crisp, highly functional gray scale complemented by a single energetic orange accent, creating focused visual hierarchy without unnecessary embellishment. Subtle shadow work and soft border radii on interactive elements provide a contemporary feel while maintaining directness, avoiding distraction for the product-focused user. Prioritize Ember Glow (#f97316) exclusively for the primary call-to-action to maximize visual impact and guide user flow. Use Jet Black (#171717) for all main headlines and body text to ensure strong readability and visual authority. Apply 8px border radius to all buttons to provide a soft, approachable feel while maintaining structure. Utilize Cloud Gray (#e5e5e5) as a subtle horizontal divider between sections or within complex UI elements to maintain a clean layout without harsh lines. Maintain consistent internal padding of 16px for card components to create breathing room for content. Ensure all interactive elements, especially inputs and buttons, have a visible border in Cool Gray (#d4d4d4) or equivalent for clear affordance. Employ the Inter typeface at weight 400 for all body copy to maintain legibility and a professional tone. Do not introduce additional vibrant accent colors; the Ember Glow (#f97316) is designed to be the single point of visual emphasis. Avoid using harsh, high-contrast borders for content containers; opt for subtle shadows or lighter gray borders like Cloud Gray (#e5e5e5). Do not use highly decorative fonts for body text or UI labels; stick to Inter for clarity and consistency. Refrain from excessive use of bold typography; reserve higher weights (600, 700) for specific emphasis on headings or key phrases. Do not deviate from the established spacing scale (multiples of 4px) to ensure uniform layout and rhythm. Avoid heavy or complex drop shadows; use the subtle rgba(0, 0, 0, 0.05) 0px 1px 2px 0px shadow for elevation. Do not use dark backgrounds extensively; the design relies on a light theme with ample white space.
