TheJOINT
📍 Rodney Parade, Newport
Brand tokens, typography hierarchy, layout container rules, UK food allergen badges, interactive menu components, modular modals, team member cards, and city skyline motif for Eughine's gourmet burger van at Rodney Parade in Newport, South Wales.
Role-based color tokens with dynamically calculated light/dark step shades (color-mix()) and visual transparency grids over checkerboard overlays. Zero component code changes required for future rebranding.
--primaryRole: Primary CTA & Brand Highlight
Used for primary CTAs, active states, price badges, sunglasses/jewelry logo highlights, and focus rings.
--secondaryRole: Secondary Actions & Panels
Used for secondary buttons, gourmet burger theme panels, lower city skyline buildings, and warm dark accents.
--foregroundRole: Primary Typography & Copy
Used for main body copy, horns, logo highlights, arch badge text ('BIG FLAVOUR'), and crisp high-contrast text.
--backgroundRole: Page Backdrop & Baseline
Used for main page background, card containers (#16181E), drop shadows, and street dark mode baseline.
--destructiveRole: Spicy Badge & Action Alerts
Used for spicy allergen tokens, fiery burger accents, alert banners, and destructive actions.
--successRole: Vegan & Fresh Dietary Badges
Used for vegan and vegetarian badges, fresh vegetable accents, and positive status indicators.
Curated Google Font stack establishing brand hierarchy: Mr Dafoe marker script, Rubik (900 Black weight) block display, Rye woodcut Western slab, and Inter UI sans.
Dynamic marker script used for handwritten graffiti accents like "The", signature stamps, badge highlights, and casual tags.
Ultra-bold Black weight display font used for heavy headlines ("JOINT"), section headers, chunky buttons, menu titles, and price tags.
Authentic woodcut Western display font used for arch badge caps ("BIG FLAVOUR", "NO COMPROMISE"), subheadings, and vintage badge text.
Used for high-readability body copy, menu ingredient lists, dietary descriptions, buttons, and admin forms.
2x 4oz Aged Beef Patties, Smoked Bacon, American Cheese, Pickles & House Secret Joint Sauce.
Served on a toasted brioche bun.Every page section uses <section> wrapping a <div className="content"> bounding box centered exclusively via Flexbox (flex flex-col items-center) without raw margin rules.
Bounding Box Content Area (Centered via Flexbox: flex flex-col items-center justify-center)
Complete set of all 14 official UK food allergens plus dietary preferences (Vegan, Vegetarian, Spicy, Halal). Badge layout automatically adapts: compact icon-only badges on mobile menu cards, full icon + label badges on desktop views and item detail pages.
auto17 Badges TotalOn mobile screens, menu item cards save space by displaying icon-only allergen badges with tooltip title labels:
On desktop views and item detail modals, badges display full icon + text label badges:
Standardized interactive elements built for high visual impact and smooth user engagement.
Fully customizable, accessible Radix UI dialog primitives. Pass in titles, descriptions, custom form fields, and footers for seamless event bookings, item customization, and user prompts.
Co-founded by Eughine (hip-hop culture & brand lead) and his wife (culinary director & original burger recipe creator), supported by their hard-working Rodney Parade stadium crew. Distinct team card design featuring portrait rings, gold stamps, quotes, and favorite burger badges.
"Big Flavour, No Compromise."
"Flame-grilled perfection every time."
"Smashing it daily in Newport."