Sam's @ Batai
Neighbourhood restaurant and bar in Plaza Batai. Comfort food across three cuisines, signature pizzas, lamb shank, mutton curry — and a full bar.
01 / Logo
Logo Variants
- Hand-script wordmark in signature red with a thick black outline. The black outline holds the wordmark against any background — light or dark — so logo.svg is the canonical mark.
- logo-red.svg is the same wordmark without the outline; cleaner / more modern feel. Reserve for contexts where the outline competes with surrounding type.
- logo-dark-bg.svg embeds a black background rectangle and switches the @Batai mark to white. Use only when the surrounding bg is truly black (#000000) — on near-black surfaces it'll show as a visible darker patch.
- Reserve red for the logo and the primary CTA. Don't repeat red elsewhere in large fills.
02 / Color
Color Palette
Signature
Sam's Red
#e63135
RGB(230, 49, 53)
Logo, primary CTA, single-word emphasis. Used sparingly.
Dark base (Option A — Cinematic)
Midnight
#0d0d0d
RGB(13, 13, 13)
Page background, hero
Charcoal
#1a1a1a
RGB(26, 26, 26)
Card surfaces, section panels
Smoke
#2a2a2a
RGB(42, 42, 42)
Dividers, subtle borders
Light + accent
Cream
#f7f1e3
RGB(247, 241, 227)
Body text on dark, hero copy
Bone
#e8e1d0
RGB(232, 225, 208)
Secondary text, meta
Brass
#c9a063
RGB(201, 160, 99)
Editorial accent — pull quotes, dish names, divider rules
03 / Typography
Type Scale
Playfair Display
Headings — editorial / cinematic
"Playfair Display", "Times New Roman", Georgia, serif
DM Sans
Body, UI, captions
"DM Sans", ui-sans-serif, system-ui, sans-serif
Your neighbourhood since 1980.
The signatures
Smoked Duck Carbonara
ON THE MENU
Three cuisines, one neighbourhood spot. Italian pastas, Mexican-style pizzas, slow-braised mutton curry — every dish has its regulars.
- Headings: Playfair Display serif, tight tracking, near-black weight. Cream on charcoal, never the other way.
- Body: DM Sans 400, line height 1.7, generous measure — read like a long-form menu, not marketing copy.
- Eyebrows: DM Sans 500, ALL CAPS, brass colour, wide tracking. Use to label sections.
- Reserve italic for editorial pull-quotes only.
- Never set red text. Red is for the logo and the primary CTA fill only.
04 / Components
Button Styles
Reserve
Reserve a Table
Primary CTA. One per page.
Find Us
Find Us
Secondary CTA on dark hero.
WhatsApp
+60 14-660 0712
Contact link — opens WhatsApp. Header & all contact CTAs.
- Square corners (2px). No rounded buttons — fits the editorial feel.
- DM Sans 700, uppercase, letter-spaced 0.08em.
- Hover: invert (red CTA → cream bg, red text; cream ghost → cream bg, charcoal text).
05 / Tokens
Spacing, Corners & Shadows
Corner Radius
Crisp
2px
Buttons, image masks. Editorial feel — barely rounded.
Card
0px
Cards, panels. Sharp edges.
Shadows
Soft glow
0 4px 24px rgba(0,0,0,0.4)
Floating cards on dark
Hero pop
0 24px 80px rgba(0,0,0,0.6)
Hero image elevation
Borders & Lines
Hairline
rgba(247,241,227,0.10)
Brass rule
#c9a063
06 / Visual Style
Visual Language
Cinematic, magazine-feature feel. Think Cereal Magazine + Bon Appétit Dinner Issue.
Full-bleed food photography against deep charcoal pages.
Generous whitespace — let one dish breathe per scroll viewport.
Serif headlines are the loudest element. Red is a punctuation mark, not a paragraph.
Brass rules and small caps eyebrows do the editorial labelling work.
Photography style: low light, warm key, tight crops on signature dishes. Wide shot of room only for the location section.
07 / Guidelines
Do's and Don'ts
Do
Use Cream on Charcoal as the default text-on-bg pairing.
Pair every dish photo with its name in Playfair Display 28px+.
Reserve red for: logo, the single 'Reserve a Table' CTA, and the underline that crosses the hero.
Lead the home page with a horizontal hero, full-bleed, copy left, dish photo right.
Use brass rules between sections — they break the dark slabs without lighting them up.
Don't
Don't fill large blocks with Sam's Red — it cheapens the wordmark.
Don't put body copy in Playfair — serifs are for impact, not paragraphs.
Don't stack three CTAs side-by-side. One Reserve, one secondary, that's it.
Don't use stock food photography. Owned Instagram shots or commissioned only.
Don't introduce a third type family. Playfair + DM Sans is the entire system.