Green Macaroni: A Suite of Free Creative Web Apps

A comprehensive collection of free browser-based design tools built to help artists, designers, makers, and small businesses create faster, experiment more freely, and solve practical creative problems.

How and Why

For this project, Halifax Design Lab handled the complete creative and technical process: concept development, interface design, branding, front-end development, testing, icon design, user experience refinement, and deployment.

GridSmith

A browser-based poster design tool for fast, flexible visual creation

Grid Builder was developed to simplify and streamline the often tedious process of constructing precise image and object grids for both print and web design.

A browser-based poster design tool for fast, flexible visual creation

GridSmith was developed as a fully browser-based design tool that allows users to create complex, professional-quality poster layouts without the need for traditional design software.

The goal was to make structured design more accessible — combining the precision of grid-based layout systems with the flexibility of real-time creative editing.

Users can build and refine designs directly in the browser, with the ability to:

Create and modify layouts dynamically
Save iterations and revisit previous versions
Undo and adjust changes freely without interrupting workflow

GridSmith includes a wide range of design features typically found in professional software, including:

• • Live text editing with access to a full Google Fonts library, along with typographic controls such as tracking, leading, and line spacing
  • Adjustable grid systems with alignment controls for precise layout structure
  • Object positioning tools for accurate placement and arrangement of elements
  • Rounded corner controls for boxes, images, and design elements such as starbursts
  • Drop shadows, glow effects, transparency settings, and blend modes for layered visual styling
  • A fully customizable starburst engine for promotional and attention-driven designs
  • Tear-off tabs for real-world poster applications
  • A built-in QR code generator for modern, interactive use

A key challenge in developing GridSmith was balancing feature depth with usability. Bringing together a wide range of professional controls in a browser environment required careful interface design to ensure the tool remained intuitive and responsive, even as complexity increased.

Another major consideration was maintaining performance while supporting real-time updates and layered visual effects. This required refining rendering logic and interaction systems so users could experiment freely without lag or disruption.

The result is a flexible, all-in-one design tool that empowers users to create polished, functional poster designs quickly — whether for digital use, print distribution, or real-world applications.

You can see the full site here: GreenMacaroni.com/GridSmith

PatternSmith

A generative tool for creating seamless, high-quality pattern images

Designed for web, print, and production workflows — including textiles, surface design, and screen printing.

PatternSmith was developed as a browser-based generative design tool, built to give users direct control over the creation of seamless patterns and complex visual compositions.

Rather than relying on fixed templates, PatternSmith functions as a flexible system — allowing users to explore structured, mathematical layouts alongside more organic, expressive forms. Each pattern type is built as its own engine, designed to produce distinct visual outcomes while maintaining a consistent and intuitive interface.

A core focus of the tool is true seamlessness. Every pattern is engineered to tile perfectly, ensuring designs can be used at any scale without visible breaks — from digital backgrounds to large-format print and textile applications.

Key features include:

• Multiple pattern engines ranging from geometric to organic systems
• Real-time controls for rapid experimentation and iteration
• High-resolution image output suitable for professional use
• Advanced visual effects including glow, layering, and texture systems
• Structured presets that guide exploration while maintaining flexibility

One of the primary challenges in developing PatternSmith was balancing randomness with control. Generative systems can easily become chaotic or repetitive, so careful attention was given to how variation is introduced — ensuring results remain visually interesting while still feeling intentional.

Another major challenge was maintaining perfect seamless tiling while introducing complex effects. This required precise handling of edge behavior so patterns repeat cleanly without visual artifacts.

PatternSmith evolved into more than a pattern generator — it became a creative engine. It allows users to explore, refine, and discover unexpected results within a structured system, producing patterns that are both visually compelling and practically usable.

You can see the full site here: GreenMacaroni.com/PatternSmith

Palette Grabber

An advanced color analysis and palette-building tool for designers and creatives

Built to extract, refine, and manage usable color systems from real-world imagery

Palette Grabber was developed to solve a common but often overlooked problem in design: turning visual inspiration into structured, usable color systems.

While many tools can extract colors from an image, they often produce results that feel random or impractical. Palette Grabber was designed to go further — not just identifying colors, but helping users build meaningful, editable, and reusable color libraries.

At the core of the tool is an intelligent color analyzer engine, capable of both pixel-precise sampling and dynamic area-based analysis. This allows users to capture individual colors with accuracy, or derive balanced palettes that reflect the broader visual character of an image.

Users can work from uploaded images or live camera input, making it possible to capture color inspiration directly from the real world and immediately translate it into a structured palette.

Key capabilities include:

• Building and managing large, editable color libraries
• Extracting palettes from images or live camera input
• Pixel-level eyedropper sampling and dynamic area-based color analysis
• Smart preset filters that can be adjusted to expand or refine palette range
• Loading existing libraries and analyzing images to identify closest color matches
• Saving, loading, and editing both individual swatches and full libraries
• Import/export support for sharing palettes across workflows and teams
• Export options including JPG, PDF, and simplified color grids for practical use, such as painting or decorating

“No other browser-based tool offers this level of control over palette creation and library management.”

A major challenge in developing Palette Grabber was ensuring that extracted palettes feel intentional rather than arbitrary. This required careful refinement of how colors are grouped, filtered, and presented, so that results are immediately useful in real design work.

Another key consideration was performance and usability. The tool needed to handle large images, zooming, and real-time interaction without slowing down the user’s workflow. This led to a highly responsive interface with smooth zooming, scrolling, and live updates.

Palette Grabber also introduces a collaborative dimension, allowing users to build, refine, and share color libraries with others — turning individual inspiration into shared creative resources.

The result is more than a palette extractor — it is a full color system tool, designed to bridge the gap between inspiration and execution.

You can see the full site here: GreenMacaroni.com/Palette-Grabber

Palette JSON Sorter

A companion tool for organizing and refining Palette Grabber color libraries

Palette JSON Sorter was developed as a companion tool to Palette Grabber, designed to give users greater control over how their color libraries are structured and presented.

As palette libraries grow in size and complexity, organizing swatches in a meaningful way becomes essential. This tool allows users to load Palette Grabber JSON files and quickly reorder, refine, and prepare them for use across different workflows.

Key capabilities include:

• Reordering swatches alphabetically, numerically, or by hue and lightness
• Spectrum-based sorting for clean, visually progressive color arrangements
• Manual fine-tuning for precise control over swatch order
• Exporting palettes as structured JSON files for reuse
• Exporting palettes as clean, print-friendly HTML tables

A key consideration in developing this tool was preserving the integrity of the original palette data while allowing flexible reorganization. This ensures that users can experiment with different arrangements without losing their source structure.

Palette JSON Sorter extends the Palette Grabber ecosystem, transforming raw color libraries into clean, structured, and presentation-ready systems.

You can see the full site here: GreenMacaroni.com/Palette-JSON-Sorter

Font Harmony

A typography and style system tool built around the Google Fonts ecosystem

Designed for creating complete, reusable typographic and color systems for web design

Font Harmony was developed to help designers and developers move beyond simple font selection and into building cohesive typographic systems.

While many tools focus only on pairing fonts, Font Harmony is designed to create full style frameworks — combining typography, color, and hierarchy into a unified, usable output.

The tool is built around an expanded Google Fonts library, giving users access to a broad and flexible range of typefaces while maintaining a clean and structured interface.

Users can design and refine complete typographic systems with:

• Live preview of headings, body text, and hierarchical structure
• Adjustable type scales, weights, and spacing for real-world readability
• Predefined font pairing sets to guide strong combinations
• Integrated color themes, including direct import from Palette Grabber libraries
• Full CSS export, allowing designs to be implemented immediately in production

A key challenge in developing Font Harmony was balancing flexibility with clarity. Typography systems can quickly become complex, so the interface was carefully designed to keep controls accessible while still allowing precise adjustments.

Another important consideration was bridging design and development. By generating clean, usable CSS, the tool removes the gap between visual exploration and implementation — allowing users to move directly from concept to working code.

Font Harmony transforms typography from a visual choice into a structured system, helping users create designs that are not only visually appealing, but consistent, scalable, and ready for real-world use.

You can see the full site here: GreenMacaroni.com/Font-Harmony-Pro

Font Degrader

A typography tool for controlled distortion, expressive effects, and creative exploration

Font Degrader is a browser-based typography tool designed to introduce controlled imperfection into digital type.

While most design software prioritizes precision and clarity, Font Degrader explores the opposite space — allowing users to degrade, distort, and manipulate text to create character, texture, and visual depth.

The tool was inspired by analog imperfections such as ink spread, print wear, and mechanical inconsistencies, while maintaining enough control to preserve readability and intentional design.

Key features include:

• Real-time distortion and degradation controls
• Fine-tuned balance between readability and expression
• Live color editing (fill, outline, background) with integrated color mixer
• Palette-based workflow with swatch import support
• High-resolution export (SVG and PNG) with unique file naming
• Adjustable stroke positioning and styling (inside, outside, angled, and more)
• Support for custom TTF font uploads
• Precision controls for spacing, scaling, and layout

A central challenge in developing Font Degrader was finding the balance between randomness and control.

Too much distortion quickly destroys legibility. Too little makes the effect invisible.

The system was iteratively refined to produce results that feel organic and expressive without becoming chaotic — allowing users to explore a wide spectrum from subtle texture to heavily stylized typography.

Font Degrader reframes imperfection as a creative tool.

By combining real-time feedback, fine control, and flexible color workflows, it enables designers to create typography that feels more tactile, human, and visually distinctive — while remaining usable in real-world design contexts.

You can see the full site here: GreenMacaroni.com/Font-Degrader

Grid Builder

A layout engine for building consistent, reusable grid systems

Grid Builder was developed to simplify and streamline the often tedious process of constructing precise image and object grids for both print and web design.

Rather than manually placing and aligning elements, users can quickly generate structured grid layouts and adjust spacing, sizing, and colours dynamically in real time — seeing changes instantly as they refine the design.

A key feature of Grid Builder is its ability to export layouts as a Photoshop script. This allows designers to reuse the exact same grid configuration across multiple projects or pages, ensuring complete consistency in spacing and alignment.

This is particularly valuable in applications such as book publishing, catalog design, or any workflow that requires a repeatable visual system.

Special attention was given to:

• Real-time visual feedback while adjusting grid parameters
• Precise spacing logic to ensure consistent results
• A streamlined interface that reduces repetitive manual work

One of the main challenges was translating flexible, visual grid adjustments into a reliable, repeatable output format. This was solved by developing a system that preserves exact spacing and proportions when exported, allowing the grid to function as a reusable layout engine rather than a one-off design tool.

The result is a practical utility that bridges the gap between concept and production, giving designers a faster and more consistent way to build structured layouts.

You can see the full site here: GreenMacaroni.com/Grid-Builder

CSS Cleaner

A practical tool for organizing, annotating, and cleaning CSS files

CSS Cleaner was developed to help designers and developers turn messy or difficult-to-read stylesheets into cleaner, more organized code.

It is especially useful when working with long CSS files, inherited code, theme overrides, or experimental styling that needs to be prepared for reuse.

Key features include:

• Live CSS input and output
• Automatic organization and cleanup
• Optional loud headers for clearer section separation
• Comment controls
• Minify mode
• Line numbers, wrap lines, and color-code view
• Upload, download, copy, and swap-to-input options

A key challenge was creating a tool that improves readability without forcing users into one rigid formatting style. CSS Cleaner was designed to be flexible, helping users clean and structure code while still preserving control over the final output.

The result is a fast, browser-based utility that helps designers and developers transform cluttered CSS into cleaner, easier-to-maintain stylesheets.

You can see the full site here: GreenMacaroni.com/CSS-Cleaner

JS Cleaner

A browser-based tool for formatting, reviewing, and cleaning JavaScript

JS Cleaner was created as a companion utility for working with JavaScript files more safely and efficiently.

It helps users paste, upload, format, minify, review, and copy JavaScript code directly in the browser, with a clear warning to always work from a copy rather than an original file.

Key features include:

• Live JavaScript input and output
• Format and minify options
• Optional comment preservation
• Import sorting
• Color-code view
• Wrap lines
• Upload, download, copy, and swap-to-input options

The main challenge was keeping the tool simple while supporting practical code-cleaning workflows. JS Cleaner focuses on clarity, speed, and safer editing, making it useful for quick cleanup, review, and preparation before pasting code back into a project.

The result is a lightweight browser-based utility that helps designers and developers clean, organize, and review JavaScript more efficiently.

You can see the full site here: GreenMacaroni.com/JavaScript-Cleaner

Lost Pet Poster

A simple, mobile-friendly tool for creating clear, print-ready lost pet posters

Designed for speed, clarity, and ease of use during stressful situations

Lost Pet Poster was developed as a practical, real-world design tool focused on helping people create effective posters quickly when a pet goes missing.

In these situations, users are often under stress and need a solution that is fast, simple, and reliable. The tool was intentionally designed with a streamlined interface that removes complexity and focuses only on what matters.

Users can create a complete, print-ready poster directly from their browser — including on a smartphone — by simply:

• Entering key information
• Uploading photos
• Downloading a finished JPG ready for printing or sharing on social media

The tool emphasizes:

• Clear visual hierarchy for maximum readability
• Mobile-friendly usability for on-the-go creation
• Reliable JPG export that matches the on-screen design
• Consistent typography and layout for a professional result

A key challenge in developing Lost Pet Poster was ensuring that exported posters remain visually consistent across devices, particularly on mobile platforms. This required careful handling of fonts, layout rendering, and export logic to guarantee predictable results.

The result is a focused, compassionate design tool that solves a real problem — helping users create clear, effective posters quickly, when it matters most.

You can see the full site here: GreenMacaroni.com/Lost-Pet-Poster