Brasserie Gérard (Site of the Day - Dec 18, 2010) — UI design breakdown
[gallery columns="2"] Featuring some state of the art HTML5 and CSS3 standards it also just so happens to be our first website to feature a bonus dimension! Sourced from Awwwards. Use this page as a UI breakdown: reverse-engineer hierarchy, color roles, and interaction cues before you remix ideas into your own screens.
- Study how Brasserie Gérard separates primary actions from secondary content—note spacing, type scale, and focal contrast. Recognized as Site of the Day - Dec 18, 2010.
- Extracted palette (#2779A7, #9C9C9C): check which hues carry brand vs utility chrome.
- Darkest #2779A7 vs lightest #9C9C9C sits around 1.7:1, which is soft—better for backgrounds than small body copy.
- Ask: what would break first if this layout were a product dashboard—navigation clarity, scan order, or color contrast?
- Related themes: Hotel / Restaurant.
