XOXO

About this plugin

Stop guessing your accent colours and secondary shades. Smart Colour System instantly generates a mathematically perfect colour palette based on your brand's primary and secondary hex codes—saving you hours of manual tweaking.Whether you are building a sleek, high-energy UI for a mobile app or a clean, scalable enterprise dashboard for a distributed team, this plugin handles the heavy lifting of colour theory for you. It calculates lightness, saturation, and contrast to give you a working palette in one click.How it Works:Enter your Primary and Secondary Hex codes.Choose your UI Vibe (Minimalist, Bold & Pop, or Dark & Moody).Click "Generate Variables."What it Builds:The plugin automatically calculates and generates exactly 6 perfectly balanced Figma Local Variables right into your file, complete with developer-ready use-case descriptions:Background & Card Colours: Calculated for perfect depth, whether you need airy lights or rich, tinted darks.Stroke: Subtle, mathematically balanced borders derived from your primary hue.Accent: Mapped directly from your secondary hex for buttons, active icons, and high-converting CTAs.Typography (Rich Blacks): Never use a dead, default #000000 again. The plugin automatically generates "Text - Major" and "Text - Subtext" by creating a rich dark shade subtly tinted with your primary brand colour.Stop fighting with the colour wheel and manually updating styles. Generate your vibe, establish your variables, and get back to designing.