Foundations
Tokens
Spacing, radius, elevation, motion and layout, as CSS variables. Colour and type have their own pages. Use the variables or the Tailwind preset; never raw values.
Spacing
A 4px grid with half steps at the small end.
--mn-space-0 · 0
--mn-space-1 · 0.25rem
--mn-space-2 · 0.5rem
--mn-space-3 · 0.75rem
--mn-space-4 · 1rem
--mn-space-5 · 1.25rem
--mn-space-6 · 1.5rem
--mn-space-8 · 2rem
--mn-space-10 · 2.5rem
--mn-space-12 · 3rem
--mn-space-16 · 4rem
--mn-space-20 · 5rem
--mn-space-24 · 6rem
--mn-space-px · 1px
--mn-space-0-5 · 0.125rem
--mn-space-1-5 · 0.375rem
--mn-space-2-5 · 0.625rem
Radius
--mn-radius-none
--mn-radius-xs
--mn-radius-sm
--mn-radius-md
--mn-radius-lg
--mn-radius-xl
--mn-radius-2xl
--mn-radius-full
Elevation
--mn-shadow-xs
--mn-shadow-sm
--mn-shadow-md
--mn-shadow-lg
--mn-shadow-xl
Motion
Hover a row to see the duration. All durations become 0ms under prefers-reduced-motion.
--mn-duration-instant · 0ms
--mn-duration-fast · 120ms
--mn-duration-base · 180ms
--mn-duration-slow · 260ms
--mn-duration-slower · 400ms
Layout
| Variable | Use |
|---|---|
--mn-layout-content-max | Widest content column in an app |
--mn-layout-reading-max | Comfortable line length for prose |
--mn-layout-gutter | Page side padding, narrow screens |
--mn-layout-gutter-lg | Page side padding, wide screens |
--mn-width-narrow | Marketing: narrow column |
--mn-width-content | Marketing: content column |
--mn-width-wide | Marketing: wide column |