Shared core
Navy, primary blue, success/error, radius and spacing steps, and focus rings stay aligned—recognizable in CRM and on the website.
Brand · Product · Website
Two systems.
Two systems.
One brand.
SuiteUltimate shares one brand foundation—and two design systems on top of it: one for the product UI in the add-on, one for suiteultimate.com.
Why two design systems?
Product and marketing serve different jobs. A shared foundation keeps the brand recognizable—separate token layers stop the CRM from looking like a landing page, or the website like an admin panel.
Separate roles
The add-on optimises density and operation. The website optimises clarity, conversion and a premium feel—with controlled accents.
Scalable
New modules and pages reuse documented tokens and components—fewer one-off styles, faster delivery.
SuiteUltimate UI 1.0
Product design system (add-on)
For the SuiteCRM interface: forms, tables, dialogs, wizards and dense workspaces. Functional, clear, enterprise-ready.
| Area | Focus |
|---|---|
| Colour | Navy (#001631), primary (#165DCC), semantic status colours, surfaces for light work contexts |
| Typography | Compact UI scale for labels, tables and form text—readable at high information density |
| Spacing & radius | 4/8/12/16/24/32 base; radius sm–lg for inputs, cards and dialogs |
| Components | Buttons, inputs, selects, dialogs, tabs, tables, wizard steps, status badges |
| Density | Optional compact mode for admin and list views |
Built for administrators and power users in the CRM. Every choice answers: does this help process data faster and more safely?
SuiteUltimate Web 1.0
Website design system (marketing)
For suiteultimate.com: hero, feature cards, trust, mega menu, dark mode. Premium, technical, with controlled cyan and violet.
Principles
Clarity over effect — max. 1–2 gradients per viewport.
One dominant colour — primary leads; cyan/violet support.
Cards explain value — soft shadows, fine borders, restrained hover.
Building blocks
Display typography, eyebrow badges, feature cards, trust bars, product visuals, closing CTAs, mega menu. Light and dark from one token source.
| Token family | Examples |
|---|---|
| Brand core | --su-navy, --su-primary, --su-ink |
| Accents | --su-cyan, --su-violet (used sparingly) |
| Surfaces | Flat · Raised · Elevated · Hero |
| Shadows | --su-shadow-sm to --su-shadow-lg, hover without neon rings |
| Motion | Short transitions; respects prefers-reduced-motion |
Product bridge
What is shared—and what stays separate on purpose.
Shared
Navy and primary blue · success/danger · radius sm–lg · spacing base · primary focus ring · brand name and icon language
Website only
Cyan/violet accents and gradients · aurora backgrounds · display headlines · marquee and marketing shadows · glass used sparingly (header)
For teams & delivery
How to use the systems day to day.
Build product
Use SuiteUltimate UI 1.0 as the reference for new add-on screens. Prefer existing components before inventing variants.
Extend the website
Use SuiteUltimate Web 1.0 and the tokens in site.css. Align new sections with patterns (hero → trust → features → CTA).
Protect quality
Check contrast, keyboard use and reduced motion. PageSpeed and accessibility stay part of the delivery standard.
Explore the design systems live
The interactive website design system shows tokens, components and dark mode. Product UI remains the guide for the add-on in SuiteCRM.