The Design System: CSS Tokens Across Six Plugins

Six plugins. Hundreds of admin panels, portal pages, modals, tables, and forms. If each one looked different, the ecosystem would feel like six unrelated products duct-taped together. The design system prevents that.

CSS Custom Properties

Every AJT plugin uses the same set of CSS custom properties, --inf-plum, --inf-teal, --inf-coral, --inf-green. These are the brand colours injected by the Global Design System. When a customer changes their primary colour in Glass, it updates everywhere, every portal page, every admin panel, every button.

Typography

Nunito Sans is the typeface across the entire ecosystem. Five weights: 400 (body), 600 (emphasis), 700 (headings), 800 (labels), 900 (hero text). The font loads from Google Fonts on Infinite pages and is available as a CSS variable for admin panels.

Component Patterns

Every admin panel follows the same visual pattern: summary strip with gradient metric boxes at the top, bordered panel with filter pill tabs, scrollable table with consistent column headers (uppercase 9px), hover rows, dot status indicators, and ghost/fill action buttons. CSS classes are shared across all plugins, .ajt-inv-panel, .ajt-inv-tbl, .ajt-inv-btn.

This means when MSP Hub adds a Tickets panel, it looks exactly like Stripe Pro’s Invoices panel. Users don’t need to learn two interfaces. The design system is the unifying force that makes six plugins feel like one product.

The AJT Brand Colours

Teal (#007991), Purple (#A04398), Coral (#D85A30), Green (#1D9E75). Four colours that define the visual identity across everything we build. They’re used consistently: teal for primary actions, purple for secondary, coral for warnings, green for success. The colours were chosen for accessibility, they all meet WCAG AA contrast requirements against both light and dark backgrounds.