Milestone 1
Design System
Tokens, primitives, and motion language for Ink's Idea.
How to read this page
Everything on this page is derived from the design tokens defined in globals.css and tailwind variables. Edit once, ripple everywhere.
- 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
Color
The primary blue is reserved for accents, key CTAs, and high-priority highlights. The neutral ramp carries the rest of the interface.
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
Typography
Anuphan handles Thai. General Sans handles English. Each pulls from the same modular type scale.
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
Spacing
An 8px base grid. Layouts breathe — rhythm comes from generous whitespace and intentional vertical pacing.
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
Buttons
Three intents — primary, secondary, ghost. Magnetic hover on primary. Full keyboard focus support.
Size · lg
Size · md
Size · sm
/ 05
Placeholders
Every missing asset is rendered as a labeled box describing what belongs there. The label doubles as the photographer brief.
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
Motion
Scroll reveals, magnetic buttons, staggered grids. All durations and easings live as CSS variables. Reduced motion respected globally.
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.