Product updates

Changelog

See what is new in techies.tools and how each change helps you.

Today

Build with reusable patterns

Your active Framework now styles techies.tools and turns those choices into reusable interface patterns.

Framework-powered website

Colors, typography, spacing, and radius from your active Framework now flow through the website, so the product demonstrates the system directly.

Pattern library

Browse Button and Listing card patterns rendered with the active Framework.

Pattern settings

Open any pattern to adjust focused appearance choices while keeping its Preview and portable source together.

Direct HTML and CSS

Inspect and copy each pattern's semantic HTML and Framework-backed CSS from its own Settings bar.

Clearer navigation badges

Patterns shows its live count, Framework and Glass Card show their version, and Changelog marks new updates.

Reliable recovery

Reset remains reachable in every Settings bar, including when a custom Framework changes the surrounding interface.

Create polished glass cards

A new visual tool makes it easier to shape, preview, and export responsive glass effects.

Glass Card generator

Shape blur, surface, reflection, edge, glow, radius, and lighting from one focused Settings bar.

Direct light positioning

Move the light directly in the Preview or adjust its horizontal and vertical position precisely.

Clearer precision controls

Every range now shares one clean track, fill, and thumb style. Edge width also reveals its exact half-pixel steps.

Settings that return

Your latest Glass Card choices remain available when you revisit the tool, with Reset always available.

Portable output

Copy or save the stylesheet, component markup, and standalone HTML, or download all three together.

The Framework works across more of your website

We added many more elements to shape, improved portable files, and made editing more reliable on every screen.

More elements to shape

Forms, lists, media, data, text, and disclosure elements now have clearer treatments and editable styles.

Reliable Semantic colors

Rename a palette color without losing the shade chosen for text, actions, surfaces, borders, or focus.

Better on smaller screens

The settings and Preview remain reachable on phones and small browser windows without hidden or clipped content.

Portable Framework files

Export design tokens, element styles, and AI-ready context together as three clear files.

More font choices

Browse a much wider Google Fonts catalog and preview Body, Heading, and Code families before choosing them.

Safer releases

Every Preview and live release now runs project checks, tests, and a production build before deployment.

The Framework is easier to use

We made the settings clearer, easier to read, and faster to change.

One Elements page

There is now one clear page for finding and viewing HTML elements. We removed the test versions.

Edit an element

Pick an element, such as a heading or paragraph. You can then change its color, text size, and space.

Better choice menus

The new choice menus show names, values, and helpful icons. You can also use them with a keyboard.

Clear open sections

An open settings section now has a light blue background and border. This makes it easy to see where you are.

Text is easier to read

Labels and values are larger and use the same style. There is also more space between settings.

Less clutter

We removed extra labels, lines, and repeated details that did not help.

Smoother navigation

Long settings lists scroll better. The small Main menu also takes up less room.

A new Changelog

This page now shows what is new. Pages that are not ready yet have a Soon badge.

Safer app updates

We improved the tools that build and publish the app.

New app engine

The app now runs on Astro 7, a newer version of the tool used to build it.

Update history

We can now see when each Cloudflare update was published.

Safer previews

Work can be tested before it is sent to the main website.

Clear rules for the Framework

We wrote down what the Framework does and how other tools can use it.

Shared words

We chose clear names for the main parts of the product so everyone can talk about them in the same way.

Clear limits

We wrote down what the app saves, shows, and sends to other tools.

Ready to publish

We set up separate places for testing and for the live app.

More HTML elements

We added more elements and made them easier to find.

A bigger list

The app now knows about 92 HTML elements, such as headings, buttons, forms, and tables.

Easy preview links

You can move between the design system, website, and element views from the preview bar.

More useful examples

The previews use more real-looking pages, so it is easier to judge your choices.

The first design settings

We built the main tools for choosing how a website should look.

Sizes that can grow

Text, space, and rounded corners can change smoothly for small and large screens.

Color jobs

You can choose colors for jobs such as text, buttons, borders, and focus rings.

Use your choices elsewhere

You can copy or export the design values for another website or tool.

The first working app

We built the first version of techies.tools.

Main menu and settings

The first layout had a Main menu next to the Framework settings.

A shared look

We added the basic colors, spacing, and layout used by the app.

See changes live

The first preview showed design changes as soon as you made them.