DesignTerra
A design token workspace for software designers and publishers. Define the tokens that hold your design language together. See them applied to real components. Export them when you're ready.
Edit tokens. See everything update.
The workspace is live below. Change a color, a font, a spacing value — every component in the preview reflects it instantly. This is the actual DesignTerra tool, embedded here so you can try it before downloading.
The tool runs entirely in your browser. No data leaves your machine. No account required. When you download it, it's the same file, ready to open.
Three things, always in sync
Define your tokens
Colors with roles and contrast checks. A type scale with named sizes. A spacing scale. Motion durations and easing curves. Shadow stacks. Each one editable on its own, visible in the preview.
See them applied
The preview shows real components — buttons, cards, navigation, forms, typography, code blocks, badges — all rendered with your current token set. Change a value on the left and watch the right side update.
Export when ready
Four formats: CSS custom properties, JSON, Tailwind config, and CSS-in-JS theme objects. Each export reflects your exact current tokens. Copy to clipboard or save the file.
What you see in the preview
Every component reflects your current tokens. Here's what's included in the workspace.
Buttons
Primary, secondary, ghost — with small, default, and large sizes. All respect your color, spacing, and radius tokens.
Cards
Image header, title, description, and link — all reflecting your tokens. Border, shadow, and radius come from your system.
Form elements
Inputs, selects, and checkboxes — styled with your border, spacing, and color tokens. Focus states use your accent.
Typography
Every heading level and body size from your type scale, rendered in context. See exactly what your type choices look like side by side.
:root {
--accent: #a0522d;
}Code blocks
Syntax-highlighted code blocks using your mono font and text colors. The editor shows your tokens applied to real code.
Badges
Pill badges in brand, neutral, success, and error variants. All use your color tokens for background and text.
Four formats, one source of truth
CSS Custom Properties
UniversalStandard :root variables. Works in any stylesheet, any browser, any framework. The escape hatch when you need tokens everywhere.
:root { --color-accent: #a0522d; --spacing-lg: 24px; }JSON
StructuredA token object for JavaScript consumers, design system tooling, or API use. Easy to consume, easy to transform.
{ "colors": { "accent": "#a0522d" } }Tailwind Config
FrameworkA partial tailwind.config.js theme extension. Colors, fonts, spacing, and shadows — ready to merge.
module.exports = { theme: { extend: { colors: { 'accent': '#a0522d' } } } };CSS-in-JS Theme
ComponentA theme object for Styled Components, Emotion, or vanilla JS. Import it directly and access tokens via theme.colors.accent.
const theme = { colors: { accent: '#a0522d' } }; export default theme;What DesignTerra gives you
Color editor with contrast
Add, edit, and organize colors by role. See contrast ratios against white and dark surfaces as you edit.
Type scale builder
Named sizes from xs to display-xl, with weights. See every level rendered in the preview.
Spacing scale
Named values with visual previews. Consistent spacing across every component.
Motion tokens
Durations and easing curves, named and reusable. Every component respects them.
Shadow stacks
Named box-shadow values with live preview on cards and components.
Versioned sets
Save named snapshots. Switch between them. Track changes over time.
Four export formats
CSS variables, JSON, Tailwind config, CSS-in-JS theme. All reflect your current tokens.
Self-contained
One HTML file. Runs offline. No framework lock-in. No backend. No account.
Get DesignTerra
The tool is a single HTML file. Open it in any browser. Edit your tokens. Export when you're ready. No installation, no setup, no dependencies.