Description: This tool allows you to define the visual identity and graphic style (colors, fonts, layout) of your entire Framework360 system, ensuring consistency between your website and communications.
What is it for? (Practical Examples)
Use it to:
- Ensure that all graphic elements (buttons, headings, links) adhere to company colors and branding.
- Set typography (fonts and sizes) to improve the readability of the site and communications.
- Quickly define the system's appearance through automatic style generation based on Artificial Intelligence.
Main Features
1. AI Style Generation
You can automatically generate a basic set of colors and styles by clicking the "Generate style via AI" button. The system will guide you through a quick creation process and allow you to preview before applying the design.
2. General Settings
- Container: Defines the maximum content width (in pixels) for different screen sizes (Extra Large, Large, Medium, Small).
- Colors: Allows setting the system’s default color palette (e.g., Primary, Secondary, Success, Error) via a color picker tool. These colors will be available for use throughout the system.
3. Typography and Styles
- Headings (H1-H6): Enables defining a specific font, color, line height, and size (in pixels) for each heading level from H1 to H6.
- Body Text: Sets the main font, size, and line height for standard text, as well as text color and page background color.
- Logo: Allows setting a predefined width (in pixels) for the company logo.
- Links: Defines hyperlink colors and the color they take when hovered over by the user ("hover" state).
4. Background Management
If you choose to use a background image for the page body, advanced options can be configured:
- Background Image: Upload an image file.
- Size: Display mode of the image (e.g.,
cover,contain,auto). - Repeat: Whether the image should repeat (vertically, horizontally or fill space).
- Position: Where the image should be anchored within the page (e.g., center, top left).
- Attachment: Whether the image scrolls with the page (
scroll) or remains fixed (fixed).
5. Custom Fonts
You can upload your own company fonts (.ttf or .otf format). Once uploaded, these fonts will be immediately available in the font selector for headings and body text.
6. Button Styles
This advanced section allows customization of all default system buttons’ appearance (based on colors defined in the "Colors" section). You can use a visual editor to detail styles such as borders, shadows, background colors, and text colors for each button type.
How to Configure
All settings are organized into sections within the edit module. After making changes, you need to click the system’s standard save button.
| Section | Configuration Option | Description |
|---|---|---|
| General | Container Width | Sets maximum content size for devices (Extra Large, Large, Medium, Small). |
| General | Colors (Primary, Success, etc.) | Definition of the system’s main color palette. |
| Headings (H1-H6) | Font, Color, Size | Choice of font and visual properties for all headings. |
| Body Text | Font, Size, Color | Settings for main page text. |
| Body Text | Background and Image | Definition of background color and upload/management of a background image. |
| Logo | Default Width | Standard logo size in pixels. |
| Links | Color and Hover Color | Defines hyperlink colors in normal state and on mouse hover. |
| Custom Fonts | Font Upload | Uploading .ttf/.otf files for use in the system. |
| Buttons | Style per Type | Advanced customization of each button style’s appearance (e.g., Primary Button, Warning Button). |
Automatic Integrations
Consistency in Transactional Emails
The style and color settings defined in this module are automatically applied to format emails sent by the system (such as notifications or communication templates). This ensures that emails maintain the same graphic look as your website.
