Ikelan Color System

About this plugin

Build Your Entire Design System Color Foundation in Seconds

Stop manually creating color variants and naming styles. Ikelan Color System is a professional-grade tool designed to generate a comprehensive, scalable, and accessible color architecture for any project. Whether you are building a new Design System from scratch or auditing an existing one, Ikelan automates the heavy lifting.

What makes this plugin unique? Unlike basic generators, Ikelan covers the entire spectrum of Design System colors, ensuring your UI remains consistent, accessible, and organized.

Key Features:

1. Complete Shading Logic: Generates a balanced 10-step scale (from 50 to 900) for every core color using a professional luminance-based algorithm.

1. Automated Local Styles: Instantly populates your Figma Styles library using a clean, industry-standard naming convention: Brand / Category / Weight (e.g., Brand/Primary/500).

1. WCAG 2.1 Accessibility (Contrast Check): Every swatch is automatically tested for readability. The plugin visually indicates the best text color (Pure White or Pure Black) to ensure your design is inclusive and accessible.

1. Universal UI Tokens: Manage everything in one place:

1. Core Identity: Primary, Secondary, and Neutral scales.

1. Feedback System: Success, Error, Warning, and Info.

1. UI Tokens: Text, Surface, Border, Background, Hover States, and Overlays.

1. Professional Documentation: Draws a clean board on your canvas with Ultra-Bold headers and technical HEX details, perfect for developer handoff.

How to use:

1. Open the plugin and set your core HEX codes (or use the visual color picker).

1. Click "GENERATE BRAND STYLES".

1. Your Figma file is now equipped with over 130+ professional, accessible Local Styles.