Grid & Spacing

1thay dùng hệ thống 4px spacing scale được định nghĩa trong Figma collection 📐 1spacing. Tất cả padding, margin, gap đều là bội số của 4.

Spacing Scale

Token	CSS Variable	Giá trị
`unit-spacing/0`	`var(--space-0)`	0
`unit-spacing/0_5`	`var(--space-0_5)`	2px
`unit-spacing/1`	`var(--space-1)`	4px
`unit-spacing/2`	`var(--space-2)`	8px
`unit-spacing/3`	`var(--space-3)`	12px
`unit-spacing/4`	`var(--space-4)`	16px
`unit-spacing/5`	`var(--space-5)`	20px
`unit-spacing/6`	`var(--space-6)`	24px
`unit-spacing/7`	`var(--space-7)`	28px
`unit-spacing/8`	`var(--space-8)`	32px
`unit-spacing/9`	`var(--space-9)`	36px
`unit-spacing/10`	`var(--space-10)`	40px

Border Radius

Token	CSS Variable	Giá trị	Dùng cho
`rounded-none`	`var(--rounded-none)`	0	Sharp edges
`rounded-sm`	`var(--rounded-sm)`	2px	Subtle rounding
`rounded`	`var(--rounded)`	4px	Default
`rounded-md`	`var(--rounded-md)`	6px	Cards
`rounded-lg`	`var(--rounded-lg)`	8px	Buttons, inputs
`rounded-xl`	`var(--rounded-xl)`	12px	Modals
`rounded-2xl`	`var(--rounded-2xl)`	16px	Panels
`rounded-3xl`	`var(--rounded-3xl)`	24px	Large containers
`rounded-full`	`var(--rounded-full)`	9999px	Pills, badges

Border Width

Token	Giá trị
`border-0`	0
`border`	1px
`border-2`	2px
`border-4`	4px

Breakpoints

Token	Giá trị	Thiết bị
`breakpoint/sm`	640px	Mobile landscape
`breakpoint/md`	768px	Tablet
`breakpoint/lg`	1024px	Laptop
`breakpoint/xl`	1280px	Desktop
`breakpoint/2xl`	1536px	Wide screen

Cách dùng

.card {
  padding: var(--space-6);           /* 24px */
  gap: var(--space-4);               /* 16px */
  border-radius: var(--rounded-2xl); /* 16px */
  border: var(--border) solid var(--color-border-primary);
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}