Design
primary: ,
primary-foreground
secondary
secondary-foreground
tertiary
tertiary-foreground
neutral
destructive
destructive-foreground
Responsive breakpoints:
| Breakpoint | Size | Margins | Body |
|---|---|---|---|
| DEFAULT | 0-639px | 16px | Fluid |
| sm | 640px+ | 32px | Fluid |
| md | 768px+ | 32px | Fluid |
| lg | 1024px+ | Fluid | 840px |
| xl | 1280px+ | 200px | Fluid |
| 2xl | 1400px+ | Fluid | 1000px |
The top margin is usually 40px / 16px The bottom margin is is 40px Generally for each page the gutter / spacing between items is 16px. The height and width of elements are fixed to a 8px grid.
However, this may vary with across different components, please refer to the Figma design for specifics.