Preview image. Unlock full-res
Guideline page on stylized device frames, shown as a four-quadrant grid of thin gradient-stroke frames over light and dark fields.
Summary
A guideline page defining the stylized device frame, a thin gradient-stroke rounded rectangle used in place of realistic device chrome, shown across four color backgrounds.
Visual description
White page, standard running header (page 64). The left column holds the "Device Frames" headline, two intro paragraphs and a "Considerations" list (never use realistic frames over a photo; Poppy-to-Cobalt gradient preferred; screen can carry a subtle drop shadow). The right two-thirds is a 2x2 specimen grid: empty stylized device frames, each a thin poppy-to-cobalt gradient stroke with rounded corners and an inner shadowed screen panel, shown on a white field, a royal-blue field, a cream field and a deep-violet field to demonstrate how the gradient holds on different backgrounds.
Key takeaway
Replacing literal device mockups with a single thin gradient outline, then proving it on four backgrounds at once. The empty frames keep the page about the container itself rather than any content.
Reuse notes
Reach for this when you want product UI framed simply and on-brand without dated bezels. The four-up background test is a smart way to document any element's contrast behavior. Reuse the same gradient stroke that frames screenshots elsewhere in the deck for consistency.
From this deck: Device frames guidance
View deck
