Mission Control Edition — v1.1

Adwaffle
Brand Book

Corporate Identity & Design Guidelines สำหรับ Ad-to-Lead Intelligence Platform ของไทย

Version
1.1.0
Theme
Astronaut
Primary
#2563eb
Updated
2026-03-15
01 — Brand Story

เราคือใคร และทำไมเราถึงมีอยู่

AdWaffle เกิดขึ้นจากปัญหาเดียวกันที่นักการตลาดไทยทุกคนเผชิญ — ยิงโฆษณาไปแล้วไม่รู้ว่าชิ้นไหนปิดการขายได้จริง

🚀

Mission

เชื่อมโยง Facebook Ads และ LINE OA ให้ธุรกิจไทยรู้ว่าโฆษณาไหนสร้าง Conversion จริง ไม่ใช่แค่ตัวเลข Click

🛰️

Vision

เป็น Performance Marketing Intelligence Layer ที่ดีที่สุดสำหรับตลาดไทย และขยายไปยัง CLMV

🎯

Target

SME ไทยที่ยิง Facebook Lead Ads และมี LINE OA — ต้องการความแม่นยำแต่ไม่มีทีม Developer

⚡

Differentiator

ตั้งค่าได้เองใน 15 นาที ไม่ต้องเขียน Code เข้าใจ Ecosystem ของ Facebook + LINE ในตลาดไทยดีที่สุด

"ถ้าคุณใช้ AdWaffle คุณจะรู้ว่า
โฆษณาไหนปิดการขายได้ — ไม่ใช่แค่คลิก"

02 — Color System

Mission Color Palette

ระบบสีได้รับแรงบันดาลใจจากชุดนักบินอวกาศ — ขาวสะอาดเป็นพื้นที่หลัก น้ำเงิน Electric สื่อถึงความแม่นยำและ Digital-first ส้มสื่อถึงพลังงานในการลงมือทำ

Electric Blue
#2563eb
Primary — Buttons, Nav, Links
Orbit Blue
#3b82f6
Hover, Interactive states
Launch Orange
#f97316
CTA, Alerts, Highlights
Ink Dark
#111827
Headings, Wordmark
Space White
#ffffff
Primary background (>60%)
Color Usage Ratio

60% Space White

  • Page backgrounds
  • Card surfaces
  • Modal backgrounds
  • Form fields
  • Sidebar backgrounds

25% Electric Blue

  • Navigation bar
  • Primary buttons
  • Active states
  • Focus rings
  • Data highlights

15% Launch Orange

  • CTA buttons
  • Status badges
  • Chart highlights
  • Alert indicators
  • Conversion markers
Full Color Palette — click any swatch to copy hex
Blue Primary brand color
50#eff6ff
100#dbeafe
200#bfdbfe
300#93c5fd
400#60a5fa
500#3b82f6
600★#2563eb
700#1d4ed8
800#1e40af
900#1e3a8a
Orange Accent / CTA
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500★#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
Gray Neutral / UI
50#f9fafb
100#f3f4f6
200#e5e7eb
300#d1d5db
400#9ca3af
500#6b7280
600#4b5563
700#374151
800#1f2937
900★#111827
Green Success / Converted
50
100
200
300
400
500★#22c55e
600
700
800
900
Red Error / Failed
50
100
200
300
400
500★#ef4444
600
700
800
900
Yellow Warning / Pending
50
100
200
300
400
500★#eab308
600
700
800
900
03 — Typography

Type System

Font ที่ได้รับแรงบันดาลใจจาก Aerospace — ชัดเจน อ่านง่าย และดูเป็นมืออาชีพในทุกขนาด ตั้งแต่ Display ขนาดใหญ่ไปจนถึง Data label ขนาดเล็ก

Display / Heading
Space Grotesk
Headings, Brand name, Navigation — Aerospace feel
Mission
Control
Body / UI
Inter
Body text, Labels, Descriptions — Maximum readability
AdWaffle เชื่อมโยง Facebook Ads และ LINE OA เพื่อให้ธุรกิจไทยรู้ว่าโฆษณาไหนปิดการขายได้จริง ไม่ใช่แค่ตัวเลข Click
Monospace / Data
Space Mono
Code, Data values, Hex codes — Precision
CONV_RATE: 4.82%
LEAD_COUNT: 1,247
CPL: ฿142.50
ROAS: 3.8x
display
60px · 800 · -0.04em
AdWaffle
heading-1
36px · 800 · -0.03em
Ad-to-Lead Intelligence
heading-2
30px · 700 · -0.02em
Mission Control Dashboard
heading-3
24px · 700 · -0.01em
Campaign Performance
body-lg
18px · 400 · 1.75
รู้ว่าโฆษณาไหนปิดการขายได้จริง ไม่ใช่แค่คลิก
body
16px · 400 · 1.7
เชื่อมโยง Facebook Ads และ LINE OA เพื่อให้ธุรกิจไทยรู้ว่าโฆษณาไหนสร้าง Conversion
label
14px · 600 · 1.5
Last updated: 2 minutes ago · 1,247 leads tracked
caption
12px · 500 · 0.06em
CAMPAIGN ID · ADW-2026-001
05 — Brand Voice

Personality & Tone

AdWaffle พูดในแบบที่ชัดเจน ตรงประเด็น และให้เกียรติความฉลาดของผู้ฟัง — เหมือน Mission Commander ที่รายงานข้อมูลอย่างแม่นยำ ไม่มีคำฟุ่มเฟือย

🎯

Precise

เชื่อในข้อมูลที่วัดได้จริง ทุก Feature มีเป้าหมายเดียวคือทำให้ข้อมูลถูกต้อง

⚡

Empowering

ทุกอย่างตั้งค่าได้เองใน 15 นาที ไม่ต้องพึ่ง Developer

🔗

Connected

ลดช่องว่างระหว่าง Ad Platform, LINE OA และ CRM

🛡️

Reliable

Uptime 99.9% เพราะ Lead ที่ตกหล่นหมายถึงเงินที่หายไปจริงๆ

Audience ภาษาที่ใช้ ตัวอย่าง Copy หลีกเลี่ยง
SME เจ้าของธุรกิจ Pain point ตรงๆ ไม่มี Jargon "รู้ว่าโฆษณาไหนปิดการขายได้" ศัพท์ Marketing ซับซ้อน
Agency / Marketing Manager ใช้ศัพท์เทคนิคได้ เน้น ROI "Ad Attribution + Meta CAPI ในระบบเดียว" ภาษาง่ายเกินไป
Investor / Partner Strategic เน้น Market Opportunity "Performance Marketing Intelligence Layer" Feature list ธรรมดา
❌ ห้ามพูด

"Revolutionize your marketing journey with cutting-edge AI-powered solutions"

✓ พูดแบบนี้แทน

"เชื่อม Facebook Ads กับ LINE OA ใน 15 นาที รู้ทันทีว่าโฆษณาไหนสร้าง Lead"

❌ ห้ามพูด

"Unlock the power of data-driven insights to supercharge your ROI"

✓ พูดแบบนี้แทน

"ดูว่าโฆษณาไหนสร้าง Lead จริง — ไม่ใช่แค่ Click ที่ไม่ได้ซื้อ"

06 — UI Components

Design System

Component ทุกชิ้นออกแบบมาเพื่อความชัดเจนของข้อมูล ทุก Element ต้องตอบคำถามที่ผู้ใช้มีอยู่ในใจ ไม่ใช่แค่ความสวยงาม

Buttons

Primary (Electric Blue), Orange, Outline, Ghost — 3 sizes + states

Active Campaign New Lead Converted Paused
Running Pending Success

Status Badges

แสดงสถานะ Campaign, Lead, Conversion — มี Dot indicator variant

Total Leads
1,247
↑ +134 จากเดือนที่แล้ว
Conv. Rate
4.82%
↑ +0.3% จากเดือนที่แล้ว
Cost per Lead
฿142.50
↓ -฿12 จากเดือนที่แล้ว
ROAS
3.8×
↑ +0.4× จากเดือนที่แล้ว

Metric Cards

แสดงตัวเลขสำคัญใน Dashboard — ต้องมี Delta indicator เสมอ

Pixel ID is required to track conversions

Form Inputs

Default, Focus (Electric Blue), Error states — Label อยู่บนเสมอ

AdWaffle
Dashboard Campaigns Leads
AdWaffle
Dashboard Campaigns Leads

Navigation

Dark nav (primary) และ Light nav — Active state ใช้ Blue tint

CAMPAIGN LEADS CPL STATUS
Summer Sale 2026 342 ฿138 Active
Brand Awareness Q1 189 ฿210 Paused

Data Table

Header สีเทา, Data ใช้ Space Mono, Status badge ทุกแถว

07 — Spacing & Radius

Space System

Base unit 4px (0.25rem) ตาม Tailwind CSS scale — ทำให้ UI มีความสม่ำเสมอและ Predictable ในทุก Component

space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px
space-1664px
space-2080px
Border Radius
4pxrounded-sm
6pxrounded
8pxrounded-md
12pxrounded-lg
16pxrounded-xl
20pxrounded-2xl
fullrounded-full
08 — Motion

Animation Principles

Animation ต้องรู้สึกเหมือน Spacecraft — Precise, Purposeful ทุก Motion มีเหตุผลและช่วยให้ผู้ใช้เข้าใจ State ของ UI ไม่ใช่แค่ Decoration

Micro Interactions

100–150ms · ease-out

Hover, Button click, Toggle — ตอบสนองทันทีเพื่อให้รู้สึก Responsive

Hover me →

UI Transitions

200–300ms · ease-in-out

Modal, Dropdown, Sidebar — ชัดเจนแต่ไม่ช้าจนน่ารำคาญ

Transition

Page Transitions

300–400ms · ease-in-out

Route changes — ให้รู้สึกว่ากำลัง Navigate ไปยัง Mission ใหม่

Navigate

Skeleton Loading

Shimmer 1.5s infinite

ใช้ Skeleton screen ก่อน ไม่ใช่ Spinner — ทำให้รู้สึกรอน้อยลง

Loading...

Success States

200ms scale + 300ms fade

Form submit, Lead captured — Celebrate ความสำเร็จอย่างสั้นๆ แต่ชัดเจน

✓ Lead Captured!

Reduced Motion

@media prefers-reduced-motion

Respect user preference เสมอ — ลด Animation ทั้งหมดเมื่อ User ตั้งค่า

Accessible
09 — Mission Metaphors

Aerospace Language System

AdWaffle ใช้ Aerospace Metaphors ในการสื่อสาร Feature — ทำให้ผู้ใช้รู้สึกว่าตัวเองคือ Mission Commander ที่ควบคุมทุกอย่างได้

🚀

Launch

Campaign เริ่มต้น, Webhook ถูก Trigger, Lead เข้ามาครั้งแรก

🛰️

Orbit

Data ที่หมุนเวียนในระบบ, Real-time tracking, Continuous monitoring

🌍

Landing

Conversion สำเร็จ, Lead กลายเป็นลูกค้า, Campaign บรรลุเป้าหมาย

📡

Signal

Webhook, API calls, Data transmission ระหว่าง Facebook, LINE OA

🗺️

Mission Control

Dashboard หลัก, Overview page, Command center ที่เห็นทุก Campaign

⚡

Ignition

Onboarding, Setup wizard, การตั้งค่าครั้งแรก — จุดเริ่มต้นของ Mission