Demo

This site is a demo project, not the official Jack & John Kitchen website.

Demo Project Brief

Jack & John Kitchen

Official Website — Concept & Delivery Plan

Version 1.0 · Demo document · Not official material from Jack & John Kitchen or ISMAYA Group

1. Summary

Jack & John Kitchen is a fast-casual crispy pork chain with 10+ outlets across Surabaya and Jakarta, backed by ISMAYA Group. Despite strong offline traction and an active Instagram with 24,000 followers, the brand has no website of its own. All digital discovery depends on third-party platforms: GoFood, GrabFood, ShopeeFood, Instagram, and a single link-in-bio page.

This project is a demonstration prototype of that official digital home: brand storytelling, a full menu showcase, and streamlined order and catering flows — built for Indonesia's mobile-first, WhatsApp-driven consumer behaviour. The site you are looking at was made as a work sample, not as commissioned commercial work.

2. The Problem It Solves

No owned digital asset — zero SEO presence for searches like "babi kriuk Jakarta".
A strong founder story that appears nowhere.
Menu and prices only visible through delivery apps.
Catering requests handled ad-hoc over WhatsApp with no structured flow.
The expat audience is unserved because there is no English content.

3. Page Scope

Home	Hero, signature menu, story snippet, outlets, social proof, catering CTA
Menu	Crispy Pork, Sweet Soy Pork, Chili Pork, Bundles, Packaged Products
Catering	Packages, event gallery, inquiry form, FAQ
About	Founder story, the recipe, ISMAYA partnership, timeline, press mentions
Outlets	Google map, location cards, Surabaya / Jakarta city filter
Contact	General form, WhatsApp, email, social links

4. Design Direction

A Bold Street Food Editorial aesthetic — high contrast, type-led and Instagram-native. Deep black background (#0C0C0C), white text, acid yellow (#FFE600) and red (#E8231E) accents. Barlow Condensed 900 for display, Barlow for labels, Plus Jakarta Sans for body. Corners are always sharp — zero border-radius. The black-and-white stripe from the packaging carries the brand through section dividers. Motion is fast and percussive rather than slowly fading, with full prefers-reduced-motion support.

5. Technical Architecture

Layer	Choice	Reason
Framework	Next.js 14 (App Router)	SSG + ISR for SEO, image pipeline, server components
Language	TypeScript	Type safety across every data model
Styling	Tailwind CSS + CSS custom properties	Design tokens map straight onto CSS variables
CMS	Sanity.io	The brand team edits menu and outlet hours without a deploy
Forms	React Hook Form + Zod	Type-safe validation, small bundle
Bilingual	next-intl	Bahasa Indonesia (default) ↔ English
Email	Resend	Delivery of catering and contact submissions
Hosting	Vercel	Edge network with South-East Asia PoPs

Architecture style: Jamstack with selective server-side rendering. No custom backend, no database, no authentication. Infrastructure complexity is pushed to managed services so the team focuses on the product rather than on ops.

6. Timeline — 4 Weeks

The original launch plan in the PRD ran eight weeks. The version below compresses it into four working weeks by running content production in parallel with the build, and folding QA into launch week.

Week	Phase	Output
Week 1	Foundation & Design System	Brand research and asset audit. Design tokens locked (colour, typography, spacing, motion). Next.js + Tailwind scaffold. Base components built: buttons, cards, form fields, navigation, footer. Sanity content model set up, photography and copy collected.
Week 2	Core Pages	Full homepage (hero, signature menu, brand statement, Hack Series, story, outlets, social proof, Instagram feed, catering CTA). Menu page with category tabs and product cards. Outlets page with map and city filter.
Week 3	Conversion & Bilingual	Catering page (packages, gallery, FAQ) with its inquiry form. About and Contact pages. Serverless functions for both forms plus email notifications. Rate limiting. ID/EN translations and locale routing completed.
Week 4	QA, Optimisation & Launch	Performance audit (Core Web Vitals, Lighthouse 90+), SEO audit (meta, JSON-LD, sitemap, hreflang), WCAG 2.1 AA accessibility audit, cross-browser and cross-device testing, form submission and WhatsApp link testing, proofreading in both languages. DNS cutover, Search Console, analytics verification, launch announcement.

7. Out Of Scope

E-commerce checkout with a payment gateway
User accounts or login
Real-time order tracking
GoFood / GrabFood API integration (deep links instead)
Loyalty or stamp-card programme
Blog or recipe section
iOS / Android mobile app

8. Contact

Questions, feedback, or anything about this project:

croissantsmoon@gmail.com

Design System Guide

Jack & John Kitchen

Bold Street Food Editorial — Website Visual Identity

Version 1.0 · Demo document · Derived from DESIGN.md and implementation screenshots

Fig. 1 — Homepage hero. Every principle of the system at once: black background, dramatic food photography as a full-bleed layer, Barlow Condensed display type, one yellow CTA beside one ghost button, and navigation left transparent over the hero.

1. Brand DNA

Jack & John Kitchen is not a fine-dining pork house, and it is not a traditional warung either. It occupies its own space: premium fast-casual with street culture energy. Think Shake Shack's visual confidence meeting Jakarta's bold graphic street food culture.

1.1 Five Communication Values

Loudness — if you are unsure the headline is big enough, make it bigger.
Contrast — black backgrounds, white type, yellow or red accents. No muddy mid-tones.
Pride — "#1 Babi Kriuk In Town" is not a claim, it is a battle cry.
Community — hashtags like #PorkFreak and #KaryareboHack are first-class brand assets.
Appetite — every design decision should make the viewer hungry.

1.2 Aesthetic

Primary: Bold Graphic / Type-Led. Secondary: Street Food Editorial. Energy: high contrast, confident, unapologetic. Reference brands: Shake Shack (stripes, boldness), Dave's Hot Chicken (type-as-design), Howlin' Ray's (street food premium), Supreme (graphic language applied to food).

1.3 Five Unique Visual Markers

The stripe — vertical black-and-white stripes across all packaging. The most recognisable visual asset, and it must appear at every digital touchpoint.
The yellow — acid yellow is the brand's "volume dial at eleven" moment. It signals excitement, promotions and peak energy.
Type as atmosphere — headlines like "CRUNCHY! CRUNCHY! CRUNCHY!" do not describe the food; they are the eating experience.
Dark, dramatic photography — charcoal marble backgrounds, tight close-ups. The food glows against the darkness.
Hack culture — limited editions framed as "hacks" give the brand streetwear drop energy.

2. Logo

A double-circle emblem with crossed fork and knife above the wordmark. The "O" in JOHN is a hollow ring and becomes the visual focal point. "KITCHEN" sits beneath the wordmark in tightly tracked caps.

Fig. 2 — The emblem in the navigation bar. The white-on-black variant — the primary one on the web. The emblem stays intact; the wordmark is never used without the circle in digital contexts.

2.1 Colour Variants

Primary — black on white	Light backgrounds, print, embossing
Reversed — white on black	Dark backgrounds (primary on the website)
Single colour — all black	Monochrome print, stamps
All white	Overlay on dark photography, packaging
Yellow on black	Promotional / campaign contexts only

2.2 Clear Space & Minimum Sizes

Minimum clear space = the height of the "K" in KITCHEN, on all four sides. Minimum sizes: 32×32 px for the favicon (utensils mark only), 80 px tall for in-page use, and 20 mm diameter in print.

2.3 Don’ts

Do not rotate, stretch or distort it
Do not apply drop shadows or glows
Do not place it over busy photography without a solid badge backing
Do not recolour the utensils mark separately from the wordmark

3. Colour System

3.1 Core Palette

#0C0C0C	Black	Primary background across all brand material
#FFFFFF	White	Primary text on dark backgrounds, logo
#FFE600	Yellow	Hero accent, primary CTAs, campaign highlights
#E8231E	Red	Urgency, promos, secondary accent

3.2 Extended Palette

#141414	Black Soft	Card backgrounds, surface variation
#1A1A1A	Black Stripe	Panel between bands in the stripe pattern
#FFD000	Yellow Hover	Hover / pressed state for yellow elements
#C41A16	Red Dark	Red button surface (AA contrast)
#B0A89A	Grey Warm	Secondary text, captions, metadata
#2C2C2C	Grey Dark	Borders, dividers, disabled states
#F5F0E8	Cream	Alternate light surface (used sparingly)
#25D366	WhatsApp	WhatsApp buttons — platform colour

Fig. 3 — The brand statement panel. The one section that flips the whole scheme to full yellow with black type — 15.3:1, comfortably AAA. Black-and-white stripe dividers frame the panel above and below so the reversal reads as a system decision rather than an accident.

3.3 Usage Rules

Colour	Primary Use	Never Use For
Black	Page backgrounds, card surfaces	Body text — use white
White	Body text, headings on dark, logo	Dark backgrounds — use black
Yellow	Primary CTA buttons, campaign labels, section accents	Long body copy, error states
Red	Secondary CTAs, urgency, promo badges	Large text blocks, backgrounds
Grey Warm	Captions, metadata, secondary labels	Anything needing high emphasis
Grey Dark	Borders, dividers, disabled elements	Backgrounds — too close to black

3.4 Contrast Ratios (WCAG AA)

Pair	Ratio	Status
White on Black #0C0C0C	20.7:1	AAA
Yellow #FFE600 on Black	15.3:1	AAA
Black on Yellow #FFE600	15.3:1	AAA
White on Red #E8231E	4.6:1	AA (large text)
White on Red Dark #C41A16	6.0:1	AA
Black on White	20.7:1	AAA
Grey Warm on Black	5.1:1	AA

Implementation note: red buttons use #C41A16 as the surface, not #E8231E. White on #E8231E is only 4.5:1 — fine for large text, but a 14 px button label is normal text and needs 4.5:1 outright. #C41A16 gives 6.0:1 and passes unconditionally; #E8231E stays as the hover colour and non-text accent.

4. Typography

The brand treats typography as a primary design element, not merely as information delivery. Headlines are architectural — they fill space and create energy. The gap between display and body is deliberately extreme.

Role	Typeface	Character & Usage
Display / campaign	Barlow Condensed 800–900	Ultra-condensed, tall, aggressive. Hero headlines, campaign slogans, section titles.
Sub-headline / UI label	Barlow 700–800, uppercase	Wide, bold, legible at every size. Category names, headers, button labels.
Body / interface	Plus Jakarta Sans 400–600	Optimised for Indonesian/Latin text, highly legible at small sizes.
Accent / hashtag	Barlow Condensed 500 italic	#PorkFreak and #HackSeries labels, campaign sub-tags.

Fig. 4 — Founder quote on the About page. Type as atmosphere in practice: the quote is treated as display type, not as body copy in quotation marks. The quote marks are yellow, and a diagonal stripe field on the left stands in for a portrait photo.

4.1 Type Scale

Token	Value	Usage
display-xl	clamp(80px, 12vw, 160px)	Hero, full-bleed campaign headers
display-lg	clamp(56px, 8vw, 100px)	Section heroes, campaign callouts
display-md	clamp(40px, 5vw, 64px)	Sub-section headlines
display-sm	clamp(28px, 3.5vw, 40px)	Card titles, feature labels
heading-lg	24px	Page section headings
heading-md	18px	Subsection labels, menu category names
heading-sm	14px	Tags, badges, small uppercase labels
body-lg	18px	Lead paragraphs, feature descriptions
body-md	16px	Standard body copy
body-sm	14px	Captions, metadata, fine print
body-xs	12px	Legal text, footer micro-copy

4.2 Letter Spacing & Line Height

Display: -0.01em (slightly tightened at very large sizes). Uppercase sub-headlines: 0.08em. Body: 0.01em. Small caps badges: 0.12em. Line height: display 0.95, heading 1.1, body 1.6, captions 1.4.

5. Iconography & Patterns

5.1 The Stripe Pattern

The vertical black-and-white stripe is the most distinctive visual asset — present across all packaging, bags and collateral. Three variants are used on the web:

Standard 24px

Narrow 12px

Diagonal 45°

Used for: dividers between major sections, left/right border accents on callout cards, loading states, decorative fields behind product photography, and "new" or "featured" badge backgrounds. Not used for: full-page backgrounds (too busy), backgrounds behind body text (legibility), or on top of yellow or red surfaces (it clashes).

5.2 Hashtag Treatment

Hashtags are not merely copy — they are graphic elements. Always uppercase, the # is part of the visual, they may be oversized relative to surrounding copy, and they may be used as a background texture at 8–12% opacity.

Fig. 5 — The Hack Series section. #KARYAREBOHACK is treated as a yellow campaign label above a white display headline. Striped-packaging photography takes the right half of the screen with no frame — full bleed to the edge.

5.3 Badge System

Three badge types: yellow with black text (ORDER NOW, MOST POPULAR), red with white text (BESTSELLER, NEW OUTLET), and a stripe field with white text (new variants). All use Barlow Bold at 12–14 px, 0.08em tracking, 6×12 px padding, and 0 px corner radius — promo badges are never rounded.

6. Photography Direction

Style: dark, dramatic, editorial. Background: deep black or dark charcoal, occasionally dark marble texture. Lighting: a single strong directional source from above-front, so shadows and highlights on the pork skin turn dramatic. Framing: food fills 60–80% of the frame; never an empty plate. Colour temperature: warm — the golden amber of crisp skin pops against the cold dark ground.

Fig. 6 — Catering event gallery. Campaign photography with high-contrast typographic overlays. Photos may be darkened 10–20% so the text stays readable, but the food must remain recognisable. Hands holding the bowls supply social feel and scale.

Context	Format	Max	Dimensions
Hero / full-bleed	WebP	300 KB	1920×1080
Menu card	WebP	80 KB	800×600
Gallery thumbnail	WebP	40 KB	400×400
About / people	WebP	120 KB	1200×800
OG / social share	PNG	100 KB	1200×630

Do photograph: extreme close-ups of crackling texture, cross-sections showing the layers, steam rising off freshly poured sauce, hands holding or passing a bowl, several bowls together, sauce pouring in motion. Do not photograph: bright white backgrounds, empty plates, flat lays where props drown the food, out-of-focus heroes, or stock food photography of any kind.

7. Motion & Animation

Motion should feel like the food: fast, energetic, satisfying. No slow graceful fades — this is not a spa brand. Animations are snappy, purposeful and slightly surprising.

7.1 Easing Curves

ease-brand	cubic-bezier(0.22, 1, 0.36, 1)	Snappy entrance, smooth exit — the default
ease-impact	cubic-bezier(0.34, 1.56, 0.64, 1)	Slight overshoot — display headlines
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Standard ease-out
ease-press	cubic-bezier(0.4, 0, 0.2, 1)	Button press

7.2 Duration Scale

instant	80 ms	Button presses, toggle states
fast	150 ms	Hover transitions
base	250 ms	Standard UI transitions
moderate	400 ms	Card reveals, dropdowns
slow	600 ms	Section entrances
dramatic	900 ms	Hero animations

7.3 Animation Catalogue

strikeIn — the hero headline slams up from below with a 2° skew rather than floating in. Each word staggers 0/80/160 ms.
cardReveal — menu cards rise 32 px as they enter the viewport via IntersectionObserver, staggered 80 ms.
Card hover — translateY(-4px) scale(1.02) plus the image brightens 10%.
Button press — scale(0.96) over 80 ms.
WhatsApp pulse — a green box-shadow ring expands every 2.5 seconds on the floating button.
stripeSlide — the stripe divider scrolls continuously, 24 px every 0.8 seconds.

7.4 Reduced Motion

Every animation must degrade gracefully. Under prefers-reduced-motion: reduce, animation and transition durations collapse to 0.01 ms, iteration counts drop to one, smooth scrolling is switched off, and elements waiting on a scroll reveal are given full opacity immediately so no content goes missing.

8. Component Library

8.1 Buttons

Variant	Surface / Text	Usage
Primary	Yellow #FFE600 / black	The most important action on the page — Order Now
Secondary	Red dark #C41A16 / white	Important but not primary — Catering, Contact
Ghost	Transparent / white, 2px border	Secondary action on dark — See Menu
WhatsApp	Green #25D366 / black	Direct WhatsApp order links

All buttons use Barlow Bold 14 px uppercase, 0.08em tracking, 14×28 px padding, 0 px radius, and shrink to 0.96 on press. The small variant uses 10×20 px padding at 12 px. WhatsApp buttons take black text rather than white: black on #25D366 is 8.2:1 while white is only 2.5:1 and fails AA.

Fig. 7 — Menu cards. A full-bleed 4:3 photo, a yellow BESTSELLER badge top-left, a Barlow Condensed 800 title, grey-warm description, yellow price, and a green WhatsApp CTA. Card surface #141414 with a #2C2C2C border and a 3 px yellow accent on the left edge.

Fig. 8 — Outlet cards. The outlet name set as display type, address and opening hours led by thin-line icons, two buttons side by side. Conditional DELIVERY ONLY (white outline) and NEW OUTLET (red) badges sit top-right. The city filter tabs above the grid use yellow for the active state.

Fig. 9 — Catering package cards. The middle card is marked MOST POPULAR and given a full yellow border — the only yellow element in the section, following the one-accent-per-section rule. Prices use yellow Barlow Bold at display size; the inclusion list uses yellow checkmarks.

Fig. 10 — Contact form. Labels in Barlow Bold 12 px uppercase with wide tracking; inputs on #141414 with a 2 px #2C2C2C border that turns yellow on focus, 0 px radius. The right column puts the green WhatsApp CTA first as the fastest route, ahead of the email and social lists.

8.2 Navigation

64 px tall on desktop, 56 px on mobile. Transparent over the hero, then switching to solid black with a bottom border once scrolled past 24 px — no soft transition, it snaps. The active link is yellow. The ID | EN language toggle and the Order Now button sit on the right. On mobile a hamburger opens a full-screen black overlay with stacked links at Barlow Condensed display size.

8.3 Section Divider

An 8 px stripe bar in continuous motion, placed between major sections. It is the cheapest and most recognisable way to repeat the brand signal.

9. Page Specifications

9.1 Homepage Section Order

HERO — one full viewport, dark food video/photo, left-aligned text, two CTAs
STRIPE DIVIDER — 8px animated stripe bar
SIGNATURE MENU — 3–4 flagship dishes, horizontal scroll on mobile, 4-column grid on desktop
BRAND STATEMENT — full-width panel, Barlow Condensed at extreme size
HACK SERIES — limited-edition campaign section, yellow or red accent
STORY SNIPPET — founder quote, photo of Monica & Jocky, CTA to the About page
STRIPE DIVIDER
FIND US — city toggle, outlet cards
SOCIAL PROOF — Google review quotes, rating badge
INSTAGRAM FEED — 6–9 most recent posts, titled "#PORKFREAK"
CATERING CTA — full-width section, "MADE FOR EVERY EVENT", two CTAs
FOOTER — logo, links, socials, outlet quick links, copyright

Fig. 11 — Menu page with category tabs. Filter tabs use yellow for the active state and a grey outline for the rest, with item counts in brackets so people know what is in a category before tapping it. Four-column grid on desktop, horizontal scroll on mobile.

9.2 Spacing

An 8 pt base grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 and 128 px. Section padding is 96 px vertical and 64 px horizontal on desktop; 64 px and 20 px on mobile.

9.3 Grid & Breakpoints

A 12-column grid, container max-width 1280 px, centred. Breakpoints: 480 px (large phones), 768 px (tablets), 1024 px (laptops), 1280 px (desktop), 1440 px (wide desktop).

10. Voice & Copy Style

Loud. Proud. Hungry. Jack & John Kitchen speaks like the best stall at the food festival — confident, energetic, a little cheeky. Never corporate, never over-polished, always making you want to eat.

Principle	Example
Lead with appetite	"Crunchy. Savoury. Unmatched." not "We serve quality pork dishes."
Short sentences hit harder	"Crunch. Savor. Repeat." not a paragraph explaining texture.
Hashtags are first-class copy	Use #PorkFreak in headlines, not only in captions.
Bilingual but never awkward	Keep each language natural — never translate literally between ID and EN.
Action, not description	"ORDER NOW" not "Click here to order."
Own the niche	"The No.1 Babi Kriuk In Town" — state it, do not hedge it.

10.1 CTA Guide

Action	Indonesia	English
Order food	Pesan Sekarang	Order Now
WhatsApp order	Pesan via WhatsApp	Order via WhatsApp
View menu	Lihat Menu	See Menu
Catering inquiry	Pesan Katering	Inquire Catering
Find outlet	Cari Outlet	Find Us
Learn the story	Kenali Kami	Our Story
Submit form	Kirim	Submit

11. Do’s & Don’ts

Do

Use sharp corners on every UI element — cards, buttons, tags
Let display type run close to the edge for maximum impact
Use the stripe pattern as a repeating brand signal
Keep the background black unless a section genuinely calls for contrast
Use yellow for only the single most important element per section
Make food photography the hero in every section
Set all Barlow / Barlow Condensed text in uppercase
Keep CTAs direct and action-first
Give every page at least one WhatsApp entry point

Don’t

Never use rounded corners — it fights the brand character
Never use serif typefaces anywhere
Never use purple, blue or cool-toned accents
Never make light backgrounds the default
Never use stock photography or generic food imagery
Never use yellow for body text — display accents and primary buttons only
Never put gradients on typography
Never use more than two accent colours in one section
Never make the stripe pattern the primary background — it is an accent only
Never introduce a font family outside the three defined typefaces

12. Design Tokens

Every value in this document lives as a CSS custom property in app/globals.css, the single source of truth. Components never write literal values — they read tokens.

Group	Token
Colour	--color-black, -black-soft, -black-stripe, -white, -cream, -yellow, -yellow-hover, -red, -red-dark, -grey-warm, -grey-dark, -whatsapp
Typography	--font-display, --font-heading, --font-body, --text-display-xl…-sm, --text-heading-lg…-sm, --text-body-lg…-xs
Text rhythm	--leading-display, -heading, -body, -caption, --tracking-tight, -normal, -wide, -wider
Spacing	--space-1 … --space-32 (8 pt grid)
Layout	--container-max, --section-padding-y, --section-padding-x, --nav-height, --border-radius (0px)
Motion	--ease-brand, -impact, -out, -press, --duration-instant … -dramatic
Patterns	--stripe-size, --stripe-white
Z-index	--z-base, -raised, -overlay, -nav, -modal, -fab

The mobile override at the 768 px breakpoint touches only three tokens — vertical section padding (64 px), horizontal padding (20 px) and nav height (56 px). Everything else is identical at every screen size; there is no parallel mobile system.

Contact

Questions, feedback, or anything about this design system:

croissantsmoon@gmail.com

From A Home Kitchen, For Everyone

The story of Monica and Jocky, and a recipe that never changed.

Behind The Kitchen

About Us

“If the skin does not make a sound when you bite it, it does not leave my kitchen.”

Monica started frying crispy pork in her Surabaya home kitchen in 2016, at first only for family and neighbours. The recipe has not changed since day one.

“We grew slowly so the taste stays identical at every outlet.”

Jocky turned a queue of neighbours into a two-city outlet network, without loosening the kitchen standards set at the start.

Backed By

ISMAYA GROUP

Since 2017, Jack & John Kitchen has been part of ISMAYA Group — Indonesia's largest F&B and lifestyle group.