Core Framework
HomeChangelogDashboard
  • 📖Introduction
    • 📝 Overview of Core Framework
    • 💁🏼‍♂️ Target Audience
    • 🔍 Navigation of the Documentation
  • 🚀Getting Started
    • Getting Started with Web App and WordPress
    • Initial Setup and Configuration
    • Video tutorial: First-time setup walkthrough
    • OxyNinja Users
  • 🧩Builder Integrations
    • Overview
    • Oxygen Builder
    • Bricks Builder
    • Gutenberg
  • Figma
    • Getting Started with Figma
    • Create and Manage Variables
    • Editing Elements
  • 💻Navigating the UI
    • Color System
    • Typography
    • Spacing
    • Components
    • Utility Classes & Vars
    • Breakpoints
    • Manage project
    • Remote Import
    • Preferences
  • 📒How to Use
    • Dark Mode
    • Grid System
    • Filters
  • 🎯Marketplace
    • Buying Products
    • Become an Author
    • Author Guidelines
  • 👕Official UI Kits
    • Blocks
    • CoreKit
    • Violet
    • WooCore
    • Style Guide
    • OxyNinja Icons
  • Official Templates
    • Agency
    • Real Estate
  • 🔨Troubleshooting
    • Common Problems
    • FAQ
  • 📖Changelog
    • Changelog
    • Feature Requests
  • Development
    • CoreFramework\Helper
Powered by GitBook
On this page
  • Video Overview
  • Adding and Removing Colors
  • Changing Colors and Value Types
  • Generating Extra Features
  • 1. Generate Utility Classes
  • 2. Generate Transparent Variants
  • 3. Generate Shades
  • 4. Generate Tints
  1. Navigating the UI

Color System

Step into the new era of UI color management. Add unlimited colors, organize them into groups, and generate lighter, darker and transparent color variants effortlessly.

PreviousEditing ElementsNextTypography

Last updated 8 months ago

Video Overview

With our color management system, you can set your variable names for each color and also sort your colors into groups. By default, our framework comes with multiple groups ranging from brand colors, to text, background, base colors and more. You can add more groups by clicking on the Create new color group button at the bottom.

Adding and Removing Colors

To add a new color, simply click the plus (+) icon under the last color in the group.

Removing a color is just as easy! Simply hover over the color that you would like to delete and click the mini menu (a series of 3 dots aligned vertically) to bring up the options. Here you'll see the option to delete at the bottom. You may need to click twice for confirmation.

Please keep in mind that deleted colors cannot be recovered.

Changing Colors and Value Types

To change your color, simply click on the color itself or the value field to bring up the color picker. You can also choose between multiple color value types:

Generating Extra Features

By clicking on the down arrow in the color row, you will bring up extra options where you can:

1. Generate Utility Classes

With each color, you will have the option to generate utility classes for text, background and borders. These will be automatically generated depending on which of the 3 items you have selected.

2. Generate Transparent Variants

By checking this option, you can automatically generate 9 transparent variants of the selected color. If your color variable is --primary, then you can use --primary--10 (meaning 10% transparency) through to --primary-90.

3. Generate Shades

With this option enabled, you will see a dropdown showing you the shades generated from your color. You can select the amount in the count box ranging from 3 up to 10 shades.

4. Generate Tints

Similarly to the shades above, you can also generate tints for your colors.

Generate utility classes
Generate transparent variants
Generate shades
Generate tints
💻
Colors Interface
Adding a New Color
Deleting a Color
Bring up the color's extra options
Generate Utility Classes Row
Generate Transparent Variants Row
Generate Shades Row
Generate Tints Row
Page cover image