Foundations
Spacing system for layout components.
Sillium uses the Size enum as Gap values in Stack and Cluster. This page documents the gap scale, component defaults, and available CSS spacing tokens.
Overview
Spacing in Sillium is driven by the Size enum. Layout components like Stack and Cluster accept a Gap parameter of type Size, which is converted to a CSS gap value in rem. There are no Tailwind gap utility classes involved -- the gap is set via inline style.
Gap system
Stack and Cluster use the Gap parameter (type Size) to control spacing between children. The GetGapRem() method in Stack.razor maps each Size value to a fixed rem amount.
| Size enum | rem | px |
|---|---|---|
| Size.Small | 0.5rem | 8px |
| Size.Medium | 0.875rem | 14px |
| Size.Large | 1.25rem | 20px |
| Size.ExtraLarge | 1.75rem | 28px |
Live gap comparison
Four Stack components side by side, each using a different Gap size. The colored chips inside make the spacing difference clearly visible.
Small
gap: 0.5rem (8px)
Medium
gap: 0.875rem (14px)
Large
gap: 1.25rem (20px)
ExtraLarge
gap: 1.75rem (28px)
Stack vs Cluster defaults
Stack defaults to Medium gap (14px) while Cluster defaults to Small gap (8px). Stack is vertical flow and needs more breathing room between stacked blocks. Cluster is horizontal -- typically used for tags, chips, or button groups -- where tighter spacing keeps related items visually grouped.
| Component | Default Gap | Value | Rationale |
|---|---|---|---|
| Stack | Size.Medium | 0.875rem (14px) | Vertical flow needs more breathing room between stacked blocks. |
| Cluster | Size.Small | 0.5rem (8px) | Horizontal tags and buttons benefit from tighter spacing to stay visually grouped. |
Stack (default gap: Medium)
<Stack> -- Gap="Size.Medium" (0.875rem)
Cluster (default gap: Small)
<Cluster> -- Gap="Size.Small" (0.5rem)
CSS spacing tokens
These custom properties are defined in app.css and available globally. Use them for padding, margin, or any custom spacing in your own CSS. They are separate from the Gap system -- Gap uses inline CSS gap values, not these tokens.
| Token | rem | px | Preview |
|---|---|---|---|
| --ui-space-2xs | 0.25rem | 4px | |
| --ui-space-xs | 0.5rem | 8px | |
| --ui-space-sm | 0.75rem | 12px | |
| --ui-space-md | 1.0rem | 16px | |
| --ui-space-lg | 1.5rem | 24px | |
| --ui-space-xl | 2.0rem | 32px | |
| --ui-space-2xl | 3.0rem | 48px | |
| --ui-space-3xl | 4.0rem | 64px |
Gap vs tokens
The Gap parameter on Stack and Cluster uses inline CSS (gap: {rem}) directly. It does not reference these --ui-space-* tokens. Use the tokens in your own CSS for padding, margin, or custom layout spacing.
File reference
Source files relevant to the spacing system.
| File | Detail |
|---|---|
| Components/Stack.razor | GetGapRem() method, Gap parameter (type Size), inline gap style |
| Components/Cluster.razor | Wraps Stack with Direction.Row and defaults Gap to Size.Small |
| Styles/app.css | CSS spacing tokens (--ui-space-2xs through --ui-space-3xl) |