Blog

Product updates, engineering notes, and practical portfolio advice.

← All posts
Design token system diagram across color, type, and layout surfaces

The design-token architecture behind every template

PortfolioDIY avoids free-form positioning because arbitrary movement is easy to break across screen sizes. Instead, templates expose structured content fields and design tokens.

Tokens are the shared design values: primary color, type scale, spacing, radius, and shadow. When you change a token, every template rule that uses it updates together. You are changing the system, not repainting individual pieces.

This is also what makes a growing template catalogue maintainable by a small team. A template author defines structure and how tokens map onto it; the system guarantees the rest. Themes — Light, Dark, Bold — are just curated token presets, which is why any theme applies to any template instantly and non-destructively.

The same tokens ship in your export as CSS custom properties at the top of the stylesheet. The architecture that protects beginners inside the editor becomes the affordance that lets developers customise everything outside it. One system, both audiences.

The PortfolioDIY Team

Product & engineering