Gezamenlijke kern
Navy, Primary Blue, succes/fout, stappen voor hoekradius en afstanden en focusringen zijn op elkaar afgestemd – herkenbaar in CRM en website.
Merk · Product · Website
Twee systemen.
Twee systemen.
Eén merk.
Ultimate CRM Addon gebruikt een gezamenlijke merkbasis – en twee daarop gebouwde designsystemen: één voor de productinterface in de add-on en één voor Ultimate CRM Addon.
Waarom twee designsystemen?
Product en marketing hebben verschillende taken. Een gezamenlijke basis houdt het merk herkenbaar – gescheiden tokenlagen voorkomen dat het CRM op een landingspagina lijkt of de website op een beheerpaneel.
Afzonderlijke rollen
De add-on optimaliseert dichtheid en bediening. De website optimaliseert duidelijkheid, conversie en een hoogwaardige uitstraling – met gedoseerde accenten.
Schaalbaar
Nieuwe modules en pagina’s gebruiken gedocumenteerde tokens en componenten – minder visuele uitzonderingen, snellere implementatie.
Ultimate CRM Addon UI 1.0
Productdesignsysteem (add-on)
Voor de interface in SuiteCRM: formulieren, tabellen, dialoogvensters, wizards en compacte werkvlakken. Functioneel, helder en geschikt voor bedrijven.
| Gebied | Inhoud |
|---|---|
| Kleuren | Navy (#001631), Primary (#165DCC), semantische statuskleuren, vlakken voor lichte werkomgevingen |
| Typografie | Compacte interfaceschaal voor labels, tabellen en formulierteksten – leesbaar bij hoge informatiedichtheid |
| Afstanden & hoekradius | Basis 4/8/12/16/24/32; radius sm–lg voor invoervelden, kaarten en dialoogvensters |
| Componenten | Knoppen, invoervelden, keuzelijsten, dialoogvensters, tabbladen, tabellen, wizardstappen, statusbadges |
| Dichtheid | Optionele compacte weergave voor beheer- en lijstweergaven |
De doelgroep bestaat uit beheerders en intensieve CRM-gebruikers. Elke beslissing volgt de vraag: helpt dit gegevens sneller en veiliger te bewerken?
Ultimate CRM Addon Web 1.0
Websitedesignsysteem (marketing)
Voor Ultimate CRM Addon: hero, functiekaarten, vertrouwen, megamenu, donkere modus. Hoogwaardig, technisch, met gecontroleerd cyaan en violet.
Principes
Duidelijkheid vóór effect – maximaal 1–2 kleurverlopen per schermgebied.
Eén dominante kleur – Primary leidt, cyaan/violet ondersteunen.
Kaarten vertellen de meerwaarde – zachte schaduwen, fijne randen, subtiele hovereffecten.
Bouwstenen
Displaytypografie, eyebrowbadges, functiekaarten, vertrouwensbalken, productvisualisaties, afsluitende CTA’s, megamenu. Licht en donker vanuit één tokenbron.
| Tokenfamilie | Voorbeelden |
|---|---|
| Merkkern | --su-navy, --su-primary, --su-ink |
| Accenten | --su-cyan, --su-violet (gedoseerd) |
| Vlakken | Vlak · Verhoogd · Zwevend · Hero |
| Schaduwen | --su-shadow-sm tot --su-shadow-lg, hover zonder neonring |
| Beweging | korte overgangen, respecteert prefers-reduced-motion |
--theme-header | Donker: #01012F |
--theme-bg | Donker: #0A0023 |
body · font-size | 16px |
Productbrug
Wat wordt gedeeld – en wat bewust gescheiden blijft.
Gedeeld
Navy en Primary Blue · Success/Danger · Radius sm–lg · Basisafstanden · Focusring in Primary · Merknaam en pictogramtaal
Alleen website
Cyaan-/violetaccenten en kleurverlopen · Aurora-achtergronden · Displaykoppen · Lichtkrant en marketingschaduwen · Glas alleen gedoseerd (header)
Voor teams & implementatie
Zo gebruikt u de systemen dagelijks.
Product ontwikkelen
Ultimate CRM Addon UI 1.0 als referentie voor nieuwe add-onschermen. Gebruik bij voorkeur bestaande componenten voordat varianten ontstaan.
Website uitbreiden
Ultimate CRM Addon Web 1.0 en de tokens in site.css. Stem nieuwe secties af op patronen (Hero → Vertrouwen → Functies → CTA).
Kwaliteit waarborgen
Controleer contrast, toetsenbordbediening en verminderde beweging. PageSpeed en toegankelijkheid blijven onderdeel van de opleverstandaard.
Designsystemen live verkennen
Het interactieve websitedesignsysteem toont tokens, componenten en de donkere modus. De productinterface blijft het kader voor de add-on in SuiteCRM.