19 May 2026 · release
A premium design system for the whole product.
We've rebuilt the MySentinel PWA on a new design system, refreshed the launch site, and added dark mode.
This is the visible end of a quiet refactor that touched almost every screen in MySentinel.
What changed
- A shared design-token package. Palette, typography, spacing, radii,
and shadows now live in
@mysentinel/design-tokensso the PWA and this marketing site stay in lockstep without anyone having to copy hex codes between repos. - A shared component library.
@mysentinel/uiships Svelte 5 + Tailwind 4- tailwind-variants primitives — Button, Alert, Badge, FormField, TextInput, Select, Textarea, EmptyState, Spinner, Pagination, Card, PageHeader, Toolbar, BrandMark, RoleBadge, DataList, DataListRow.
- Dark mode, finally. The PWA respects your system preference by default, with an Appearance toggle in the session menu (System / Light / Dark). No flash on load — the theme is applied before any CSS evaluates.
- A warmer, more grown-up look. Deep teal/forest primary, warm sand/cream surfaces, gold accent, Fraunces display + Inter Variable body. Linear-meets-school-brochure was the brief.
- A real marketing site. The launch page is now five focused pages — Home, Features, Security & POPIA, Pilots, Contact — plus this changelog.
Why we did this
The first-pass UI worked, but it didn’t say “trust me with the safety of your children.” The new design system gives every screen the same posture: calm, dense, and intentional. Officers, admin staff, and guardians should each feel like the screen they’re looking at was made for them.
What’s next
We’re keeping the changelog short and honest. Subscribe to this page (RSS soon) for the next release.
— The MySentinel team