Using DesignTerra

Getting started

DesignLoom is a single HTML file. Download it from the software page, open it in any modern browser, and start editing. No installation, no dependencies, no account.

The tool is split into two panels: the editor on the left, where you define and edit tokens, and the preview on the right, where every component reflects your current token set in real time.

Tokens

Tokens are the named values that define your design language. DesignLoom organizes them into five categories: colors, typography, spacing, motion, and shadows. Each category has its own editor section.

Every token you edit is reflected immediately in the preview. There's no "apply" step — the preview is always in sync with the editor.

Color tokens

Colors are organized by role: canvas (background), surface, text (primary, secondary, muted), border, brand (accent and its variants), and semantic (success, warning, error).

Each color has a swatch, a hex input, and a role label. Click the swatch to open a color picker. Type a hex value directly. The contrast badge shows whether the color passes WCAG AA against white.

Adding colors

Click the "+ Add" button at the top of the Color Tokens section to add a new color. Give it a name, a value, and a role. It appears immediately in the preview.

Typography

Three font selections define your type system: display font (for headings), body font (for reading text), and mono font (for code and technical labels). Each is chosen from a curated set of Google Fonts.

The type scale defines named sizes — from xs through display-xl — each with a size value and a weight. Every heading and body size in the preview reflects your scale.

Editing the scale

Each scale entry has an editable size (e.g., "1.5rem") and weight (e.g., 400). Change either and the preview updates. Add new entries or remove existing ones to match your design needs.

Spacing

The spacing scale defines named spacing values — xs, sm, md, lg, xl, 2xl, 3xl — each as a pixel value. These are the values that control padding, margins, gaps, and sizes throughout your components.

Each spacing value is shown as a visual bar whose width corresponds to the value. Edit the number directly. The preview components use these values for their internal spacing.

Motion

Motion tokens define your interaction language — durations (fast, default, slow) and easing curves (ease-out, ease-in, linear, and custom cubic-beziers). Named durations and easings are reusable across components.

The preview components use these tokens for their hover transitions and animations. Change a duration or easing and see the effect on the components.

Shadows

Shadows are defined as full box-shadow declarations — named values like sm, default, and lg. Each is shown as a small square with the shadow applied, alongside an editable text field.

Add new shadows with the "+ Add Shadow" button. Delete shadows with the × button. The preview cards and components use your shadow tokens for their depth.

Versioned sets

Save named snapshots of your token set at any point. Click "Save Set" in the header, give it a name, and it's added to the version list. Switch between versions using the dropdown in the footer bar.

Versions are useful for exploring alternatives ("what if the accent were teal?"), tracking changes over time, or maintaining separate sets for different products or themes.

Export

When you're ready, export your tokens in one of four formats. Click "Export" in the header to open the export modal.

The four formats are:

• CSS Custom Properties — Standard :root variables. Works everywhere.
• JSON — A structured token object for JavaScript, tooling, or APIs.
• Tailwind Config — A partial tailwind.config.js theme extension.
• CSS-in-JS Theme — A theme object for Styled Components, Emotion, or vanilla JS.

Select a format, copy the code to your clipboard, or close the modal and try another format. Each export reflects your exact current tokens — no hand-editing, no drift.

Tips & patterns

Start from the default set

The default token set is a complete, working design system. Edit it, extend it, or replace it — but starting from a working baseline is faster than building from scratch.

Name things intentionally

Token names are how you'll refer to them in code. Use clear, consistent names — color-accent, not color-brown-1. The name should tell you what the token is for, not just what it looks like.

Use versions for exploration

Before committing to a new direction, save your current set, experiment, and compare. Versions let you try alternatives without losing your work.

Export early, export often

You don't have to wait until you're "done" to export. Exporting periodically gives you a record of your token set at different points and lets you use tokens in your projects as you build them.