Typography
Colors
Effects
UI Elements
Structure Classes

Maemi Style Guide

Dernière mise à jour le 13 octobre 2025

Typography

HTML Headings Tags
All H1 Headings

Heading XL

All H2 Headings

Heading L

All H3 Headings

Heading ML

All H4 Headings

Heading M

All H5 Headings
Heading S
Heading Classes
heading-xxl

Heading XXL

heading-xl

Heading XL

heading-l

Heading L

heading-ml

Heading ML

heading-m

Heading M

heading-s

Heading S

Body Classes
body-xl-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-L-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-L-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-M-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-M-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-M-semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-S-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-S-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-XS-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

body-XS-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists

  • No bullet list

  • No bullet list

All Unordered Lists

  • No bullet list

  • No bullet list

All Ordered Lists

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
--text-align-center
text-style-muted
Rich Text
rich_text-article

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
rich_text-chiffre

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

Colors

Background Color
background-color-black
background-color-white
background-color-primary
background-color-secondary
background-color-tertiary
Texture Color
texture_yellow
texture_white-action
texture_transparent
texture_primary-blue
texture_pink
texture_blue
texture_beige-900
texture_beige-100
Text Color
--primary
--primary
--secondary
--secondary
--tertiary
--tertiary
--on-primary
--on-primary
--on-primary-secondary
--on-primary-secondary
--on-primary-tertiary
--on-primary-tertiary

Effects

Box Shadows
shadow

Structure Classes

Section-full-width
Section-default
container-default
container-small
container-smedium
container-medium
container-large
button-group

Spacers

-space-3XS
2px
-space-XXS
4px
-space-XS
8px
-space-S
12px
-space-M
16px
-space-ML
20px
-space-L
24px
-space-XL
32px
-space-XXL
40px
-space-3XL
48px
-space-Huge
56px
-space-XHuge
64px
-space-XXHuge
72px
-space-3XHuge
88px
Utility Classes
hide
--hide-mobile
--hide-mobile
--overflow-visible
z-index-1
z-index-2
--inherit

UI Elements

Buttons
button-primary-icon
link-icon
Buttons With Icons
button-icon
Form Elements
form_field-input
form_field-input
-area
form_field-input
-area
--scroll
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons
Stars
Squares icons
design system iconLean ux iconcharte graphique iconmaquette ux iconaudit ux icon
Rounded icons
Tags
Tag
--default

Label

Tag
--small

Label

Composant
FAQ - Item

Lorem ipsum dolor sit amet consectetur. Id accumsan et fringilla ullamcorper quam ut vestibulum. Eget at quis etiam eget. Ipsum sed arcu at in eu nisl tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Breadcrumb

Maemi Studio

-

Page N2

-

Page N3

-

Page active

Section - Push

Créez des produits que vos utilisateurs adorent avec notre agence UX UI

Contactez-nous
Card - Article
This is some text inside of a div block.

Label

Heading

This is some text inside of a div block.