Design System Overview
The Septimius design system is a monorepo containing three packages that provide a consistent visual language across all products in the Septimius Technology Group portfolio.
Packages
| Package | Version | Description |
|---|---|---|
@septimius-technology-group/tokens | v0.1.0 | Design tokens — colours, spacing, typography, elevation |
@septimius-technology-group/ui | v0.1.0 | React component library — buttons, cards, forms, layouts |
@septimius-technology-group/icons | v0.1.0 | SVG icon set with tree-shakeable exports |
Tokens
The tokens package defines the foundational design primitives: colour palettes, spacing scales, typography settings, border radii, shadows, and motion curves. All values are exported as CSS custom properties and as JavaScript constants for use in both server-rendered and client-side contexts.
UI
The UI package provides a React component library built on top of the tokens package. Components include buttons, cards, form controls, layout primitives, navigation elements, and feedback indicators. Each component accepts standard props for customisation and respects the active product theme.
Icons
The icons package contains the full SVG icon set used across products. Icons are exported as individual React components with tree-shakeable imports, keeping bundle sizes minimal. Each icon supports size, colour, and accessibility props.
Consumption
All products consume the shared design system for visual consistency. Each product applies its own brand palette (see Brand Palettes) on top of the shared token foundation, allowing distinct identities while preserving layout, spacing, and interaction patterns across the ecosystem.