how I make my templates easy to reskin (probably overthought this)

how I make my templates easy to reskin (probably overthought this)

I do client work - dashboards, landing pages, that kind of thing. And at some point I noticed I basically build the same 5-6 things over and over: stat card, some kind of table, a hero section, a pricing grid. Just... different colors every time.

Eventually turned two of these into actual products - Ledger (dashboard template) and Fielder (landing page kit). Wanted them to be easy to reskin without me having to rebuild half of it every time someone wants a different look. Here's what that actually meant in practice.

Colors live in one file

No hardcoded hex codes anywhere in a component. All of it goes through tailwind.config.js:

colors: {
  primary: { DEFAULT: '#2B6E63', light: '#3E8F80', dark: '#1E4E46' },
  accent: '#C98A3B',
},
fontFamily: {
  display: ['Fraunces', 'serif'],
  body: ['Inter', 'sans-serif'],
},

Components just say bg-primary or whatever. Change the six lines above, whole product looks different. Nothing else to touch.

Sounds obvious written out like that, but I've def seen (and written) code before where someone just... types a hex code directly into a className because it was faster in the moment. Don't do that if you want this to work later.

Don't name things after the client's industry

Easy trap - you're building a rental dashboard so you name the component TenantTable. Don't. It's just DataTable, StatCard, StatusBadge. The rental-specific stuff lives in a mock data file; the component has zero idea what it's displaying.

This one actually matters more than the color thing honestly, because renaming components later is way more annoying than renaming a hex code.

Break the grid pattern

Both templates avoid the classic 3-identical-cards-in-a-row layout. One card's just bigger:

{/* main thing */}
{/* smaller stuff */}

Not a huge deal, but it stops the thing from looking like it was assembled from some component library's defaults, which is a look I was trying pretty hard to avoid.

Don't leave fake auth screens lying around

I almost skipped this. First version of Ledger's login page looked fine and did literally nothing. You click sign in, nothing happens, you're still on the login page. That's a pretty common shortcut for templates, but someone pointed out to me that it's also the first thing a buyer will actually click, so if it's broken that's a bad first impression.

Fixed it with a plain React context - no auth library, nothing fancy. It actually redirects you if you try to hit a page without being logged in. Took maybe an hour. Probably should've done it from the start instead of after someone called it out.

Summary

The two templates don't share code, but they share this same setup:

• Config for styling
• Generic component names
• Breaking the grid pattern once
• Not leaving fake screens lying around

If you want to see it: Ledger / Fielder. Happy to answer questions in the comments if anyone has them.