Agencies & network · Advanced · 0:39 min

Your own kit: design tokens & export

Design tokens in the style editor, export – and when your own kit makes sense.

No sound, with subtitles German and English subtitles – switch them on and off with “CC” in the player. The video is hosted on this server and only loads when you press play. The steps below are the full text of the video.

Goal

You know when the style editor is enough and when your own kit makes sense – and how to create it.

Prerequisites

For your own kits: Node/pnpm for the build (local only), access to the themes/ folder.

Step by step

Transcript: every step matches one subtitle in the video.

Every value in the style editor is a design token (CSS variable) from the kit – theme.php → “design”.
“Export” saves the values as a file – e.g. to take them into your own kit or another website.
Own project = own kit: “kit:create” copies the start kit – the core stays updatable.
Structure, tokens, blocks and presets are described in the technical documentation › kits & design.

Commands & configuration

php bin/console kit:create meinprojekt            # Kopie des Start-Kits (--from=basis für eine andere Vorlage)
pnpm --dir tools build                            # Assets des Kits bauen
# Website auf das Kit umstellen: config/sites/{website}.php → 'kit' => 'meinprojekt'

Tips & pitfalls

Tip

Tutorials for your kit: themes/{name}/docs/tutorials.php extends the tutorials page; record your own videos with node tools/tutorials/record.mjs.

Tip

Step by step with the start kit: tutorial “Your own kit with the start kit”.

Watch out

Never use kit names in the core – project-specific things belong in the kit.