Screen flows →

tuek design system

Tokens, components and patterns for the ad-builder web app. Built on the why.de theme (Tailwind v4 / shadcn token names) and adapted for dense, bilingual (EN / ไทย) data work. Use the toggles above to check light, dark and Thai. Everything on this page is a static preview — the same tokens ship as frontend/src/design/tokens.css.

Foundations

Brand palette from why.de

Warm black
Warm white
Indigo · primary
Lime · accent
Beige · muted
Sand · border
Taupe
Clay

Semantic roles

background
foreground
card
muted
muted-foreground
primary
accent
link
border
input (control border)
ring (focus)
selection / edited

Status

Lime is the brand accent, so it is never used to mean “success”. Success, warning, danger, info and neutral each have a foreground, a tint and a border, tuned for light and dark.

Row states
PendingรอดำเนินการBuildingกำลังสร้างCreatedสร้างแล้วFailedล้มเหลวBlockedถูกบล็อกSkippedข้าม
Review states (Meta)
Paused draftฉบับร่าง (PAUSED)In reviewกำลังตรวจสอบApprovedอนุมัติแล้วWith issuesมีปัญหาRejectedถูกปฏิเสธ
Alerts
Infoข้อมูลSuccessสำเร็จWarningคำเตือนErrorข้อผิดพลาด

Shape, elevation, motion, spacing

Radius

6 · 8 · 10 · 16 px

Elevation

sm · md · lg

Motion

120 ms hover · 200 ms controls · 400 ms page-level.
Easing cubic-bezier(.6,0,.39,1) from why.de. Reduced-motion turns durations to 0.

Space (4 px scale)

4 8 12 16 24 32 48

Typography

Logo and headings: Space Grotesk. Body text: Hanken Grotesk (free stand-in for ABC Favorit, which is licensed). Thai (both): IBM Plex Sans Thai (the browser falls back to it automatically for Thai characters). Mono: IBM Plex Mono for IDs and keys. Weights: 300 for large display only, 400 body, 500 labels and headings, 600 rare emphasis. Thai text gets extra line height.

2xl · 32/40 · 300Plan your campaignsวางแผนแคมเปญของคุณ
xl · 24/32 · 500Validation resultsผลการตรวจสอบ
lg · 20/28 · 500Messenger · Bangkok 25–34ข้อความ · กรุงเทพฯ อายุ 25–34
md · 16/24 · 500Section headingหัวข้อส่วน
base · 14/20 · 400Everything is created PAUSED and never set live by this tool.ทุกรายการถูกสร้างเป็นฉบับร่าง (PAUSED) และเครื่องมือนี้ไม่เปิดใช้งานโฆษณาเอง
sm · 13/18 · 400 (grid)Daily budget · 500.00 THBงบประมาณรายวัน · 500.00 บาท
xs · 12/16 · 500HELP TEXT · LABELข้อความช่วยเหลือ · ป้ายกำกับ
mono · IDs, keysact_1234567890 · as_msg_01120210123456789012

Components

Buttons

Buildสร้างแคมเปญSecondary EditGhost AccentRoll backย้อนกลับ Disabled Building…
SmallDefaultLarge

Form controls

We’ll send a reset link to this address.เราจะส่งลิงก์ตั้งรหัสผ่านใหม่ไปยังอีเมลนี้
Below Meta’s minimum for this ad set.ต่ำกว่าขั้นต่ำของ Meta สำหรับชุดโฆษณานี้

Alerts & banners

Importing from Google Sheetsกำลังนำเข้าจาก Google Sheets

The sheet is read once. After import, all edits happen here.อ่านชีตครั้งเดียว หลังนำเข้าแล้วแก้ไขทั้งหมดที่นี่

Validation passedตรวจสอบผ่าน

38 ads are ready to build.โฆษณา 38 รายการพร้อมสร้าง

1 warningคำเตือน 1 รายการ

A creative link may not be accessible.ลิงก์ครีเอทีฟอาจเข้าถึงไม่ได้

Review
3 rows failedล้มเหลว 3 แถว

Fix the cells, then retry only the failed rows.แก้ไขเซลล์ แล้วลองใหม่เฉพาะแถวที่ล้มเหลว

Retry failedลองใหม่เฉพาะที่ล้มเหลว

Navigation: tabs, breadcrumbs, menu, avatar

CampaignsAd setsAdsIssues 3
Plans Q4 Promotions Validate
PCpatt@company.com
TeamAudit log
Sign out
TooltipCopy IDคัดลอก ID

Cards, IDs, progress

Q4 Promotions

Imported 3 Oct · 2 campaigns · 14 ad sets · 38 ads

62% built · 3 failed

Meta ID chip
act_1234567890
120210123456789012

Mono, one-click copy, opens the object in Ads Manager.

Loading & empty

No plans yetยังไม่มีแผน

Import a Google Sheet to create your first plan.นำเข้า Google Sheet เพื่อสร้างแผนแรกของคุณ

Import a sheetนำเข้าชีต

Toast

Build finishedสร้างเสร็จแล้ว

35 created, 3 failed. Review the errors.สร้างแล้ว 35 ล้มเหลว 3 กรุณาตรวจสอบข้อผิดพลาด

Patterns

All names, IDs and numbers in the patterns below are sample data.

App shell & plan stepper

Q4 Promotions All drafts stay PAUSEDทุกรายการเป็นฉบับร่าง (PAUSED)PC

Q4 Promotions

Export CSVส่งออก CSVBuildสร้างแคมเปญ
  1. Connectเชื่อมต่อ
  2. Validateตรวจสอบ
  3. Previewดูตัวอย่าง
  4. Buildสร้าง
  5. Statusสถานะ
  6. Exportส่งออก
Nothing here goes live automaticallyไม่มีสิ่งใดเปิดใช้งานโดยอัตโนมัติ

Everything is created PAUSED. You switch ads on yourself in Meta Ads Manager.ทุกอย่างถูกสร้างเป็น PAUSED คุณเปิดใช้งานโฆษณาเองใน Meta Ads Manager

Editable plan grid sample data

CampaignsAd setsAds
#Statusadset_keyNameOptimization goalDaily budgetCountriesAge
1Createdสร้างแล้วas_msg_01Messenger · Bangkok 25-34CONVERSATIONS500.00TH25–34
2Createdสร้างแล้วas_msg_02Messenger · Chiang MaiCONVERSATIONS350.00TH25–44
3Failedล้มเหลวas_msg_03ข้อความ · กรุงเทพฯ ชายCONVERSATIONS20.00
Budget is below the minimum Meta allows for this ad set.งบประมาณต่ำกว่าขั้นต่ำที่ Meta กำหนดสำหรับชุดโฆษณานี้
Fix: raise the budget or change the goal.แก้ไข: เพิ่มงบประมาณหรือเปลี่ยนเป้าหมาย
TH18–24
4Pendingรอดำเนินการas_msg_04Instagram DM · PhuketCONVERSATIONS400.00TH25–54
5Blockedถูกบล็อกas_msg_05Messenger · RetargetingLINK_CLICKS300.00TH25–54
6Pendingรอดำเนินการas_msg_06Instagram DM · Khon KaenCONVERSATIONS400.00TH, LA25–54
7Skippedข้ามas_msg_07Messenger · Existing leadsCONVERSATIONS250.00TH18–65
8Pendingรอดำเนินการas_msg_08Instagram DM · PattayaCONVERSATIONS400.00TH25–54
Changed since importแก้ไขจากที่นำเข้า Selected cellเซลล์ที่เลือก Errorข้อผิดพลาด Warningคำเตือน Keys: ↑↓←→ move · Enter edit · Esc cancel · Ctrl+V paste from Sheets

Validation issue list

2 errorsข้อผิดพลาด 2 รายการ1 warningคำเตือน 1 รายการFix errors to continue. Warnings can be reviewed later.แก้ข้อผิดพลาดเพื่อดำเนินการต่อ ส่วนคำเตือนตรวจสอบภายหลังได้
Ad Sets · row 3 · daily_budgetAd Sets · แถว 3 · daily_budget
Daily budget is below the minimum Meta allows for this ad set.งบประมาณรายวันต่ำกว่าขั้นต่ำที่ Meta กำหนดสำหรับชุดโฆษณานี้
Suggested fixวิธีแก้ที่แนะนำ: Raise the budget or change the optimization goal.เพิ่มงบประมาณหรือเปลี่ยนเป้าหมายการเพิ่มประสิทธิภาพ
Go to cellไปที่เซลล์
Ads · row 12 · headlineAds · แถว 12 · headline
Headline is 52 characters; the limit is 40.พาดหัวยาว 52 ตัวอักษร (สูงสุด 40)
Suggested fixวิธีแก้ที่แนะนำ: Shorten the headline.ย่อพาดหัวให้สั้นลง
Go to cellไปที่เซลล์
Ads · row 9 · creative_linkAds · แถว 9 · creative_link
The creative link isn't accessible to the app.แอปเข้าถึงลิงก์ครีเอทีฟไม่ได้
Suggested fixวิธีแก้ที่แนะนำ: Share the Drive file with the service account.แชร์ไฟล์ Drive ให้บัญชีบริการ
Go to cellไปที่เซลล์

Campaign → ad set → ad tree

Messages · Bangkok OUTCOME_ENGAGEMENT · Messenger
2/3 ad sets1 failedล้มเหลว 1
Ad set · Bangkok 25–34
2/2 adsCreatedสร้างแล้ว
Ad · Hero image
ad_msg_01
Createdสร้างแล้ว120210123456789012
Ad · Video 15s
ad_msg_02
Createdสร้างแล้ว120210123456789044
Ad set · ชาย 18–24
0/2 adsFailedล้มเหลว
Ad · Hero image
ad_msg_03
Blockedถูกบล็อก
Ad · Video 15s
ad_msg_04
Blockedถูกบล็อก
Messages · Instagram DM OUTCOME_ENGAGEMENT · Instagram
0/4 ad setsPendingรอดำเนินการ
Expand after the build startsขยายดูเมื่อเริ่มสร้าง

Live build progress

22 / 38 ads · run_20261004_a1f3
Messages · Bangkok
Creating ads 4 / 6กำลังสร้างโฆษณา 4 / 6
Buildingกำลังสร้าง
Messages · Chiang Mai
14 / 14 ads14 / 14 โฆษณา
Createdสร้างแล้ว
Messages · Retargeting
Stopped at ad sets 2 / 5หยุดที่ชุดโฆษณา 2 / 5
Failedล้มเหลว
Meta rejected the ad set: Page isn't connected to Instagram.Meta ปฏิเสธชุดโฆษณา: เพจยังไม่ได้เชื่อมต่อกับ Instagram
Connect the Instagram account to the Page, then retry failed rows.เชื่อมต่อบัญชี Instagram กับเพจ แล้วกดลองใหม่เฉพาะที่ล้มเหลว
Retry failedลองใหม่เฉพาะที่ล้มเหลว

Meta review status

AdMeta IDReviewDetail
ad_msg_01120210123456789012Approvedอนุมัติแล้ว—
ad_msg_02120210123456789044In reviewกำลังตรวจสอบUsually takes up to 24 hours.โดยปกติใช้เวลาไม่เกิน 24 ชั่วโมง
ad_msg_03120210123456789077RejectedถูกปฏิเสธText contains a claim Meta doesn’t allow. Edit the primary text and rebuild.ข้อความมีเนื้อหาที่ Meta ไม่อนุญาต แก้ไขข้อความหลักแล้วสร้างใหม่

Runs & rollback confirmation

Sign in (EN / TH)

Export

Export the final version as proofส่งออกฉบับสุดท้ายเป็นหลักฐาน

q4-promotions_run_20261004_a1f3.csv

Export CSVส่งออก CSV

Accessibility

Rules
  • Body text and status text meet WCAG AA (4.5:1); control borders and focus rings meet 3:1 — checked below by script from the real tokens.
  • Status is never colour alone: every state has an icon and a word.
  • Focus is always visible (2px ring, offset) and the grid is fully keyboard-operable.
  • Motion respects prefers-reduced-motion; the type scale grows line-height for Thai.
Deviations from why.de (deliberate)
  • Input borders darkened from clay #afa498 (2.4:1) to #8f867a (3.6:1).
  • Focus ring uses indigo, not taupe (taupe is too faint to see).
  • Secondary text uses the body grey; source uses warm-black for muted text.
  • Dark: lighter indigo for links (#9a90ff), softer table dividers, accent text kept dark on lime.
PairTokensNeedsLightDark
Body textforeground / background4.5:1——
Secondary textmuted-foreground / background4.5:1——
Secondary text on panelmuted-foreground / muted4.5:1——
Placeholdersubtle-foreground / background4.5:1——
Primary buttonprimary-foreground / primary4.5:1——
Secondary buttonsecondary-foreground / secondary4.5:1——
Accent buttonaccent-foreground / accent4.5:1——
Destructive buttondestructive-foreground / destructive4.5:1——
Linkslink / background4.5:1——
Card textcard-foreground / card4.5:1——
Status · successsuccess-fg / success-bg4.5:1——
Status · warningwarning-fg / warning-bg4.5:1——
Status · dangerdanger-fg / danger-bg4.5:1——
Status · infoinfo-fg / info-bg4.5:1——
Status · neutralneutral-fg / neutral-bg4.5:1——
Control borderinput / background3.0:1——
Control border on fieldinput / input-background3.0:1——
Focus ringring / background3.0:1——