Design
primary: ,
primary-foreground
secondary
secondary-foreground
tertiary
tertiary-foreground
neutral
destructive
destructive-foreground
Responsive breakpoints:
| Breakpoint | Size | x-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 |
For most pages,
The top margin is 40px / 16px
The bottom margin is 32px
The spacing between components is 16px, or less commonly 24px. The height and width of elements are fixed to a 8px grid.
The inline padding for text is px-6 and py-4.
However, this may vary with across different components and pages, so please refer to the Figma design for specifics.
Here are the list of font-presets in Figma (so far). The numbers refer to font-size/line-height, and follow the tailwind font presets.
e.g.
text-lg: 18/28
text-base (default): 16/24
text-sm: 14/20
Also notice the font-weight, which is the same as tailwind naming. font-normal / font-medium etc.