The Ate Local design system
One consistent visual language: modern, friendly, premium, and local. Use these guidelines any time you build, print, ship, or share on behalf of Ate Local.
The mark
Do: preserve clear space equal to the mark height on every side. Use amber-gold on charcoal; charcoal on light.
Don't: rotate, stretch, recolor to unapproved hues, place on busy imagery without a scrim, or reconstruct the mark.
Color system
Never hardcode hex values in components. Use semantic Tailwind classes such asbg-primaryor text-muted-foreground.
Voice on the page
Body copy stays quiet. It carries specifics — hours, distances, monthly reservation prices — while the display face carries the mood.
Cards & badges
Rounded 2xl, subtle border, quiet elevation.
For paid placements and premium moments.
Muted surface for placeholders and hints.
Iconography
Use lucide-reacticons at 16–20px with 1.75px strokes. Tint with text-primaryor text-muted-foreground only.
Spacing & radius
Photography & illustration
Warm, natural light. Real hands, real plates. Never overly styled, never top-down flat-lays with props.
Line-only, single-stroke, amber-gold on charcoal. Reserved for empty states and marketing.
Subtle glows, gentle pulses, 200–400ms eases. Nothing bounces. Nothing announces itself.
Need launch assets, decals, or press-kit materials?
Open the Media Kit