Design System
A collection of design component patterns used throughout the site
Table of Contents
Color Palette
Color system used throughout the site
Brand Colors
Favorite Pink
#d44a95
Cityguide
#EF9A9C
Primary
#337ab7
Hero Gradient
linear-gradient(135deg, #667eea, #f56565)
Category Colors
Restaurant
#E1B46E
Esthetic
#D75281
Shop
#34C5CF
UI Colors
Success
#5cb85c
Info
#5bc0de
Warning
#f0ad4e
Danger
#d9534f
Star
#FFCB40
Grayscale
gray-50
gray-100
gray-200
gray-400
gray-700
gray-900
Typography
Fonts: Inter, Noto Sans JP, system-ui
text-5xl / font-bold
Ho Chi Minh Travel Guide
text-4xl / font-bold
Heading Level 1
text-3xl / font-bold
Heading Level 2
text-2xl / font-bold
Heading Level 3
text-xl / font-bold
Heading Level 4
text-lg / font-medium
Subheader Text
text-base / leading-relaxed
This is a sample of body text. Ho Chi Minh City is Vietnam's largest city, packed with the charm of tourism and cuisine.It's a vibrant city where modern buildings and traditional Vietnamese streetscapes blend together.
text-sm / text-gray-600
Small text used for supplementary text and captions.
text-xs / text-gray-500
Extra small text used for meta information, dates, tags, etc.
Buttons
Action button style patterns
Primary Buttons (Pill Style)
Outline Buttons
CTA Buttons
Japanese OK!
Easy web reservations available here
Reserve a TableSocial Share Buttons
Cards
Content card design patterns
Article Cards
Ho Chi Minh Tourist Spots
Introducing popular tourist spots in Ho Chi Minh City. From historic buildings...
Top 10 Recommended Restaurants
Carefully selected restaurants popular with Japanese visitors. Reservation methods explained...
Mekong River Cruise Experience
Joined a Mekong River cruise tour. Highlights and points to note...
Author Profile Card
Author of this Article
Writer Name
Badges & Labels
Status and category display patterns
Star Ratings
Form Elements
Input form design patterns
Alerts
Notification and status message patterns
Icons
SVG icons used in the system
X (Twitter)
LINE
Home
Layout Grid
Responsive grid patterns
3-Column Grid
Column 1
Column 2
Column 3
4-Column Grid
1
2
3
4
Container Widths
max-w-4xl (896px) - Article content
max-w-4xl actual size
max-w-7xl (1280px) - Full section width
Spacing
Margin and padding patterns
Padding Scale
0.5rem (8px)
0.75rem (12px)
1rem (16px)
1.5rem (24px)
2rem (32px)
4rem (64px)
Border Radius Scale
rounded
rounded-lg
rounded-xl
rounded-2xl
rounded-full
Shadow Scale
shadow-sm
shadow-md
shadow-lg
shadow-2xl
