Preview image. Unlock full-res
Pristine Digital Workspace. A highly organized, clean desktop environment where every element has its place and purpose.
Dropbox's visual style is that of a confident, established tech product: a pristine, spacious digital workspace with pops of vibrant interaction. Dominant bright surfaces and substantial, clear typography create an atmosphere of straightforward efficiency and trustworthiness. The strategic use of a vivid royal blue for primary calls to action, contrasted with deep graphite text and subtle, almost invisible backgrounds, maintains a focused and uncluttered user experience. Prioritize Royal Blue (#0061fe) for all primary call-to-action buttons, ensuring consistent visual hierarchy. Use Deep Graphite (#1e1919) for all primary body text and main navigation links against light backgrounds. Establish clear content separation using Off-White Canvas (#f7f5f2) for backgrounds and Almond Dust (#eee9e2) for elevated card surfaces. Apply 16px border-radius to all interactive buttons for a soft, approachable feel, unless explicitly overridden by component design. Maintain a sense of generous whitespace; ensure a minimum of 48px vertical spacing between major sections. Utilize Sharp Grotesk (Montserrat substitute) for all headlines to convey a clear, robust brand voice. For multi-column layouts, ensure column gaps are set to at least 24px to prevent visual crowding. Avoid using highly saturated accent colors for text unless they are interactive links in Royal Blue. Do not introduce strong shadows; the design relies on subtle background color shifts for depth. Refrain from using overly decorative fonts; stick to Atlas Grotesk Web (Inter substitute) for all body copy and UI elements. Do not use border-radius values less than 8px, as the system prefers slightly rounded corners for most interaction points. Avoid overly dense information blocks; use generous paragraph line-heights (e.g., 1.5 for 16px text) and element spacing. Do not use stark black (#000000) for regular body text; reserve it for distinct headings or strong accents only. Do not use full-width layouts; constrain all content within a maximum width of 1150px.
