Design system

ทุกค่าบนหน้านี้อ่านมาจาก src/styles/tokens.css โดยตรง — แก้ token ที่เดียว หน้านี้และทั้งเว็บเปลี่ยนตาม ตัวเลขที่กำกับไว้คือค่าจาก Figma (ขนาดจากตาราง PC 2109-68 / Mobile 2109-351, line-height เป็น % จาก Styles panel) ย่อหน้าต่างให้แคบกว่า 768px เพื่อดูสเกลมือถือ

Colour

Neutrals

--color-white
--color-grey-100
--color-grey-200
--color-grey-300
--color-grey-400
--color-grey-500
--color-black

Brand blue

--color-blue-300
--color-blue-400
--color-blue-500
--color-blue-600
--color-blue-700

Red

--color-red-500
--color-red-600

Semantic aliases (use these in components)

--bg
--bg-subtle
--bg-inverse
--fg
--fg-body
--fg-muted
--accent
--accent-hover
--accent-soft
--danger
--line

Typography

Display XL — PC 56 · Mobile 32 · 120% · 600 · -2: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Display L — PC 36 · Mobile 28 · 120% · 600 · -2: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Display EN XL — PC 56 · Mobile 32 · 120% · 600 · -2 · Poppins: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Display EN L — PC 36 · Mobile 28 · 120% · 600 · -2 · Poppins: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Display EN M — PC 24 · Mobile 22 · 120% · 600 · -2 · Poppins: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
H1 — PC 56 · Mobile 32 · 120% · 600 · -1: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
H2 — PC 36 · Mobile 28 · 120% · 600 · -1: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
H3 — PC 24 · Mobile 22 · 140% · 600: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
H4 — PC 20 · Mobile 18 · 140% · 600: เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Body Bold — 16 · 150% · 600 (ทุกจอ): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Body Regular — 16 · 150% · 400 (ทุกจอ): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Caption Bold — 14 · 150% · 600 (ทุกจอ): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Caption Regular — 14 · 150% · Extra Light 275 (ทุกจอ): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Small — 12 · 150% · 400 (ทุกจอ): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน
Tagline — 16 · 150% · น้ำหนักยังไม่ระบุในสเปก (ใช้ 600 ไปก่อน): เพราะทุกธุรกิจ มีโจทย์การผลิตที่แตกต่างกัน