# 泰有福 Thai Blessing Food — Design System
**泰有福 (Tài Yǒu Fú) · Thai Blessing Food** is a Thai restaurant in Kuala Lumpur, Malaysia. The brand name is a playful triple-meaning: **泰 (tài)** = "Thai" (the country) / "extremely" (the adverb 太), and **有福 (yǒu fú)** = "has blessing / is fortunate." Literally: *"Thai food that brings you great fortune."*
The logo centres on a **dark-green elephant** in a circle (Thailand's auspicious national animal) above the Chinese wordmark **泰有福** in bold brush calligraphy, flanked by warm-gold **Thai flame (กนก / kranok) ornaments** framing the English wordmark "Thai Blessing Food."
---
## Sources
| Asset | Source | Location in project |
|---|---|---|
| Primary logo | User upload (`uploads/brand_files-1776536750235.png`) | `assets/logo-full.png` |
| No codebase, no Figma, no website provided. | — | — |
> **Caveat.** We do not yet have a real website, menu PDF, in-store photography, or existing product UI to reference. The system below is **derived from the logo** plus the brand direction the user chose: *tropical / lush greenery + coconut-and-bamboo neutrals + hand-lettered / script display + bright daylit food photography + custom food-themed illustrated icons*. Real screens, menu copy, and photography should be folded in next.
---
## Brand in one line
> 带一份泰式祝福到你的餐桌。 *A Thai blessing, brought to your table.*
## Brand pillars
1. **Blessing (福)** — generosity, good fortune, warmth. The meal is a wish.
2. **Hand-made craft** — brush calligraphy, hand-lettering, Thai kranok ornament — nothing slick or corporate.
3. **Garden freshness** — pandan, lime leaf, holy basil, coconut. Bright, daylit, alive.
4. **Kuala Lumpur at home** — bilingual (Chinese primary, English secondary), multicultural ease.
---
## Index
```
.
├── README.md ← you are here
├── SKILL.md ← machine-readable skill entry
├── colors_and_type.css ← CSS variables + semantic type classes
├── assets/ ← logos, icons, textures, photography placeholders
│ ├── logo-full.png
│ ├── logo-mark.png ← elephant circle only
│ ├── logo-wordmark-cn.png ← 泰有福
│ ├── logo-wordmark-en.png ← Thai Blessing Food w/ kranok
│ ├── logo-stacked.png ← mark + CN wordmark
│ ├── logo-lockup.png ← full vertical lockup
│ ├── kranok-*.svg ← reusable Thai flame ornaments
│ └── icons/ ← custom food-themed icon set
├── preview/ ← HTML cards that populate the Design System tab
├── ui_kits/
│ ├── marketing_site/ ← public website
│ ├── ordering_app/ ← mobile online ordering
│ ├── loyalty_app/ ← membership / points
│ ├── reservation/ ← reservation & booking flow
│ └── signage/ ← in-restaurant signage & table cards
└── slides/ ← investor pitch deck template
```
---
## CONTENT FUNDAMENTALS
### Voice
Warm, generous, slightly poetic. Like a proud auntie who has just set a dish in front of you: *"趁热吃。多吃一点。" (Eat it while it's hot. Have some more.)* Never corporate, never ironic, never flirty. Grounded and a little auntie-ish.
### Person & address
- **Chinese primary** — address the customer as **您** in formal contexts (menu, reservation confirmations) and **你** in casual contexts (loyalty app, social). First-person singular **我们** / "we" is used for the restaurant, never **本店** (too stiff).
- **English secondary** — warm and direct, sentence case. Never corporate-y ("partner", "solution", "experience" as a noun). Contractions welcome: *"we're open"* not *"we are open"*.
### Casing
- **Chinese headings**: mixed size brush or serif, no caps concept. 泰有福 always printed as three characters, never spaced.
- **English display headings**: sentence case with an *italic display serif* (`Cormorant`) for poetic lines, OR **TIGHT SMALL-CAPS** with wide tracking for utility headers (matches the "BLESSING FOOD" treatment in the logo).
- **Buttons**: sentence case in EN (*"Order now"*), natural CN (*"立即下单"*). No ALL CAPS buttons.
- **Never use Title Case** for body or labels — it reads American and corporate.
### Tone example — hero
> **趁热，是最大的祝福。**
> *A meal served hot is a wish well-made.*
> 泰国街头 · 马来西亚家门口
### Tone example — empty state
> 购物车还是空的。
> Hungry? Let's start with the tom yum.
### Tone example — error
> 哎呀，连不上厨房。请稍等片刻再试。
> *Hmm, we can't reach the kitchen. Give us a moment.*
### Tone example — loyalty
> 恭喜！您已累积 **福** 88 点。
> *88 is a lucky number. So is a free mango sticky rice.* 🙂 *(no emoji if brand is strict)*
### Emoji
**Sparingly, and never on the website or menu.** Acceptable in the loyalty app chat, reservation-confirmation SMS, and Instagram captions. Preferred set when used: 🌿 🥭 🌶️ 🐘 ✨. Never ❤️, 👍, or corporate emoji. **Default to no emoji.**
### What to avoid
- "Partner with us", "elevate your dining experience", "inspired by authentic Thai flavors" — generic marketing slop.
- Chili-count heat ratings. Instead describe: *"后劲辣 — 建议搭配椰汁饮品"* / *"Slow-build heat — we suggest a coconut drink."*
- Apologetic openers in Chinese ("不好意思..."). Be direct and warm.
- Exclamation marks in English. One per page maximum.
---
## VISUAL FOUNDATIONS
### Palette
| Token | Hex | Role |
|---|---|---|
| `--brand-green` | **#005000** | Primary. Elephant mark. Headers, CTAs. Sampled from logo. |
| `--brand-green-deep` | #003a00 | Dark backgrounds, footer, inverted surfaces. |
| `--brand-gold` | **#B48C6C** | Warm tan-gold. Kranok ornament, decorative lines, price. Sampled from logo. |
| `--brand-gold-deep` | #8C6A4A | Secondary gold. Links, hover. |
| `--coconut-50` | **#FBF8F2** | Default page background. Rice-paper cream. |
| `--coconut-100` | #F4EDE0 | Surface / card background. |
| `--coconut-200` | #E8DCC4 | Hairline borders, dividers. |
| `--bamboo-600` | #4D4030 | Body text on cream. |
| `--bamboo-700` | #2D2418 | Headings. |
| `--state-success` (pandan) | #4A7C3A | Success. |
| `--state-warning` (turmeric) | #C88A2E | Warning. |
| `--state-danger` (chili) | #A83232 | Danger. |
- **Don't use pure `#000` or pure `#fff` on body surfaces.** Black feels too flat against the warm cream; use `--bamboo-800` (#1a1410) for black and `--coconut-00` (#fff) only for photography, not type surfaces.
- **Don't place green text on gold.** Green on cream, gold on cream, or cream on green.
### Typography
| Role | Family | Fallback | Notes |
|---|---|---|---|
| Brush display (CN) | **Ma Shan Zheng** | Noto Serif SC | ⚠️ Google Fonts substitution. Logo wordmark is a custom brush. |
| Display serif (EN) | **Cormorant Garamond** (italic 500) | Noto Serif SC | ⚠️ Substitute for the bespoke "Thai" wordmark serif. |
| Small-caps utility | **Cormorant SC** | serif | For "BLESSING FOOD"-style tracked labels. |
| Sans body (EN/CN) | **DM Sans** / **Noto Sans SC** | system-ui | Warm, neutral, high legibility. |
| Script accent | **Caveat** | cursive | Optional handwritten moments (table numbers, "Chef's pick"). |
> **⚠️ Font substitution notice.** All of the above are Google Fonts approximations. If you have the real brush wordmark, decorative serif ("Thai" glyph), or a licensed hand-lettered display, please share the font files so we can drop them into `fonts/`.
### Type rhythm
- Big editorial hero uses a **2-line pairing**: italic serif English above small-caps English, OR brush CN above italic serif EN. Never both brush and italic serif at full size in one block — they fight.
- Body minimum on screen: 16px. On printed menus, 11pt / 4.5mm minimum.
- Line length: 60–75 CH for body; 38–55 CH for hero poetry lines.
### Spacing
8-point scale (`4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`). Be generous — the brand breathes. Default card padding is 24/32px; hero padding 80–128px.
### Backgrounds
- **Default**: cream (`--coconut-50`). No gradients, no textures on UI surfaces.
- **Optional texture**: faint *rice paper* noise (3–5% opacity) on hero sections — provided as an SVG filter. Never on small components.
- **Hero sections**: real full-bleed food photography, daylit and crisp, OR solid `--brand-green-deep` with cream type. Never stock-photo "flat lay on marble" tropes.
- **No gradients.** This brand never ships a bluish-purple hero gradient. The one allowed gradient is a **vertical "protection" gradient** at the bottom of food photography (black 0% → black 55%) to keep white captions readable.
### Corner radii
- Small chips & tags: 4px
- Buttons & inputs: 8px (not pill — we are not a fintech)
- Cards: 14–20px
- Dish tiles / hero imagery: 20–28px
- **Full pills** reserved for **福 Points** badges and "NEW" tags only
### Borders
Prefer **1px hairlines in `--coconut-200`** or **1px gold in `--brand-gold-soft`** over shadows for most UI separation. Shadows only for actual elevation (modals, popovers, floating CTAs).
### Shadow system
Warm-toned — all shadows carry a brown undertone (`rgba(77, 64, 48, X)`) rather than cool grey.
- `--shadow-xs`: hairline lift, for input focus
- `--shadow-sm`: resting card
- `--shadow-md`: hover / raised card
- `--shadow-lg`: dropdown / popover
- `--shadow-xl`: modal / bottom sheet
### Hover & press states
- **Hover**: brand-green surfaces darken 10% (→ `--brand-green-deep`); cream surfaces get a 4% green tint (`rgba(0,80,0,0.04)`); text links underline and shift to `--brand-gold-deep`.
- **Press**: scale to 0.98 AND darken; duration `--dur-fast` (140ms) with `--ease-standard`. Never rely on scale alone.
- **Focus**: 2px gold ring (`--brand-gold`) with 2px offset. Never the browser-default blue.
### Motion
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` for standard, `cubic-bezier(0.0, 0, 0.2, 1)` for entrances. No bouncy overshoot.
- **Duration**: 140 / 220 / 380 / 560 ms. Default is 220.
- **Transitions**: color, opacity, and transform. Never animate width/height — use scale + clip-path.
- **Reveal** on scroll: 12px upward slide + fade-in over 380ms. No staggered cascades on more than 4 items.
### Transparency & blur
- Use sparingly. Allowed on mobile nav overlays: `backdrop-filter: blur(16px)` on a `rgba(251, 248, 242, 0.78)` surface.
- **Never blur** for decoration. Never frosted-glass cards.
### Cards
Three flavours:
1. **Paper card** — cream surface, 1px `--coconut-200` hairline, `--shadow-xs`, radius 14–20. Default for most UI.
2. **Dish card** — image top-bleed (radius 20 top), cream body below with 24px padding, hairline only on bottom. For menus.
3. **Green card** — inverted: `--brand-green-deep` bg, cream type, gold hairline. For testimonials and "blessings."
### Layout rules
- **Fixed-position elements**: top nav only (56–72px tall); mobile bottom-sheet cart (160–320px tall); floating "福 Points" badge in loyalty app.
- Section rhythm on marketing pages: hero (100vh), then alternating full-bleed and contained sections with **128px** vertical breathing room.
- Grid: 12-col desktop / 6-col tablet / 4-col mobile. 24px gutters default.
### Imagery
- **Food photography**: bright, daylit, shot slightly overhead (not flat-lay), with real banana-leaf or teak surfaces. Ingredients visible and scattered naturally. Warm colour grading — a touch of magenta pulled out of the shadows, greens boosted. Never cool / over-teal.
- **Brand imagery**: elephants, kranok ornaments, pandan leaves, lime leaves, holy basil, coconut, lotus. All illustrated in a hand-drawn line style (1.5–2px strokes, `--brand-green`), not flat vector emoji.
- **Never** AI-generated food photos with 6 fingers on chopsticks. We'll use placeholders until real shots arrive.
### Decorative motifs
- **Thai kranok (flame ornament)** — from the logo; used as section dividers, corner flourishes on menus, and ticket-style cutouts on loyalty stamps.
- **Elephant silhouette** — tiny, as a bullet or list marker. Not decorative noise.
- **Brush swish** — short calligraphic underline under brush-CN headlines (8–10px thick, slight tilt).
---
## ICONOGRAPHY
**Approach.** Because the brand has a hand-drawn, craft-forward character, we use a **custom single-line illustrated icon set** rather than a clinical stroked set like Lucide. Icons are:
- Drawn on a **24×24** grid with **1.75–2px strokes** (slightly heavier than Lucide's 2px);
- **Rounded linecaps and joins** — friendly, never mechanical;
- **`currentColor`** strokes, no fills by default; active/filled variants use `--brand-green` fill;
- Food-themed where possible (a `search` icon has a chili as the handle; a `heart` is a lotus bud).
**Sets in the project.**
- `assets/icons/tbf/*.svg` — our custom hand-drawn set (utility + food-themed), shipped in this system.
- **Fallback.** For icons we haven't drawn yet (calendar chevrons, status glyphs, system UI), we fall back to **Phosphor Icons (regular weight)** via CDN — it has rounded, slightly-heavy lines closest to our hand-drawn feel. ⚠️ This is a placeholder substitution — we should draw our own over time.
```html
```
**Emoji & unicode.** Not used as icons. Chinese characters (福, 泰, 有) appear as decorative typography but are never treated as icons. The only allowed unicode glyph as a marker is `·` (middle dot) as a separator between CN and EN labels.
**Logo usage rules.**
- Full lockup: marketing only, never smaller than 140px wide.
- Mark alone: favicon, app icon, loyalty stamps.
- CN wordmark alone: in-store signage, receipts.
- Minimum clearspace around the full lockup: equal to the height of the 泰 character.
- Never recolour. Never place on busy imagery without a cream plate behind it.
---
## Next steps for the user
1. **Provide real fonts** for the brush CN wordmark and "Thai" display serif — current versions are Google Fonts approximations.
2. **Provide photography** — hero, 12–20 dishes, interior shots. Current screens use placeholder boxes.
3. **Confirm menu structure** — dish categories, signature dishes, pricing format (RM vs MYR).
4. **Confirm loyalty mechanic** — how points work, tier thresholds, rewards catalog.