re_ grocery

re_ grocery uses a sun-baked tactile aesthetic, blending friendly serif typography with modern sans-serifs, all set against a warm, off-white canvas. A singular vibrant orange serves as the brand's energetic accent, appearing predominantly as an outline for interactive elements and as a solid background for key navigation or critical sections. The layout favors ample whitespace and clearly defined content blocks, emphasizing product-focused imagery and maintaining a focused yet approachable shopping experience. Use Burnt Orange (#f74c25) as a border or underline for interactive states and primary actions where a full-fill background would be too heavy. Employ the ITC Garamond W01 Book Narrow font for all prominent headlines and section titles to convey a classic yet spacious feel, specifically at weights 400 and sizes 40px, 80px, or 100px. Maintain a clear visual hierarchy by setting primary body text in Suisse Int'l at 15px or 16px, with a neutral Rich Espresso (#000000) color. Apply 1440px border-radius to all buttons, cards, and tags, creating a soft, pill-shaped aesthetic. Utilize Cream Canvas (#f7f6f2) as the default background for most content sections and product cards, providing a consistent base surface. Use tight negative letter-spacing for large display text (Suisse Int'l 180px: -0.033em, ITC Garamond 100px: -0.010em) to create impactful, visually dense typography. Section containers should be implicitly separated by Cream Canvas (#f7f6f2) backgrounds and generous section gaps, maintaining an open and breathable layout. Avoid using Cream Canvas (#f7f6f2) text on a Desert Sand (#efede7) background due to insufficient contrast (1.1:1 fail). Do not use dark, heavy shadows; the system relies on flat surfaces and color contrast for visual separation. Avoid arbitrary border-radius values; always use 1440px for soft-edged elements or 0px for sharp edges, as defined by the design system. Do not introduce new vibrant colors outside of Burnt Orange; the palette is intentionally restrained to this single accent hue. Avoid dense, text-heavy blocks without ample whitespace; the design system values open layouts and clear content distinctions. Do not use highly saturated photography that competes with the brand's Burnt Orange; imagery should have a natural, often muted, or product-focused aesthetic. Avoid using generic sans-serifs for headlines; stick to ITC Garamond W01 Book Narrow for distinct brand voice in display text.