Sushi Guide Lebanon/Living style guide

Interactive prototype

A system with good taste

The brand.
The building blocks.
The good stuff.

Meet the living design system for Sushi Guide Lebanon. Creator-led personality meets delivery-app speed — one reusable component at a time.

Take a taste of the system

SUSHIGUIDE

LEBANON

No boring rolls. Ever.

Jad-approved.

No bad bites.

Good taste.
Lebanese energy.

Creator-led

Honest takes. Real flavor.

App-like speed

Instant, in-place feedback.

Reusable by design

Props, not hard-coded data.

Mobile first

Built for the link in bio.

01Brand foundations

Design tokens

Our kind of flavor.

Orange brings the energy. Charcoal keeps the interface grounded. Warm accents and clean backgrounds let vibrant food photography do the talking. Tap a swatch to copy its exact value.

Brand Orange

brand-orange

Primary actions and highlights

Brand Charcoal

brand-charcoal

Headings and body text

Brand Salmon

brand-salmon

Soft accents and recipe details

Clean

bg-clean

Page backgrounds

Social Red

social-red

Social and creator highlights

Single source of truth: Tailwind theme tokens, mirrored as CSS variables for custom styling.

02Typography & micro-copy

Outfit + Inter

Looks bold. Sounds like Jad.

Outfit gives headlines that punchy creator energy. Inter keeps prices, labels, and product details clear at a glance. The voice is helpful, a little cheeky, and never boring.

The two-type recipe

Aa.

Outfit / The loud one

Inter / The clear one

Display / bold / tight

No More
Boring Rolls.

Jad's Top Picks

🍣 Sushi Newbie Approved

Big flavor. Clear directions. No ingredients you’ll use once and forget.

03Actions & navigation

Button · CategoryPill

Big taps. Little moments of joy.

Consistent button variants create a clear action hierarchy. Pill-shaped categories make browsing feel like a native delivery app: swipe, choose, and keep moving. Every action supports keyboard focus and reduced motion.

Primary / the main actionSecondary / high contrastOutline / supporting actionDisabled / clear availability

Live interaction: selecting a category filters the product cards below. Tap again to reset.

04Creator-curated commerce

CreatorProductCard

Not just ingredients. Good decisions.

An honest creator verdict adds trust right where it matters. A single tap adds an item to the shared cart, then confirms it with a green check — without a reload or a detour. Photos, prices, and callbacks are all props.

Jad’s top picks

⭐ Jad’s Verdict: 9.5/10

Kewpie Deep Roasted Sesame Dressing

Nutty, creamy, ridiculously good. The drizzle that does it all. 380 ml.

$6.50 USD

Earn 65 points after checkout

Your first roll starts here.

Sushi Night Kit

Your shortcut to a homemade sushi night.

$14.50 USD

Earn 145 points after checkout

A little seafood royalty.

Alaskan King Crab

Sweet, tender crab for your next recipe. 250 g.

$17.00 USD

Earn 170 points after checkout

Demo prices and verdicts. Kewpie photo from Sushi Guide Lebanon; other food photos are illustrative. No real orders are placed.

05Shoppable social

ShoppableReelCard

Watch. Crave. Create.

Watch & Learn (Then Make it Yourself!) 🥢 A native, swipeable content rail connects creator inspiration directly to recipe ingredients. These are image-based reel previews — tap a card or Shop Recipe to explore its bundle.

A feed with a shopping list

THE RECIPE

Fancy flavor. Easy energy.

Alaskan King Crab Recipe

THE TASTE TEST

The crab stick debate is real.

Osaki vs Osaka Crab Sticks

QUICK RECIPE

Your lunch, upgraded.

The sesame obsession

SAVE FOR LATER

The easiest night in.

Snack night, sorted

Swipe for seconds. No embeds, autoplay, or heavy video players in this preview.

06Frictionless checkout

CartDrawerPreview

Your bento. Minus the friction.

Keep shoppers in the flow with an instant slide-over cart. Quantity changes update the subtotal and free-delivery progress together. Cart data and actions are passed in by the parent — ready to swap local state for WooCommerce mutations.

Small cart. Big flavor.

Tap. Adjust.
Let's roll.

Try the drawer. Change a quantity. Watch the delivery progress respond instantly.

Your Bento Cart

3 items

Add $12.00 for FREE Beirut Delivery 🛵

Instant quantity updates

No reloads. No waiting.

An actual shared cart

Product cards and recipe bundles add to the same state.

Checkout concept

Clear demo confirmation. No payments or orders.

07Large-catalog discovery

ElasticTabs · ProductDiscovery

All the flavors. None of the friction.

A searchable category directory scales beyond a handful of pills. Elastic selection tracks your choice, while a focused filter sheet keeps price, sorting, and active filters easy to reach with one thumb.

A little discovery. A lot of flavor.

Find your next obsession.

23 flavors to explore

6 results · All flavors

Kewpie Deep Roasted Sesame Dressing
⭐ Jad’s Verdict: 9.5/10
$6.50
Sushi Night Kit
Your first roll starts here.
$14.50
Alaskan King Crab
A little seafood royalty.
$17.00
Roasted Nori Sheets
That perfect crispy finish.
$4.50
Japanese Snack Mix
Warning: sharing is optional.
$8.50
Osaki Crab Sticks
A little upgrade for every bite.
$5.50

Six demo products; prices, creator verdicts and most photos are illustrative. Extra categories may be empty. No stock availability is asserted.

Search and filtering operate on the sample catalog. Empty categories are intentional; backend products and category trees will plug into this pattern.

08Native mobile navigation

MobileBottomNav

Right where your thumb expects it.

This reusable storefront preview demonstrates a five-tab elastic dock with a moving indicator and live cart badges. The actual global mobile bar links three routes: Home, Style Guide, and Store Demo. The guide section directory remains available from the header on mobile and the sidebar on desktop.

9:41Native feel. Web speed.

Guide

Five taps.
A whole world of flavor.

Tap these five preview tabs to see the elastic indicator glide; Bento reflects the shared demo cart. They do not navigate routes or open the cart. Use the global three-route bar to visit pages, or the header to browse guide sections.

09Loyalty & cashback

RewardsCard

Good taste pays you back.

Make points visible on product cards, at checkout, and in the account — without confusing earned points with cash. A $9.90 purchase earns 99 points; 100 points are worth $0.10 cashback.

Good taste pays you back

1,250points

$1.25 cashback value

A $9.90 bite earns 99 points.

Every $1 earns 10 points · Every 100 points = $0.10 cashback.

Sample balance. No points are spent or awarded in this guide.

The rewards math, made clear

Every bite gives a little back.

Show earned points before checkout, and a clear cashback balance inside the account. Earning and redemption are different moments.

Try a product price (USD)

$9.9099 earned points

$9.90 → 99 points. 100 points → $0.10 cashback, not $1.00. Fractional earn points round down in this preview; the backend will supply the final rules.

10Account & personalization

AccountCard · TextField · SelectField · Toggle

A little more you in every bite.

A friendly profile, saved favorites, delivery preferences, and accessible form controls make returning feel effortless. Edit this local demo profile and try both valid and invalid form states. No real account is created.

A flavor profile, not a real account. This local-only demo creates no account, login, or real profile. Nothing is sent to a server or persisted after reload. Use sample details, not sensitive information.

Your flavor profile

Maya

Local demo profile · Sample rewards

Rewards balance

1,250 points

$1.25 cashback value

Your preferences

Beirut
Spicy favorites
Demo notifications on

Sample rewards only: 1,250 points = $1.25. No real balance or redemption.

11Icons & feedback

Lucide React · ToastProvider

Small signals. Zero guesswork.

One consistent, rounded Lucide icon family gives commerce, account, and delivery actions a recognizable voice. Toasts confirm actions without taking users out of the flow; they can be dismissed, paused, or paired with an action.

Small icons. Clear intent.

Lucide SVGs with a consistent 20px size and 1.75 stroke. Choose an icon to inspect its component token.

Selected SVG

House

Decorative SVGs stay hidden from assistive technology. Icon-only actions need descriptive accessible labels.

Try the feedback

Five-second expiry pauses while hovered or focused. Dismiss buttons and live announcements are built in.

12Brand assets & references

BrandDownloads

The brand, ready to go.

A reliable home for the files behind the guide. Download logos, the exact font families and their licenses, browser icons, and design tokens — individually or as one complete kit.

A grab-and-go brand kit

Good taste. Ready to download.

Logos, fonts, licenses, icons, and tokens in one place. Save the whole kit, or pick exactly what you need below.

Download brand kit

Logos & artwork

Use concept 02 for the current identity. Original explorations remain available for reference.

Fonts & licenses

Official variable fonts for design tools. Licenses are included so the files can travel with your project.

Tokens & site icons

The palette, type scale, motion reference, and browser-ready marks used throughout this guide.

Outfit official font reference Inter official font reference Brand kit usage notes

Original raster artwork is provided as supplied; no vector master is available yet. Food photography is illustrative and is not included in the brand kit. The site self-hosts optimized fonts with Next.js; downloadable TTF files are for design and desktop use.

The brand.The building blocks.The good stuff.