Every component below reflects your current token set. Edit tokens on the left and watch the preview update in real time.
This is body-large text — used for introductions and prominent body copy. It sits comfortably at 1.125rem with a relaxed 1.6 line height for readable paragraphs.
Standard body text at 0.875rem. This is the workhorse size for most content. The line height is 1.6, giving paragraphs room to breathe without feeling sparse.
Secondary text at 0.8125rem — used for captions, metadata, and de-emphasized content that still needs to be readable.
:root {
--accent: #a0522d;
--font-display: 'Instrument Serif';
--spacing-lg: 24px;
}
// DesignTerra token export
const tokens = await designloom.export({
format: 'css-variables',
set: 'default'
});
/* Applies to every component in the preview */