Styles

Spacing

How we size padding, margins, gaps and layout rhythm so screens feel consistent and dense clinical data stays readable.

When to use

Use spacing tokens (--space-*) for every padding, margin and gap.
Pick by role using the semantic spacing tokens where they exist, not by eyeballing pixels.
Use proximity to show relationship: put related items closer together than unrelated ones.

When not to use

Do not type a raw pixel value. If a value you need is not on the scale, that is a token decision (DDR plus sign-off), not a local override.
Do not pad clinical tables so loosely that rows need horizontal scrolling to fit the view.
Do not use spacing alone to separate content that also needs a visible boundary, use Border/Subtle or a divider, not a gap, when the grouping must survive at high zoom.

How it works

4px base unit, every step is a multiple of 4px, matching the type line-height grid so text and layout share one rhythm.
Scale, 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px.
Density in clinical tables, prefer the smaller steps (space-1 to space-4) for component internals; use larger steps for page-level rhythm, not table cells.
Proximity signals grouping, the gap between a label and its value should be smaller than the gap to the next unrelated item, so related information reads as one group without needing a rule or fill to separate it.

Options

Token	px	Typical use
`space-1`	4	Icon padding, micro gaps
`space-2`	8	Tight component internals, table cells
`space-3`	12	Compact form elements
`space-4`	16	Default internal padding
`space-6`	24	Section spacing within panels
`space-8`	32	Component separation
`space-12`	48	Section breaks
`space-16`	64	Major layout sections

Do and don't

Do	Don't
Use `--space-*` for all spacing	Hardcode pixel values
Keep to the 4px grid	Introduce off-grid one-offs
Use smaller steps for dense tables	Pad clinical tables so loosely they need scrolling
Let spacing scale with the layout	Fix gaps that break at small viewports

Accessibility

Spacing must not defeat WCAG 2.2 text-spacing (1.4.12): layouts tolerate user spacing overrides without clipping.
Keep interactive targets at least 24x24px with adequate spacing (2.5.8); 44x44px is preferred for primary touch controls.
Reflow (1.4.10): spacing must scale or wrap at 400% zoom and 320px width, never cause content loss or a second scroll axis.

Frameworks

Framework	Status	Where
Web (HTML/CSS)	Reference baseline	`--space-*` custom properties from `@dhcw/sr-tokens`
React	Current	same token CSS
Blazor /.NET	Current	same token CSS via the RCL
.NET MAUI	Current	XAML `Space*` keys from the token build
Legacy (.NET 4.8 / Delphi)	Tokens only / best-effort	CSS custom properties

Clinical / DHCW notes

We carry that grouping-by-proximity intent forward (CARRIED disposition): choose adjacent --space-* steps for label-to-value and a larger step for the gap to the next group, rather than fixed legacy pixel values.

The spacing scale

Bar widths are set with the built spacing custom properties.

--space-0 · 0px

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-10 · 40px

--space-12 · 48px

--space-16 · 64px

--space-20 · 80px

--space-24 · 96px

Radius

--radius-00px

--radius-22px

--radius-44px

--radius-88px

--radius-99999999px

Elevation

Shadow separates surfaces that sit above the page. Single Record uses two steps and no more, both tinted from Navy 900 rather than black so they stay subdued on clinical displays. Buttons carry no shadow: they show affordance through fill, border and colour.

--elevation-raised 0 1px 4px rgba(27, 41, 74, 0.12) Cards and panels. Use only where a border alone will not separate a surface from its background.

--elevation-overlay 0 4px 16px rgba(27, 41, 74, 0.18) Anything that floats above the page: modals, drawers, dropdown menus, tooltips.

Do not stack elevations, and do not use shadow to signal that something is interactive. Focus is handled by the focus ring, not by elevation.