What is HueCraft?

HueCraft is an open-source, offline-first developer and designer toolbox designed to run entirely inside your browser. By utilizing modern web standards such as HTML5 local storage caching, client-side canvas renderers, and standard CSS Variables, it provides Figma-like tools and dev conversion utilities without relying on external servers, signups, or data trackers.

Key Philosophy

• Local-First: All configurations, shadow layers, color palettes, and history files are cached directly in your browser's LocalStorage database.
• Instant Exporters: Extract variables in Tailwind Configs, raw CSS Variables, JSON, SCSS, or W3C Design Token layouts instantly.
• Responsive Foundations: Fluid UI layouts adapt seamlessly to viewport width, using CSS grids and layout helpers instead of media query bloat.

How to Use HueCraft

HueCraft divides utilities into two main interfaces depending on configuration complexity:

Simple Utilities

Utilities like JSON Formatter, Base64 Encoder/Decoder, CSS to Tailwind Converter, and SVG Optimizer employ a dual-pane modal system. The input is displayed on the left pane and output updates automatically on the right pane, prioritizing quick copy-pastes and efficiency.

Advanced Workspaces

Design utilities like the Color Palette Generator, Gradient Studio, Shadow Workspace, Glassmorphism, and Neumorphism sandboxes utilize a 35% settings panel on the left and a 65% canvas preview area on the right. You can collapse the settings panel to maximize your canvas preview space.

Core Workflows

1. Click the **Tools** menu item to open the main utility index.
2. Search or filter by category (Design, Developer, Accessibility, Productivity).
3. Open a utility, edit settings, check WCAG contrast status, and copy generated exports from the panels.

Keyboard Shortcuts

Boost your efficiency and speed up your workflow using the following built-in keyboard controls:

Offline Mode Guide

HueCraft is designed from the ground up to be a local sandbox that does not require an active internet connection to run after its initial load.

Browser Caching

The application runs standard client-side scripts that perform all actions—including gradient canvas rendering, accessibility checks, and code conversions—right in your browser. All history, saved palettes, favorites, and voting telemetry are stored locally in the browser's LocalStorage namespace.

Security and Data Privacy

Since no network calls are dispatched to external endpoints, your code snippets, JSON payloads, color presets, and design tokens remain 100% private. This local setup protects proprietary data, ensuring it never exits your local environment.

Export Features Guide

HueCraft supports exporting variables to fit your design tool or front-end project build steps:

Supported Formats

• Tailwind CSS config: Raw JS key-value theme block to append to your colors object.
• CSS Custom Properties: Variables styled as --primary-500: #value ready to paste into your globals.css files.
• W3C Design Tokens: Industry-standard design tokens JSON format for Style Dictionary loaders.
• SCSS variables: Clean dollar variable maps.
• JSON Map: Flat key-value format.

How to Export

Simply click the "Export Center" tab in the advanced sidebar navigation, choose your preferred format tab in the modal, and click "Copy Code".

Color Theory

Color theory is both the science and art of using color. It explains how humans perceive color and the visual effects of how colors mix, match, or contrast with each other.

Color Systems

There are two primary models of mixing colors: additive and subtractive. Web design utilizes the additive system (RGB), where red, green, and blue light are combined to form colors on screen. Saturation and lightness determine the mood of these light systems.

HSL Channel Advantages

The HSL (Hue, Saturation, Lightness) channel representation makes color alterations intuitive. For example, to generate a tint scale of a base color, you simply keep the Hue and Saturation constant while incrementally scaling the Lightness channel from 0% to 100%.

Color Harmony

Color harmonies are rules for combining colors on a wheel to produce visually pleasing configurations.

Types of Harmonies

• Monochromatic: Varying the saturation and lightness of a single hue. Cohesive and clean.
• Analogous: Choosing three adjacent colors on the wheel. Natural and calming.
• Complementary: Selecting two colors opposite each other on the wheel. Highly vibrant and great for accent call-to-actions.
• Triadic: Three colors equally spaced around the wheel. Vibrant and high-energy.

HueCraft's Color Generator calculates these relationships automatically, generating scales that adapt to your selected harmony rule.

Typography Basics

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Type Scales

A type scale is a series of font sizes that scale in a hierarchical ratio (e.g. Major Third 1.250, Perfect Fourth 1.333). This ratio ensures that your headings, subheadings, and body texts maintain proportions across viewports.

Line Heights and Letter Spacing

As font size increases, letter spacing (tracking) should decrease slightly to prevent headings from looking disconnected, while line height should scale down to keep headings compact. Body text, conversely, requires comfortable line height (typically 1.5 to 1.6) and standard tracking to ensure optimal readability.

Accessibility Basics

Web accessibility ensures that websites and applications are usable by all individuals, including those with visual impairments like low vision or color blindness.

WCAG Contrast Standards

The Web Content Accessibility Guidelines (WCAG 2.1) state that text must meet minimum contrast ratios against its background:

• AA Level: Minimum contrast ratio of 4.5:1 for body text, and 3.0:1 for large headings (18px bold or larger).
• AAA Level: Minimum contrast ratio of 7.0:1 for body text, and 4.5:1 for large headings.
• Non-Text Elements: UI borders, focus rings, and graphical symbols require a minimum ratio of 3.0:1.

Design Systems

A design system is a comprehensive single source of truth containing design standards, reusable components, and documentation assets for unified product development.

Role of Design Tokens

Design tokens are platform-agnostic variables that store visual values like color hexes, typography scales, layout spacing, border radii, and animation timings. They replace hardcoded parameters, allowing you to update entire platforms simply by changing token inputs.

Hierarchy of Tokens

1. Global Tokens: Context-free values (e.g. --color-blue-500: #5b5ef4).
2. Alias (Semantic) Tokens: Applied to a specific purpose (e.g. --color-accent-primary: var(--color-blue-500)).
3. Component Tokens: Bound to a specific element (e.g. --btn-primary-bg: var(--color-accent-primary)).

CSS Variables

CSS Custom Properties allow developers to define runtime variables directly inside stylesheets, enabling easy theme toggles and dynamic style modifications.

Basic Syntax

:root {
  --color-primary: #5b5ef4;
  --radius-lg: 12px;
}
.card {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
}

Dynamic Modification in JavaScript

Unlike pre-processor variables (like SCSS), CSS variables can be read and written in JavaScript at runtime, enabling theme changes without compiling:

document.documentElement.style.setProperty('--color-primary', '#a855f7');

Tailwind CSS Basics

Tailwind CSS is a utility-first CSS framework that provides single-purpose class helpers to build interfaces directly inside HTML markup.

Extending Themes

To integrate custom variables generated in HueCraft into Tailwind, you can configure your theme in the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        accent: {
          500: 'var(--accent)',
          dim: 'var(--accent-dim)',
        }
      }
    }
  }
}

Utility Advantages

Using classes like bg-accent-500 text-white rounded-lg p-4 ensures that styles are bundled together, reducing CSS bloat and keeping components clean.

Flexbox Cheatsheet

Flexible Box Layout (Flexbox) provides a one-dimensional layout model. It makes it easy to align items, distribute space, and manage layouts dynamically inside a container.

Container Properties

Item Properties

.flex-item {
  flex-grow: 1; /* Spans to fill space */
  flex-shrink: 0; /* Prevents item shrinking */
  flex-basis: auto; /* Initial size before distribution */
  align-self: center; /* Individual cross-axis override */
}

CSS Grid Cheatsheet

CSS Grid Layout is a two-dimensional grid-based layout system. It handles both columns and rows seamlessly, allowing complex page sections to be aligned without hacks.

Core Container Properties

.grid-container {
  display: grid;
  /* Define columns with fractional values and auto-fit */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; /* Space between rows/cols */
}

Item Positioning

Responsive Design

Responsive design is an approach to web development where pages automatically adjust to different screen sizes, resolutions, and orientations.

Modern Layout Techniques

Relying heavily on media queries can bloat your stylesheets. Instead, use modern CSS layout patterns like Flexbox and CSS Grid that automatically wrap and adjust columns based on available space:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

Responsive Viewport Settings

Ensure that the viewport meta tag is declared in your HTML header to set the initial scale correctly on mobile viewports:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Modern UI Patterns

Modern frontend design leverages distinct stylistic patterns to create premium, interactive layouts:

Bento Grids

A layout style where widgets of varying block sizes are aligned in a cohesive grid, popularized by Windows phone tiles, Apple product updates, and modern SaaS dashboards. It provides clean scannability and modularity.

Glassmorphism

Frosted glass overlays featuring high backdrop blur, semi-transparent borders, and background meshes. It adds depth by blending layers together.

Layered Shadows

Using multiple soft shadows with progressive offsets and low opacities to simulate realistic physical light reflections, avoiding harsh black borders.

Color Palette Generator Guide

The Color Palette Generator compiles professional color scales in seconds. Here is how to configure it:

Workspace Controls

• Base Hex Input: Input a starting color value or click the color thumbnail selector.
• Harmony Selector: Select Monochrome, Triadic, Adaptive, Analogous, or High Contrast.
• Mood Selection: Apply mood rules (Standard, Calm, Vibrant, Pastel) to adjust base saturations.
• Color Swatches: Lock specific shades using the lock indicator to save them during randomized spacebar generations.

Telemetry Opens

Each time you open the palette tool, your total opens count increments in your local stats card, tracking your most visited workspace.

Accessibility Checker Guide

Evaluate your foreground and background color combinations against accessibility guidelines using the checker sandbox:

Evaluating Contrast

Input a text color and a background color hex. The checker instantly calculates the contrast ratio and returns WCAG 2.1 compliance indicators (Pass/Fail) across normal body text, large headings, and graphical borders.

Smart Correction Suggestions

If the contrast fails to meet accessibility guidelines, the suggestions pane automatically compiles 3 lighter variations of the text color and 3 darker background options that pass contrast ratios. Clicking a suggestion updates the checker values.

Gradient Studio Guide

Create linear, radial, and conic gradients using multiple color stops and positions:

Stop Settings

Add new stop points by clicking the add color control, adjust color values, or drag stop position sliders from 0% to 100% to blend the colors together.

Exporting PNG Assets

Click the "Export PNG" button to render the current gradient stopped scale directly onto a hidden <canvas> element at a high `1200x800` resolution, initiating a local PNG file download for slide designs or UI backdrops.

Shadow Workspace Guide

Build box shadows utilizing multiple stacked shadow layers:

Layer Stacking

Harsh, single-layer CSS shadows look amateur. By adding multiple layers—each with smaller opacity levels, wider blur offsets, and slight spread adjustments—you can build realistic, smooth, diffused shadows.

Preset Selectors

Select from 5 presets (Soft Floating, Hard Crisp, Inset Soft, Multi-Layer Smooth, Neumorphic Glow) to inspect pre-configured configurations, and copy the resulting CSS or Tailwind shadow class rules.

Glassmorphism Generator Guide

Create frosted glass containers utilizing CSS backdrop filters:

Glass Realism

Adjust blur, opacity, and saturation variables. The live preview area contains circles and mesh gradients floating in the background, allowing you to observe how light breaks through the frosted surface.

SVGs Noise Textures

We overlay an SVG fractal noise pattern on the glass container. This texture mimics physical glass reflections, providing depth and premium SaaS polish to the UI components.

Neumorphism Generator Guide

Design soft, bevel-like UI components using light and dark box shadow boundaries:

Bevel Profiles

Select from Flat, Pressed, Convex, or Concave. The preview panel displays the neumorphic effect across a container card, click-to-press buttons, and switch toggles to ensure shadows work consistently.

Tailwind Arbitrary Output

Since neumorphism relies on double shadows, HueCraft generates custom Tailwind arbitrary class strings (e.g. shadow-[offset_X_offset_Y_blur_spread_color,_negative_offset_X_negative_offset_Y_blur_spread_color]) for instant pasting into your templates.