Export · #416
One preset, the same tokens
The colours, radii and font stacks this site uses, as a Tailwind preset you can drop into a project. It is generated from the same stylesheet the pages compile, so a token change moves both.
Three steps
curl -o motif-preset.cjs \
https://<host>/api/exports/motif-preset.cjs
// tailwind.config.js
const motif = require("./motif-preset.cjs");
module.exports = { presets: [motif], content: ["./src/**/*.{ts,tsx}"] };Then bg-panel, text-ink-dim and rounded-lg resolve to 14 colours and 5 radii that match this site exactly.
What a token preset cannot carry
The component classes — .chip, .btn, .card-hover — live in this site's stylesheet, and the catalog stores component metadata rather than source. Shipping them inside a preset would mean shipping a stylesheet and calling it a preset. If you want the classes, copy them from the stylesheet; if you want the tokens, this file is exact.
The file (1.2 KB, complete)
/* Motif UI Tailwind preset — generated from src/app/globals.css.
*
* Covers the design tokens only. Component markup is not included, because
* the catalog stores component metadata rather than component source; a
* preset that shipped invented markup would be a different product.
*
* Usage: // tailwind.config.js
* const motif = require("./motif-preset.cjs");
* module.exports = { presets: [motif], content: ["./src/** /*.{ts,tsx}"] };
*/
module.exports = {
theme: {
extend: {
colors: {
"bg": "#06070b",
"panel": "#0b0d14",
"raised": "#10131d",
"edge": "rgba(255, 255, 255, 0.08)",
"edge-strong": "rgba(255, 255, 255, 0.16)",
"ink": "#edf0f7",
"ink-dim": "#9aa3b5",
"ink-faint": "#747b87",
"accent": "#8b5cf6",
"accent-2": "#22d3ee",
"accent-3": "#f472b6",
"mint": "#34d399",
"amber": "#fbbf24",
"danger": "#f87171",
},
borderRadius: {
"xs": "6px",
"sm": "10px",
"md": "16px",
"lg": "24px",
"xl": "34px",
},
fontFamily: {
sans: "system-ui",
display: "system-ui",
},
},
},
};