Style Guide
A live preview of global colors, typography, buttons, Motion One animations, and custom widgets from your Style Editor.
Brand colors
Primary and secondary palette configured in global settings.
Button styles
Call-to-action variants from your button style configuration.
Typography
Heading hierarchy, body copy, and link treatment.
Large Heading H1
Medium Heading H2
Small Heading H3
This is sample body copy. Vivamus quis mi. Curabitur a felis in nunc fringilla tristique. Donec posuere vulputate arcu. Nunc sed turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
This is a simple link within a paragraph.
Motion One animations
Add a motion-* class to any element. Animations trigger when it enters the viewport.
Fade in up
Zoom in
Bounce in
Text split animations
Combine text-split with an effect class on headings or paragraphs. Scroll down to see each effect.
Words slide up on scroll
Letters fade in beautifully
Words rotate into view
Animated examples
Fold entrance effects and is-anim-block content driven by your Global Motion settings.
motion-foldLeft
motion-foldRight
Custom widgets
Sample layout using Matrix card components.