Frames
Brand OS
Our frames are flexible and versatile containers that mimic the look and behavior of digital tiles in a user interface.
They help to focus attention on a key product or headline, or to organize multiple images into a single, cohesive layout
Ground Rules for Frame Usage
Our frames are powerful, flexible tools that can easily be overused and abused. With great power comes great responsibility! Approaching our frames with the right mindset will allow you to be a good steward of our visual system.
Whenever you’re working with frames, please remember three key points:
1 Less is more.
Avoid the impulse to overuse frames. Keep the number of frames per layout to a minimum. One skillfully executed frame is more powerful than three competing ones. Not every layout needs to have a frame; diversify your compositions to avoid frame fatigue.
2 Do not decorate.
Frames are functional tools that exist to direct the viewers’ eye to a particular focal area or to thoughtfully tell a concise visual story. Do not add unnecessary frames as aesthetic fillers.
3 Keep it clean.
Alignment and spacing between frames should be neat, uniform, and intentional. Frames should not feel haphazard or messy, and they should never overlap. Do not approach frames with a collage mentality.
Corner Radius
To determine the corner radius of a frame, divide its longest side by 15. This allows corners to scale proportionately across applications. Depending on the size and dimensions of your frame, this initial measurement may need to be adjusted for optical correctness.
When using multiple frames in a single layout, all corner radii should match the average radius measurement—not the smallest, not the largest.
For standard 1920x1080 presentations, we always use a predetermined corner radius of 30px.
Outline Weight
To determine the correct outline weight for a frame, divide its longest side by 150. Depending on the size and proportion of your frame, this number may need to be adjusted for optical correctness.
For standard 1920x1080 presentations, we always use a predetermined stroke weight of 1pt.
Frame Behaviors
Our frames are designed to interact with photography and footage by embodying three distinct behavors:
1 Windows holds photography or footage
2 Tiles helps ground isolated products.
3 Outlines emphasize a focal point
Window
We use windows to hold photography and footage. A maximum of three windows may be used per static layout to keep our message concise and avoid overcrowding. Images should be thoughtfully assembled with a common theme or message. Three well-chosen images can tell any story.
Align our windows neatly to our grid. Wherever possible, they should stretch the full height or width between our margins.
1Always leave clear space equal to our margin between frames and surrounding content.
2Windows may bleed off one or two edges to mimic a scrolling motion. Edges must be on opposite sides.
3Up to three windows may be used in a single static layout—no more.
2
3
Window Tips
When using windows in layout, always follow to these tips for consistent application:
Tiles
Tiles mimic the aesthetic and behavior of a digital shopping experience. Up to five tiles may be used per static asset, provided they are neatly aligned and uniform in size. More tiles may be used in motion, if desired.
Tiles are applied over White backgrounds, to feel more digitally-native while allowing for wide variety of tile colors.
1 Tiles may float in the center of a layout when featuring a single product.
2 Up to five tiles may be used in a single static layout—keep them tidy and uniform in size.
3 A single tile may be combined with a single window, where appropriate.
1
2
3
Tiles Tips
When using tiles in layout, always follow to these tips for consistent application:
A product name or price may be set inside a tile, aligned to an interior corner. Leave generous padding, roughly equal to the margin of the layout. Text must be in Bentonville Blue or White.
Products are shot straight-on or overhead, resting on (or floating above) a surface. Always include natural shadows for grounding and depth.
A product may extend past the edge of its tile, where appropriate. Products should occupy the same visual space, regardless of actual size.
Choose tile colors to complement products or to represent specific seasonal moments. Be sure to maintain sufficient contrast between a product and its background.
Frame Don’ts
Do not apply frames within other frames.
Do not collage or overlap frames.
Do not use multiple outlines per layout.
Do not mix all our frame styles together.
Do not use solid frames as decorative elements behind text or headlines.
Do not use solid frames behind product in lifestyle imagery or footage.
Do not use outlines as decorative elements around text or headlines.
Do not use outlines in any color other than Bentoville Blue or White.
Buttons
Our “Brand OS” buttons are graphic elements that mimic the look of a web-based interface to simulate an online shopping experience in nondigital comms.
By incorporating buttons into static or motion assets, our design language reflects a digital-first shopping experience and reinforces our tech-forward positioning.
Styling
Our buttons are pill-shaped with fully rounded ends, appearing in both outlined and solid formats. Outline weight should optically match the weight of our type (set in Everyday Sans Regular) and any symbols included (magnifying glass, plus sign, etc).
These are our default colorways, which prioritize True Blue for solid buttons. Over True Blue backgrounds, Everyday Blue buttons may be used. Our search bar is the only button that may appear in solid white to reflect familiar UI cues.
Note
This is not an exhaustive list of all possible buttons. Additional buttons may be created within each category, provided they follow these styling rules.
