Skip to content
PointSav Digital Systems

Design spacing foundations

← All revisions

0bf2f6df · PointSav Digital Systems ·

design-system/ category: new wiki section with 6 bilingual foundation topics + 16 component guides from project-design exports; DTCG token vocabulary, HTML+CSS+ARIA recipes, WCAG accessibility specs; named competitor refs stripped per editorial review

View the full record as of this revision →

@@ -0,0 +1,63 @@
---
schema: foundry-doc-v1
title: "Design System — Spacing"
slug: design-spacing
category: design-system
type: reference
quality: complete
status: active
audience: public
bcsc_class: public-disclosure-safe
language_protocol: PROSE-TOPIC
last_edited: 2026-05-06
editor: pointsav-engineering
paired_with: design-spacing.es.md
cites:
  - dtcg-spec
---

A 13-step spacing scale on a 16 px base. Numeric — `space-1` through `space-13` — gives one canonical answer per layout decision.

## Scale

| Token | Value | Common use |
|---|---|---|
| `space-1` | 2px | Hairline gutter (rare; usually borders only) |
| `space-2` | 4px | Inline element gap |
| `space-3` | 8px | Paragraph rhythm floor; icon-label gap |
| `space-4` | 12px | Form field padding |
| `space-5` | 16px | Body grid unit; default container padding |
| `space-6` | 24px | Card padding; vertical rhythm between sections |
| `space-7` | 32px | Section gutter |
| `space-8` | 40px | Wider section gap |
| `space-9` | 48px | Major section break |
| `space-10` | 64px | Page-level section |
| `space-11` | 80px | Page-level section (looser) |
| `space-12` | 96px | Page-level section (loosest) |
| `space-13` | 160px | Hero / landing-page-only spacing |

## Composition

Compose larger spacing from the scale, never invent off-scale values:

- 4px + 12px + 4px = `space-2 + space-4 + space-2` for a labelled field
- Card with 24px padding: `space-6`
- Section break with title above and content below at 32px each: `space-7` × 2

Off-scale values (5px, 14px, 22px) break the rhythm and accumulate as drift. The 13-step scale is dense enough to cover every layout need without resorting to off-scale.

## Layout floor

The substrate uses a 16px (`space-5`) baseline grid. Body text and headings align to multiples of 16px in their line-height calculation; container padding aligns to multiples of 16px in the inline axis. This is structural — it ensures vertical rhythm remains consistent across surfaces.

## See Also

- [[design-color]]
- [[design-typography]]
- [[design-motion]]

---

*Copyright © 2026 Woodfine Capital Projects Inc. Licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/).*

*Woodfine Capital Projects™, Woodfine Management Corp™, PointSav Digital Systems™, Totebox Orchestration™, and Totebox Archive™ are trademarks of Woodfine Capital Projects Inc., used in Canada, the United States, Latin America, and Europe. All other trademarks are the property of their respective owners.*
Important Information

Important Information

Corporate structure. PointSav Digital Systems ("PointSav") is a trade name of Woodfine Capital Projects Inc. ("Woodfine"). PointSav does not itself offer, sell, or solicit any security. Any securities offering associated with Woodfine's real-property direct-hold solutions is made exclusively by Woodfine, and only by means of the applicable Private Placement Memorandum.

No investment advice. This wiki's content is provided for engineering, operational, research, and development purposes. Nothing on this wiki constitutes investment advice or a solicitation to invest in any Woodfine partnership or direct-hold solution.

Intellectual property. The PointSav name, trade name, wordmark, and marks, together with all current and future PointSav- and Totebox-branded products, services, and offerings — and the software, source code, documentation, design system, and all related materials — are proprietary to Woodfine and its affiliates, except for components identified as open source. No rights are granted except as expressly set out in a written license or agreement. See TRADEMARK.md in this repository for the full trademark notice.

Open source components. Portions of the platform are made available under permissive open-source licenses identified in the accompanying repository. Use of those components is governed by their respective license terms.

No warranty; informational use. Content on this wiki is provided for general informational purposes only and does not constitute a representation, warranty, or commitment with respect to product functionality, availability, pricing, or roadmap. Some articles describe planned or intended features, capabilities, and milestones — language such as "planned," "intended," "targeted," "may," and "expected" marks this forward-looking content, which is subject to change and does not constitute a commitment regarding future performance.

Confidentiality. Where an article describes an operational or deployment detail that is not intended for public disclosure, that article is not published on this wiki. Content here is general-purpose engineering documentation, not customer-specific configuration.

Jurisdiction. Woodfine Capital Projects Inc. is organized in British Columbia, Canada. References to the Sovereign Data Foundation on this wiki describe a planned or intended initiative only, not a current equity holder or active governance body.

Changes to this notice. PointSav may update this notice from time to time; the version posted on this page governs.

Not a filing system. This wiki is not a securities filing system, an electronic disclosure repository, or a substitute for SEDAR+ or any other regulatory filing system. Formal securities filings are made through the applicable regulatory filing system, not through this wiki.

Full disclaimer. This notice supplements, and does not replace, the full Disclaimers article. In the event of any conflict, the full Disclaimers article governs.

Read the full disclaimer →