CI Board — Homes by Kanawut

Color Palette

สีหลักจาก homes.in.th — warm brown tones แทน cold blue

Primary

#C3A082 / rgb(195,160,130)

Buttons, Active tabs, CTAs

Primary Dark

#B19276 / rgb(177,146,118)

Hover states, Borders, Links

Background

#F9F6F3 / rgb(249,246,243)

Page background, Section bg

Dark / Footer

#524337 / rgb(82,67,55)

Footer, Headings, Body text

Muted Text

#8B7B6B

Secondary text, Descriptions

Border

#E8DDD3

Borders, Dividers, Input borders

Surface

#FFFFFF

Cards, Inputs, Nav

Accent Light

#D4C4B0

Hover bg, Category cards, Tags

Typography

Font: Noto Sans Thai — clean, readable, Thai-optimized

Heading 1 — 700, 2rem

ค้นหาบ้านในฝัน เรามีครบ

Heading 2 — 700, 1.3rem

ค้นหาจาก

Body — 400, 0.9rem

ค้นหาทำเลตรงโซนแบบค้นหาพร้อมฟิลเตอร์แบบละเอียด

Link — 500, 0.9rem

ดูแผนที่ค้นหา →

Components

Navigation

Homes

หน้าแรก

เช่า

ซื้อ

สร้าง

Buttons

Search Bar

ค้นหาซื้อ

ค้นหาเช่า

Property Card

🏠

฿8,500,000

บ้านเดี่ยว 3 ห้องนอน สุขุมวิท

3 ห้องนอน 2 ห้องน้ำ 150 ตร.ม.

Footer

Category Cards

📍

ทำเล

🗺️

แผนที่

🏷️

แอคเค้ก

🚇

ใกล้รถไฟฟ้า

🚌

ใกล้รถเมล์

เปรียบเทียบ: ก่อน vs หลัง

สิ่งที่ต้องเปลี่ยนจาก blue theme → brown/beige theme

Element	ตอนนี้ (Blue)	เป้าหมาย (Brown)
Primary Color	#2563EB (blue-600)	#C3A082 (warm brown)
Primary Hover	#1D4ED8 (blue-700)	#B19276 (dark brown)
Page Background	#FFFFFF (white)	#F9F6F3 (warm beige)
Hero Section	gradient blue-900 → indigo-900	Dark photo overlay + white search
Text Color	#111827 (gray-900)	#524337 (warm dark brown)
Muted Text	#6B7280 (gray-500)	#8B7B6B (warm gray)
Border Color	#E5E7EB (gray-200)	#E8DDD3 (warm border)
Footer BG	#111827 (dark gray)	#524337 (dark brown)
Nav Active Tab	blue-600 bg + white text	#C3A082 bg + white text
Card Shadow	rgba(0,0,0,0.1)	rgba(82,67,55,0.1)
Font	Inter + Noto Sans Thai ✅	Noto Sans Thai (same)
Border Radius	rounded-xl (12px) ✅	7px buttons / 12px cards (similar)