Design Tokens
Design tokens are the atomic building blocks of the Septimius design system,
distributed via the @septimius-technology-group/tokens package.
Colour System
Colours use HSL values exposed as CSS custom properties. Each product overrides the primary and accent tokens while inheriting neutral, semantic, and surface scales from the shared foundation.
Typography
Headings use Manrope, body text uses Inter, both with system-ui fallback.
| Level | Size | Weight |
|---|---|---|
| Display | 2rem | 700 |
| H1 | 1.5rem | 700 |
| H2 | 1.25rem | 600 |
| H3 | 1.125rem | 600 |
| Body | 1rem | 400 |
| Small | 0.875rem | 400 |
| Caption | 0.75rem | 400 |
| Overline | 0.6875rem | 600 |
Spacing and Radius
Spacing uses a 4px base unit: spacing-1 (4px), spacing-2 (8px),
spacing-3 (12px), spacing-4 (16px), spacing-6 (24px), spacing-8 (32px).
Border radius tokens: sm (6px), md (8px), lg (12px), xl (16px), 2xl (20px).
Shadows
Four elevation levels: shadow-sm (cards, inputs), shadow-md (dropdowns,
popovers), shadow-lg (modals, dialogs), and shadow-glow (cyan-tinted focus).
Motion
| Token | Duration | Use Case |
|---|---|---|
duration-instant | 0ms | Immediate state changes |
duration-fast | 100ms | Micro-interactions, toggles |
duration-normal | 200ms | Standard transitions |
duration-slow | 300ms | Panel slides, expansions |
duration-slower | 500ms | Page-level transitions |
Easing curves include ease-default for general transitions and ease-spring
for physics-based motion on interactive elements.