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:

06

BUTTONS & NAVIGATION

button

BUTTON

button--secondary

BUTTON SECONDARY

button--small

BUTTON SMALL

button--large

BUTTON LARGE

button--active

BUTTON ACTIVE

is-disabled

BUTTON DISABLED

button--pill

BUTTON PILL

button--rounded

BUTTON ROUNDED

button--full-width

BUTTON FULL WIDTH

button--centered

BUTTON CENTERED

08

RESPONSIVE

BREAKPOINTS

09

ICONS

icon-align-left
icon-align-middle
icon-align-right
icon-arrow-left
icon-arrow-right
icon-bell
icon-blank
icon-bluetooth
icon-browser
icon-camera
icon-cart
icon-chat
icon-check-mark
icon-clock
icon-close
icon-compass
icon-connection
icon-cursor
icon-display
icon-download
icon-drop
icon-empty-blank
icon-flag
icon-forward-2
icon-forward
icon-gift
icon-graphic
icon-grid
icon-hamburger-menu
icon-headphones
icon-heart
icon-home
icon-hyperlink
icon-justify-all
icon-key
icon-label
icon-lock-closed
icon-lock-open
icon-magnet
icon-magnifying-glass-2
icon-magnifying-glass-minus
icon-magnifying-glass-plus
icon-magnifying-glass
icon-mail
icon-map-pin
icon-map
icon-maximize
icon-microphone
icon-minimize
icon-minus
icon-mouse
icon-music
icon-navigation
icon-notifications
icon-pause
icon-play
icon-plus
icon-power
icon-print
icon-repeat
icon-selection
icon-settings
icon-share
icon-shuffle
icon-sound-minus
icon-sound-plus
icon-speaker
icon-star
icon-statistics
icon-stop
icon-trash-bin
icon-upload