warbyparker.com

How it works

hero:

Full-width photographic hero with man wearing sunglasses occupies top 25% of viewport; lime-green sans-serif headline and CTA buttons positioned left-aligned in upper-left quadrant as semi-transparent overlay.

layout:

Hero image spans full width, followed by horizontal scroll or grid of 9 eyewear product tiles arranged in 3×3 matrix below fold; products shown as flat icon-style silhouettes with minimal descriptive text.

type:

Large geometric sans-serif (likely modern grotesque) for hero headline in all-caps; smaller sans-serif for body copy and product labels; hierarchy driven by size contrast and weight, not color variation.

colors:

Lime-green accent text (#BFFF00 range) for headlines and CTAs creates high contrast against photographic background; neutral blacks and whites for body text and UI chrome; image itself provides warm neutral tones.

distinctive:

Eyewear products displayed as thin-line monochromatic silhouettes rather than realistic product photography, creating a catalog-style taxonomy feel within an otherwise lifestyle-driven hero composition.