Brand OS

Frames

Our frames are flexible and versatile containers that mimic the look and behavior of digital tiles in a user interface.

They help focus attention on a key product or headline, or to organize multiple images into a single 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!

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.

2

Don't decorate.

Frames are functional tools that exist to direct the viewers’ eye to a particular focal area or to thoughtfully tell a visual story. Don’t add unnecessary frames as aesthetic fillers.

3

Keep it clean.

Alignment and spacing between frames should be neat, uniform, and intentional. Do not approach frames with a collage mentality.

Frame Notes

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.

Frame Notes

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.

Optical Guide

After establishing a corner radius using our formula, check for optical correctness using the examples shown here. If your radius is too large or too small, adjust accordingly.

Too Small

Just Right

Too Large

Optical Guide

After establishing a corner radius using our formula, check for optical correctness using the examples shown here. If your radius is too large or too small, adjust accordingly.

Too Thin

Just Right

Too Thick

Frame Behaviors

Our frames are designed to interact with photography and footage by embodying three distinct behaviors:

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 max of three windows can be used per static layout to keep our message concise and avoid overcrowding. Images should be assembled with a common theme or message.

Align our windows neatly to our grid. Wherever possible, they should stretch the full height or width between our margins.

1

Always leave clear space equal to our margin between frames and surrounding content.

2

Windows may bleed off one or two edges to mimic a scrolling motion. Edges must be on opposite sides.

3

Up to three windows may be used in a single static layout—no more.

1

2

3

Window Tips

When using windows in layout, always follow these tips for consistent application:

Alignment

Do align windows into neat, tidy blocks that occupy the full width or height of a layout.

Don't apply frames in a way that feels haphazard, scattered, or misaligned.

Cropping

Do crop windows off opposite edges of a layout to mimic scrolling or swiping.

Don't crop windows off adjacent layout edges.

Tiles

Tiles mimic the aesthetic and behavior of a digital shopping experience. Up to five tiles can be used per static asset if they are neatly aligned and uniform in size. More tiles can be used in motion.

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, follow these tips for consistent application:

1

A product name or price can 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.

2

Products are shot straight-on or overhead, resting on (or floating above) a surface. Always include natural shadows for grounding and depth.

3

A product may extend past the edge of its tile, where appropriate. Products should occupy the same visual space, regardless of actual size.

4

Choose tile colors to complement products or to represent specific seasonal moments. Maintain sufficient contrast between a product and its background.

Evergreen Colors

These are our preferred tile colors, used regardless of season or category.

Seasonal Colors
Example Only

For a moment like “Mother’s Day”, choose tile colors from that occasion’s specified seasonal palette.

Outlines

Outlines are used over lifestyle photography or footage to focus attention on a key product or moment. Only one outline may be used per layout. They can't be applied with other frames or frame behaviors.

Outlines are particularly effective in motion, as shown in examples 2 and 3. They are often used with price lockups, product names, or buttons.

1

When aligning text to an outline, always leave clear space equal to our margin.

2

Outlines may be flexibly positioned to best highlight product within a scene.

3

An outline may interact with the subject of its focus, for added depth and dynamism.

1

2

3

Outline Tips

When using outlines in layout, always follow these tips for consistent application:

Color

Do apply frames in White or Bentonville Blue to match text.

Don't apply frames in any other colors.

Interaction

Do allow frames to interact with subjects or products

Don't awkwardly overlap subjects or products, especially faces.

Frame Don’ts

Don't apply frames within other frames.

Don't collage or overlap frames.

Don't use multiple outlines per layout.

Don't mix all out frame styles together.

Don't use solid frames as decorative elements behind text or headlines.

Don't use solid frames behind product in lifestyle imagery or footage.

Don't use outlines as decorative elements around text or headlines.

Don't 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 digital shopping experience in non-digital comms.

By using buttons in static or motion assets, our design 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 can 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 can be created within each category, provided they follow these styling rules.

CTA Buttons

CTA buttons may be used in place of standard typeset CTAs when a more digital aesthetic or when our goal is to drive viewers to our website. CTA buttons always use title case capitalization.

1

CTA button may be placed in the lower right corner, sized to match the height of our wordmark.

2

CTA button may be placed in the lower left corner beneath our headline.

3

When using True Blue backgrounds, our solid CTA button color switches to Everyday Blue.

1

2

3

Action Buttons

Action buttons pair with photos to tell product stories. They may list the names of individual products or speak to more emotional product benefits. A well-written action button may stand alone as a headline. Use sentence case capitalization, unless naming a specific product or brand.

1

A maximum of three action buttons may be used per layout to highlight different products or brands.

2

A single action button may be centered within a layout, especially over a white background.

3

When placed over a photo, action buttons may be arranged organically to best suit the image.

1

2

3

Search Buttons

Search buttons mimic the action of searching for a product on Walmart.com. They use lowercase capitalization to simulate a user typing, unless naming a specific product or brand. Only one search button may be used per layout.

1

Search buttons only appear in solid white or outlined formats to mimic familiar UI cues.

2

Search buttons may be organically placed over an image or centered within layout.

3

Search buttons may be used in combination with action buttons. Limit yourself to one of each.

1

2

3

Accent Buttons

Accent buttons are added to frames to enhance the feeling of a digital shopping experience. They’re sized according to the radius of their frames, nestling into the corner with a smooth margin. The examples here indicate an “Add to Cart” action.

1

Accent buttons are placed in the corner of product tiles or outlined frames.