Tools

Small utilities, each on its own

Four focused tools that extend the DesignTerra workspace. Each one solves a specific problem. Each one is downloadable as a standalone file — no install, no dependencies, runs in your browser.

The tools

Each tool is a single HTML file. Open it, use it, close it. No framework, no runtime, no account.

Color

ChromaBloom

Build a color palette from a seed color, or pull one from an image you upload. Generate shades, tints, and complements. Export to CSS variables or JSON. Contrast is checked against white and dark backgrounds.

Seed from colorPick any color and generate a full palette around it

Image extractionUpload an image and pull the dominant colors from it

ExportCSS variables, JSON, or copy the hex values

Try ChromaBloom Download

Typography

GlyphSmith

Explore type pairings — header, body, and mono combinations from a curated set. See each pair rendered in real content. Adjust sizes, weights, and spacing. Export font stack recommendations as CSS or JSON.

Pair explorerBrowse header + body + mono combinations from a curated set

Live previewSee every pairing rendered in headings, body text, and code

ExportFont stack recommendations in CSS and JSON

Try GlyphSmith Download

Conversion

TokenMeld

Convert design tokens between formats. Paste tokens from Figma, Style Dictionary, or another tool and get them out as CSS variables, JSON, Tailwind config, or a CSS-in-JS theme object. Handles colors, spacing, typography, and shadows.

Multi-format inputAccepts JSON, CSS custom properties, or Tailwind-style values

Multi-format outputCSS variables, JSON, Tailwind config, CSS-in-JS theme

Batch convertConvert a whole token set at once, not one value at a time

Try TokenMeld Download

Shadows

ShadeFold

Build and preview layered CSS shadow stacks visually. Add multiple shadow layers, adjust spread, blur, and offset, see the combined effect on a card in real time. Copy the full declaration.

Visual builderAdd layers, adjust values, see the shadow on a card in real time

PresetsStart from common shadow patterns — sm, md, lg, xl, or layered depth

Copy the stackExport the full box-shadow declaration, ready to paste into your CSS

Try ShadeFold Download

Download all

Get every tool at once

Each tool is a standalone HTML file. Download them individually from the links above, or get the full set here. No installation — just open and use.

ChromaBloom~15 KB GlyphSmith~15 KB TokenMeld~15 KB ShadeFold~15 KB

Start with the workspace

DesignTerra first, tools second

The tools extend the DesignTerra workspace. Define your tokens in DesignTerra, then use these utilities to refine, convert, and export them. Or use them on their own — each one stands alone.

Try DesignTerra Browse the tools