Muvion Worldwide — Design SystemLegacy format
Verified engines, vehicles and parts from Dubai, exported across the Gulf and into Africa. Dark, industrial-premium, trust-first. Extracted directly from the live production source (`tailwind.config.ts`, `app/globals.css`, `app/layout.tsx`) — not reverse-engineered from screenshots.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Verified engines, vehicles and parts from Dubai, exported across the Gulf and into Africa. Dark, industrial-premium, trust-first. Extracted directly from the live production source (`tailwind.config.ts`, `app/globals.css`, `app/layout.tsx`) — not reverse-engineered from screenshots.
Components
Cards
Card Title
Sample body text for the card component.
Buttons
Badge
pill
Pill
default
Do's & Don'ts
Do
Don't
Shape
Rounded corners throughout — not the sharp/square-corner convention of
Muvion's separate internal sourcing-desk tool. Default Tailwind radius scale,
roughly:
• 12px for cards, tiles, image frames
• 999px (full pill) for buttons, badges, pills
Motion & interaction
• Hover: subtle scale/color transitions on CTAs (active:scale-[0.98]),
underline-sweep on nav links, slow image zoom (scale(1.045) over 0.8s) on
hover for tile imagery.
• No heavy parallax or scroll-hijacking — this is a trust-first commerce
site, not an agency showcase. Motion should support hierarchy and feedback,
not spectacle.
• Respect prefers-reduced-motion.
Voice & content conventions
• Primary conversion channel is WhatsApp — the CTA label "Talk on WhatsApp"
is used consistently site-wide (nav, hero, CTA bands), never varied into
synonyms.
• Trust mechanic is central to the brand: "confirm before you pay," a 72-hour
inspection window, "UAE registered." These are real operational facts, not
marketing flourishes — treat them as load-bearing copy, not decoration.
• Markets served: UAE, Nigeria, Kenya, Ghana, Angola, Tanzania, Egypt.
• No em-dashes, no fabricated stats, no generic AI filler verbs
("revolutionize", "seamless", "unleash").
Layout conventions observed in production
• Nav: single line, sticky, ~72px tall, glass/blur background over the dark
base, logo + nav links + currency/locale toggle + WhatsApp CTA pill.
• Hero: asymmetric split (text block + visual), not centered.
• Category/feature sections: asymmetric bento grids, not equal 3-column
cards.
• Footer: multi-column (company info / platform links / company links /
legal), mono section labels in caps.
Use with MCP
Don't have the MCP? Install it here