Style Guide

The MotionGenie Style Guide contains all global styles, utility classes, and reusable components to ensure consistent and scalable design across the template.

Typography

H1

Size : 3.375 REM

P : H1

Size : 3.375 REM

H2

Size : 3 REM

P :H2

Size : 3 REM

T 64px

Size : 4 REM

T 60px

Size : 3.75 REM

T 58px

Size : 3.625 REM

T 54px

Size : 3.375 REM

T 48px

Size : 3 REM

T 44px

Size : 2.75 REM

T 36px

Size : 2.25 REM

T 32px

Size : 2 REM

T 28px

Size : 1.75 REM

T 24px

Size : 1.5 REM

T 22px

Size : 1.375 REM

T 20px

Size : 1.25 REM

T 18px

Size : 1.125 REM

T 16px

Size : 1 REM

Designed to attract and convert, this AI SaaS template highlights your product.

Size : 1 REM

T 14px

Size : 0.875 REM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Pop art style image with a blue and black halftone portrait of a woman, overlaid with a yellow hand pointing at her head and a yellow rectangle showing her eyes.

Colors

White

Black

#00a6ff

#ff9c6a

#f0e0ea

#e0e1f2

5% 414BFF

15% E2C1FF

#a6e5ff

#ffafd4

rgba(255, 255, 255, 0.13)

#525866

rgba(0, 0, 0, 0.1)

rgba(133, 133, 133, 0.15)

#323232

#f5f7ff

#e5e5e5

#f9f4ff

#f8f0f0

#f0f4ff

#f2fdfa

#f3f0f9

#edf5f7

#e6daf5

#f1dcdc

#dbe4fd

#d7e8e3

#e5def2

#dce8eb

Button

Start Free

Explore Features

Explore All Blog