Same foundation.
Your identity.
A theme should disappear into your project. Here is the order of operations that gets you there fastest, and what each move actually touches.
Four moves,
in this order.
Everything else is detail work you can do once the shape is right.
- 01
Change the words first.
Before touching a colour, replace the copy. Most themes look generic because the demo text is still in them. Your own words change the rhythm of every layout and tell you what actually needs adjusting.
- 02
Move the accent, not the palette.
Every theme exposes its colour as custom properties in one file. Change the single accent token and the whole site follows: buttons, active states, focus rings, the serif highlights. Rewriting the neutrals is rarely the improvement it looks like.
- 03
Set your type scale once.
Display size, body size and the tracking that goes with them live in the same token block. Adjust them together. A heading scale that moves without its tracking is the fastest way to make a considered theme look assembled.
- 04
Swap the images last.
Import images into the project rather than dropping them in a public folder, and the build generates sized WebP for you. Match the aspect ratios the layout expects before you start arguing with the grid.
Working with a coding assistant
An AI assistant in your editor can do a lot of the mechanical work: renaming routes, rewriting demo copy, adjusting a token across files. Give it the business context first, change one thing at a time, and read the diff.
What it should not do unsupervised is redesign. A theme holds together because a small set of constraints is enforced everywhere. An assistant asked to “make it pop” will break exactly those constraints, politely and in twenty files at once.
Installation & deployment