We map your business
Terms, metrics, processes and sources become a structured knowledge base.
Design system · v2 dark
One system.
One system.
Every surface.
Tokens, type, components and motion of the MSM Smart Expertise identity: deep-night navy, luminous gold and data-stream blue. Everything on this page is live HTML built from the same tokens the site uses.
01 · Color
Palette
Click a swatch to copy its hex. Proportions: night surfaces ~70%, text ~20%, gold and blue accents ~10%.
70 night · 20 ink · 7 gold · 3 blue: keep gold scarce so it stays luminous.
02 · Typography
Manrope + JetBrains Mono
DISPLAY · 800 · clamp(40–70px)
We teach it your business.
H1 · 800 · clamp(30–46px)
Knowledge that understands
H2 · 700 · clamp(22–30px)
Data integration & governance
LEAD · 400 · 16–19px
The knowledge layer between your data and your decisions.
BODY · 400 · 16px / 1.65
Models are grounded in your knowledge base and data, so answers come back in your language, with your definitions.
MONO LABEL · .74rem · +22%
Data · Knowledge · Understanding
03 · Space & shape
Rhythm
8
14
20
28
48
72
110
Radii: 9 / 14 / 22 px (chips · fields · cards). Section padding: clamp(72–130px). Container: 1200px.
04 · Components
01 · UNDERSTAND
02 · ANALYZE
03 · DECIDE
Building blocks
Buttons
Chips & labels
KNOWLEDGE BASE · LIVE
DATA · KNOWLEDGE · IMPACT
Section eyebrow
Card
AI learns your context
Models grounded in your data answer in your language.
Decisions get support
Explainable answers backed by your numbers.
Form
Flowline
UNDERSTAND→ANALYZE→DECIDE→GROW
05 · Motion
Calm, luminous, purposeful
Ease
cubic-bezier(.22,.61,.21,1)
Durations
micro 300ms · reveal 800ms · ambient 2–3s loops
Rules
Backgrounds drift, content settles. Never more than one glowing focus per view. prefers-reduced-motion always honoured.
Ambient layers: js/field.js (dotted waves) and js/sphere.js (knowledge sphere): both pause off-screen.