Spacing & Radius

Spacing scale (4px base unit)

Token	Value	Pixels
--shumoul-space-1	0.25rem	4px
--shumoul-space-2	0.5rem	8px
--shumoul-space-3	0.75rem	12px
--shumoul-space-4	1rem	16px
--shumoul-space-5	1.5rem	24px
--shumoul-space-6	2rem	32px
--shumoul-space-7	3rem	48px
--shumoul-space-8	4rem	64px

Use these for margin/padding/gap in any new component instead of an arbitrary pixel value — this keeps vertical rhythm consistent across the navbar, cards, footer, and homepage sections.

Corner radius — rounded, professional, never playful

Token	Value	Used for
--shumoul-radius-sm	6px	Buttons, badges, menu links, code inline spans, inputs
--shumoul-radius-md	10px	Cards, admonitions, tables, code blocks, dropdowns
--shumoul-radius-lg	16px	Large surfaces (hero panels, feature cards)
--shumoul-radius-pill	999px	Search box, version badge, small status badges

The scale deliberately stops short of a fully "bubbly" look (no 24px+ radii on large surfaces) — enterprise software reads as more trustworthy with moderate rounding, not pill-shaped panels everywhere.

Applied to Infima

--ifm-button-border-radius: var(--shumoul-radius-sm);
--ifm-card-border-radius: var(--shumoul-radius-md);
--ifm-code-border-radius: var(--shumoul-radius-sm);
--ifm-global-radius: var(--shumoul-radius-md);

Motion tokens

--shumoul-transition-fast: 120ms ease; /* hover color/background changes */
--shumoul-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* larger movement, card lift */

Every interactive element (a, button, .card, sidebar/nav links, TOC links, pagination) transitions color, background, border, shadow, and transform over --shumoul-transition-fast — subtle enough not to feel sluggish, present enough to feel deliberate. prefers-reduced-motion: reduce collapses every transition to near-zero duration site-wide, satisfying the "never distracting" requirement for users who've opted out of motion.

Where this is defined

src/css/custom.css — spacing and radius tokens are declared once in :root and referenced everywhere via var(--shumoul-space-N) / var(--shumoul-radius-*). Never hardcode a border-radius or spacing value in a component file.