Themes
Theme export
Download DESIGN.md, DTCG tokens, Tailwind v4 @theme, and agent skills for every curated pack.
Every curated Hewn theme can be exported in four free formats — from Theme
Lab for the active pack, from Theme Studio for a draft, or as static files under
/themes/{pack}/.
Formats
| Format | File | Use |
|---|---|---|
| Design brief | DESIGN.md | Human- and AI-readable palette, typography, radius, motion, do/don't |
| DTCG tokens | tokens.dtcg.json | W3C Design Tokens ($value / $type) with light and dark modes |
| Tailwind v4 | theme.css | @theme block plus mode remaps |
| Agent skill | SKILL.md | Cursor-style skill telling agents how to apply the theme |
All six packs are free. Advanced Studio exporters (Style Dictionary, Figma variables) are planned for Hewn Pro and are separate from these formats.
Static paths
Files are generated at build time. Replace {pack} with forest, tide,
graphite, dune, clay, or ember:
/themes/{pack}/DESIGN.md/themes/{pack}/tokens.dtcg.json/themes/{pack}/theme.css/themes/{pack}/SKILL.md/themes/index.json— catalog of packs and formats
Static files ship with the docs site under /themes.
Theme Lab
Open Theme Lab, pick a pack in the appearance controls, then use Download or Copy on each format. Buttons are keyboard-focusable with visible labels and live regions for copy confirmation.
Theme Studio
Author a custom accent pack in Theme Studio, open the Export tab, and download the same four formats for your draft (plus drop-in pack CSS).
Use your exported pack
Import the drop-in CSS, then set ThemeProvider’s defaultTheme to the pack id
in the file (Theme Studio drafts use studio-draft). Custom ids are supported —
without that, the provider would keep data-theme on a curated pack and your
export would not apply. See Theme Studio → Use your exported pack.
Engine
Exporters are pure functions in @hewnui/themes/authoring:
exportDesignMdexportDtcgexportTailwindThemeexportSkillMdTHEME_EXPORT_FORMATS— catalog withtier: "free"today