Design systemIndex
The design-system category covers the PointSav design system as a platform component — its foundational vocabulary, design philosophy, brand surface context, and the foundation-layer token families that the operator-facing surfaces inherit. It addresses the design system as a concept within the platform: why it exists, how it is structured, what brand identity it carries, and where the foundational token vocabulary aligns with field convention. Component implementation guides, accessibility specifications, and the working surface live in the design system repository at design.pointsav.com; this category supplies the architectural framing.
The design system is itself one of the platform's load-bearing substrates — see Design-system substrate for the substrate framing — and inherits the same customer-ownership, machine-readability, and editor-agnostic interoperability disciplines that the rest of the platform applies to its data layers. Every surface the design system renders is designed mobile-first; Inter is the UI and heading typeface, chosen for screen legibility and the absence of corporate ownership.
Start here: Design system philosophy — why the substrate exists, and the three structural inversions of the enterprise-tier pattern that everything else in this category builds on.
Philosophy and primitive vocabulary
The foundational decisions: why the substrate exists, what it preserved from convention, what it replaced.
- Design system philosophy — Why the substrate exists; three structural inversions of the enterprise-tier pattern; self-hosted, customer-owned, editor-agnostic token publishing.
- Design system — primitive vocabulary rationale — Vocabulary rationale: numeric colour scales, layered semantic aliasing, productive-versus-expressive type split, and numeric spacing scales aligned with 2018 to 2026 field convention.
- Design-system substrate — The substrate framing: self-hosted design-system engine storing tokens and components in the customer's own git repository; W3C DTCG token format; machine-readable MCP endpoint.
Token concepts and tooling
Background articles on what tokens are, how they compose into components, how they theme, and how they reach designers, AI agents, and other organizations.
- What a design token is — A design token as a design decision recorded as data; the W3C DTCG Format Module; the primitive/semantic/component tier model.
- Theming via semantic tokens — Light/dark theming as semantic-token substitution, grounded in the published
theme.darkgroup and the same pattern in Carbon, Material 3, and Radix. - Component recipes vs. raw tokens — What the component tier adds beyond a token value: the
recipe.jsonformat and the registry's two-tier documentation state. - Design tokens and accessibility conformance — How accessibility requirements — touch targets, focus-ring colour, contrast — are expressed as tokens rather than checked ad hoc.
- Figma and Tokens Studio: consuming the design system's tokens in a design tool — Bringing the published token export into Figma via the Tokens Studio plugin's read-only URL sync.
- MCP and AI-agent-consumable design systems — Why the design system exposes a machine-readable MCP endpoint and token search API for AI coding agents.
- Registry-driven releases: one source of truth for tokens, components, and counts — The registry-driven architecture that keeps navigation, homepage statistics, and release packaging from drifting apart.
- Self-hosting a design system, and why it's separate from using the tokens — The two separate offers: using the published tokens directly, and self-hosting the serving engine for a different organization's own design system.
Brand surface
How the brand identity is encoded as colour families and typographic stacks across PointSav and Woodfine product surfaces.
- Brand-family swatch — Brand colour families assigned to retail and institutional anchor categories in the co-location GIS surface; consistent colour-coded identifiers for map visualisation and tabular data.
- Brand typography and print standards — The typographic separation between web interface system fonts and institutional print typography; open-licence serif typefaces reserved for PDF generation and formal disclosures.
Wiki surface design
The component vocabulary, typographic system, and dark-mode palette that compose the documentation.pointsav.com reading surface.
- Wiki component library — Nine reusable interface components that compose a complete wiki article page; Wikipedia layout conventions, current accessibility standards, PointSav token system.
- Wiki typography system — Inter and Source Serif 4 type stack, heading scale, and spacing tokens for the wiki; broad linguistic coverage for bilingual content.
- Wiki dark mode — Light and dark colour schemes for the wiki: WCAG-verified palettes and theme persistence via localStorage.
Related foundations
The architectural and substrate articles that frame the design system within the wider platform.
- Knowledge wiki leapfrog architecture — How the wiki engine consumes the design system's tokens and components to render Wikipedia-shaped chrome over flat Markdown.
Additional planned articles — design-system tooling for BIM and AEC interface conventions — are not yet written.
Foundation tokens
The four foundation-layer token families: colour, typography, spacing, and motion. Full specifications are maintained in pointsav-design-system and published on the design system's own site — these are external links, not wiki articles.
- Colour tokens — primitive palette, semantic aliases, and dark-mode pairings in DTCG format.
- Typography tokens — type scale, font stacks, fluid type variables, and reading rhythm tokens.
- Spacing tokens — base unit, geometric scale, component gap tokens, and layout margin tokens.
- Motion tokens — duration scale, easing curves, and reduced-motion variants.
See also
- Substrate — the design-system substrate framing alongside the other foundational mechanism substrates
- Patterns — named design patterns that the design system encodes at the interface layer
- Applications — operator-facing applications that consume the design system through the token and component layers