Build Assets
Hero Pattern

Site Footer

Page-level footer with navigation, legal, and brand elements.

Platform: webTags: footer, navigation, legal, sitemap

Layout

4-column grid (product links / company links / resources / social) above a legal bar. Background: dark navy or light grey — distinct from page content. Full-width, max-content 1400px.

Content Slots

required

Logo

Brand mark, links to homepage. Reversed variant on dark backgrounds.

required

Navigation columns

3–4 columns of grouped links. Column heading 11px uppercase. Links 14px.

required

Legal bar

Bottom strip: copyright, Privacy Policy, Terms of Service, cookie settings.

optional

Social links

Icon links to social profiles. 20–24px icons, 44px touch targets.

optional

Newsletter CTA

Email input + subscribe button. Minimal — one line.

optional

Tagline

One-line brand statement beneath logo.

Hierarchy Rules

  • Legal bar is last — always present, never the focus
  • Most-used links should appear in the top-left column (F-pattern scanning)
  • Footer navigation should not duplicate main navigation — add depth, not repeat
  • Logo in footer should be smaller than in the header (supporting, not primary)
  • Social links should be at the end of footer scan, not the beginning

Source Topic

designing brand identity

Standards and Guidelines

Creating documentation that enables consistent brand application at scale