Design Guidelines - v1.0
Design
Guidelines
The visual language for the FTS Platform. A system built on clarity, restraint, and the belief that building compliance software should feel as considered as the buildings it tracks.
The visual language for the FTS Platform. A system built on clarity, restraint, and the belief that building compliance software should feel as considered as the buildings it tracks.
A palette grounded in authority. Navy anchors trust, green signals progress and compliance, and everything else stays quiet.
The palette is deliberately narrow. Navy conveys the authority that building compliance demands. Green is reserved for signals of progress: titled parcels, completed milestones, confirmed statuses. Red is only for things that need urgent attention. Every other surface stays neutral. If a colour appears on screen, it means something.
Two typefaces. One voice. Inter for the interface, JetBrains Mono for data. Nothing else.
Inter was chosen for its optical clarity at small sizes - most of this platform lives at 12-14px in dense data tables. JetBrains Mono handles the technical data layer: SPIs like 642\PS916557 need character-level precision that proportional fonts blur. The two never compete because they serve different information types.
Seven states. Each with a dedicated colour. A coloured dot prefix makes every status scannable at speed across dense data tables.
The dot-prefix pattern was chosen over solid-fill badges because users scan project lists of 50+ rows at speed. A small coloured dot in a soft-tinted pill registers faster than reading text, and the muted backgrounds prevent the page from becoming a rainbow. Green means good, amber means waiting, red means act now - no learning curve required.
Every interactive element uses one of five button variants. Forms keep inputs clean, consistent, and fast to scan.
Primary (navy) is reserved for the single most important action on any page. Secondary (green) is for supporting actions like exports. Outline is for filters and toolbar items that shouldn't compete for attention. Ghost is for cancel and dismiss. Destructive only appears in confirmation dialogs, never in toolbars. This hierarchy means users always know where to click without reading.
A dark sidebar anchors the interface. It's always there, always predictable, and uses green accents to show where you are.
The sidebar is permanently dark regardless of page theme. This creates a strong anchor point that never moves and never changes appearance. The green left-border on active items provides instant orientation. Count badges use the same green to draw attention to pending work without being aggressive. The sidebar collapses to an icon rail on smaller screens, preserving the dark anchor without stealing content space.
A 4px grid creates rhythmic consistency. Corners are softened, never rounded - this is compliance software, not a toy.
The base radius of 6px strikes the balance between approachable and professional. Everything inherits from a single --radius token, so changing the platform's personality from "sharp" to "soft" is a single number. The flat shadow system (zero opacity by default) keeps the interface clean and focused. If depth is needed later, one variable change activates it everywhere simultaneously.
The rules that every design decision follows.
If a colour appears, it carries a specific meaning. Green is always progress. Red is always urgency. Navy is always the primary action. There is no decorative colour.
Users manage hundreds of projects daily. Every pixel should serve information retrieval, not aesthetics. Whitespace is used to separate, not to impress.
Every colour, radius, and spacing value comes from a CSS variable. Change one token and the entire platform updates. No hardcoded values anywhere.
A user scanning a 50-row table should know which rows need attention without reading a single word. The dot-prefix status system makes this possible.
Design Guidelines v1.0 - May 2026