The LWP trainer's palette-and-typography generator (site + Figma plugin) - version 2 builds two coordinated color palettes and guides font pairing for the course's 8-slot color system.

Pick this when

You are at the visual-direction / design-system step of a build and want course-consistent colors and fonts fast instead of hand-assembling them.

What makes it different

Version 2 generates TWO coordinated color palettes - matching the course's light/dark or primary/secondary section rhythm

Ships as both a web tool and a Figma plugin, so palettes land directly in the working design file

Influential enough that a Divi plugin was built inspired by it (per the trainer)

What it does

Generates color palettes suited to the LWP 8-color slot system (Design c05 lesson 19; Elementor s04 system colors)

Guides font choice and pairing - the course's typography step without the from-scratch search

Feeds Figma directly via the plugin, keeping design tokens in the file that later drives the Elementor build

What it does not do

Common wrong expectations

Doesn't design the site - it supplies the palette/typography inputs the visual-design workflow consumes

Doesn't replace the style-guide-with-real-content judgment step the course insists on

Where it sits in a stack

HOW TO USE in the LWP method: run it at the visual-direction/moodboard gate (Design c05a) to propose palettes, commit the winners as Figma variables (c05b lesson 20), then mirror the same slots into Elementor's global colors (Elementor s04). It is the bridge tool between the Figma course and the Elementor course.

Shelf

Design & whiteboarding · Productivity & source apps

Our status · adopt

Paul's direction 2026-08-28: standard component of the LWP starter-site toolkit.

For your projects

Component #2 of Paul's planned LWP starter-site toolkit (OI-089) - the color/type input stage for Cowork-generated starter sites.

Freshness

current

Related tools

complementsFigmacomplementsElementor

figma: the plugin writes palettes into the working design file

elementor: palette slots mirror into Elementor global colors

Every moment the course touched it (1)

SessionCoverageMomentWhat happened
Chapter 5b: The System Build — Styles, Variables, Components, and the Stylekit PipelinedemonstratedTaught by its author: scale + hue-palette generation, JSON export, companion plugin import - as-heard 'stelkit.com'

← All tools by category