CODECAVE has no single spacing unit exposed as a token. What it has instead is a small set of fixed, named measurements — container gutters, asymmetric section padding, bottom-heavy card padding, and two control heights. Those are reproduced here at true scale.
.page-container — centred, max-width: 1280px. The
gutter steps up twice. Note the non-standard sm breakpoint at
457px, which is a real value from the production @theme block,
not a typo for 456 or 480.
| Token | Value | Note |
|---|---|---|
--max-width-desktop | 1280px | content column ceiling |
--breakpoint-sm | 457px | non-standard; from production @theme |
200px top, 120px bottom. Sections are front-loaded so a heading gets air above it while consecutive panels stay close enough to read as a stack. Shown here at one-quarter scale; the numbers are the real ones.
--card-padding: 32px 32px 48px. The extra 16px at the bottom
exists because a card almost always seats a footer action. Cards without an action keep the
same padding so a grid stays even.
Aggregate data from all your Tools. The bottom 48px seats this action without needing a margin on the button itself.
Learn more
Keeping 48px here means an actionless card still aligns with its neighbours
in a grid. Do not tighten it to 32px.
Two heights only. Both are measured from live controls, and 44px already meets the minimum touch target — no separate mobile sizing is needed.