Website Design Showcase
Chezchoux
西樹泡芙
精緻、高雅、專業 — 以品牌官方橙紅色及金黃色為主調。
Elegant, luxurious, professional — built on the official brand Pantone palette.
Website Design Showcase
西樹泡芙
精緻、高雅、專業 — 以品牌官方橙紅色及金黃色為主調。
Elegant, luxurious, professional — built on the official brand Pantone palette.
01 — Color System
Official brand palette — Pantone 1655C orange-red, 123C gold, cream white.
Core Palette
cream
#FFFEF0
bg-alt
#FFF8DC
white
#FFFFFF
border
#E8E0D4
fg-subtle
#A89B8C
fg-muted
#6B5D4F
fg
#1A1008
accent
#FF3C00
Accent & Semantic
orange 1655C
#FF3C00
gold 123C
#FFDC4A
orange-dark
#E63600
accent-subtle
#FFF0EB
gold-muted
#FFF5CC
02 — Typography
Optical-size variable serif paired with clean geometric body.
04 — Components
Buttons, badges, inputs, and cards — built for shadcn/ui + Framer Motion.
Buttons
Icons (Lucide-style, 1.5px stroke)
Announcement Bar
Enjoy free delivery on orders of HK$500+*
Testimonial Card
「芒果泡芙真的太好食了！每一口都感受到食材的新鮮和用心。全港最好食的泡芙，絕對值得推薦！」
陳小姐
中環
Product Card
新鮮芒果粒配幼滑忌廉
HK$ 58
馬達加斯加雲呢拿卡士達
HK$ 55
濃郁朱古力配烤核桃碎
HK$ 62
05 — Full Page Mockup
Homepage Design
Complete homepage layout with all sections, responsive and production-ready.
Homepage — Desktop viewport (1440px) — Chezchoux Website Design
06 — Mobile Homepage
Mobile Version (390px)
Enjoy free delivery on orders of HK$500+*
法式手工泡芙 · 香港
Artisan Patisserie · Hong Kong
Handcrafted with Passion
每一顆泡芙都是愛的結晶 — 每日新鮮出爐，採用最上等的法式烘焙技術及頂級食材精心製作。
關於我們 About Us
這些年，在泡芙製作的過程中，我們積累了豐富的經驗和專業知識。不斷的學習，研發出最佳的烘焙技術…
Over the years, we have developed the finest baking techniques...
Our Collaboration 合作夥伴
精選推薦 Featured
Hot Seller
顧客好評
「芒果泡芙真的太好食了！每一口都感受到食材的新鮮和用心。全港最好食的泡芙！」
陳小姐
中環
「訂了生日派對用的泡芙禮盒，包裝精美，味道一流。酥皮泡芙的口感真的無得輸！」
李先生
尖沙咀
「終於搵到一間真正有質感的泡芙店。由食物到包裝，每個細節都做得很好。回頭客無疑！」
黃小姐
灣仔
Homepage — Mobile viewport (390px) — iPhone 14/15 frame
06 — Motion System
Every animation serves meaning. Respect reduced-motion preferences.
Motion Tokens
| Token | Value | Used for |
|---|---|---|
ease-out |
0.22, 1, 0.36, 1 |
All entrance animations |
ease-in-out |
0.65, 0, 0.35, 1 |
Carousel transitions |
spring |
0.34, 1.56, 0.64, 1 |
Button press, menu open |
150ms |
Hover states, button feedback, micro-interactions | |
250ms |
Tooltips, dropdowns, color transitions | |
400ms |
Carousel slide, menu panel, modal open | |
600ms |
Scroll reveal entrance, page transitions | |
Hero Section Entrance — Auto Loop
法式手工泡芙 · 香港
Handcrafted with Passion
每一顆泡芙都是愛的結晶 — 每日新鮮出爐，採用最上等的法式烘焙技術。
The hero text, subtitle, body, and CTA buttons fade in together with a 600ms ease-out slide-up.
Fade + Slide Up
Testimonial card entrance. 600ms ease-out, 24px translate.
initial: { opacity: 0, y: 24 }
Stagger Children
Product cards animate in sequentially. 80ms delay each.
staggerChildren: 0.08
Card Hover Lift
Product cards lift on hover. Try hovering the cards below.
whileHover: { y: -6 }
Button Transitions
Hover the actual CTA buttons used in the mockup.
Nav Link Animation
Hover the actual category nav links.
Image Hover Zoom
Product images scale 105% on hover. 700ms transition.
transition: transform 700ms ease-out
hover: scale(1.05)