# EATS ON 601 — Design System > A roadside food park, local hangout, weekend market, and community lawn all in one. Mocksville's gathering place right off Highway 601 in Davie County, NC. Friendly. Proud. Local. Family-first. --- ## 1 · Brand Overview **Eats on 601** is a single-location community destination in **Mocksville, NC** (Davie County) sitting right on US Highway 601. It is **not just a food truck lot** — it's a place for weekday lunches, weekend vendor markets, family nights, car meets, outdoor events, local makers, kids running around, and lawn chairs in the grass. The brand world is roadside signage, vintage US-route shields, paper map margins, and church-supper hand-lettering — applied to a mobile app (who's here today, what's on this weekend), a marketing website, on-site signage, and event collateral. **Core brand idea:** *Eats on 601 is where Mocksville pulls off the road, grabs something good, and stays awhile.* **Personality:** Friendly. Local. Positive. Family-first. Proud of Mocksville. Welcoming to everyone. Easygoing, not fancy. Energetic when promoting events. Supportive of small businesses. Roadside Americana without feeling cheesy. Community-driven without sounding forced. **Tagline:** *Pull off. Eat good. Stay awhile.* **What happens here:** - Weekday lunches — easy, no big plans needed - Rotating lineup of local food trucks & vendors - Weekend vendor markets and family nights - Car meets and cruise-ins - Fourth of July, seasonal celebrations, fundraisers, pop-ups - Live music, kids running around, lawn chairs in the grass --- ## 2 · Voice & Content ### Core voice Warm, local, and inviting — with a little roadside charm. Like a proud local owner talking to neighbors. Like a small-town gathering place with big potential. It should sound like: > "Come pull up. Bring the kids. Grab something good. Stay awhile." Not like: > "Experience a premium curated culinary destination with elevated outdoor activations." ### Voice pillars **1. Local pride** — Make people feel this belongs to Mocksville. *"Made for Mocksville." · "Local food. Local families. Local weekends." · "Right off 601. Right here at home." · "Where Davie County comes to eat, meet, and hang out."* **2. Easy invitation** — No pressure. Just show up. *"Pull off the road and grab something good." · "Bring a chair. Bring the kids. Bring your appetite." · "Stop by for lunch, stay for the evening." · "Come as you are. Stay as long as you want."* **3. Family-friendly nostalgia** — Give families a reason to get out of the house again. *"Let the kids be kids again." · "Room to run. Food to love. People to meet." · "Fresh air, local food, and space to slow down." · "The kind of place kids remember."* **4. Vendor-first support** — Trucks and vendors should feel this is built for them too. *"A home base for local food trucks." · "More than a parking spot — a place to build a following." · "Where small food businesses meet hungry locals."* **5. Community gathering** — Events should feel natural: car meets, markets, family days, music, holidays. *"From car meets to market days, this is Mocksville's outdoor meeting place." · "Food brings people in. Community keeps them around." · "Weekday bites. Weekend gatherings."* ### Copy patterns | Use | Pattern | Example | |---|---|---| | Hero / tagline | Three short beats | "Pull off. Eat good. Stay awhile." | | Eyebrow | Uppercase, 1–3 words | `THIS WEEKEND ON THE 601` | | Vendor name | Title case, no caps lock | "Aunt Belle's BBQ" | | Vendor tagline | Lowercase fragment | "smoked low and slow since '04" | | CTA | Verb + noun, 2–3 words | "See Who's Cooking", "Plan Your Visit", "Become a Vendor" | | Stall / spot | Two-character code | `STALL 04`, `SPOT B2`, `ROW 3` | | Hours | Cased + day pattern | "Here today · 11a–8p" | | Event date | Spelled-out month, no zero-pad | "Sat · May 4 · 6pm" | | Empty state | One short sentence + suggestion | "No trucks open right now. Try this Saturday's market." | | Errors | Calm, never apologize twice | "Couldn't load the map. Tap to retry." | ### Voice do / don't **Use often:** *Pull up · Right off 601 · Mocksville · Local flavor · Good food · Fresh air · Bring a chair · Stay awhile · Family-friendly · Weekend market · Food truck night · Outdoor gathering · Community event · Local vendors · Room for the kids · Support local · Made for Mocksville · Come hungry · Easy lunch · Good people · Local favorite · Open-air · Roadside stop · Meet on 601* **Avoid:** *Curated · Elevated experience · Premium activation · Culinary destination · Gourmet marketplace · Exclusive · Luxury · Vibrant community hub · Discover your next · Festival every weekend · anything that sounds like a corporate development brochure* **Don't sound:** Too childish, too county fair, too polished, too hipster, too generic, too foodie-influencer, too commercial real estate, too chain/franchise. **Quick checks:** - ✅ "Pull off and grab a plate." ❌ "Discover your next culinary adventure." - ✅ "Seven trucks open right now." ❌ "We currently have 7 vendors available." - ✅ "Closed Mondays." ❌ "Unavailable on Mondays." - ✅ "601" as a noun ("on the 601", "off the 601"). Never spell out "Six-Oh-One". ### Numbering & units Always **imperial** (°F, lb, oz). Times use **lowercase a/p** with no period and no leading zero (`8a`, `2:30p`). On-site spots are formatted `STALL 04` or `SPOT B2`. The brand does **not** reference distances, miles, or mile markers — Eats on 601 is a single destination, not a stretch of road. "601" is the highway the lot sits on. ### Photography subject matter Food in hands. Food on paper plates. Trucks at golden hour. Hand-painted signs. Picnic tables. Lawn chairs. Kids running. Avoid: aerial restaurant glamour shots, garnish-styled fine dining, stock-feeling people, drone shots of empty parking lots. --- ## 3 · Visual Foundations ### Palette The palette is small and saturated. Cream is the primary surface (not white). Navy carries weight; red is the brand voice; marigold is the wayfinding accent; sky is the cool counter-balance. | Token | Hex | Role | |---|---|---| | `--eats-navy` | `#0B1D33` | Primary, headlines, dark surfaces | | `--eats-cream-100` | `#FFFDF6` | Lightest — cards, elevated cream | | `--eats-cream-200` | `#FBF7EF` | Primary background | | `--eats-red` | `#D6453D` | Brand voice, CTAs, "ON" highlight | | `--eats-yellow` | `#F2B32D` | Marigold — "601" badge, stamps, wayfinding | | `--eats-sky` | `#2BA7B8` | Sky teal — quiet accent (rarely used) | | `--eats-ink` | `#1A2230` | Body text on cream | | `--eats-line` | `#E0D8C2` | Dividers on cream | **Pairing rules** - All dark surfaces use **navy**, never pure black. - Cream lives on navy; navy lives on cream. The contrast carries the page. - Red and yellow rarely touch as type-on-type. The bunting (alternating red and yellow pennants outlined in navy) is the deliberate exception — they read as flags, not a color block. - Yellow's job is wayfinding (the "601" badge, the highway shield, stamp shadows, the Marigold drench on the vendor section). Red's job is voice (CTAs, eyebrows, script flourishes on cream). Don't blur the two. - The drenched yellow vendor section is the loudest moment on the page — keep other sections quieter so it earns the volume. ### Typography | Family | Weight | Use | |---|---|---| | **League Spartan** (condensed) | 700–900 uppercase | Display, headlines, vendor names on signage | | **Public Sans** | 400/500 | Body copy, descriptions, UI text, buttons, nav, captions | | **Lobster Two** | 400 italic | Hand-voiced flourishes — pull-quotes, friendly closes, billboard-scale signoffs ("Made For Mocksville"). Always rotated −2° to −3°. Pair red on cream, yellow on navy. Never use for body, headings, or button text. | | **IBM Plex Mono** | 400/500 | Stall numbers, addresses, hours, data tags | **Type pairing rule:** League Spartan condensed for display + Public Sans for body/UI + IBM Plex Mono for road data + Lobster Two for hand-voiced flourishes. Public Sans is a USWDS-derived humanist sans — it has a slightly civic, signage-adjacent character that pairs better with the condensed display type than a neutral SaaS sans (Inter, etc.). The hand-painted "Eats" wordmark in the primary logo is artwork — use the lockup file, don't try to typeset it. **Scale anchors:** 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64 / 88. UI body is 16. Signage display starts at 48. ### Spacing & Grid - **4px base.** Spacing tokens 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96. - **Web grid:** 12 columns, 24px gutter, 1280px max content width. - **App grid:** 4 columns, 16px gutter, 16px screen padding. - Use **generous vertical rhythm** on hero sections (96–128px). Tight on data rows (12–16px). ### Corner radius The brand is signage. Use **sharp corners by default** (radius 0). The few exceptions: - **Pills** (`--r-pill`, 999px) for the rare status chip. Never on buttons larger than 32px tall. - **2px** (`--r-1`) on standard buttons — just enough to take the edge off without losing the sign-painter weight. - **Rounded-bottom shield** (`--r-shield`) only on the actual logo mark. ### Borders & rules - **Hairline:** 1px solid `--eats-line` on cream surfaces. - **Heavy rule:** 2px solid `--eats-navy` — used like a road stripe, full-bleed across sections. - **Dashed:** `2px dashed --eats-navy` with `8px` gap — evokes road centerline. Use for divider sections labeled "ON THE ROAD" / "WHAT'S COMING UP". ### Elevation Shadows are **stamps, not surfaces**. Hard offset shadows (3–8px navy displacement) sit on cards, stamps, and call-outs so they read as posted to a wall, not floating. Examples on the live site: the inquiry form card (8px navy), event cards (4px navy), the poster panel (8px navy), the phone-tag (3px yellow), the `Get Directions` stamp button (4px navy), the footer "Made For Mocksville" signoff (4px navy text-shadow). Soft shadows reserve for true overlays (modals, dropdowns) only. --- ## 4 · Iconography The icon system is **stroked line icons, 1.75px stroke, 24px grid.** Square caps, square joins — the icons should feel cut from sign vinyl. - **Style:** Geometric, slightly chunky. Filled variants exist only for selected nav items. - **Color:** Inherit `currentColor`. On cream, use `--eats-navy`; on navy, use `--eats-cream-100`; for active/selected use `--eats-red`. - **Don't:** No emoji, no gradient icons, no two-tone icons. No drop shadows on icons. - **Custom marks:** Use the brand's own **shield**, **fork-and-spoon crossed**, **stall marker**, and **bunting** as standalone iconographic elements. These are part of the visual language and should appear in product UI as section markers, empty-state art, and section dividers. A starter set is included in `assets/icons.svg` (sprite). Reference as ``. --- ## 5 · Components See `preview/components.html` for the live UI kit. The kit shows only the vocabulary that actually ships on the live site: - **Buttons** — Primary (red), Secondary (navy outline on cream), Secondary-dark (cream outline on navy), and three signature shapes: **Stamp** (rotated marigold with navy displaced shadow — "Get Directions"), **Ticket** (red clip-path stub with dashed inner border — "Send It"), **Billboard** (clip-path navy wedge with marigold display text — "Today's Lineup on Facebook") - **Stenciled phone-tag stamp** — cream with navy `CALL` block + mono number + 3px yellow displaced shadow; collapses to a 44×44 icon stamp under 480px - **Form fields** — Input, Textarea, day-of-week checkbox grid (with off-screen honeypot) - **Stenciled section tab** — rotated navy banner pinned to a card edge ("VENDOR APPLICATION / FORM No. 601") - **Signage** — US 601 route shield SVG (used as roadside marker, in the visit heading, and in the lot map), bunting SVG (22 alternating red+yellow pennants), per-event hand-drawn doodles (sun / grill / car / fireworks) - **Highway divider** — twin synced animated yellow stripes on navy with a static US 601 shield anchored at the content edge - **Surfaces** — paper-grain dot texture for cream sections, poster panel (taped vintage stenciled card), type-driven vendor row (stencil # + huge rotated Lobster Two name + red mono meta + body), TBD event date stamp ("DATE / SOON") - **Type system** — display / headline / eyebrow / body / mono + the script flourish demo --- ## 6 · Files ``` colors_and_type.css Design tokens (CSS custom properties) assets/ Logos + brand reference pages preview/ index.html Design system overview (start here) components.html Live component library ``` --- ## 7 · Caveats - The script "Eats" word in the primary logo is custom letterform — always use the lockup file for the wordmark, never typeset it. **Lobster Two** is the editable script for hand-voiced flourishes elsewhere on the brand. - Photography is placeholder; production work should source real vendor photography. - No em dashes in user-facing copy. Use commas, periods, parentheses, middle dots, or colons.