Design System
Visual language and brand guidelines for the FTS Platform - the foundation that future UX work builds on.
Project Overview
This proposal establishes the visual language for the FTS Platform: a documented design system that defines colour, typography, spacing, status indicators, and component patterns. It is the foundation that every screen across admin, customer, and ordering portals will inherit from.
The deliverable is a single source of truth for how the platform looks and feels - not a code library, but the design decisions and specifications that any future UI work references.
Business Value
Without a design system, every new screen reinvents its own colours, spacing, and component styles. Over time this produces visual drift: the same button looks different on three pages, status colours mean different things in different contexts, and onboarding new developers (or designers) becomes a guessing game.
A documented design system delivers:
- Consistency at scale - 50+ screens can follow the same visual rules without coordination overhead
- Faster delivery - new features ship faster when designers and developers don't relitigate base decisions
- Brand authority - a coherent visual identity reinforces trust, which matters for compliance software
- Reduced cognitive load - users learn the platform once because every screen behaves the same way
- Future-proofing - one CSS variable change updates the entire platform, making rebrands and theme adjustments trivial
Deliverable
The design system is presented as an interactive lookbook covering:
- Colour - brand palette, surfaces, status system, and chart colours
- Typography - the two-typeface system and full type scale
- Status System - the seven status states used across the platform
- Interactive Elements - button variants, form controls, and hierarchy rules
- Navigation - sidebar structure, tabs, and breadcrumbs
- Spacing & Radius - the 4px grid and corner system
- Principles - the rules every design decision follows
The lookbook is a self-contained HTML document. Open the link above in a new tab to browse through each section as a standalone spread.
Relationship to Other Projects
This project is independent but enabling. It does not deliver any user-facing features on its own; it produces the visual specifications that other projects use.
The most immediate consumer is the UX Upgrades project, which will apply this design system to every screen in its scope - from the redesigned ordering portal to the reporting dashboards. The relationship is one-directional: UX Upgrades depends on Design System, but Design System ships first and stands alone.
Other future projects (new portals, customer-facing tools, mobile views) will also build on top of this foundation.
Scope
| In Scope | Out of Scope |
|---|---|
| Documented design language (colour, type, spacing, components) | Implementation of any specific screen |
| Lookbook for visual reference | Code library or component framework |
| Status colour system across the platform | Backend or data model changes |
| Brand guidelines for future work | Migration of existing screens (handled by UX Upgrades) |
Sign-off
Once approved, this design system becomes the canonical reference for all subsequent UI work on the platform. Any deviation from it requires explicit justification.