UI Kit · Components

Components

← System

The vocabulary the live site is built from. Every piece in here ships on eats-on-601.pages.dev. No stand-ins, no future-state placeholders.

01 Type System

League Spartan condensed display, Public Sans body, IBM Plex Mono data, Lobster Two flourishes. Four roles, four jobs.

DisplayLeague Spartan 800
condensed · uppercase
PULL OFF.
EAT GOOD.
STAY AWHILE.
HeadlineLeague Spartan 700
28 / 1.2 · upper
Where Mocksville comes to eat
EyebrowPublic Sans 700
11 / 0.18em · red
★ THIS WEEKEND ON THE 601
BodyPublic Sans 400
16 / 1.6
Mocksville's food truck park, right off US Highway 601 in Davie County. Rotating local food trucks. Lawn chairs, room for the kids, and the kind of weekend you actually remember.
MonoIBM Plex Mono 500
14 / 0.02em
OPEN DAILY · 9–5 · FREE PARKING · 1705 U.S. HWY 601 N
Script · red on creamLobster Two 400
rotated −2°
Pull off.
Script · yellow on navybillboard scale
rotated −3°
Made For Mocksville
Script · navy on yellowvendor row
rotated −2° / +2°
Aunt Belle's BBQ

02 Buttons

Three signature shapes (stamp, ticket, billboard) carry three voices. Plus the standard primary / secondary trio for everything else.

Primary & secondary (cream surface)
Secondary on navy (hero CTA pair)
Stamp · "Get Directions"
Get Directions →

Rotated marigold, 4px navy displaced shadow. Concrete physical actions only.

Ticket · "Send It"

Red clip-path stub with dashed inner border. Payoff moments — submits, confirmations.

Billboard · in-section roadside CTA
Today's lineup on Facebook →

Clip-path navy wedge with marigold display text. Used inline in cream / yellow sections.

03 Stenciled Phone-Tag Stamp

Sticky-header CTA. Cream pill with a navy CALL block, mono number, and 3px yellow displaced shadow. Collapses to a 44×44 icon stamp under 480px so the call + menu twin stamps sit flush right.

Full (≥480px)
Collapsed (<480px) · paired with menu stamp

04 Stenciled Section Tab

Rotated navy banner pinned to a card edge. Reads like a real vendor application pad, not a default web form. Used on the inquiry section's form card.

VENDOR APPLICATION FORM No. 601

The tab pins to the top-left edge of any cream-100 card with a navy border + 8px navy stamp shadow. Combination is the inquiry form on the live site.

05 Highway Divider

Twin synced animated yellow stripes on a navy slab + a static US 601 route shield as a roadside sign. Sits between the hero and the about section.

06 Bunting

22 alternating red + yellow pennants outlined in navy. The events section's celebratory header, drawn in code so it scales cleanly. The deliberate exception to the "red and yellow rarely touch" rule — they read as flags, not a color block.

07 Event Card

Cream paper-grain card with hard 4px navy stamp shadow, slight tilt, hand-drawn doodle pinned at the top-right. Title supports a TBD state ("DATE / SOON") for events without a locked-in date — and emits Event schema automatically once the date lands. Doodles vary by event type: sun, grill, car, fireworks.

SAT · MAY 24

Spring Cruise-In

Classic cars on the lawn, live bluegrass on the porch stage, kids' corner. Lawn chairs welcome.

2P–8P · FREE · 8 TRUCKS
DATESOON

Summer Cookout

Backyard energy on the lot. Grills smoking, sweet tea, bring the family.

DATE TBD · FREE · 6 TRUCKS
THU · JUL 4

4th of July on the 601

The big one. Full lineup, fireworks at dusk, bouncy castles. Get here early for parking.

12P–10P · FREE · 12+ TRUCKS

08 Type-Driven Vendor Row

Stencil "No.01" + huge Lobster Two name (rotated −2° / +2° alternating) + red mono meta line + body description. The vendor section is the page's biggest typographic moment — drenched yellow, no images. Names are the visual.

No.01

Aunt Belle's BBQ

STALL 04 · BBQ · $$

Smoked low and slow since '04. Brisket, ribs, sides, sweet tea by the gallon.

No.02

Tía Marisol Tacos

STALL 11 · TACOS · $

Al pastor, suadero, cabeza. Cash and Venmo. Fri–Sun, 5p till the meat runs out.

No.03

Sweet Pea Donuts

STALL 02 · DONUTS & COFFEE · $

Cake donuts and drip coffee. Veteran-owned. Saturday mornings on the lot.

09 Poster Panel

Taped vintage stenciled card. Tape corners + slight rotation + stippled cream-300 background. The about section's visual anchor — the type IS the visual.

★ WELCOME TO ★

EATS ON

601

Pull off.
Eat good.
Stay awhile.

MOCKSVILLE · DAVIE COUNTY · NC

10 Form Fields

Sharp 0 corners, 2px navy borders, body type. The day-of-week checkbox grid replaces a single multi-select on the inquiry form. Honeypot field sits off-screen to catch bots silently.

Text input
Text input · with optional sublabel
Textarea
Day-of-week checkbox grid
Days you'd be on the lot

11 Lot Map

Hand-illustrated overhead view of the lot. Cream border + 8px navy displaced shadow. Lives in the Visit section as the wayfinding moment — a real "here's where you're going" beat instead of a Google Maps embed.

12 Signoff

The footer's farewell. Lobster Two at billboard scale (clamp 56–120px in the kit, up to 168px on the live footer) with a 4px navy text-shadow, rotated −3°. The page is voiced AND signed.

Made For Mocksville