Using DesignTerra

Getting started

DesignTerra 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. DesignTerra organizes them into five categories: colors, typography, spacing, motion, and shadows. Each has its own editor section, its own export behavior, and a clear role in the system. Change any token and the preview updates immediately — 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 shows a swatch, a hex input, and a role label. Click the swatch for a color picker, or type a hex directly. A contrast badge tells you 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 (headings), body (reading text), and mono (code and technical labels). Each comes from a curated set of Google Fonts. The type scale gives every size a name, from xs through display-xl, each with its own size and 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 gives every gap a name: xs, sm, md, lg, xl, 2xl, 3xl. Each one is a pixel value that controls padding, margins, gaps, and sizes across every component. Each value appears as a visual bar whose width matches the number. Edit the number directly.

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. Remove shadows with the × button. Your shadow tokens give every card and component its 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 keeping 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. Doing it regularly captures your token set at different points, so you can use tokens in your projects as you build them.