Style Guide
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Color Palette
Vibrant and Versatile Colors
The ScaleWP Framework employs a thoughtfully curated color palette to enhance user experience and brand recognition. Our primary color, a deep azure blue, conveys trust and professionalism. Complementing this, the secondary color is a soft gray, providing balance and neutrality. For accents, we use a lively coral, adding a touch of vibrancy to highlight key elements.
Typography Guide
Consistent and Clear Font Styles
Our typography is designed to be both functional and aesthetically pleasing across all devices. On mobile, we use a sans-serif font at 16px for body text, ensuring readability. Headings are bold and sized at 24px to capture attention. On tablets, body text increases to 18px, with headings at 28px for a balanced look. Desktop versions feature body text at 20px, with headings at 32px, maintaining clarity and hierarchy.
Font weights vary to provide emphasis where needed, with regular, medium, and bold options available. This flexibility allows for a dynamic presentation while maintaining a cohesive visual language throughout the ScaleWP Framework.
Button Styles
Interactive Buttons
Our buttons are designed with user interaction in mind, offering a seamless experience across all devices. Each button style is crafted to maintain consistency and enhance usability, ensuring that users can easily navigate through the interface.
Hover effects are an integral part of our button design, providing visual feedback to users. On hover, buttons subtly change color and elevation, creating a sense of depth and engagement. These effects are optimized for both touch and pointer devices, ensuring a responsive interaction on mobile, tablet, and desktop.
Spacing Guidelines
Consistent Layouts
Our framework employs a systematic approach to spacing, ensuring that margins and padding are applied consistently across all components. This uniformity helps maintain a clean and organized layout, enhancing readability and visual appeal.
Iconography
Visual Symbols
The ScaleWP Framework utilizes a versatile set of icons to convey information quickly and effectively. Icons are available in multiple sizes to suit different contexts, from small inline icons to larger, more prominent symbols. Each icon is designed with clarity and simplicity in mind, ensuring they are easily recognizable at a glance.