Setup

Design Controller gives a WordPress site one screen for its design system. This page takes you from a zip file to the first publish, which changes nothing on purpose, and then to the things you will do every week.

Install

1. Free: install from the WordPress.org directory, or upload the design-controller-x.y.z.zip at Plugins → Add New → Upload Plugin. Pro: download design-controller-pro-x.y.z.zip from your account and upload it the same way — it installs over the free build, same folder, same slug.
2. Activate. WordPress 6.5 or newer and PHP 7.4 or newer are required.
3. Open Appearance → Design Controller.

The wizard: three steps, nothing changed

1. Read the current values. The wizard reads the colours and fonts your theme (Flatsome, Global Styles) and Elementor already use and shows them in a table with where each one came from. Nothing has been changed yet.
2. Fonts. If the site loads Google Fonts, it offers to host them on your own server — faster, subset for Thai and Latin, and no visitor data sent to Google.
3. Confirm. A design is created and published with the values as they were. The site looks identical.

From here on, everything about the design is edited on this one screen.

The screen

• Left: the panels — Overview, Typography, Colours, Spacing, Shape, Components, Fonts, Presets, Health check, Settings.
• Middle: a preview of your real site. Pick any page and any device from the top bar; every change shows at once.
• Right: the controls of the panel you picked.

The badge in the top bar says where you are: Published, Draft ● (changes not yet published), or Saving…. Drafts save themselves — close the tab and they are still there — and ↶ ↷ (Ctrl+Z / Shift+Ctrl+Z) undo and redo.

Everyday tasks

Change a font. Typography → Fonts → pick a role (headings, body, UI, code) → choose from Installed or Google (Thai) → Use this font. A Google font is downloaded once and hosted by your server, subset per script. Want one Thai family and a different Latin one? Turn on Pair with a separate Latin font.

Change a colour. Colours → Brand → pick the primary → hex, slider or the eyedropper. Tints, shades, the neutral ladder and the text colour on buttons are derived for you; the contrast table says whether each pair reads (AA) and offers Fix to AA.

Buttons, fields, cards, menus. Components → switch on Let Design Controller manage… for the component you want (off means the theme keeps control) → set background, text, radius and padding, referencing a token ("same as Brand primary") or a value of your own.

Publish. Press Publish → the dialog lists exactly what changes → confirm → the site changes at once, and page caches are purged if you run a cache plugin. To go back: More → History → pick a version → Restore to draft → publish.

Presets. Presets → Use this preset writes it into your draft, not the site; adjust anything, then publish. Save your current design as a preset of your own under Mine.

Health check. Twelve checks — fonts loaded twice, the font budget, contrast, Thai line-height, hard-coded values in Additional CSS, stale caches and more. A check that can be fixed safely has a Fix button; it writes to your draft only, so look at the preview before you publish.

Pro: license and updates

The free plugin is complete and nothing in it is locked. Pro is a separate build that adds the Flatsome / UX Builder and Elementor integrations, team guardrails, your own saved brand kits, Tokens Studio import, priority support and automatic updates.

Go to Appearance → Design Controller → Settings → License, paste the key from your purchase email (DCT-XXXX-XXXX-XXXX-XXXX) and click Activate. Updates then appear on the normal Plugins screen; the plugin checks in with our server at most twice a day.

A single-site license works on one site at a time. Moving to a new site? Click Deactivate on the old one first — or release the seat from your account — and activate on the new one.

If the license lapses, or the server cannot be reached for more than 14 days, your site does not change: bridges, locks and saved kits keep working exactly as published. What pauses is what needs the license — editing Pro settings, saving or deleting kits, Tokens Studio import, and updates — until it is active again. The status shows only on the License tab, never as a notice.

Uninstall

Deactivating restores the site immediately, because Design Controller never wrote into the theme's, Elementor's or WordPress's own settings. To remove its data for good: Settings → Uninstall → turn on Delete all data when the plugin is deleted — and, separately, the fonts installed through Design Controller, since the Site Editor may be using them — then delete the plugin as usual.