Mael S.p.A.
Gruppo Mael
N.1 SPECIAL SITUATION
DESIGN SYSTEM: Mael Spa
00
STYLE GUIDE
Detailed Style Guide, comprehensive Components Library.
What is a design system?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of products.
01
BRAND
Logo
Favicon
Icon
No Image
02
TYPOGRAPHY
Aa123
Sample Text
Heading 1
Sample Text
Heading 2
Sample Text
Heading 3
Sample Text
Heading 4
Sample Text
Heading 5
Sample Text
Heading 6
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus.
Aa123
Sample Text
Heading 1
Sample Text
Heading 2
Sample Text
Heading 3
Sample Text
Heading 4
Sample Text
Heading 5
Sample Text
Heading 6
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet. Mauris iaculis, ipsum nec aliquam vestibulum, felis tellus ornare quam, non accumsan quam justo sed lacus.
03
TYPOGRAPHY EXAMPLE
Aa123
LIST SQUARE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST DISC
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST CIRCLE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST DECIMAL
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
Sample Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.
Sample Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet..
Aa123
LIST SQUARE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST DISC
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST CIRCLE
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
LIST DECIMAL
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Vivamus ut elit tortor.
- Vestibulum luctus nunc eu urna molestie iaculis.
Sample Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.
Sample Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, ex nec maximus interdum, magna ligula feugiat leo, quis maximus risus metus ac ante. Praesent volutpat dolor nulla, non tempor magna molestie imperdiet.
04
COLOR PALETTE
Color Primary:
Color Secondary:
Color black:
Color Grey:
Color White:
Color Success:
Color Warning:
Color Error: