Style Guide
The Dynamic Style Guide is an essential tool within Core Framework, designed to help you maintain design consistency across your projects.
Overview
This guide dynamically adapts to your chosen brand colors, tints, and shades, giving you a clear visual representation of your design elements in real time. Whether you’re at the design or development stage, the Dynamic Style Guide ensures you have a reliable reference to keep your brand unified.
It also includes a mock-up website design that highlights the default --primary, --secondary, and --tertiary color variables set within Core Framework. This gives you an instant preview of how your brand’s colors interact across a sample website layout.
We recommend using at least --primary, --secondary and --tertiary variables to make the most of the Style Guide.
Additionally, we’ve created sections featuring Core Framework elements and an overview of typography, showcasing different font weights and text sizes, all linked directly to Core Framework’s variables and classes.
A standout feature is the Accessibility Matrix Table, which dynamically pulls all of your Core Framework colors to display every possible combination of text on background colors. This matrix helps you assess accessibility compliance by showing whether color combinations pass or fail accessibility standards, and it automatically updates when toggling between light and dark modes 🔥.
✅ Features:
Real-Time Synchronization: As you update your color settings in Core Framework, the Dynamic Style Guide adjusts automatically, ensuring your design reflects the latest changes.
Preview Your Brand: The guide provides a mockup layout that lets you visualize an example website design before moving into full development, helping you refine your color schemes and overall aesthetic.
Accessibility Insights: Included in the guide is a dynamic accessibility table, which assesses how well different text colors work against various background shades, helping you meet accessibility standards from the start.
Benefits also for Clients!
The Dynamic Style Guide isn’t just a tool for developers and designers; it’s also a useful resource for clients. It provides a clear, visual representation of brand colors and styles, allowing clients to easily approve or request changes before full-scale development. This minimizes revisions later on, saving time and ensuring client satisfaction. With an included website mock-up section, you can simply import this to a page and show it to a client, giving them a clear understanding of how the brand colors will work together 🔥
Using the Style Guide
It is important to note that most of the dynamic sections make use of our Helper class, meaning most of the content is made up of PHP in the form of code blocks. We recommend having a good knowledge of PHP if you would like to make edits to the dynamic sections.
The style guide contains the following sections for both Bricks Builder and Oxygen Builder:
Style Guide Header
The Style Guide Header provides a simple yet effective introduction to your brand’s typography and color scheme. It dynamically pulls custom colors from Core Framework, offering an immediate visual overview of your chosen design elements.
Additionally, this section includes the essential code block for TippyJS, enabling tooltips to display correctly on hover for the sections that follow. This ensures that your style guide remains interactive and informative right from the start.
Color Modules
We offer three distinct Color Module sections, each with a unique design but serving the same core purpose: to showcase your custom colors along with their respective shades and tints. Hovering over any shade or tint reveals a tooltip displaying the variable name, providing easy identification and reference.
Below are examples of the three different color modules available, offering flexibility in how you present your color palette.
Typography Section
The Typography Section provides a comprehensive overview of all text-related elements. You'll find the various text sizes generated by Core Framework's typography sizing calculators, as well as the fonts being used across your project. This section also showcases different font weights and demonstrates how your links will appear when styled with the .link utility class, ensuring a consistent and visually appealing presentation of your brand's typography.
Elements Section
In the Elements Section, you’ll discover a wide range of components that inherit the --primary, --secondary, and --tertiary colors. These components include commonly used website elements like buttons, icons, and avatars. Additionally, the section provides a clear overview of the spacing and padding utility classes, offering insight into how these elements are styled and structured across your project.
Website Mock-Up
The Website Mock-up section offers an excellent way to gain a comprehensive understanding of how your brand colors, typography, and elements work cohesively. It utilizes the default --primary, --secondary, and --tertiary colors, providing a clear visual representation of your design in action. This section is also a powerful tool for showcasing your brand identity to clients in a fast and effective manner.
Below is an example of the website mock-up section with the dark theme enabled:
Accessibility Matrix Table
The Accessibility Matrix Table is an invaluable tool designed to enhance the accessibility of your designs. This dynamic feature automatically pulls in all the colors from Core Framework, allowing you to visualize how each color interacts with various background colors.
Key Features:
Dynamic Color Evaluation: The table showcases every variation of your color palette, displaying text colors against multiple background colors. This real-time analysis helps you identify potential accessibility issues.
Accessibility Testing: Each color combination is evaluated against established accessibility standards, indicating whether they pass or fail accessibility tests. This ensures that your design is inclusive and usable for all users, including those with visual impairments.
Responsive Adjustments: The table automatically updates to reflect changes in your color variables and scores when toggling between light and dark modes. This responsiveness allows you to see the implications of your design choices instantly.
By integrating the Accessibility Matrix Table into your workflow, you can ensure that your designs are not only visually appealing but also accessible to a wider audience, thereby enhancing user experience and satisfaction.
Installation Guide for Oxygen 🟪
Add Design Set Key
Please make sure you have installed and activated Oxygen Builder. You will need to navigate to Oxygen → Settings → Library → set 'Enable 3rd Party Design Sets' → Add Design Set → and paste in your site key for the Style Guide before clicking on 'Add Source Site'.
Start Adding Sections!
That's all there is to it! You can now open a page in Oxygen Builder and browse from the sections within the Style Guide.
Installation Guide for Bricks 🟨
Add Remote Template
Please make sure you have installed and activated Bricks Builder. Then, navigate to Bricks → Settings → Templates → Enter the URL and Password in the Remote templates section. We also recommend using 'Style Guide' in the Name field. Be sure to click on Save Settings.
Start Adding Sections!
You can now begin to add sections from the Style Guide library. When importing sections, you may be asked to import theme styles. We recommend importing them, as we have set up some important variables to make developing your websites more smooth and efficient.
Using the Style Guide with Figma 🎨
Along with the Style Guide, we’ve provided a Figma file that comes with local variables directly synced from the Core Framework plugin inside Figma. Whether or not you choose to integrate the Core Framework plugin into your workflow, this Figma file remains incredibly valuable. It offers you the flexibility to work with predefined variables, ensuring consistency in your designs, all while maintaining full control over the design elements in Figma.
Using the Core Framework Plugin inside Figma
For instructions on how to get started with Core Framework inside Figma, we recommend following our article: Getting Started with Figma.
If you are using the Core Framework plugin inside Figma, then you can follow these easy steps to get started:
Ensure that you’ve downloaded the
.corefile for the Style Guide.In the Core Framework plugin within Figma, navigate to Manage Project. Scroll to the bottom and click Browse Files. Select the
.corefile from your saved location.
After selecting the
.corefile, click on Overwrite All, then hit Save.
That's it! Once saved, all of the variables will be synced to Figma's local variables, ready for use.
Important Note: Any changes to variables must be made through the Core Framework plugin, not directly within Figma's UI. Saving changes within Core Framework will automatically overwrite all variables stored in Figma.
Now, you can easily view all the variables within Figma's variable modal. To access it, simply deselect everything by pressing the Escape key (or clicking on a blank space in the canvas). Then, navigate to Local Variables. For example, selecting the Colors tab will display all the variables synced from Core Framework.
Not using the Core Framework Plugin inside Figma
For users who choose not to use the Core Framework plugin inside Figma, no worries! The Figma file was created with Core Framework, meaning all local variables are still embedded in the file itself. This is highly beneficial, as you can easily access and utilize these local variables through Figma’s Local Variables modal. Any changes made to a variable will automatically update all instances across your design.
The drawback of not utilizing the Core Framework plugin is that you will have to manually adjust all colors, generated tints, shades, transparencies, and other variables which are usually automatically generated in Core Framework. This can be time-consuming and may lead to inconsistencies across your design. Click here if you're ready to purchase!
Last updated
