The Harbour design system
Everything the kit is built from — the component library and its visual foundations. Start with components, then dive into the palette, theme, fonts, motion and background surfaces.
Start here
The component library and the design tokens it is built on.
Components
The full Blade component library — buttons, forms, tables, overlays, charts and more, each shown live.
Palette
The Harbour color ramps and semantic tokens that every component is built on.
Theme
Re-skin the entire UI from one file. Inspect the theme tokens and dark-mode treatment.
Fonts
Type scale, weights and font specimens used across the kit.
Motion
Animation primitives and motion patterns with reduced-motion support.
Backgrounds & maps
Section headers and map surfaces you can drop behind any content.
Parallax backgrounds
Full-screen image surfaces with pointer and scroll parallax.
Abstract backgrounds
Image-free section headers built from borders, registers and type.
Simple backgrounds
Clean, image-free landing hero sections sharing one prop API.
Map cards
Leaflet-powered map surfaces for markers, paths and live tracking.