Preview image. Unlock full-res
Guideline page on stylized device frames, showing four empty gradient-stroke rounded frames across white, violet, cream, and deep-violet backgrounds.
Summary
A guideline page defining the stylized device frame: a thin gradient-stroke rounded outline used in place of realistic device hardware.
Visual description
White page, running header (page 64, "Product Imagery / Device Frames"). The left column carries the "Device Frames" heading, body copy, and a "Considerations" bullet list (never use realistic frames for product UI in a photo; Poppy-to-Cobalt gradient preferred; the stroke can fade to the background). The right two-thirds is a 2x2 grid of empty stylized frames shown on four backgrounds: white, electric violet, cream, and deep violet. Each frame is a rounded-rectangle screen with a subtle drop shadow, outlined by a thin poppy-to-cobalt gradient line whose visibility shifts against each ground.
Key takeaway
Replacing literal device hardware with a single thin gradient-stroke frame, then proving it across multiple background colors so the team sees how the stroke adapts. The subtle drop shadow on the inner screen supplies just enough dimension.
Reuse notes
The spec for framing any screenshot or stylized UI. Use the gradient frame by default and let it fade to the background color when it competes; omit it entirely if it distracts. Never use this stylized frame around UI shown inside a real photograph.
From this deck: Docusign stylized device frames
View deck
