Skyhigh 88 Travel · Revamp 2026

Design System — Quiet Luxury

ระบบออกแบบสำหรับเว็บไซต์ข้อมูลบริการเดินทางระดับ VIP ใช้สีน้ำเงินเข้มและขาวงาช้างเป็นหลัก สีแดงจากโลโก้ใช้เป็นจุดเล็กๆ เท่านั้น เพื่อให้ภาพรวมดูเรียบ หรู และมีราคา

CI: แดง · ขาว · น้ำเงินเข้มMood: Elegant & Luxuriousภาษา: TH · EN · 中文Target: VIP

01 · Principles

หลักการออกแบบ

ทุกการตัดสินใจด้านดีไซน์ตอบโจทย์เดียว คือทำให้ลูกค้า VIP รู้สึกว่าได้รับการดูแลแบบส่วนตัว

พื้นที่ว่างคือความหรู

เว้นระยะ section 96–128px ไม่อัดข้อมูล ให้ภาพและหัวข้อได้หายใจ

แดงเป็นลายเซ็น ไม่ใช่พื้น

สีแดงไม่เกิน 5% ของหน้าจอ ใช้กับเส้นสั้น จุด และสถานะ active

ตัวอักษรบาง โปร่ง เป็นชุดเดียวกัน

หัวข้อและเนื้อหาเป็นฟอนต์ไทยไม่มีหัวทั้งคู่ หัวข้อใช้น้ำหนักบาง 300 ขนาดใหญ่ ส่วนคำอังกฤษเด่นๆ ใช้ Marcellus

เหลี่ยมคม ไม่มน

ปุ่มและการ์ดมุมฉาก ดูเหมือนงานตัดเย็บ ยกเว้นปุ่มภาษาเป็นแคปซูล

02 · Color

สี

พื้นหลัง "ขาว" ของแบรนด์คือขาวงาช้าง #F7F3EC ไม่ใช้ #FFFFFF ตามที่ลูกค้าต้องการ สีน้ำเงินในโลโก้เป็น royal blue จึงใช้เฉพาะในตัวโลโก้ ส่วนเว็บใช้น้ำเงินเข้มที่ดูนิ่งกว่า

Navy 800 · Primary#0F1B33หัวข้อ ปุ่มหลัก footer section พื้นเข้ม

Navy 700#1C2A4Ahover ของปุ่ม พื้นการ์ดบน navy

Ivory 100 · Background#F7F3ECพื้นหลังหลักทุกหน้า

Ivory 200#EDE6DAพื้น section สลับ

Ivory 50 · "White"#FBF8F3การ์ด ตัวอักษรบน navy

Red · Accent#C8102Eเส้นสั้นหน้า eyebrow จุด slider เมนู active · ≤5%

Slate · Body#565E70เนื้อหาบนพื้นงาช้าง (contrast 5.9:1)

Sand · Detail (ไม่บังคับ)#B89B6Aeyebrow เส้นกรอบรูป ไอคอนเล็ก

Ivory 60% Navy 25% Ivory 200 10%

03 · Typography

ตัวอักษร

ทั้ง 3 ฟอนต์อยู่บน Google Fonts โหลดผ่าน Elementor ได้ทันที Marcellus ใช้กับตัวเลขและคำภาษาอังกฤษเด่นๆ เท่านั้น เพราะไม่มีอักษรไทย

Heading · ไทย/อังกฤษสกายไฮAnuphan300 · หัวข้อทุกระดับ · ไม่มีหัว เข้าชุดกับเนื้อหา

Display · Latin onlyPrivate 1A · 20+Marcellus400 · ตัวเลขและคำเน้นภาษาอังกฤษ · ตัวอักษรชัด ตัวเลขสูงเท่ากันทุกตัว · ใช้แบบตรงเท่านั้น (ไม่มีตัวเอียง)

Body · ไทย/อังกฤษบริการNoto Sans Thai300 เนื้อหา · 500 ปุ่มและป้าย

ตัวเลือกฟอนต์หัวข้อ · ฟอนต์ไทยไม่มีหัวทั้งหมด ไปทางเดียวกับฟอนต์เนื้อหา · กดเพื่อดูทั้งหน้า (template ทั้ง 3 จะจำค่าที่เลือก)

Display
clamp(3–7rem)

20 years

H1 · 2.3–4.4remทุกการเดินทาง ออกแบบเพื่อคุณ

H2 · 1.9–2.9remดูแลทุกรายละเอียดระดับ VIP

H3 · 1.4–1.85remPrivate Jet

H4 · 1.15–1.35remบริการดูแลพิเศษที่สนามบิน

Lead · 1.125rem/300

ตั๋วเครื่องบินทุกชั้นโดยสาร บริการดูแลพิเศษ และเครื่องบินส่วนตัว ครบในที่เดียว

Body · 1rem/300

ทีมงานประสบการณ์กว่า 20 ปี ดูแลตั้งแต่การวางแผน การจอง จนถึงวันเดินทางกลับ ด้วยความเป็นส่วนตัวสูงสุด

Eyebrow · .75rem/500
tracking .24em

Private Travel Concierge

04 · Space & Grid

ระยะห่าง & กริด

ใช้สเกล 8pt คอนเทนเนอร์กว้าง 1200px กริด 12 คอลัมน์ gap 24px ระยะ section ปรับตามจอ clamp(64px, 10vw, 128px)

s28px

s416px

s524px

s632px

s748px

s864px

s996px

s10128px

Breakpoints (ตรงกับ Elementor)

Desktop ≥1025px · Tablet 768–1024px · Mobile ≤767px
ตรวจจริงที่ 320 / 375 / 768 / 1024 / 1366 / 1440
ปุ่มโทรบน hero: Desktop แสดงเบอร์สำนักงาน, Tablet/Mobile แสดงเบอร์มือถือ

05 · Line, Shape, Motion

เส้น รูปทรง การเคลื่อนไหว

มุม 0px

ปุ่ม การ์ด รูป ใช้มุมฉากทั้งหมด ยกเว้นปุ่มเปลี่ยนภาษาและป้ายเล็ก (pill)

เส้น 1px

เส้นแบ่งบนงาช้าง #DDD3C3 · บน navy rgba(251,248,243,.15) · กรอบรูปใช้ Sand 40% เลื่อนออก 14px

Motion 450ms

ease cubic-bezier(.2,.7,.2,1) · รูปซูม 4% เมื่อ hover · ลูกศรเลื่อน 4px · ปิดเมื่อผู้ใช้ตั้ง reduce motion

06 · Components

ปุ่ม

สูงอย่างน้อย 48px เพื่อให้แตะง่ายบนมือถือ ปุ่มไม่ใช้สีแดงทึบ เพราะทำให้ดูเป็นเว็บขายของ

บนพื้นงาช้าง

ดูบริการของเรา ติดต่อเรา อ่านเพิ่มเติม

บนพื้น navy / รูป

ติดต่อเจ้าหน้าที่ · 02-398-1133 Private Jet

หัวข้อ section

รูปแบบเดียวกันทุก section: eyebrow ภาษาอังกฤษ (นำด้วยเส้นแดง 28px) → หัวข้อภาษาไทย → ย่อหน้าสั้น ไม่เกิน 2–3 บรรทัด

Our Promise

ดูแลทุกรายละเอียด
ด้วยมาตรฐานระดับ VIP

ทีมงานของเราพร้อมดูแลคุณอย่างใกล้ชิด ตั้งแต่การวางแผนจนถึงวันเดินทางกลับ

Testimonials

เสียงจากลูกค้าของเรา

แบบจัดกึ่งกลาง ใช้กับ section ที่มีเนื้อหาเป็นกริดด้านล่าง

เมนู & ภาษา

เมนูหลัก 5 รายการ เมนูของหน้าที่เปิดอยู่มีเส้นแดง 1px ใต้คำ และปุ่มภาษา TH · EN · 中文 (Google Translate) อยู่ขวาสุด ตั้งแต่ 960px ลงมาเมนูเปลี่ยนเป็น hamburger

Skyhigh 88Travel

การ์ดบริการ

รูปแนวตั้ง 4:5 ป้ายภาษาอังกฤษสีทราย ชื่อบริการภาษาไทย คำอธิบาย 1–2 บรรทัด และลิงก์ข้อความ

Private Aviation

Private Jet

เช่าเหมาลำ ยืดหยุ่นทั้งเวลาและเส้นทาง

ดูรายละเอียด

VIP Assistance

บริการดูแลพิเศษ

Fast Track และ Lounge Access ทุกเที่ยวบิน

ดูรายละเอียด

Special Baggage

สัมภาระพิเศษ

อุปกรณ์กีฬา เครื่องดนตรี สัตว์เลี้ยง

ดูรายละเอียด

รีวิว

ข้อความรีวิวต้องเป็นของลูกค้าจริงเท่านั้น ก่อนได้รีวิวจริงให้แสดงกรอบตัวอย่างไว้ ไม่แต่งชื่อหรือคำพูดขึ้นเอง

พื้นที่สำหรับข้อความรีวิวจริงจากลูกค้า 1–2 ประโยค

ชื่อลูกค้า · ตำแหน่ง / บริษัท

ฟอร์ม

ช่องกรอกแบบเส้นล่างบาง ไม่มีกล่อง ใช้ในหน้าติดต่อเรา

ชื่อ-นามสกุล

เบอร์โทรศัพท์

ข้อความ

ปุ่มติดต่อลอย

อยู่กลางขอบขวาทุกหน้า: Facebook, LINE, WhatsApp, Email, Phone · ชี้หรือโฟกัสแล้วชื่อช่องทางเลื่อนออกมาทางซ้าย · ช่องไหนไม่มีข้อมูลใน Web Setting จะซ่อนอัตโนมัติ (WhatsApp ตอนนี้ยังไม่มีเบอร์) · บนมือถือย่อเหลือ 42px และไม่แสดงชื่อ

A · Glass — ใช้กับ Nocturne

แถบกระจกฝ้าโปร่ง มีคำว่า Contact แนวตั้ง กลืนไปกับภาพถ่ายโทนมืด

B · Pill — ใช้กับ Ivory Editorial

แคปซูลสีงาช้างลอยห่างขอบ ไอคอนน้ำเงิน hover เป็นวงกลมน้ำเงินพร้อมจุดแดง

C · Stub — ใช้กับ Boarding Pass

ต้นขั้วตั๋วสีน้ำเงิน รูเจาะด้านบน เส้นประคั่นแต่ละช่อง ป้ายชื่อแบบตัวพิมพ์ดีด

ปุ่มกลับขึ้นด้านบน

มุมขวาล่าง แสดงเมื่อเลื่อนลงเกิน 600px · แบบ A และ C บอกว่าอ่านไปถึงไหนแล้ว · บนมือถือย่อขนาดลง

A · Ring — วงกลมงาช้าง วงแหวนสีทรายเติมตามการเลื่อน

B · Pill — แคปซูลงาช้าง ตัวอักษร Top แนวตั้ง

C · Gate — วงกลมน้ำเงิน เส้นประแบบรอยปรุตั๋ว วงแหวนแดง + เครื่องบิน

ปุ่มเปลี่ยนภาษา

ทุกแบบเชื่อมกับ Google Translate (TH · EN · 简体中文) · ภาษาที่เลือกอยู่ใช้สีแดงเล็กๆ เป็นตัวบอก · กดด้วยคีย์บอร์ดได้

A · Globe dropdown

B · Editorial slashes

C · Seat tiles

LANG

Animation

เนื้อหาทุกส่วนแสดงครบแม้ไม่มี animation · องค์ประกอบด้านล่างจอจะเผยตัวครั้งเดียวเมื่อเลื่อนถึง เรียงทีละชิ้น (stagger 50–120ms) · ปิดทั้งหมดเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว

A · Nocturne — Cinematic

hero ค่อยๆ ชัดจากเบลอทีละบรรทัด · ภาพซูมออกช้าๆ · คอลัมน์บริการลอยขึ้นทีละคอลัมน์ · footer จางเข้า

B · Ivory — Editorial

ภาพเปิดแบบม่านจากซ้ายไปขวา (wipe) · ข้อความลอยขึ้น · การ์ดและรายการเรียงขึ้นทีละชิ้น

C · Boarding — Departure board

บัตรขึ้นเครื่องหล่นลงพร้อมเอียง · ตั๋วบริการเลื่อนเข้าจากขวา · แถวกระดานพลิกแบบป้ายสนามบิน · ป้ายกระเป๋าหล่นลง

07 · Usage

การใช้สีแดง

ใช้ได้

เส้นสั้น 28px หน้า eyebrow
เส้นใต้เมนู active และ hover
จุด slider ที่กำลังแสดง
เครื่องหมายคำพูดในรีวิว
ไอคอนตอน hover

ไม่ควรใช้

พื้นหลัง section หรือแถบเต็มความกว้าง
ปุ่มทึบสีแดง
หัวข้อหรือย่อหน้าทั้งย่อหน้า
ใช้คู่กับ royal blue ของโลโก้ในขนาดใหญ่
ใส่ในรูปภาพเป็น overlay

09 · Brand assets

การใช้โลโก้

ใช้โลโก้สีจริงของลูกค้าเสมอ ถ้าพื้นหลังเข้มหรือเป็นภาพ ให้วางบนวงกลมงาช้าง (roundel) เพื่อให้ตัวหนังสือน้ำเงินของโลโก้อ่านออก · ใช้แบบสีขาวสีเดียวเฉพาะเมื่อพื้นที่เล็กมาก

บนพื้นงาช้าง · ใช้ตรงๆ

บนพื้นเข้ม / ภาพ · roundel

สีเดียว · เฉพาะขนาดเล็ก

ไม่ควรทำ

วางโลโก้สีบนภาพโดยไม่มี roundel
ยืด บีบ หมุน หรือเปลี่ยนสีโลโก้
เล็กกว่า 40px บนจอ
เว้นระยะรอบโลโก้น้อยกว่า ¼ ของความกว้างโลโก้

ภาพถ่าย

โทนอุ่น แสงธรรมชาติ ช่วงเวลาทองหรือภายในหรูหรา · เน้นพื้นที่ว่างและรายละเอียด (เบาะ หน้าต่างเครื่องบิน ล็อบบี้) มากกว่าคนยิ้มมองกล้อง · overlay ใช้ไล่สีน้ำเงินเข้มเท่านั้น

ไม่ควรใช้

ภาพสต็อกคนชี้นิ้ว ยิ้มเกินจริง
overlay สีแดงหรือฟิลเตอร์จัด
ภาพที่มีโลโก้สายการบินเด่นชัด (สิทธิ์การใช้)
ภาพความละเอียดต่ำหรือแตก

ไอคอน

เส้นบาง 1.4px · ปลายเส้นตัด · กรอบ 24×24 · สีตามตัวอักษรรอบข้าง · ใช้ไอคอนแบรนด์ (Facebook, LINE, WhatsApp) แบบทึบเพื่อให้จำได้ทันที

arrow · phone · mail · facebook · line · whatsapp

ปุ่มเลื่อนไป section (โปรโมชั่น / บริการ)

ตาม scope: ปุ่มในแต่ละ section ลิงก์ไป "Focus Section" ในหน้าเดียวกัน ใช้ปุ่มข้อความพร้อมลูกศรลง เลื่อนแบบนุ่ม และเว้นที่ด้านบนเท่าความสูง header (scroll-margin) เพื่อไม่ให้หัวข้อถูก header บัง

ดูโปรโมชั่น Private Jet ข้ามไปเงื่อนไขโปรโมชั่น ↓ section { scroll-margin-top: 110px }

สถานะของฟอร์ม

ปกติ

ผิดพลาดกรุณากรอกอีเมลให้ครบ เช่น name@email.com

ปิดใช้งาน

ส่งข้อความเรียบร้อยแล้ว เจ้าหน้าที่จะติดต่อกลับภายใน 1 วันทำการ

เมนูบนมือถือ

ตั้งแต่ 960px ลงมา ปุ่ม ☰ เปิดเมนูเต็มจอ: เมนู 5 รายการ · ปุ่มภาษา · เบอร์โทร/อีเมล · ปิดด้วย ✕ หรือ Esc · แต่ละ template มีสีของตัวเอง (A/C น้ำเงิน, B งาช้าง, C มีรหัส HOME/PROMO/…)

A · Nocturne

พื้นน้ำเงิน ตัวหนังสือ serif ใหญ่ จุดแดงหน้าที่เปิดอยู่

B · Ivory

พื้นงาช้าง ตัวหนังสือน้ำเงิน เส้นแบ่งสีทราย

C · Boarding Pass

พื้นน้ำเงิน เส้นประ และรหัสแบบป้ายสนามบินข้างชื่อเมนู

ตั้งค่าใน Elementor

ชื่อที่ต้องตั้งใน Site Settings ของ Elementor ให้ตรงกับ design system (บนเว็บจริงตั้งไว้แล้วบางส่วน)

Elementor	ค่า	ใช้กับ
Global Color · Primary	`#0F1B33`	หัวข้อ ปุ่มหลัก footer
Global Color · Secondary	`#EDE6DA`	พื้น section สลับ
Global Color · Text	`#565E70`	เนื้อหา
Global Color · Accent	`#C8102E`	เส้น จุด สถานะ active เท่านั้น
Custom · Ivory / Ivory 50 / Sand / Navy 700	`#F7F3EC · #FBF8F3 · #B89B6A · #1C2A4A`	พื้นหลัง การ์ด รายละเอียด hover
Global Font · Primary (Heading)	Anuphan 300	H1–H4
Global Font · Secondary (Display)	Marcellus 400	ตัวเลข คำเน้นภาษาอังกฤษ
Global Font · Text / Accent	Noto Sans Thai 300 / 500	เนื้อหา / ปุ่มและป้าย
Breakpoints	Mobile ≤ 767 · Tablet ≤ 1024	ค่าเริ่มต้นของ Elementor

10 · Templates

Template หน้าแรก 3 แบบ

ทั้ง 3 แบบใช้ design system ชุดเดียวกันและมีครบตาม scope: เมนู 5 รายการ + ภาษา, Hero พร้อมปุ่มโทร, Slide บริการ, Core Value, Testimonial, Footer และปุ่มติดต่อลอย ต่างกันที่การวางเลย์เอาต์และอารมณ์

Dark · CinematicA — Nocturneภาพเต็มจอโทนกลางคืน หัวข้อกลางจอ แถบบริการ 5 คอลัมน์ขยายเมื่อชี้ ใกล้เคียง Hoexr / Hotelux

Light · EditorialB — Ivory Editorialพื้นงาช้าง เลย์เอาต์แบบนิตยสาร รูปวางเหลื่อม ตัวเลข 20 ปีขนาดใหญ่ ใกล้เคียง Hotera / Elegencia

Signature · AviationC — Boarding Passบริการแสดงเป็นบัตรขึ้นเครื่อง ใช้ภาษาการบิน (BKK, Seat 1A, Class) เป็นเอกลักษณ์ของแบรนด์

Header & Footer ของแต่ละแบบ · ตัวอย่างหน้าแรก เกี่ยวกับเรา และติดต่อเรา

A · Nocturne

Header: โปร่งใสทับภาพ hero · เมนูแยกซ้าย 3 / ขวา 2 · โลโก้กลางพร้อมชื่อแบรนด์
Footer: จัดกลางทั้งหมด · โลโก้ใหญ่ · เมนูแนวนอนคั่นจุดแดง · แถบช่องทางติดต่อ 4 ช่อง
ปุ่มลอย: Glass · Back to top Ring

หน้าแรก A →เกี่ยวกับเรา A →ติดต่อเรา A →

B · Ivory Editorial

Header: แถบบนสีน้ำเงิน (เบอร์โทร อีเมล ภาษา) + แถบหลักงาช้างติดบนเมื่อเลื่อน · ปุ่ม "ติดต่อเรา" แบบเส้นขอบ
Footer: ข้อความเชิญชวนตัวใหญ่ + ปุ่มโทรแบบ 2 บรรทัด และปุ่ม LINE · 4 คอลัมน์ บริษัท / เมนู / บริการ / ติดต่อ
ปุ่มลอย: Pill · Back to top แคปซูล

หน้าแรก B →เกี่ยวกับเรา B →ติดต่อเรา B →

C · Boarding Pass

Header: แถบบัตรขึ้นเครื่องสีงาช้างลอยเหนือหน้า มีรอยบากซ้ายขวา · โลโก้คู่ชื่อ "SKYHIGH 88" · ต้นขั้วเส้นประด้านขวามีภาษาและปุ่มโทร "GATE VIP"
Footer: ทั้ง footer เป็นบัตรขึ้นเครื่อง · ซ้ายข้อมูลบริษัท ขวาต้นขั้วช่องทางติดต่อ · แถบล่างตัวพิมพ์ดีด
ปุ่มลอย: Stub · Back to top Gate

หน้าแรก C →เกี่ยวกับเรา C →ติดต่อเรา C →

หลักการออกแบบ

พื้นที่ว่างคือความหรู

แดงเป็นลายเซ็น ไม่ใช่พื้น

ตัวอักษรบาง โปร่ง เป็นชุดเดียวกัน

เหลี่ยมคม ไม่มน

สี

ตัวอักษร

ระยะห่าง & กริด

Breakpoints (ตรงกับ Elementor)

เส้น รูปทรง การเคลื่อนไหว

มุม 0px

เส้น 1px

Motion 450ms

ปุ่ม

หัวข้อ section

ดูแลทุกรายละเอียดด้วยมาตรฐานระดับ VIP

เสียงจากลูกค้าของเรา

เมนู & ภาษา

การ์ดบริการ

Private Jet

บริการดูแลพิเศษ

สัมภาระพิเศษ

รีวิว

ฟอร์ม

ปุ่มติดต่อลอย

ปุ่มกลับขึ้นด้านบน

ปุ่มเปลี่ยนภาษา

Animation

A · Nocturne — Cinematic

B · Ivory — Editorial

C · Boarding — Departure board

การใช้สีแดง

ใช้ได้

ไม่ควรใช้

การใช้โลโก้

ไม่ควรทำ

ภาพถ่าย

ไม่ควรใช้

ไอคอน

ปุ่มเลื่อนไป section (โปรโมชั่น / บริการ)

สถานะของฟอร์ม

เมนูบนมือถือ

A · Nocturne

B · Ivory

C · Boarding Pass

การเข้าถึง (Accessibility)

ความคมชัดของสี (WCAG)

การใช้งาน

ตั้งค่าใน Elementor

Template หน้าแรก 3 แบบ

Header & Footer ของแต่ละแบบ · ตัวอย่างหน้าแรก เกี่ยวกับเรา และติดต่อเรา

ดูแลทุกรายละเอียด
ด้วยมาตรฐานระดับ VIP