Heading Text
The <h1> font-size: 9rem; is the most important heading on a page. It represents the main title and should only be used once per page. This ensures clarity and proper SEO structure. It should be large, bold, and highly visible to immediately communicate the page’s purpose.
Subtitle text
font-size: 5em; Usage: The <h2> serves as a subheading under the <h1>. It introduces different sections within a page, helping users and search engines understand the page’s structure.
Subtitle Internal text
font-size: 3em; Usage: The <h3> is used for sub-sections within an <h2> section. It helps organize content and improve readability.
Subtitle Internal text
Usage: Smaller rectangles should maintain a border-radius of 50px to ensure consistency with larger elements while keeping them distinct. This applies to UI elements such as buttons, input fields, and small content cards.
Subtitle Internal text
Usage: Large rectangles should have a smooth, rounded appearance with a border-radius of 70px. This creates a modern, soft, and user-friendly aesthetic, making elements feel more inviting and less rigid.
Icon buttons, especially for arrows (←, →, ↑, ↓), should have a font-size of 46px for visibility and a padding of 15px to ensure comfortable clickability. These buttons are commonly used for navigation, carousels, and interactive UI elements.
Usage: Regular buttons should have a font-size of 1.7rem, a border-radius of 50px for a soft rounded look, and padding of 4px (top/bottom) and 12px (left/right) to maintain proper proportions. This makes the buttons visually appealing and easy to interact with.
Section Background Colors – Examples
Each section follows a predefined background color that changes dynamically to enhance the user experience.
Examples:
- Dark Blue Background: (class section01 background color blue01 transition)
- Medium Blue Background: (class section02 background color blue02 transition)
- Light Blue Background: (class section03 background color blue03 transition)
- Soft Grey Background: (class section05 background color grey transition)
- Cream Background: (class section06 background color cream transition)
Usage in Page Builder:
- Go to Advanced Settings in the section.
- Add the class section01 (without the dot) to apply the dark blue background.
- 🖍️ Dynamic Text Colors – Examples
To maintain readability, text colors automatically adapt based on the background color.
Examples:
- White Text on Dark Blue Background: (class textColor01 color text white in blue01 transition)
- Black Text on Light Grey Background: (class textColor02 color text black in grey transition)
- Yellow Highlight on Dark Background: (class textColor03 color text yellow01 in blue01 transition)
- Red Alert Text on Neutral Background: (class textColor04 color text red01 in grey transition)
Usage in Page Builder:
- Select the text block and open Advanced Settings.
- Add the class textColor03 (without the dot) to highlight text in yellow.
- Smooth Color Transitions – Examples
To ensure a natural flow, background and text colors transition smoothly while scrolling.
Examples:
- Text and background fade effect: (class color-transition smooth background and text changes on scroll)
- Soft transition between sections: (class section-transition delay 500ms smooth effect)
Usage in Page Builder:
Assign the class color-transition to any element that needs smooth color adaptation.
Best Practices for Color Adaptation
- Use contrasting colors to ensure text remains legible.
- Apply accent colors strategically to highlight important information.
- Ensure all transitions are smooth and non-disruptive to the user experience.
- When assigning classes in the page builder, always enter them without the dot (e.g., textColor05).
Example Usage:
- A heading inside a dark blue section should have the class textColor01 for white text.
- A paragraph in a grey section should have textColor02 for black text.
- A call-to-action inside a cream background can use textColor04 for emphasis in red.