Milestone 1
Design System
โทเคน คอมโพเนนต์ และภาษาการเคลื่อนไหวของ Ink's Idea
How to read this page
ทุกอย่างในหน้านี้มาจากโทเคนใน globals.css และ Tailwind ปรับที่เดียวเปลี่ยนทั้งเว็บไซต์
- Toggle TH/EN in the header to verify both type stacks.
- Hover the primary button — magnetic fill should slide up.
- Tab through everything — focus states must be visible.
/ 01
สี
สีน้ำเงินหลักใช้เฉพาะกับปุ่มสำคัญ ไฮไลต์ และจุดเน้น สีกลางทำหน้าที่รองรับเลย์เอาต์ส่วนใหญ่
Brand · #3250d6
Reserved for primary CTAs, key highlights, focus rings. Use sparingly.
50
--color-brand-50
100
--color-brand-100
200
--color-brand-200
300
--color-brand-300
400
--color-brand-400
500
--color-brand-500
600
--color-brand-600
700
--color-brand-700
800
--color-brand-800
900
--color-brand-900
Ink · neutral ramp
Carries the rest of the interface — text, surfaces, borders.
50
--color-ink-50
100
--color-ink-100
200
--color-ink-200
300
--color-ink-300
400
--color-ink-400
500
--color-ink-500
600
--color-ink-600
700
--color-ink-700
800
--color-ink-800
900
--color-ink-900
/ 02
ตัวอักษร
Anuphan สำหรับภาษาไทย General Sans สำหรับภาษาอังกฤษ ใช้สเกลตัวอักษรเดียวกันทั้งสองภาษา
Display · Anuphan / General Sans
พิมพ์แบรนด์ที่คุณใส่
We print the brands you wear
Body · DM Sans / Anuphan
อิงค์ ไอเดีย รับผลิตเสื้อยืด สกรีน ปัก พิมพ์ดิจิทัลครบวงจร เริ่มต้น 30 ตัว
Ink's Idea is a Bangkok OEM partner for screen, embroidery, and DTG. From 30 pieces upward.
display
7Aa
6xl · 84px
Heading 6xl
5xl · 64px
Heading 5xl
4xl · 48px
Heading 4xl
3xl · 36px
Heading 3xl
2xl · 28px
Subheading
xl · 22px
Lede paragraph
base · 16px
Body copy at 16px
sm · 14px
Caption text
xs · 12px
EYEBROW LABEL
/ 03
ระยะห่าง
ใช้กริดฐาน 8px เลย์เอาต์โปร่งโล่ง จังหวะมาจากการเว้นที่ว่างอย่างตั้งใจ
space-0.5
0.125rem · 2px
space-1
0.25rem · 4px
space-2
0.5rem · 8px
space-4
1rem · 16px
space-6
1.5rem · 24px
space-8
2rem · 32px
space-12
3rem · 48px
space-16
4rem · 64px
space-24
6rem · 96px
space-32
8rem · 128px
/ 04
ปุ่ม
สามรูปแบบ — หลัก รอง และโปร่ง ปุ่มหลักมี hover แบบแม่เหล็ก รองรับคีย์บอร์ดเต็มที่
Size · lg
Size · md
Size · sm
/ 05
Placeholder
ทุกภาพที่ยังไม่มีจะแสดงเป็นกล่องพร้อมข้อความบอกว่าควรเป็นภาพอะไร ใช้เป็นบรีฟให้ช่างภาพได้เลย
Hero image · 16:9 · editorial shot of model in oversized tee
Founder portrait · 4:5 · neutral studio bg
Process · 3:2 · screen printing in factory
Product · 1:1 · close-up of fabric texture and print
Factory wide · 21:9 · screen printers at work, natural light
/ 06
การเคลื่อนไหว
Scroll reveal, magnetic hover, grid แบบสตากเกอร์ ทุก duration และ easing เก็บเป็นตัวแปร CSS เคารพ reduced motion
duration-fast
200ms
hover transitions
duration-base
400ms
layout reveals
duration-slow
700ms
hero accordion expand
ease-out-expo
cubic-bezier(0.16, 1, 0.3, 1)
settle into place
ease-in-out-quart
cubic-bezier(0.76, 0, 0.24, 1)
bidirectional motion
prefers-reduced-motion
All animation durations collapse to ~0ms when the OS reports reduced-motion preference. Tested via the global rule in globals.css.