@meveo-org/mv-theme v1.0.0
Meveo UI design system
Design Principles Philosophy, brand guideline,product principles (what it solve, who is it for)
Design Language Typography, color,spacing, scaling, voice & tones, illustrations, motion
Components, goups and patterns Containers, Buttons, modal, transitions,...
The outcome of the designing process will be used by managers, UI designers, developers, marketers and must be share on meveo drive.
To run the example, clone the repo and open the index.html using a webserver.
You can also check the demo.
Colors
The meveo color theme is inspired from Material and Prototypr.
Check the index.html file to see how to override theme colors.
When creating your color theme, keep in the accessibility.
Some tools can help:
contrast checker
Element colors
Primary colors : Essential set of brand colors it comes with dark, darkest and light, lightest variationsp-color, pd-color, pdd-color, pl-color, pll-color
(Secondary) Accent colors: Used to higlight information or actionsa-color,ad-color, add-color, al-color, all-color
Semantic colors : Used for success, warning, errors for back ground and textsuccess-color, warning-color, error-color
Background colors : Used for background and surface
b-color
s-color
Neutral colors : Used for caption texts, border, iconsn-color, nd-color, nl-color
Data colors : Used in charts, 3 paletes categorical, sequential, polarizecat-1-color,cat-2-color,...,cat-12-color
seq-1-color,seq-2-color,...,seq-12-color
pol-1-color,pol-2-color,...,pol-12-color
Text colors
The text colors are univoquely associated to the background on which they are supposed to appear
Their css variable name is simply the background color name prefixed by "on-", except for neutral palette
that is used by component on which we are not supposed to write text.on-p-color, on-pd-color, on-pdd-color, on-pl-color, on-pll-color
on-a-color, on-ad-color, on-add-color, on-al-color, on-all-color
on-success-color, on-warning-color, on-error-color
on-cat-1-color, on-cat-2-color,..., on-cat-12-color
on-seq-1-color, on-seq-2-color,..., on-seq-12-color
on-pol-1-color, on-pol-2-color,..., on-pol-12-color
3 years ago