Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/color-melt/llms.txt

Use this file to discover all available pages before exploring further.

All of Color Melt’s visual styling — colors, fonts, spacing, decorative details — is defined in assets/main.css. This single file controls how the entire theme looks. When you want to change the palette or typography, start here and make targeted edits rather than rewriting large sections at once. Targeted changes are easier to test, easier to reverse, and far less likely to break an unrelated part of the layout.

​
Editing Colors

Color Melt uses an 11-color system built around a tie-dye inspired palette. Each named color maps to a specific set of utility classes used throughout the theme — backgrounds, text, borders, gradients, and hover states all reference these class names. Changing a color value in one place updates every element that uses that class. To change a color, find its class definition in assets/main.css and update the hex value:
assets/main.css
/* Change the primary dye-red accent */
.bg-dye-red  { background-color: #FF595E; }
.text-dye-red { color: #FF595E; }
Replace #FF595E with your preferred hex code. Both the background and text variants for the same color should use the same value so they stay consistent. The same pattern applies to every named color in the palette — dye-orange, dye-yellow, dye-green, dye-blue, dye-purple, dye-pink, turquoise, teal, cream, and ink all follow this structure.
The pre-compiled components in assets/ are the compiled output of the React source. Edit main.css for style changes; don’t edit the compiled JS files directly.

​
Changing Fonts

Font definitions live in assets/main.css. If the theme uses @font-face declarations, you will find them near the top of the file. If it imports from Google Fonts, the @import rule will be near the top as well. To switch to a different Google Font, replace the existing @import URL with the one for your chosen typeface, then update the font-family value in the relevant selectors:
assets/main.css
/* Replace the import at the top of main.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap');

/* Update the heading class to use the new font */
.font-display {
  font-family: 'DM Sans', sans-serif;
}
The .font-display class is used for headings and large typographic elements throughout the theme. Updating it affects all heading-level text at once without requiring changes to individual page files. For body text, update the font-family on the body selector in main.css the same way.

​
Keeping the Theme Cohesive

Color Melt’s 11-color palette was designed to work together. The dye colors were chosen with contrast, visual separation, and palette harmony in mind — each one occupies a different part of the spectrum so the navigation pills, backgrounds, and accents read as a unified set rather than a random collection. When customizing, a few principles from the original design process are worth keeping in mind:
  • Make targeted changes. Updating one color at a time lets you see the effect before moving on.
  • Preserve contrast. Light text on light backgrounds and dark text on dark backgrounds are both common mistakes when swapping palette values.
  • Keep animations tied to the theme’s identity. Color Melt’s motion effects reference the liquid-color aesthetic — replacing the palette with something very different may make the animations feel disconnected.
  • Test the full page after each change. A color that looks fine in isolation can clash with the navigation or the background when seen together.

​
Color Contrast

Contrast determines whether your text is actually readable against its background. After making any color change, check that the new combination still meets a comfortable reading threshold. The Web Content Accessibility Guidelines (WCAG) define a minimum contrast ratio of 4.5:1 for normal text at AA compliance. Browser developer tools include a built-in contrast checker. In Chrome or Firefox, open DevTools, select any text element, and look at the color section in the Styles panel — it will display the contrast ratio and flag it if it falls below the WCAG threshold.
After changing any color, verify text is still readable. A minimum 4.5:1 ratio is required for WCAG AA compliance.
The most common contrast problems after a palette swap are:
  • Light accent colors used for body text on a cream background
  • Dark dye colors used as backgrounds with dark ink text
  • Low-contrast links that no longer stand out from surrounding paragraph text
Check all three of these after any significant palette change.

​
Animation Styles

Color Melt’s animations are built with Framer Motion and compiled into assets/main.js. The motion effects — cursor drops, lava blobs, tie-dye text gradients, page transitions — are part of the compiled component output and cannot be changed by editing the compiled JavaScript directly. For minor visual adjustments to animated elements, target their CSS classes in assets/main.css. Transition timing, opacity, and color values on animated elements can often be overridden at the CSS level without touching the compiled JS:
assets/main.css
/* Slow down a CSS transition on an animated element */
.tie-dye-text {
  animation-duration: 4s;
}
For structural changes to how animations behave — timing curves, motion paths, trigger conditions — the components themselves would need to be rebuilt from the React source. If you want to disable a specific animation entirely, the safest approach is to target its wrapper class in main.css and set animation: none or transition: none.

Build docs developers (and LLMs) love

Get started for freeTalk to us