Pulse · Foundations
The building blocks
Visual language, tokens and primitives that inform every component in the Pulse Design System. Start here to understand the decisions underneath the surface.
Colours · Base
Foundational palette
The raw colour primitives every semantic token points to. These are never used in components directly — they exist solely as the source of truth that semantic aliases reference, keeping themes swappable without touching component code.
Grey
Brand
Green
Orange
Red
Blue
Yellow
Teal
Purple
Magenta
Colours · Semantic
Meaning-bearing tokens
Semantic tokens bind base palette shades to roles in the UI. Component code never references a base colour directly — it always asks for a semantic role (e.g. --semantic-color/typography/primary) so themes can swap underneath.
Text colours for headings, body, labels, states and on-surface values.
Fill colours for surfaces, cards, state containers and semantic feedback regions.
Stroke colours for inputs, dividers, focus rings and decorative rules.
Foundations · Typography
Type system
Manrope across 15 styles — six heading levels, two body sizes and three label tiers. Every style maps to a semantic token so swapping a typeface never requires touching component code.
Foundations · Corner Radius
Rounded corners
A consistent radius scale applied across every component — from the sharpest card edge to a fully-rounded pill. Rounding signals component type and hierarchy without relying on colour alone.
Foundations · Spacing
Spatial system
A base-4 grid underlies every gap, padding and margin in the system. Snapping to this scale keeps layouts consistent and ensures visual rhythm is preserved as components combine.
Foundations · Icons
Icon library
200+ Lucide glyphs across 18 categories, rendered at 24 × 24 with a 1.5px stroke. Consistent weight and grid keep icons legible and cohesive at every size they appear in the UI.
Foundations · Shadows
Elevation scale
Four shadow levels communicate depth and layer priority — from the subtle lift of a card to the focused presence of a modal or popover sitting above the rest of the page.
Shadow / sm
0 1px 3px rgba(0,0,0,.08)
Shadow / md
0 4px 12px rgba(0,0,0,.10)
Shadow / lg
0 8px 24px rgba(0,0,0,.12)
Shadow / xl
0 16px 48px rgba(0,0,0,.14)