Eat Real Food

Eat Real Food uses a high-contrast, text-dominant visual system, evoking authority and directness. Dark charcoal text on light, almost creamy backgrounds creates a stark, legible interface. Typography is the primary visual driver, featuring prominent, oversized headlines and deliberate letter spacing. The system is largely monochrome, punctuated by a vivid red that acts as a symbolic warning and highlight for critical data points, reinforcing the urgent message of the content. Use Midnight Ink (#110000) as the primary text color and for most interactive elements that are not primary CTA. Apply Light Linen (#f3f0d6) as the default background for large page sections to maintain a consistent neutral base. Render large headlines (96px and above) with Die Grotesk D, weight 700, and a line height between 0.84 and 0.96 for maximum impact. Employ the Pill Button with Buttermilk background and 40px border-radius for primary calls to action, ensuring an approachable yet distinct interactive element. Utilize Warning Red (#d50000) strictly for data visualization, warning indicators, or to highlight critical factual elements, never as a general accent. Maintain comfortable spacing between elements with a base unit of 4px and elemental gaps typically at 24px. Elevate critical content cards with Paper White background and the specific dual shadow: rgba(0,0,0,0.1) 0px 10px 40px 0px, rgba(0,0,0,0.1) 0px 20px 60px -10px. Avoid generic, non-brand specific imagery or illustrations; stick to hard-hitting data visualizations or minimal, focused product shots. Do not introduce additional bold accent colors; the system relies on the stark black/white/red contrast. Refrain from using thin weights for body text; maintain a minimum of Die Grotesk A 400 for legibility and presence. Never overcrowd sections with too much text; leverage the impactful display typography to convey messages concisely. Do not use subtle, muted interactive states for primary actions; primary actions should always be clearly distinct in color and shape. Avoid excessive use of elevation; reserve shadows for critical interactive cards to maintain visual clarity and weight. Do not use standard 4px or 8px border radii for buttons; always use the distinct 40px pill shape or ghost styles.