Modulus · Tokens
Токени
Spacing, radius, shadow, motion — для імплементації у Figma variables, Tailwind config або CSS custom properties. Файли експорту — на сторінці Downloads.
Spacing · 8pt + 4pt scale
| Token | Value | Use |
|---|---|---|
| --s-1 | .25rem · 4px | Hairline gaps |
| --s-2 | .5rem · 8px | Inline cluster |
| --s-3 | .75rem · 12px | Tight spacing |
| --s-4 | 1rem · 16px | Default unit |
| --s-5 | 1.5rem · 24px | Card / list gap |
| --s-6 | 2rem · 32px | Card padding |
| --s-7 | 3rem · 48px | Section padding tight |
| --s-8 | 4rem · 64px | Section padding default |
| --s-9 | 6rem · 96px | Section padding large |
| --s-10 | 8rem · 128px | Hero top |
| --s-11 | 12rem · 192px | Section padding wide |
| --s-12 | 16rem · 256px | Editorial spacing |
Radius · мінімально, як кам'яне ребро
| Token | Value | Use |
|---|---|---|
| --r-xs | 1px | Hairline (form border) |
| --r-sm | 2px | Buttons, badges |
| --r-md | 4px | Cards (rare) |
| --r-lg | 8px | Modals (виключно) |
Shadow · музейне м'яке світло
| Token | Value | Use |
|---|---|---|
| --sh-sm | 3-layer subtle | Cards в spec-grid |
| --sh-md | 4-layer warm | Card hover lift |
| --sh-lg | Deeper warm shadow | Floating CTA |
| --sh-museum | 32px ambient | Product card hover |
Containers
| Token | Value | Use |
|---|---|---|
| --container | 1240px | Default page width |
| --editorial | 1440px | Hero, lookbook, manifesto |
Visual · Spacing scale
Шкала, як бачить око
--s-1 .25rem · 4px --s-2 .5rem · 8px --s-3 .75rem · 12px --s-4 1rem · 16px --s-5 1.5rem · 24px --s-6 2rem · 32px --s-7 3rem · 48px --s-8 4rem · 64px --s-9 6rem · 96px --s-10 8rem · 128px --s-11 12rem · 192px --s-12 16rem · 256px Export · Завантаження
Готові файли
JSON для Style Dictionary, CSS variables, Figma variables — щоб дизайнери та розробники працювали з єдиного джерела.