SalonX TH — Design System

Internal reference. Loads the live th.css, so it always shows what the site actually does. Not linked from the site.

Card — ทำอะไรให้ร้านคุณได้บ้าง

The system card (.card). Hover is a background fill only — no shadow, no border-colour change. th.css: "Do not reintroduce elevation here." The ดูรายละเอียด label sits below the card and slides up on hover.

Default

Hover — background fills to n200

Clicked — back to default fill

รับจองและหน้าร้าน

  • หน้าจองของร้านเอง เปิดรับ 24 ชั่วโมง
  • ลูกค้าจองผ่าน LINE OA ของร้านได้
  • ยืนยันนัดและเตือนนัดอัตโนมัติ
  • เลือกช่างประจำได้
  • ปฏิทินช่าง กำหนดจำนวนคิวต่อรอบ
  • บันทึกลูกค้า walk in ไว้ที่เดียวกัน

Buttons

Hover each one to see its state.

ปรึกษาฟรี ปรึกษาฟรี สอบถามเพิ่มเติมผ่าน LINE

Colour

From 00_brand/colors.md — the SalonX palette, shared with JP. Not StoreHub's. Every value below is verified present in th.css except where noted.

Brand

Growth Orange#FF9419CTAs, key accents, active states. Sparingly — every use carries weight.
Growth Orange / hover#E07D0AHover and press state of the orange button.
Intelligence Blue#408FFFData and analytics sections only. Not a general accent.
Craft Brown#332D28Warm dark brand tone. Social and print, not the website.
Canvas Cream#F7F3EEWarm premium background. Social and print. NOT YET IN th.css.

Neutrals — these carry the work

Neutral / 50#FAFAF9Page ground.
Neutral / 100#F5F5F4Alternate section bands.
Neutral / 200#E7E5E4Card hover fill, hairlines.
Neutral / 300#D7D3D1Borders.
Neutral / 600#4C4C4CSecondary text.
Neutral / 900#1E1E1EBody text.
Neutral / White#FCFCFCCard surface — deliberately not pure white.
Brand / Light Primary#FCEBDBStat chips.

Status & social

Status / Error#DC2626Errors and validation.
Status / Success#16A34ASuccess states.
Social / LINE#32CC12LINE buttons only.
Rules. Neutrals carry the work — backgrounds, text, surfaces. Brand colours are purposeful accents. Orange is never a section fill (hero emphasis only), and text on orange is always white. Blue only in data and analytics. Craft Brown and Canvas Cream are social and print moments, not whole-site.

Type scale PROPOSED — not live yet

Ten steps, built from the sizes the site already leans on. Body is 19px because Thai needs it — the vowel and tone marks that sit above and below the line stop resolving much under 18. Latin is shown greyed beneath each Thai specimen so you can judge both.

Why this is needed. Right now th.css carries 19 distinct font sizes and the page <style> blocks carry 20 more — including 15.5px and 9px — with no tokens at all. Nothing below is applied yet. Defined on this page only, so you can judge it before anything moves.
--fs-displayDisplay · 56pxHero on the homepage only.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-h1H1 · 44pxPage titles.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-h2H2 · 32pxSection headings.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-h3H3 · 26pxCard titles, sub-headings.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-ledeLede · 22pxThe line under a section heading.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-bodyBody · 19pxParagraphs, feature lists. Thai-safe default.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-body-sBody small · 17pxDense UI text, secondary paragraphs.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-smallSmall · 15pxCaptions, footnotes, form help.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-captionCaption · 13pxChips, monthly price line.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission
--fs-microMicro · 12pxSlot labels, legal.
จองคิว คิดเงิน ค่ามือ อยู่ในระบบเดียว SalonX — booking, checkout, commission

Chips & pills

Only what the site actually uses, with where it is used. Verified by grep across all 16 pages on 1 Sep 2026 — not from the stylesheet, which also defines things nothing renders.

In use

แชท LINE .chip — pricing.html, ×5
the five places one booking gets written down
จดที่เดียว .pill — pricing + 3 industries pages, ×10
ร้านในญี่ปุ่น .origin — pricing.html ×3 as text.
On index.html ×3 it now holds a JP flag instead (1 Sep).

Defined in th.css but on no page

tag .tag — unused
เร็ว ๆ นี้ .soon — unused
Dead styles. Either something should be using them, or they should come out of th.css. Worth a decision rather than leaving them to rot.