Start with a guided editing space.
Change the product look from simple fields and swatches, while keeping related style choices connected.
For designers, founders, and small product teams
Build a clean product look without starting from a blank page.
Design Token Starter Kit gives you a private browser workbench for shaping colours, type, spacing, corners, buttons, cards, forms, and focus states before they go into a real product.
- Use it for
- Visual foundations
- Privacy
- Runs locally
- Purchase
- One-time
Shape
Adjust the core look of your product with clear controls for colour, type, spacing, corners, and depth.
Preview
See buttons, cards, forms, alerts, and focus states before the styles land in a live product.
Save
Copy or download the updated handoff files when the visual direction feels ready.
Product preview
See the actual workbench buyers receive.
These screenshots come from the current buyer product. Click any image to inspect the full-size version.
Tune common UI pieces in one place.
Bring buttons, cards, and form fields into the same visual system instead of adjusting each screen by hand.
Check the feel before you hand it off.
Preview light, dark, and focus states on real interface pieces so the system is easier to judge at a glance.
Leave with something your project can use.
Run the built-in checks, then copy or download the updated files for your website, app, or client handoff.
What's inside
A practical starter system for making your product UI feel consistent.
Use it when you want a polished starting point for a SaaS dashboard, client portal, internal tool, or early product prototype.
Guided style editing
Work through colour, type, spacing, corners, shadows, and common component choices from one browser screen.
Connected choices
Use pickers for related styles so changing a base colour or spacing value does not leave the system feeling patched together.
Built-in checks
Catch common broken or missing style links before saving your updated kit.
Ready handoff
Copy or download the finished output when you are ready to bring the look into a product build.
Workflow
Go from rough visual direction to a reusable product foundation.
- 01
Open the private workbench in your browser.
- 02
Adjust the look until it matches your product direction.
- 03
Preview the important UI states before you commit.
- 04
Save the updated handoff files for your project.
Best for
Small teams that want design consistency before they need a full design system.
This is a focused starter kit, not a locked brand package. Adapt it to your product, your audience, and the level of polish your next launch needs.
One-time purchase
Get Design Token Starter Kit for $29.
Download the private workbench, starter styles, naming guide, examples, and saved output so your next product has a cleaner visual foundation from day one.
Open Gumroad checkout