Page & Browser Fill Backgrounds
Last updated: September 10, 2015 at 22:09 pm

The page background is where your application’s main content will reside. The browser fill is the area displayed when a browser window is expanded past your maximum page width.


Visual example of the element:


What problem does this element or pattern solve?
Although there are actually two separate items defined within this standard, they are very closely related and the information needed to define each is limited. These fills help contribute to your branding and reinforce where the user is.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Will your page background and browser fill color be the same or different? Matching colors will give the illusion of centered content regardless of the browser width. Contrasting colors will define maximum page boundaries clearly.
  • If the browser fill color is different than the page background, what is that color?
  • Will you use page backgrounds or browser fill colors to visually define content sections, page types, sub-brands, or micro-sites?
  • Are backgrounds limited to solid colors, or are patterns and/or images permitted? (If patterns or photos are permitted, be sure to show examples and provide links to approved images.)

Sample Content

  • Page Background: YourCompany Light Gray
  • Browser Fill: #000000

MICROSITES

  • Page Background: YourCompany Light Gray
  • Browser Fill (Sub-brand A): YourCompany Purple
  • Browser Fill (Sub-brand B): YourCompany Orange
  • Browser Fill (Sub-brand C): YourCompany Blue


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
Not Applicable (Remember: no field should be blank!)
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply